nextjs-styling-ui-performance
Zero-runtime CSS strategies (Tailwind) and RSC compatibility.
Installation
Follow the repository instructions for this skill and your agent. Review the files and dependencies before adding it to your workflow.
View source ↗GuidesSkill 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.
Examples
Read the usage examples in the source repository.
View source ↗Source history
- Indexed on
- 2026-01-20
- Index updated
- 2026-01-26
- Branch
- main
Index and sync dates describe this directory. View the source repository for code history.
GitHub ↗chat Comments (0)
Sign in to join the discussion and leave a comment.
No comments yet. Be the first to share your thoughts!