Guidelines for maintainable, accessible, and system-compliant frontend development.

Core Principles

1. Component Reuse: Use shadcn/ui components first. Extend via cva variants or composition. Avoid custom CSS.
2. Design Fidelity: Code must map 1:1 to Design Tokens. Resolve discrepancies before implementation.
3. Rendering Strategy: Default to Server Components for performance. Use Client Components only for interactivity and API integration.
4. Accessibility: Semantic HTML and screen reader compatibility are mandatory.
5. Tool First: Check for existing solutions and tools before coding.

1. Tooling & Performance

• Reference: Consult react-best-practices skill for deep dives.
• Metrics: Target First Contentful Paint (FCP) < 1s.
• Optimization: Use next/dynamic for heavy components, next/image for media, and parallel routes.
• Shadcn Workflow:
  1. Search: shadcn_search_items_in_registries
  2. Review: shadcn_get_item_examples_from_registries
  3. Install: shadcn_get_add_command_for_items