Styling & UI Performance

Priority: P1 (HIGH)

Prioritize Zero-Runtime CSS for Server Components.

Library Selection

| Library | Verdict | Reason | | :------------------------- | :----------------- | :------------------------------------------------- | | Tailwind / shadcn | Preferred (P1) | Zero-runtime, RSC compatible. Best for App Router. | | CSS Modules | Recommended | Scoped, zero-runtime. | | MUI / Chakra (Runtime) | Avoid | Forces use client widely. Degrades performance. |

Patterns

1. Dynamic Classes: Use clsx + tailwind-merge (cn utility).
   • Reference: Dynamic Classes & Button Example
2. Font Optimization: Use next/font to prevent Cumulative Layout Shift (CLS).
   • Reference: Font Setup
3. CLS Prevention: Always specify width/height on images.