| 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"
|
| portability | portable |
| phase_relevance | ["design","build"] |
| archetype_relevance | ["*"] |
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
