AgentSkillsCN

shadcn-ui

适用于 Next.js App Router 的 Shadcn/UI 组件模式。在使用 shadcn/ui 构建项目中的 UI 组件、表单、数据表格或图表时，请应用此模式。当用户请求按钮、卡片、对话框、表单、表格、图表，或任何由 Shadcn 提供的 UI 元素时，可触发此技能。

SKILL.md
--- frontmatter
name: shadcn-ui
description: Shadcn/UI component patterns for Next.js App Router. Apply when building UI components, forms, data tables, or charts in projects using shadcn/ui. Triggers on requests for buttons, cards, dialogs, forms, tables, charts, or any UI that shadcn provides.
license: MIT
metadata:
  author: community
  version: "1.0.0"

Shadcn/UI Patterns for Next.js

Comprehensive guide for using shadcn/ui effectively with Next.js App Router. Contains 19 rules across 9 categories focused on using the CLI, composing from primitives, and following established patterns.

Critical Principle

NEVER recreate shadcn primitives. Always use npx shadcn@latest add <component> to install components, then compose custom UI from those primitives.

When to Apply

Reference these guidelines when:

  • •Installing or adding shadcn/ui components
  • •Building forms with validation
  • •Creating data tables with sorting/filtering/pagination
  • •Adding charts and data visualization
  • •Composing custom UI from shadcn primitives
  • •Styling components with Tailwind and CSS variables
  • •Working with client/server component boundaries

Rule Categories by Priority

PriorityCategoryImpactPrefix
1CLI UsageCRITICALcli-
2Component CompositionCRITICALcompose-
3Form IntegrationHIGHform-
4Data TablesHIGHtable-
5ChartsHIGHchart-
6Styling PatternsHIGHstyle-
7App Router IntegrationHIGHnextjs-
8AccessibilityMEDIUMa11y-
9Extension PatternsMEDIUMextend-

Quick Reference

1. CLI Usage (CRITICAL)

  • •cli-install-components - Always use CLI to add components, never recreate
  • •cli-init-project - Proper project initialization with shadcn

2. Component Composition (CRITICAL)

  • •compose-from-primitives - Build custom UI from existing shadcn components
  • •compose-compound-patterns - Understand compound component API (asChild, slots)

3. Form Integration (HIGH)

  • •form-react-hook-form-zod - react-hook-form + Zod + shadcn Form pattern
  • •form-field-components - FormField, FormItem, FormControl usage

4. Data Tables (HIGH)

  • •table-tanstack-setup - TanStack Table + shadcn Table integration
  • •table-column-definitions - Type-safe column definitions
  • •table-features - Sorting, filtering, pagination patterns

5. Charts (HIGH)

  • •chart-recharts-setup - ChartContainer setup with responsiveness
  • •chart-config-theming - ChartConfig with CSS variables
  • •chart-types - Bar, Line, Area, Pie, Radar, Radial patterns

6. Styling (HIGH)

  • •style-cn-utility - Use cn() for conditional class merging
  • •style-css-variables - Theme with CSS variables, not hardcoded colors

7. Next.js Integration (HIGH)

  • •nextjs-client-server-boundary - "use client" directive for interactive components
  • •nextjs-loading-patterns - Skeleton components with Suspense

8. Accessibility (MEDIUM)

  • •a11y-preserve-radix - Don't break built-in Radix accessibility

9. Extension (MEDIUM)

  • •extend-variant-customization - Add variants with cva safely
  • •extend-wrapper-components - Create wrappers instead of editing ui/ files

How to Use

Read individual rule files for detailed explanations and code examples:

code
rules/cli-install-components.md
rules/compose-from-primitives.md
rules/form-react-hook-form-zod.md

Full Compiled Document

For the complete guide with all rules expanded: AGENTS.md