ckm-ui-styling 是一个综合性 UI 样式技能，目标是把 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，CLI 会询问框架、TypeScript、路径和主题偏好，同时配置 shadcn/ui 和 Tailwind CSS。添加组件：npx shadcn@latest add button card dialog form。文档给出在 Dashboard 组件中使用 Button、Card 等组件并结合 Tailwind 工具类的示例代码。
纯 Tailwind 方案：Vite 项目可执行 npm install -D tailwindcss @tailwindcss/vite，在 vite.config.ts 中引入 @tailwindcss/vite 插件，并在 src/index.css 中写入 @import "tailwindcss"。
参考文档模块
- 组件库指南：references/shadcn-components.md，涵盖表单与输入组件（Button、Input、Select、Checkbox、Date Picker、表单校验）、布局与导航（Card、Tabs、Accordion、Navigation Menu）、浮层与对话框（Dialog、Drawer、Popover、Toast、Command）、反馈与状态（Alert、Progress、Skeleton）、展示组件（Table、Data Table、Avatar、Badge）。
- 主题与定制：references/shadcn-theming.md，涵盖使用 next-themes 的深色模式设置、CSS 变量系统、颜色定制与调色板、组件变体定制、主题切换实现。
- 可访问性模式：references/shadcn-accessibility.md，涵盖 Radix UI 可访问性特性、键盘导航、焦点管理、屏幕阅读器播报、表单校验可访问性。
- Tailwind 工具类：references/tailwind-utilities.md，涵盖布局（Flexbox、Grid、定位）、间距系统、字体排印、颜色与背景、边框与阴影、自定义样式的任意值。
- 响应式设计：references/tailwind-responsive.md，涵盖移动优先方法、断点系统（sm、md、lg、xl、2xl）、响应式工具类模式、容器查询、最大宽度查询、自定义断点。
- Tailwind 定制：references/tailwind-customization.md，涵盖 @theme 指令、自定义颜色与字体、间距与断点扩展、自定义工具类与变体、@layer 组织、apply 指令。
- 视觉设计系统：references/canvas-design-system.md，涵盖设计理念、视觉沟通、系统化图案与构图、颜色与形态及空间设计、极简文本整合、多页设计系统。
自动化脚本
- scripts/shadcn_add.py：带依赖处理地添加 shadcn/ui 组件，例如 python scripts/shadcn_add.py button card dialog。
- scripts/tailwind_config_gen.py：生成带自定义主题的 tailwind.config.js，例如 python scripts/tailwind_config_gen.py --colors brand:blue --fonts display:Inter。
常见模式 文档提供了带校验的表单示例（使用 react-hook-form、zodResolver、zod，配合 Form、FormField、FormItem、FormLabel、FormControl、FormMessage、Input、Button），以及带深色模式的响应式布局示例（使用 dark: 变体与 grid 断点）。
最佳实践 组件组合：从简单可组合原语构建复杂 UI；工具类优先：直接使用 Tailwind 类，仅在真正重复时抽取组件；移动优先响应式：先写移动样式，再叠加响应式变体；可访问性优先：利用 Radix UI 原语、添加焦点状态、使用语义化 HTML；设计令牌：使用一致间距刻度、调色板、字体排印系统；深色模式一致性：为所有主题化元素应用 dark 变体；性能：利用自动 CSS 清除，避免动态类名；TypeScript：使用完整类型安全；视觉层级：让构图引导注意力；以工匠精神对待 UI 细节。
相关资源链接 shadcn/ui 文档 https://ui.shadcn.com；Tailwind CSS 文档 https://tailwindcss.com；Radix UI https://radix-ui.com；Tailwind UI https://tailwindui.com；Headless UI https://headlessui.com；v0 https://v0.dev。官方文档引用的参考链接还包括 shadcn/ui 的 llms.txt：https://ui.shadcn.com/llms.txt。
限制与暂未提供的信息 关于收费、价格、平台兼容性、实际效果或性能数据，资料暂未提供。