frontend-component-build

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