Two agent skills for working with shadcn/ui: one for discovering existing components across the ecosystem before building, one for reviewing custom components against shadcn design patterns. The discovery skill searches 1,500+ existing components via the official shadcn MCP or CLI, so agents reuse what's already there instead of reinventing tables, forms, and modals. Both follow the open Agent Skills standard and work with Claude Code, Cursor, Windsurf, Codex, Gemini CLI, and Copilot.两款面向 shadcn/ui 的智能体技能：一款在动手之前先发现生态中已有的组件，另一款按 shadcn 设计模式审查自定义组件。发现技能通过官方 shadcn MCP 或 CLI 检索 1,500 多个已有组件，让智能体复用现成方案，而不是重新发明表格、表单、弹窗。两者都遵循开放的 Agent Skills 标准，支持 Claude Code、Cursor、Windsurf、Codex、Gemini CLI、Copilot。兩款面向 shadcn/ui 的智慧體技能：一款在動手之前先發現生態中已有的元件，另一款按 shadcn 設計模式審查自訂元件。發現技能透過官方 shadcn MCP 或 CLI 檢索 1,500 多個已有元件，讓智慧體重複使用現成方案，而不是重新發明表格、表單、彈窗。兩者都遵循開放的 Agent Skills 標準，支援 Claude Code、Cursor、Windsurf、Codex、Gemini CLI、Copilot。shadcn/ui で使う 2 つのエージェントスキル。1 つは構築前にエコシステム内の既存コンポーネントを発見するためのもの、もう 1 つはカスタムコンポーネントを shadcn のデザインパターンに照らしてレビューするためのもの。発見スキルは公式 shadcn MCP または CLI で 1,500 以上の既存コンポーネントを検索し、テーブルやフォーム、モーダルを再発明するのではなく既存品を再利用させる。どちらもオープンな Agent Skills 標準に準拠し、Claude Code、Cursor、Windsurf、Codex、Gemini CLI、Copilot で使える。
Quick start快速上手快速上手クイックスタート
What it does
shadcn-skills provides two agent skills for shadcn/ui: one discovering existing components before building, and one reviewing custom components against shadcn patterns. Both follow the open Agent Skills standard and work with Claude Code, Cursor, Windsurf, Codex CLI, Gemini CLI, Copilot, and other compatible tools.
How it works
Discovery searches the ecosystem before you build a table, form, modal, animation, or other common pattern, via the official shadcn MCP or a CLI fallback, covering 30+ community registries beyond your configured components file. It returns the top 2 to 3 matches with registry-qualified name, description, and install command. Review then audits a finished component for structure, spacing, tokens, composability, and responsive and accessibility behavior, with per-style expectations for Vega, Nova, Maia, Lyra, and Mira.
For the best setup, add the official shadcn MCP with
npx shadcn@latest mcp init
without it, the skills fall back to CLI commands and manual registry links.
Then ask for a component, for example a data table, and let discovery surface existing options before building custom, or ask for a review after writing or modifying a component.
Key points
Discovery is upstream of the official skill, which searches only registries already declared in your components file.
Review is post-hoc audit, not generation-time enforcement, which makes it useful for components built before a project standardized on a style.
If no match exists, discovery recommends closest adjacencies and offers to build custom, rather than forcing a poor fit.
An AI skill that provides design intelligence for building professional UI/UX across multiple platforms. Its v2.0 Design System Generator draws on 79 searchable UI styles, 192 palettes, 74 font pairings, and 192 industry reasoning rules to produce polished interfaces instead of generic layouts. It works with Claude Code and other major coding agents.为多平台构建专业 UI/UX 提供设计智能的 AI 技能。其 v2.0 设计系统生成器基于 79 种可检索 UI 风格、192 套配色、74 组字体搭配和 192 条行业推理规则，产出精致的界面而不是通用布局。支持 Claude Code 及其他主流编码智能体。為多平台建構專業 UI/UX 提供設計智慧的 AI 技能。其 v2.0 設計系統產生器基於 79 種可檢索 UI 風格、192 套配色、74 組字體搭配和 192 條產業推理規則，產出精緻的介面而不是通用版面。支援 Claude Code 及其他主流編碼智慧體。複数プラットフォームでプロ仕様の UI/UX を構築するためのデザインインテリジェンスを提供する AI スキル。v2.0 Design System Generator は、検索可能な UI スタイル 79 種、パレット 192 種、フォントの組み合わせ 74 組、業界推論ルール 192 件を活用し、汎用的なレイアウトではなく磨き上げたインターフェースを生み出す。Claude Code やその他の主要なコーディングエージェントで使える。
A curated collection of DESIGN.md analyses of popular brand design systems — 70+ real-brand systems including Claude, Apple, Stripe, and Linear. Drop one file into your project and let your coding agent generate a UI that matches that brand's look. The DESIGN.md concept comes from Google Stitch, and the collection keeps growing.知名品牌设计系统的 DESIGN.md 分析合集，已收录 70 多个真实品牌系统，包括 Claude、Apple、Stripe、Linear 等。把其中一个文件放进项目，编码智能体就能生成与该品牌风格一致的界面。DESIGN.md 这个概念来自 Google Stitch，合集还在持续增长。知名品牌設計系統的 DESIGN.md 分析合集，已收錄 70 多個真實品牌系統，包括 Claude、Apple、Stripe、Linear 等。把其中一個檔案放進專案，編碼智慧體就能生成與該品牌風格一致的介面。DESIGN.md 這個概念來自 Google Stitch，合集還在持續增長。人気ブランドのデザインシステムを DESIGN.md として分析したキュレーション集。Claude、Apple、Stripe、Linear など 70 以上の実在ブランドのシステムを収録する。ファイルを 1 つプロジェクトに置くだけで、コーディングエージェントがそのブランドの見た目に合った UI を生成する。DESIGN.md の概念は Google Stitch 由来で、コレクションは増え続けている。
Design设计設計デザインGeneric
Copy a DESIGN.md file into your project root (no installer; file-drop usage)
Agent skills that give coding agents taste: art direction, reference images, and a browser check instead of generic AI pages. Rather than accepting the first generic layout, the skill pushes the agent to pick a direction, ground it in references, and verify the result in a real browser. Version 2 holds a single skill, design-taste-frontend; older skills moved to taste-skill-classics and imagegen-skills.给编码智能体品味的智能体技能：艺术指导、参考图和浏览器检查，而不是千篇一律的 AI 页面。它不让智能体接受第一个通用布局，而是推动智能体选定方向、用参考图 grounding，并在真实浏览器里验证结果。v2 只有一个技能 design-taste-frontend，旧技能已移到 taste-skill-classics 和 imagegen-skills。給編碼智慧體品味的智慧體技能：藝術指導、參考圖和瀏覽器檢查，而不是千篇一律的 AI 頁面。它不讓智慧體接受第一個通用版面，而是推動智慧體選定方向、用參考圖 grounding，並在真實瀏覽器裡驗證結果。v2 只有一個技能 design-taste-frontend，舊技能已移到 taste-skill-classics 和 imagegen-skills。コーディングエージェントにセンスを与えるスキル。アートディレクション、リファレンス画像、ブラウザチェックによって、汎用的な AI ページを避ける。最初に出た汎用レイアウトを受け入れるのではなく、方向を選び、リファレンスに根付かせ、実際のブラウザで結果を検証するようエージェントを促す。バージョン 2 は design-taste-frontend の 1 件のみで、旧スキルは taste-skill-classics と imagegen-skills に移った。