/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.

hoangnguyen0403@hoangnguyen0403

GitHub

From plugin

agent-skills-standard

538200 skills1 MCP

Install

$ npx -y skills add hoangnguyen0403/agent-skills-standard --skill nextjs-styling --agent claude-code

How it fires

How this skill gets triggered: by you, by Claude, or both.

Fires itselfAuto-invocation. Claude auto-loads it when your prompt matches the work.
You can call itInvoke it directly when you want it.
Slash command/nextjs-styling

Context preview

The summary Claude sees to decide when to auto-load this skill.

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.

SKILL.md

nextjs-styling.SKILL.md

name: nextjs-styling
description: 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.
metadata:
  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.

Workflow: Set Up Styling

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

cn Utility Example

See [implementation examples](references/implementation.md)

Library Selection

Library Patterns

For specific library setups, see:

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

Patterns

1. **Dynamic Classes**: Use `clsx` + `tailwind-merge` (`cn` utility).

_Reference_: [Dynamic Classes & Button Example](references/implementation.md)

2. **Font Optimization**: Use `next/font` to prevent Cumulative Layout Shift (CLS).

_Reference_: [Font Setup](references/implementation.md)

3. **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.