Next.js Styling & UI Performance
Zero-runtime CSS strategies (Tailwind) and RSC compatibility.
SKILL.md
Full skill instructions
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
- Dynamic Classes: Use
clsx+tailwind-merge(cnutility).- Reference: Dynamic Classes & Button Example
- Font Optimization: Use
next/fontto prevent Cumulative Layout Shift (CLS).- Reference: Font Setup
- CLS Prevention: Always specify
width/heighton images.