Frontend Skill
Specialized frontend engineering guidance for React, CSS, and browser-based applications.
When to Use
- •Building React components
- •CSS and styling questions
- •Browser API usage
- •Frontend performance optimization
- •Accessibility (a11y) guidance
- •User says "frontend", "React", "CSS", "component", "UI"
Key Focus Areas
React Patterns
- •Component composition and single responsibility
- •Hook usage (useState, useEffect, custom hooks)
- •State management (context, props, lifting state)
- •Performance (memo, useMemo, useCallback)
- •Error boundaries
CSS & Styling
- •Responsive design (flexbox, grid, media queries)
- •Modern CSS (custom properties, container queries)
- •Animations (GPU-accelerated)
- •Theming and design systems
Browser APIs
- •Fetch API and async operations
- •Local/Session Storage
- •Event handling
- •Performance API
Accessibility
- •Semantic HTML elements
- •ARIA labels and roles
- •Keyboard navigation
- •Screen reader compatibility
- •WCAG color contrast
Performance
- •Code splitting and lazy loading
- •Bundle optimization
- •Image optimization
- •Virtual scrolling
- •Debouncing and throttling
Review Process
Use comprehensive checklists for:
- •Component quality (responsibility, props, composition)
- •React best practices (hooks, effects, state)
- •Styling (responsiveness, consistency)
- •Accessibility (semantic HTML, keyboard nav, ARIA)
See refs/checklists.md for detailed checklists, anti-patterns, and output templates.
Code Patterns
Common React and CSS patterns for:
- •Component structure with TypeScript
- •Custom hooks (debounce, etc.)
- •Responsive design
- •Accessibility patterns
- •Performance optimization
See refs/patterns.md for code examples and best practices.
Notes
- •Prioritize accessibility from the start
- •Mobile-first responsive design
- •Use semantic HTML before reaching for ARIA
- •Test with keyboard navigation and screen readers