How do I install the Component skill?

Run npx skillmds@latest add tomevault-io/component in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Component safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Component?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Component free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Component?

tomevault-io (@tomevault-io) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Component by tomevault-io — Agent Skill

Name: Component
Author: tomevault-io

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>`. Use when this capability is needed.

tomevault-io 2cacc19 2 files · 2.9 KB Updated Sep 17, 2026

File contents

/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.

Source: Dragoon0x/dragoon-skills — distributed by TomeVault.

---name: componentdescription: 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>`. Use when this capability is needed.---# /componentGenerates 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 works1. 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 file3. 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]# previewdragoon component Card# write to default src/components/dragoon component Card --apply# custom directorydragoon component UserMenu --dir src/ui --apply# overwrite existingdragoon 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.---> Source: [Dragoon0x/dragoon-skills](https://github.com/Dragoon0x/dragoon-skills) — distributed by [TomeVault](https://tomevault.io).

Frequently asked questions