Agent-Skills.md

Agent Skills: Styling & UI Performance

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)

UncategorizedID: hoangnguyen0403/agent-skills-standard/nextjs-styling

Repository

hoangnguyen0403/agent-skills-standard
HoangNguyen0403License: Apache-2.0
362103

Install this agent skill to your local

pnpm dlx add-skill https://github.com/HoangNguyen0403/agent-skills-standard/tree/HEAD/skills/nextjs/nextjs-styling

Skill Files

Browse the full folder contents for nextjs-styling.

Download Skill

Loading file tree…

skills/nextjs/nextjs-styling/SKILL.md

Skill Metadata

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. (triggers: **/*.css, tailwind.config.ts, **/components/ui/*.tsx, 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

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:

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.

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.