/create-component

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

Boost this command

rohitg00@rohitg00

GitHub

From plugin

rohitg00-claude-code-toolkit

2.6k199 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.

Read it on GitHub ↗

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

Stats

Python JavaScript React CSS Kubernetes

+7 tags

AWS Git GitHub CI/CD Anthropic MCP Flutter

2,612

Stars

955

Forks

Maintained

Maintenance

JavaScript