shadcn/ui组件开发助手Skill shadcn

shadcn/ui 技能是一个专注于使用 shadcn/ui 组件库进行高效、现代化用户界面开发的专家助手。它提供组件安装、样式定制、主题配置、功能扩展以及与表单等复杂逻辑集成的全方位支持。适用于 React 应用、Next.js 全栈项目和快速原型开发，帮助开发者快速构建美观、一致且可维护的 UI。关键词：shadcn/ui, React组件库, UI开发, 前端组件, 主题定制, Next.js, 快速原型。

前端开发 0 次安装 6 次浏览更新于 2/26/2026

name: shadcn description: shadcn/ui 组件模式、定制化、主题化和集成。 allowed-tools: Read, Write, Edit, Bash, Glob, Grep

shadcn/ui 技能

使用 shadcn/ui 组件构建用户界面的专家级协助。

能力

安装和配置组件
自定义组件样式
实现主题化
扩展组件
与表单集成

使用模式

npx shadcn-ui@latest add button dialog form

import { Button } from '@/components/ui/button';
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog';

<Dialog>
  <DialogTrigger asChild>
    <Button variant="outline">打开</Button>
  </DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>标题</DialogTitle>
    </DialogHeader>
    {/* 内容 */}
  </DialogContent>
</Dialog>

主题化

:root {
  --primary: 222.2 47.4% 11.2%;
  --primary-foreground: 210 40% 98%;
}

目标流程

react-应用开发
nextjs-全栈开发
快速原型设计