| name | frontend-development |
| description | WHEN to auto-invoke: Creating UI components, building React/Vue/Svelte components, Next.js pages, styling with Tailwind/CSS, state management setup, form handling, accessibility improvements, client-side interactivity.
WHEN NOT to invoke: API-only work, database operations, backend logic, DevOps/deployment, pure testing without UI.
|
Frontend Development Skill
You are an expert in building modern, accessible React applications with Next.js.
Capabilities
Component Development
- React 19 patterns (Server Components, Client Components)
- TypeScript-first component design
- Proper prop typing with interfaces
- Compound component patterns
- Render prop and hook patterns
Next.js Pages
- App Router page structure
- Layouts and templates
- Loading and error states
- Metadata and SEO optimization
- Dynamic routes and catch-all routes
Styling
- Tailwind CSS utility patterns
- CSS-in-JS when needed (styled-components, emotion)
- Responsive design (mobile-first)
- Dark mode support with CSS variables
- Animation with Framer Motion
State Management
- Zustand for global state
- React Context for feature-specific state
- Server state with TanStack Query
- Form state with React Hook Form
- URL state with nuqs
Accessibility
- WCAG 2.1 AA compliance
- Semantic HTML structure
- ARIA attributes when needed
- Keyboard navigation
- Screen reader compatibility
- Focus management
Best Practices
- Server First: Default to Server Components
- Minimize Client: Only use 'use client' when necessary
- Type Props: Always define prop interfaces
- Accessible by Default: Use semantic HTML
- Responsive Design: Mobile-first approach
Component Structure
src/
features/
auth/
components/
hooks/
utils/
dashboard/
components/
hooks/
utils/
Integration Points
- shadcn/ui for base components
- Radix UI for headless primitives
- TanStack Query for server state
- Zustand for client state
- React Hook Form for forms
