Skip to content
Development
Command

/create-component

Create a frontend component with proper structure, types, and accessibility.

From plugin
rohitg00-claude-code-toolkit
2.5k199 skills138 agents199 commands
Install
$ npx -y skills add rohitg00/awesome-claude-code-toolkit --agent claude-code

How it fires

How this command gets triggered: by you, by Claude, or both.

  • Fires itselfClaude auto-loads it when your prompt matches the work.
  • You can call itInvoke it directly when you want it.
  • Slash command/create-component

Context preview

What this command does when you run it.

Create a frontend component with proper structure, types, and accessibility.

Command definition

create-component.md

Create a frontend component with proper structure, types, and accessibility.

Steps

1. Determine the component specification: 2. Detect the project's frontend framework: 3. Create the component file(s): 4. Add accessibility attributes: 5. Add responsive styling: 6. Create a test file for the component. 7. Export the component from the module index.

Format

Component: <name>
Framework: <React|Vue|Svelte|etc>
Files:
  - <component file>

Rules

  • Follow the project's existing component patterns.
  • Every interactive element must be keyboard accessible.
  • Use semantic HTML elements over generic divs.
Ships withrohitg00-claude-code-toolkit

The most comprehensive toolkit for Claude Code -- 135 agents, 35 curated skills (+400,000 via SkillKit), 42 commands, 176+ plugins, 20 hooks, 15 rules, 7 templates, 15 MCP configs, 26 companion apps, 53 ecosystem entries, and more.

Get the whole plugin