Frontend

---
name: wicked-garden-engineering-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"
metadata:
  role: module
  phases: "design,build"
  archetypes: "*"
---

# 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