AgentSkillsCN

Next.js Styling & UI Performance

零运行时 CSS 策略（Tailwind）与 RSC 兼容性。

SKILL.md
--- frontmatter
name: Next.js Styling & UI Performance
description: Zero-runtime CSS strategies (Tailwind) and RSC compatibility.
metadata:
  labels: [nextjs, styling, tailwind, css]
  triggers:
    files: ['**/*.css', 'tailwind.config.ts', '**/components/ui/*.tsx']
    keywords: [tailwind, css modules, styled-components, clsx, cn]

Styling & UI Performance

Priority: P1 (HIGH)

Prioritize Zero-Runtime CSS for Server Components.

Library Selection

LibraryVerdictReason
Tailwind / shadcnPreferred (P1)Zero-runtime, RSC compatible. Best for App Router.
CSS ModulesRecommendedScoped, zero-runtime.
MUI / Chakra (Runtime)AvoidForces 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.