frontend-component-build
Build production-ready frontend components with accessible markup, sensible props, defined states, and tested behavior. Use this skill whenever the user wants to build a component from scratch, refactor an existing one, design a component API, or implement a UI element with proper states and accessibility. Triggers on build a component, create a button, create a modal, create a form input, component API, props design, component states, refactor component, accessible component. Also triggers when implementing UI from a design that needs to be reusable.
Profile →npx skills add rampstackco/claude-skills --skill frontend-component-build --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# Frontend Component Build Build production-ready components. Stack-agnostic principles. Most patterns translate to React, Vue, Svelte, or vanilla web components. This skill is about implementing a component well. For broader system design see `design-system`. For day-to-day visual decisions see `design-standards`. --- ## When to use - Building a new component from scratch - Refactoring an existing component - Designing a component API (props, slots, events) - Adding accessibility to an existing component - Implementing a component from a design ## When NOT to use - Building a full design system (use `design-system`) - Page-level design decisions (use `design-standards`) - Backend or data work (use `code-review-web`) - Performance-only optimization (use `performance-optimization`) --- ## Required inputs - The component's purpose (what UI need it serves) - The design (or willingness to design it) - The framework or technical context - The states the component must support - Accessibility requirements --- ## The framework: 6 dimensions A complete component handles six dimensions. Skip any one and the component is incomplete. ### 1. Anatomy Identify the parts that make up the componen
- When to use
- When NOT to use
- Required inputs
- The framework: 6 dimensions
- 1. Anatomy
- 2. Variants
- 3. States
- 4. Props / API
- 5. Accessibility
- 6. Tests
- Workflow
- Failure patterns
- Output format
- Reference files
What does the frontend-component-build skill do?
Build production-ready frontend components with accessible markup, sensible props, defined states, and tested behavior. Use this skill whenever the user wants to build a component from scratch, refactor an existing one, design a component API, or implement a UI element with proper states and accessibility. Triggers on build a component, create a button, create a modal, create a form input, component API, props design, component states, refactor component, accessible component. Also triggers when implementing UI from a design that needs to be reusable.
How do I install it?
Run `npx skills add rampstackco/claude-skills --skill frontend-component-build --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From rampstackco/claude-skills, a repository with 515 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.