// Build or refactor React components with typed props, clear composition, and explicit interaction/loading/empty/error behavior. Primary intent: component contract and behavior correctness; pairs with styling or design-direction skills for visual decisions.
Apply local React patterns (derived state, memoization, callback stability, controlled inputs) to improve predictability and render efficiency inside components. Primary intent: component-internal logic quality and render behavior; complements but does not replace routing/data/styling skills.
Orchestrate end-to-end frontend feature implementation across components, hooks, routing, data fetching, styling, and user-visible states with consistent architecture and verification. Primary intent: cross-cutting implementation alignment; pairs with specialized skills when one concern needs deeper treatment.
Define and execute a distinctive visual direction for net-new UI or brand refresh work (art direction, typography, color, motion, composition), then deliver a polished reference implementation. Primary intent: creative design direction and visual differentiation; pairs well with style-frontend-ui and build-react-components for engineering hardening.
Implement and normalize UI styling within an existing design system using theme tokens, reusable style primitives, responsive rules, and accessibility checks. Primary intent: styling execution consistency; can follow frontend-design when a creative direction needs maintainable implementation.
Implement resilient loading/empty/error/permission/retry UX states for async interfaces with user-safe messaging and recoverable flows. Primary intent: failure-state UX quality; pairs with component, data-fetching, and UI-guideline skills when needed.
GitHub Actions CI skill: integrate automated tests (web/api/mobile/perf) with consistent artifacts.
| name | build-react-components |
| description | Build or refactor React components with typed props, clear composition, and explicit interaction/loading/empty/error behavior. Primary intent: component contract and behavior correctness; pairs with styling or design-direction skills for visual decisions. |
Canonical source: .ai/skills/frontend/components/build-react-components/
Open .ai/skills/frontend/components/build-react-components/SKILL.md and any supporting files referenced there (for example reference.md, examples.md, scripts/, templates/).
Note: The frontmatter above is identical to the canonical source except for
ssot_pathandcategorywhich are added for navigation. After opening the source file, skip re-reading the description to avoid redundant token usage.