Agent skill

Next.js Styling & UI Performance

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

View SKILL.md on GitHub Repository
Stars 163
Forks 31

Install this agent skill to your Project

npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/data/styling

Metadata

Additional technical details for this skill

labels
nextjs styling tailwind css
triggers 
{
    "files": [
        "**/*.css",
        "tailwind.config.ts",
        "**/components/ui/*.tsx"
    ],
    "keywords": [
        "tailwind",
        "css modules",
        "styled-components",
        "clsx",
        "cn"
    ]
}

SKILL.md

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).
  2. Font Optimization: Use next/font to prevent Cumulative Layout Shift (CLS).
  3. CLS Prevention: Always specify width/height on images.

Didn't find tool you were looking for?

Be as detailed as possible for better results