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