Web Frontend Skill

Core Principles

1. Server Components by Default - Use Client Components only when needed (hooks, events, browser APIs)
2. Type-Safe API Calls - Always use tRPC for data fetching
3. Semantic Colors - Use design tokens from globals.css
4. Form Validation - React Hook Form + Zod for complex forms
5. Protected Routes - Wrap authenticated pages with AuthGuard
6. Error Boundaries - Use error.tsx for automatic error handling

Patterns to Follow

Pattern 1: Server vs Client Component Decision

Decision Tree: