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)
Best use case
nextjs-styling is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
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)
Teams using nextjs-styling should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/nextjs-styling/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How nextjs-styling Compares
| Feature / Agent | nextjs-styling | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
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)
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
SKILL.md Source
# 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. ## 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.
Related Skills
react-nextjs-development
React and Next.js 14+ application development with App Router, Server Components, TypeScript, Tailwind CSS, and modern frontend patterns.
nextjs-supabase-auth
Expert integration of Supabase Auth with Next.js App Router Use when: supabase auth next, authentication next.js, login supabase, auth middleware, protected route.
nextjs-best-practices
Next.js App Router principles. Server Components, data fetching, routing patterns.
nextjs-app-router-patterns
Master Next.js 14+ App Router with Server Components, streaming, parallel routes, and advanced data fetching. Use when building Next.js applications, implementing SSR/SSG, or optimizing React Server Components.
rn-styling
Styling patterns for React Native with NativeWind and BrandColors. Use when working with styles, themes, colors, responsive layouts, or platform-specific UI in Expo/React Native.
nextjs-15-specialist
Use when working with Next.js 15 features, App Router, Server Components, Server Actions, or data fetching patterns. Ensures correct usage of Server vs Client Components and modern Next.js patterns.
nextjs-15-patterns
Next.js 15 App Router patterns and best practices.
frontend-nextjs-app-router
Use when working with Next.js App Router tasks - creating pages in /app/, setting up dynamic routes ([id]/page.tsx), implementing nested layouts/templates (layout.tsx), optimizing Server/Client components, or building ERP role-based pages (admin/teacher/student dashboards). Auto-use for all /app/ directory operations, dynamic routing, and App Router-specific features.
styling-with-shadcn
Build beautiful, accessible UIs with shadcn/ui components in Next.js. Use when creating forms, dialogs, tables, sidebars, or any UI components. Covers installation, component patterns, react-hook-form + Zod validation, and dark mode setup. NOT when building non-React applications or using different component libraries.
building-nextjs-apps
Build Next.js 16 applications with correct patterns and distinctive design. Use when creating pages, layouts, dynamic routes, upgrading from Next.js 15, or implementing proxy.ts. Covers breaking changes (async params/searchParams, Turbopack, cacheComponents) and frontend aesthetics. NOT when building non-React or backend-only applications.
nextjs-devtools
Next.js development tooling via MCP. Inspect routes, components, build info, and debug Next.js apps. Use when working on Next.js applications, debugging routing, or inspecting app structure. NOT for general React or non-Next.js projects.
nextjs-turbopack
Next.js 16+ 和 Turbopack — 增量打包、文件系统缓存、开发速度，以及何时使用 Turbopack 与 webpack。