Component

Skill Dragoon0x/dragoon-skills/skills/component

Generate a UI component scaffold in the codebase's actual style. Reads dragoon.json to match framework (react/vue/svelte), styling layer (tailwind/css-modules/plain), language (typescript/javascript), and design tokens (radius, spacing, palette). Defaults to dry-run preview; pass --apply to write files. Use when the user wants to create a new component, scaffold UI primitives, or add a component to their codebase. Run as `node ~/.claude/skills/dragoon/skills/component/scripts/component.js <Name>`.From its SKILL.md

Install

npx -y skills add Dragoon0x/dragoon-skills --skill component

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

2 things to look at

4 stars4 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.
runs commandsInstructs the agent to run 2 commands, including `node ~/.claude/skills/dragoon/skills/component/scripts/component.js <Name>` and 1 more.

SKILL.md

2.1 KB, 379 tokens by cl100k_base, as published. Nobody here has run it

/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

Reads dragoon.json (or runs /scan if missing) to detect the stack.
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
Substitutes manifest tokens: spacing grid → padding, palette → bg/fg, radius scale → border-radius.
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.

What ships with it: 1 file

4.6 KB alongside SKILL.md, 1 of them executable

scripts/

component.jsruns4.6 KB