UI Styling 是一个综合技能，用于创建美观且可访问的用户界面，结合了 shadcn/ui 组件、Tailwind CSS 实用优先样式以及基于 canvas 的视觉设计系统。
用途
该技能适用于以下场景：使用 React 框架（Next.js、Vite、Remix、Astro）构建 UI；实现可访问组件（对话框、表单、表格、导航）；采用实用优先 CSS 方法进行样式设计；创建响应式、移动优先的布局；实现暗色模式和主题定制；构建具有一致令牌的设计系统；生成视觉设计、海报或品牌材料；通过即时视觉反馈进行快速原型设计；添加复杂 UI 模式（数据表格、图表、命令面板）。
主要能力
核心栈分为三层：
- 组件层：shadcn/ui，提供基于 Radix UI 原语构建的预置可访问组件，采用复制粘贴分发模型（组件位于你的代码库中），TypeScript 优先并具备完整类型安全，可组合原语用于复杂 UI，支持基于 CLI 的安装和管理。
- 样式层：Tailwind CSS，实用优先的 CSS 框架，构建时处理且零运行时开销，移动优先响应式设计，一致的设计令牌（颜色、间距、排版），自动消除死代码。
- 视觉设计层：Canvas，博物馆级视觉构图，哲学驱动的设计方法，精致的视觉传达，最少文字、最大视觉冲击，系统化模式和精炼美学。
使用方式
快速开始：
组件与样式设置：使用 npx shadcn@latest init 安装 shadcn/ui 与 Tailwind，CLI 会提示框架、TypeScript、路径和主题偏好，同时配置 shadcn/ui 和 Tailwind CSS。添加组件：npx shadcn@latest add button card dialog form。然后在代码中导入组件并结合实用类使用。
仅 Tailwind 设置（Vite 项目）：
npm install -D tailwindcss @tailwindcss/vite
// vite.config.ts
import tailwindcss from '@tailwindcss/vite'
export default { plugins: [tailwindcss()] }
/* src/index.css */
@import "tailwindcss";
该技能提供多个参考文档：组件库指南（references/shadcn-components.md）、主题与定制（references/shadcn-theming.md）、可访问性模式（references/shadcn-accessibility.md）、Tailwind 工具类（references/tailwind-utilities.md）、响应式设计（references/tailwind-responsive.md）、Tailwind 自定义（references/tailwind-customization.md）、视觉设计系统（references/canvas-design-system.md）。
还提供实用脚本：shadcn_add.py 用于添加 shadcn/ui 组件并处理依赖，例如 python scripts/shadcn_add.py button card dialog；tailwind_config_gen.py 用于生成带自定义主题的 tailwind.config.js，例如 python scripts/tailwind_config_gen.py --colors brand:blue --fonts display:Inter。
适用场景
适用于构建 React 应用界面、实现可访问组件、响应式布局、暗色模式、设计系统、视觉设计生成、快速原型以及复杂 UI 模式等。
限制
资料中未提供关于收费、价格、平台限制或具体效果保证的信息。部分功能依赖具体框架和工具链，需按文档配置。