hoangnguyen0403/nextjs-styling
skills/nextjs/nextjs-styling/SKILL.md
Implement zero-runtime CSS with Tailwind, CSS Modules, and the cn() utility for RSC-compatible styling in Next.js. Use when choosing a styling library, creating dynamic class utilities, or optimizing fonts with next/font.
$ install --global
skillsauthnpx skillsauth add hoangnguyen0403/agent-skills-standard nextjs-stylingInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: May 20, 2026, 3:08 AM375.4s6 files scanned
SKILL.md
- name:
- nextjs-styling
- description:
- Implement zero-runtime CSS with Tailwind, CSS Modules, and the cn() utility for RSC-compatible styling in Next.js. Use when choosing a styling library, creating dynamic class utilities, or optimizing fonts with next/font.
Styling & UI Performance
Priority: P1 (HIGH)
Prioritize Zero-Runtime CSS for Server Components.
Workflow: Set Up Styling
- Choose library — Tailwind/shadcn (preferred), CSS Modules (scoped), or Ant Design (with client wrappers).
- Create
cnutility — Combineclsx+tailwind-mergefor dynamic classes. - Configure fonts — Use
next/fontfor zero-CLS self-hosted fonts. - Set image dimensions — Always specify
width/heightorfillon<Image>.
cn Utility Example
See implementation examples
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(cnutility).
- Reference: Dynamic Classes & Button Example
- Font Optimization: Use
next/fontto prevent Cumulative Layout Shift (CLS).
- Reference: Font Setup
- CLS Prevention: Always specify
width/heighton 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 setwidth/heightor usefillto prevent CLS. - No hardcoded conditional classes: Use
clsx+tailwind-merge(cn) for dynamic styles. - No Google Fonts
<link>tag: Usenext/fontfor zero-CLS self-hosted fonts.
Related Skills
hoangnguyen0403/common-operator-profile
testing
VerifiedTrustedCommunity
Infer the requesting operator's technical fluency from message content (never ask directly) and adapt register — business, hybrid, or technical — across SDLC workflow output. Use when starting sdlc, brainstorm-feature, plan-feature, verify-work, publish-notes, or session-report, or whenever a request's phrasing signals a non-technical or cross-stack operator.
524SKILL.mdUpdated Jul 12, 2026
hoangnguyen0403/database-transactions
documentation
VerifiedTrustedCommunity
Define transaction boundaries, locking, and consistency guarantees for multi-step writes. Use when designing atomic operations, retries, idempotency, or concurrent write behavior.
524SKILL.mdUpdated Jun 19, 2026
hoangnguyen0403/database-schema-design
development
VerifiedTrustedCommunity
Design relational or document schemas from access patterns, cardinality, and lifecycle. Use when modeling entities, choosing embed vs normalize, or shaping schema boundaries before implementation.
524SKILL.mdUpdated Jun 19, 2026
hoangnguyen0403/database-query-performance
data-ai
VerifiedTrustedCommunity
Diagnose database latency with explain plans, index ownership, and query-shape review. Use when a query is slow, an index is missing, or scans and N+1 patterns appear.
524SKILL.mdUpdated Jun 19, 2026