Why Use This This skill provides specialized capabilities for HoangNguyen0403's codebase.
Use Cases Developing new features in the HoangNguyen0403 repository Refactoring existing code to follow HoangNguyen0403 standards Understanding and working with HoangNguyen0403's codebase structure
Install Guide 2 steps 1 2 Install inside Ananke
Click Install Skill, paste the link below, then press Install.
https://github.com/HoangNguyen0403/agent-skills-standard/tree/develop/skills/nextjs/styling Skill Snapshot Auto scan of skill assets. Informational only.
Valid SKILL.md Checks against SKILL.md specification
Updated At Jan 18, 2026, 04:24 AM
SKILL.md 41 Lines
Total Files 1
Total Size 0 B
License NOASSERTION
---
name: Next.js Styling & UI Performance
description: Zero-runtime CSS strategies (Tailwind) and RSC compatibility. Use when implementing Tailwind CSS or zero-runtime styling compatible with React Server Components.
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 / 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/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.
