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
typescript
// Feature-based organization
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