// 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.
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.
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.
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 | apply-frontend-ui-guidelines |
| description | 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. |
Canonical source: .ai/skills/frontend/common/apply-frontend-ui-guidelines/
Open .ai/skills/frontend/common/apply-frontend-ui-guidelines/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.