Nextjs styling

Skill ComeOnOliver/skillshub/skills/HoangNguyen0403/agent-skills-standard/nextjs-styling

🧠 The right skill, one API call. AI agent skills registry with token-efficient skill resolution. 5,000+ skills from 500+ top repos.

Install

npx -y skills add ComeOnOliver/skillshub --skill nextjs-styling

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

What its author says it does

Copied from the file, not written here

Zero-runtime CSS strategies (Tailwind) and RSC compatibility. Use when implementing Tailwind CSS or zero-runtime styling compatible with React Server Components. (triggers: **/*.css, tailwind.config.ts, **/components/ui/*.tsx, tailwind, css modules, styled-components, clsx, cn)

SKILL.md

2.0 KB, as published. Nobody here has run it

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