mcpField
S
shadcn-ui

shadcn-ui

github.com/podo设计与 UI29220 次安装4 天前更新
代码仓库

关于 shadcn-ui

shadcn-ui 是面向使用 shadcn/ui 的开发者的技能，提供结合项目上下文的组件开发工作流，涵盖注册表搜索、组件添加与组合及常见问题修复。

主要功能

  1. 01按项目上下文提供指导
  2. 02搜索组件注册表
  3. 03添加并组合组件
  4. 04使用变体与语义颜色
  5. 05排查常见实现问题

适用场景

  1. 01从社区注册表查找组件
  2. 02为项目添加 shadcn/ui 组件
  3. 03组合组件构建设置页面

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/podo/design-agent-skills --skill shadcn-ui

安装后在 Claude Code 中输入/shadcn-ui确认已加载。

附带文件stub.yaml

详细介绍

shadcn-ui

目录占位条目 — 完整技能：shadcn-ui/ui（skills/shadcn）

决策树

  1. 是否已安装完整技能？ 上游将此技能命名为 shadcn，因此它会与此指针并列安装（不会替换该指针）。

    • 全局：f=~/.agents/skills/shadcn/SKILL.md; [ -f "$f" ] && ! grep -q "^das:" "$f" && echo "installed" || echo "pointer"
    • 项目：f=.agents/skills/shadcn/SKILL.md; [ -f "$f" ] && ! grep -q "^das:" "$f" && echo "installed" || echo "pointer"
    • installed → 技能已作为 shadcn 安装，调用该技能并继续
    • pointer → 转到第 2 步

  2. 检测作用范围，然后安装：

    [ -e ~/.agents/skills/shadcn-ui ] && echo "global" || echo "project"

    全局：

    npx skills add shadcn-ui/ui --skill shadcn -g -y

    项目：

    npx skills add shadcn-ui/ui --skill shadcn -y

    Claude Code： 发送以 ! 开头的命令作为聊天消息，即可在不中断对话的情况下运行该命令。

注意事项

  • 要求： Node.js：该技能通过你的包运行器调用 shadcn CLI（npx shadcn@latest ...，使用时从 npm 获取），包括用于获取项目上下文的 info --json；项目需包含 components.json 文件（或准备使用 shadcn init 创建该文件）
  • 许可证： MIT
  • 下载大小： 约 71 MB。
  • 名称冲突： google-stitch-skills 也会写入 shadcn-ui（通过安装或其目录指针）；同时安装两者会覆盖先安装的那一个。

安装后调用

  • 技能名称：shadcn
  • 触发短语："shadcn"、"shadcn/ui"、"shadcn component"、"ui component"

功能

提供适配项目的 shadcn/ui 工作流：搜索可用组件注册表（包括社区注册表），使用正确的 CLI 命令添加组件，从现有组件组合组件（例如，设置页面由 Tabs + Card + 表单控件组成），优先使用内置变体和语义颜色，再使用自定义样式，并修正常见实现错误。该技能还涵盖预设、注册表和设计系统页面。技能通过运行 npx shadcn@latest info --json 加载项目上下文。

同一上游仓库还提供一个独立的 migrate-radix-to-base 技能，用于将组件从 Radix UI 迁移到 Base UI；它不属于此占位条目（使用 npx skills add shadcn-ui/ui --skill migrate-radix-to-base 添加）。

不适用场景

  • 非 shadcn 组件库，或从头构建的设计系统 — 使用 design-consultation
  • 将 Google Stitch 转换为 shadcn — 使用 google-stitch-skills

评论

支持 Markdown