跳转到主要内容

Shadcn Ui

技能 已验证 活跃

为集成和构建 shadcn/ui 组件应用程序提供专家指导,包括组件发现、安装、自定义和最佳实践。

目的

通过提供专家指导和实用工具,使开发人员能够高效地集成、自定义和构建使用 shadcn/ui 组件的应用程序。

功能

  • 组件发现和安装
  • 项目设置和配置
  • 主题和组件自定义
  • 与 shadcn MCP 工具集成
  • 用法示例和最佳实践

使用场景

  • 将 shadcn/ui 集成到新的或现有的 React 项目中
  • 发现和安装特定的 shadcn/ui 组件
  • 自定义组件的外观和行为
  • 使用 shadcn/ui 构建复杂的 UI 元素,如表单和数据表

非目标

  • 提供一个存在于 node_modules 中的组件库
  • 取代 React、Tailwind CSS 或 Node.js 的需求
  • 提供超出 shadcn/ui 集成范围的指导

安装

npx skills add google-labs-code/stitch-skills

通过 npx 运行 Vercel skills CLI(skills.sh)— 需要本地安装 Node.js,以及至少一个兼容 skills 的智能体(Claude Code、Cursor、Codex 等)。前提是仓库遵循 agentskills.io 格式。

质量评分

已验证
98 /100
1 day ago 分析

信任信号

最近提交2 days ago
星标5.4k
许可证Apache-2.0
状态
查看源代码

类似扩展

Shadcn/ui Component Library

99

shadcn/ui component library for React with Tailwind CSS - copy-paste accessible components with full code ownership

技能
bobmatnyc

UI UX Pro Max Skill

98

使用 shadcn/ui 组件(基于 Radix UI + Tailwind 构建)、Tailwind CSS 的原子化样式以及基于画布的视觉设计,创建美观、无障碍的用户界面。适用于构建用户界面、实施设计系统、创建响应式布局、添加无障碍组件(对话框、下拉菜单、表单、表格)、自定义主题和颜色、实现暗黑模式、生成视觉设计和海报,或跨应用程序建立一致的样式模式。

技能
nextlevelbuilder

UI Styling Skill

95

Style UIs with shadcn/ui components (Radix UI + Tailwind CSS). Use for accessible components, themes, dark mode, responsive layouts, design systems, color customization.

技能
binjuhor

Setup Tailwind Typescript

100

Configure Tailwind CSS with TypeScript in a Next.js or React project. Covers installation, configuration, custom theme extensions, component patterns, and type-safe styling utilities. Use when adding Tailwind CSS to an existing TypeScript project, customizing the Tailwind theme for a project's design system, setting up type-safe component styling patterns, or configuring Tailwind plugins and extensions.

技能
pjt222

Sentry React Router Framework Sdk

100

Full Sentry SDK setup for React Router Framework mode. Use when asked to "add Sentry to React Router Framework", "install @sentry/react-router", or configure error monitoring, tracing, profiling, session replay, logs, or user feedback for a React Router v7 framework app.

技能
getsentry

React Modernization

99

Upgrade React applications to latest versions, migrate from class components to hooks, and adopt concurrent features. Use when modernizing React codebases, migrating to React Hooks, or upgrading to latest React versions.

技能
wshobson