frontend-implementation

Frontend Implementation Patterns

This skill provides patterns and guidelines for implementing frontend features that are accessible, performant, maintainable, and consistent with the design system.

When to Use

• Before implementing any UI component or feature
• When working with design systems and tokens
• When ensuring accessibility compliance
• When optimizing frontend performance

Core Principles

Component Design

• Reusable over page-specific: Implement composable UI components rather than tightly coupled page-specific code
• Respect architecture boundaries: Always follow the component hierarchy and boundaries defined in the implementation plan
• Extend, don't duplicate: Extend the existing design system and component library instead of creating parallel one-off styles
• Single responsibility: Each component should have one clear purpose

Design System Usage

• Use existing tokens: Always use design tokens (colors, spacing, typography) from the project's design system
• Map design spec values to tokens: When a mockup/spec shows raw values (e.g., #3B82F6), map them to existing tokens (e.g., --color-primary-500)
• Never hardcode values: Avoid hardcoded colors, spacing, or typography values that bypass the design system
• Document new tokens: If a new token is absolutely required, document and justify it in the changelog

Token Mapping Process

1. Extract value from the approved design specification
2. Search codebase for matching design token
3. If token exists → use it
4. If no exact match → find closest existing token and document deviation
5. If truly new → request architect approval before creating

Accessibility Requirements

Semantic Markup

• Use correct HTML elements for their semantic meaning (<button>, <nav>, <main>, <article>, etc.)
• Choose interactive elements appropriately (<button> for actions, <a> for navigation)
• Use heading hierarchy correctly (<h1> → <h2> → <h3>, no skipping levels)