Agent-skills-standard nextjs-styling

Implement zero-runtime CSS with Tailwind, CSS Modules, and the cn() utility for RSC-compatible styling in Next.js. Use when choosing a styling library, creating dynamic class utilities, or optimizing fonts with next/font. (triggers: **/*.css, tailwind.config.ts, **/components/ui/*.tsx, tailwind, css modules, styled-components, clsx, cn)

install

source · Clone the upstream repo

git clone https://github.com/HoangNguyen0403/agent-skills-standard

Claude Code · Install into ~/.claude/skills/

T=$(mktemp -d) && git clone --depth=1 https://github.com/HoangNguyen0403/agent-skills-standard "$T" && mkdir -p ~/.claude/skills && cp -r "$T/skills/nextjs/nextjs-styling" ~/.claude/skills/hoangnguyen0403-agent-skills-standard-nextjs-styling && rm -rf "$T"

manifest: skills/nextjs/nextjs-styling/SKILL.md

source content

Styling & UI Performance

Priority: P1 (HIGH)

Prioritize Zero-Runtime CSS for Server Components.

Workflow: Set Up Styling

Choose library — Tailwind/shadcn (preferred), CSS Modules (scoped), or Ant Design (with client wrappers).
Create
cn
utility — Combine
```
clsx
```
+
```
tailwind-merge
```
for dynamic classes.
Configure fonts — Use
```
next/font
```
for zero-CLS self-hosted fonts.
Set image dimensions — Always specify
```
width
```
/
```
height
```
or
```
fill
```
on
```
<Image>
```
.

cn Utility Example

See implementation examples

Library Selection

Library	Verdict	Reason
Tailwind / shadcn	Preferred (P1)	Zero-runtime, RSC compatible. Best for App Router.
CSS Modules / SCSS	Recommended	Scoped, zero-runtime. Good for legacy projects.
Ant Design	Supported	Use with Client Component wrappers for RSCs.
MUI / Chakra (Runtime)	Avoid	Forces `use client` widely. Degrades performance.

Library Patterns

For specific library setups, see:

references/scss.md
references/ant-design.md
references/tailwind.md (Tailwind/shadcn)

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.

Anti-Patterns

No runtime CSS-in-JS with RSC: MUI/Chakra force
```
'use client'
```
; prefer Tailwind or CSS Modules.
No
<img>
without dimensions: Always set
```
width
```
/
```
height
```
or use
```
fill
```
to prevent CLS.
No hardcoded conditional classes: Use
```
clsx
```
+
```
tailwind-merge
```
(
```
cn
```
) for dynamic styles.
No Google Fonts
<link>
tag: Use
```
next/font
```
for zero-CLS self-hosted fonts.