AGENT SKILL
styling
styling 是面向软件开发的 Agent Skill，来自 HoangNguyen0403/agent-skills-standard。查看技能说明、操作步骤与使用约定，并通过原项目了解详细用法。
Zero-runtime CSS strategies (Tailwind) and RSC compatibility.
| 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
| 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 (cn utility).
- Reference: Dynamic Classes & Button Example
- Font Optimization: Use
next/font to prevent Cumulative Layout Shift (CLS).
- Reference: Font Setup
- CLS Prevention: Always specify
width/height on images.
来源：HoangNguyen0403/agent-skills-standard · MIT 许可 · 许可原文 · MD 为来源页保存的历史版本