frontend-component-buildlisted

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.
rampstackco/claude-skills-starter · ★ 2 · Web & Frontend · score 81

Install: claude install-skill rampstackco/claude-skills-starter

# 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 component before writing any markup. **Common anatomies:** - Button: container + label + (optional) icon + (optional) loading indicator - Modal: backdrop + container + header + body + footer + close affordance - Form input: label + input + (optional) help text + (optional) error message - Ca