f5792c40be
Pulled ALL skills from 15 source repositories: - anthropics/skills: 16 (docs, design, MCP, testing) - obra/superpowers: 14 (TDD, debugging, agents, planning) - coreyhaines31/marketingskills: 25 (marketing, CRO, SEO, growth) - better-auth/skills: 5 (auth patterns) - vercel-labs/agent-skills: 5 (React, design, Vercel) - antfu/skills: 16 (Vue, Vite, Vitest, pnpm, Turborepo) - Plus 13 individual skills from various repos Mosaic Stack is not limited to coding — the Orchestrator and subagents serve coding, business, design, marketing, writing, logistics, analysis, and more. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
58 lines
895 B
Markdown
58 lines
895 B
Markdown
---
|
|
name: draggable-elements
|
|
description: Move, resize, and rotate elements by dragging during presentation
|
|
---
|
|
|
|
# Draggable Elements
|
|
|
|
Move, resize, and rotate elements by dragging during presentation.
|
|
|
|
## Directive Usage
|
|
|
|
### With Frontmatter Position
|
|
|
|
```md
|
|
---
|
|
dragPos:
|
|
square: Left,Top,Width,Height,Rotate
|
|
---
|
|
|
|
<img v-drag="'square'" src="https://sli.dev/logo.png">
|
|
```
|
|
|
|
### Inline Position
|
|
|
|
```md
|
|
<img v-drag="[Left,Top,Width,Height,Rotate]" src="https://sli.dev/logo.png">
|
|
```
|
|
|
|
## Component Usage
|
|
|
|
```md
|
|
---
|
|
dragPos:
|
|
foo: Left,Top,Width,Height,Rotate
|
|
---
|
|
|
|
<v-drag pos="foo" text-3xl>
|
|
Draggable content
|
|
</v-drag>
|
|
```
|
|
|
|
## Draggable Arrow
|
|
|
|
```md
|
|
<v-drag-arrow />
|
|
```
|
|
|
|
## Controls
|
|
|
|
- Double-click: Start dragging
|
|
- Arrow keys: Move element
|
|
- Shift + drag: Preserve aspect ratio
|
|
- Click outside: Stop dragging
|
|
|
|
## Auto Height
|
|
|
|
Set Height to `NaN` or `_` for auto height based on content.
|