用途：该技能用于在 React 系框架（Next.js、Vite、Remix、Astro）中构建可访问的 UI，涵盖对话框、表单、表格、导航等组件，并支持响应式布局、暗色模式与主题定制。
主要能力：组件层基于 shadcn/ui，通过 Radix UI 原语提供无障碍组件，采用复制到代码库的分发模式，TypeScript 优先；样式层为 Tailwind CSS，工具类优先、构建期处理、移动优先响应式、统一设计令牌并自动清除无用代码。技能还包含 Canvas 视觉设计层，用于视觉构图与品牌材料。
使用方式：初始化执行 npx shadcn@latest init，按提示选择框架、TypeScript、路径与主题；添加组件执行 npx shadcn@latest add button card dialog form。纯 Tailwind 的 Vite 项目可执行 npm install -D tailwindcss @tailwindcss/vite，并在 vite.config.ts 中引入 @tailwindcss/vite 插件，在 src/index.css 中写入 @import "tailwindcss"。技能附带脚本：python scripts/shadcn_add.py button card dialog 用于安装组件，python scripts/tailwind_config_gen.py --colors brand:blue --fonts display:Inter 用于生成配置。
参考文档：references/shadcn-components.md、shadcn-theming.md、shadcn-accessibility.md、tailwind-utilities.md、tailwind-responsive.md、tailwind-customization.md、canvas-design-system.md。
适用场景：需要无障碍组件的 React 界面、工具类样式、移动优先响应式布局、暗色模式与主题定制、设计系统与快速原型。
限制：资料未提供收费、价格、平台支持范围与效果数据；具体组件行为与配置细节需查阅上述参考文档。