Apply Frontend UI Guidelines

Frontend UI Guidelines

Purpose

Provide a consistent, maintainable baseline for building modern frontend applications with TypeScript: component patterns, data fetching, routing, styling, and UX states.

When to use

Use this skill when you are:

• Building or refactoring UI components
• Introducing or updating data fetching patterns
• Designing feature/module structure
• Implementing routing and lazy loading
• Standardizing styling and theme usage
• Handling loading, empty, and error states

Avoid using this skill when:

• you are making a single small UI tweak (for example, a minor CSS change) with no structural impact
• you only need to fix one isolated issue with a known solution and do not need broader consistency checks

Inputs

• Feature requirements and UX expectations
• Data sources (API endpoints, caching needs)
• Existing frontend stack (framework, router, query/cache library, UI kit)

Outputs

• A consistent implementation plan (component tree + data dependencies)
• Component and hook scaffolds
• A UX-state plan (loading/empty/error)
• A minimal test strategy (where applicable)

Core rules

• Components MUST have typed props and clear responsibilities.
• Side effects MUST be isolated (prefer hooks or service modules).
• Data fetching MUST have a consistent caching and invalidation strategy.
• UI MUST handle loading, empty, and error states explicitly.
• Styling MUST follow a single primary approach (theme-first where possible).

Steps

1. Identify the feature boundary and public API (what the feature exports).
2. Design the component tree and state boundaries.
3. Define data dependencies:
   • what is fetched
   • when it is fetched
   • how it is cached and invalidated
4. Implement components using:
   • typed props
   • composition over inheritance
   • small reusable hooks
5. Implement loading/error UX.
6. Add verification:
   • basic render
   • one representative interaction
   • one representative error path

Verification

• Components have typed props (no implicit any)
• Data fetching uses a consistent cache strategy
• Loading, empty, and error states are explicitly handled
• Basic render test passes
• One representative interaction works
• One error path renders correctly

Boundaries

• MUST NOT use implicit any in props or state
• MUST NOT fetch data without handling loading and error states
• MUST NOT mix styling approaches within the same feature
• SHOULD NOT bypass the caching layer for server state
• SHOULD NOT embed business logic in UI components
• SHOULD NOT skip accessibility considerations (focus, keyboard nav)

Included assets

• Templates: ./templates/ provides component and hook scaffolds.
• Examples: ./examples/ provides a feature layout blueprint.