git:20260315.f070a9d to git:20260403.f6f83ee
3 added, 0 removed. Audit A to A.
---
name: frontend
description: |
Frontend engineering specialist for React, CSS, browser APIs, component
design, accessibility, and performance. This skill should be used when the
user asks about UI implementation, component review, or frontend-specific questions.
Use when: "build a React component", "CSS layout issue", "frontend performance",
"browser API", "component design", "accessibility check", "responsive design"
portability: portable
+ # TODO #339: When Claude Code supports 'paths' in skill frontmatter for
+ # file-context auto-activation, add:
+ # paths: ["**/*.tsx", "**/*.jsx", "**/*.css", "**/*.scss", "**/components/**"]
---
# 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](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](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