web-rules

name

web-rules

description

Strict design and UX rules for React 19 + Next.js 16 (App Router) + Tailwind CSS 4. Covers navigation, interaction design, accessibility, user feedback, UX patterns, and visual design. Use when designing, building, or reviewing any user-facing web feature on this stack. Trigger when the user asks to "build a settings page", "add a dialog", "design this form", "review for accessibility", "fix dark mode", or any Next.js App Router / React 19 / Tailwind UI task. Also trigger when the user says output "looks off", "isn't accessible", or "doesn't follow best practices."

React 19 + Next.js 16 + Tailwind CSS Best Practices

Comprehensive strict-rules reference for web apps built on React 19, the Next.js 16 App Router, and Tailwind CSS 4. Contains 34 rules across 6 categories. Each rule is stated as an Always/Never directive with a quantified impact, an incorrect example, and a correct example.

Stack Contract

All guidance assumes:

• React 19 with Server Components by default; Client Components only when interactivity is required ('use client' at the top)
• Next.js 16 App Router with app/ directory, layout.tsx, page.tsx, loading.tsx, error.tsx, not-found.tsx, parallel routes, intercepting routes
• Server Actions for mutations ('use server') — never useEffect for data fetching
• Tailwind CSS 4 with the @theme directive, dark: variant, container queries, and the standard 4pt spacing scale
• lucide-react as the canonical icon system
• No CSS-in-JS (no styled-components, no emotion) — Tailwind utility classes only, with cn() from + for conditional classes