frontend-dev-guidelines

# Frontend Development Guidelines ## Purpose Comprehensive guide for modern Next.js 15 development with React 19, emphasizing Server Components, Client Components, App Router patterns, Shadcn/ui components, proper file organization, and performance optimization. ## When to Use This Skill - Creating new components or pages - Building new features - Fetching data (Server Components, Server Actions) - Setting up routing with Next.js App Router - Styling components with Tailwind CSS and Shadcn/ui - Performance optimization - Organizing frontend code - TypeScript best practices --- ## Quick Start ### New Component Checklist Creating a component? Follow this checklist: - [ ] Determine Server vs Client Component (default: Server Component) - [ ] Add `"use client"` directive only if needed (interactivity, hooks, browser APIs) - [ ] Use TypeScript with explicit prop types - [ ] Import Shadcn/ui components from `@/components/ui` - [ ] Use Tailwind CSS classes for styling - [ ] Import aliases: `@/components`, `@/lib`, `@/hooks` - [ ] Use `cn()` utility for conditional classes - [ ] Default export at bottom - [ ] Use Server Components for data fetching when possible ### New Page Checklist Creating a page? Set up this structure: - [ ] Create `app/{route-name}/page.tsx` for route - [ ] Use Server Component by default - [ ] Fetch data directly in Server Component - [ ] Create `components/` directory for page-specific components - [ ] Use `loading.tsx` for loading states - [ ] Us...