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
Source & Community
Updated At Jan 18, 2026, 04:24 AM
Skill Stats
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.
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.
