component

Files (2)

• SKILL.md
• component.js · scripts/

SKILL.md (first lines)

# /component

Generates a component scaffold that matches the codebase's existing style.

## When to use

- The user asks to "create a component", "scaffold a UI primitive", "add a Card / Button / etc."
- The user wants a starting point that fits the existing design system
- Setting up a new feature that needs new UI

## How it works

1. Reads `dragoon.json` (or runs /scan if missing) to detect the stack.
2. Picks a template based on framework + styling layer:
   - react + tailwind → tsx with tailwind utility classes derived from your tokens
   - react + css-modules → tsx + .module.css using your spacing grid and radius
   - react + plain css → tsx + .css with kebab-case class
   - vue → SFC with scoped styles
   - svelte → .svelte single file
3. Substitutes manifest tokens: spacing grid → padding, palette → bg/fg, radius scale → border-radius.
4. Defaults to dry-run preview. `--apply` actually writes files.

## Run it

```
dragoon component <Name> [--dir path] [--apply]

# preview
dragoon component Card

# write to default src/components/
dragoon component Card --apply

# custom directory
dragoon component UserMenu --dir src/ui --apply

# overwrite existing
dragoon component Card --apply --overwrite
```

## Safety

- Component name must be PascalCase identifier (rejects shell metacharacters, reserved words).
- Output directory is resolved inside the project root (rejects path traversal).
- Refuses to overwrite existing files unless `--overwrite` is passed.
- All writes are atomic (temp file + rename), so a failed write never leaves a half-written file.

From Dragoon0x/dragoon-skills, MIT.

More from Dragoon0x/dragoon-skills