Skillshub nextjs-styling

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)

install

source · Clone the upstream repo

git clone https://github.com/ComeOnOliver/skillshub

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

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

manifest: skills/HoangNguyen0403/agent-skills-standard/nextjs-styling/SKILL.md

source content

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.