Instruction file imported from pohlai88/mythic (.cursor/rules/018_web-development.mdc). Copyright stays with the author.

Web Development Optimization

Next.js/React Patterns:

App Router Conventions:

• Default to App Router (app/ directory)
• Use colocated routes/layouts
• Follow Next.js project structure guidance

Server vs Client Components:

• Prefer Server Components by default
• Only use "use client" when required (interactivity, hooks, browser APIs)
• Keep data-fetching/server-only code out of Client Components

API Route Patterns:

• Use app/api/... for route handlers
• Follow RESTful conventions
• Implement proper error handling
• Use TypeScript for type safety

Component Structure:

• Keep components focused and reusable
• Use proper TypeScript types
• Follow naming conventions
• Organize in components/ directory

Styling:

• ⚠️ DEPRECATED: See 033_design-system-constitution.mdc for ALL styling rules
• Design system constitution is the ONLY source of truth for styling
• All styling MUST follow Tailwind CSS v4 best practices from design system constitution

Web Dev Workflows:

• Component creation workflow
• API endpoint development
• Page creation process
• Testing strategies
• Performance optimization

Next.js Specific:

• Use next lint for lint workflow
• Follow Next.js best practices
• Optimize images and assets
• Use proper metadata and SEO

Reference Documentation:

• @rules/010_nextjs-architecture.mdc - Next.js architecture rules
• @rules/030_code-style-and-format.mdc - Code style guidelines