Profile My skills Saved Collections Edit profile Submit a skill

Next.js Styling & UI Performance

Zero-runtime CSS strategies (Tailwind) and RSC compatibility.

majiayu000 8aebb47 2 files · 1.7 KB Updated 567 repo stars
Web & Frontend

File contents

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.

majiayu000/claude-skill-registry-data/tree/main/data/styling commit 8aebb47345

Browse category

Frequently asked questions

npx skillmds add majiayu000/next-js-styling-ui-performance