playbooks

home / skills / hoangnguyen0403 / agent-skills-standard / styling

styling skill

/skills/nextjs/styling

This skill helps optimize Next.js styling and UI performance by enforcing zero-runtime CSS with Tailwind, RSC compatibility, and robust font handling.

npx playbooks add skill hoangnguyen0403/agent-skills-standard --skill styling

Review the files below or copy the command above to add this skill to your agents.

Files (2)
SKILL.md
1.3 KB
---
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

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.

Overview

This skill documents practical strategies for Styling & UI Performance in Next.js with a focus on zero-runtime CSS and React Server Component (RSC) compatibility. It guides library choices, component patterns, and performance safeguards to keep server-rendered pages fast and stable. The guidance prioritizes App Router workflows and reducing client-side runtime overhead.

How this skill works

The skill inspects styling choices and runtime behavior to recommend zero-runtime CSS solutions such as Tailwind and shadcn for server components. It flags libraries that force client bundles (for example component libraries that require `use client`) and suggests alternatives like CSS Modules or utility-first approaches. It also enforces specific patterns for dynamic class composition, font loading, and image dimensions to prevent layout shifts.

When to use it

  • Building Next.js apps with App Router and React Server Components
  • Optimizing initial page load performance and reducing client JS payload
  • Choosing or auditing component libraries for server-side compatibility
  • Implementing consistent styling patterns across a team
  • Reducing Cumulative Layout Shift (CLS) and improving Core Web Vitals

Best practices

  • Prefer zero-runtime styling: Tailwind or shadcn for RSC-compatible styles
  • Use CSS Modules when scoped, zero-runtime styles are sufficient
  • Avoid MUI/Chakra or other runtime-heavy UI libs in server components
  • Compose dynamic classes with clsx + tailwind-merge (cn utility)
  • Load fonts with next/font to prevent CLS and improve layout stability
  • Always specify width and height on images to eliminate layout jumps

Example use cases

  • Audit a Next.js app to replace runtime UI libraries with Tailwind/shadcn
  • Convert shared layout components to server components and remove client-only styles
  • Implement a button system using clsx + tailwind-merge for predictable class merging
  • Configure next/font for site-wide typography and measure CLS improvements
  • Enforce image dimension requirements in component libraries to avoid CLS

FAQ

Why avoid MUI or Chakra in server components?

Many such libraries rely on runtime styling and require `use client`, which forces client-side bundles and negates server rendering performance benefits.

Is Tailwind truly zero-runtime?

When used with static utility classes and build-time processing, Tailwind adds no runtime overhead; combine with RSC to keep styles server-side.