ckm:ui-styling

概览

什么是 ckm:ui-styling？

ckm:ui-styling 是一项专注于 UI 设计和前端样式的技能，帮助你在现代 React 与 Next.js 技术栈中构建美观、可访问的界面。它与基于 Radix UI + Tailwind CSS 的 shadcn/ui 组件配合使用，并内置适配 canvas 的字体资源，让你可以从界面布局顺畅地延展到品牌视觉和海报设计。

该技能针对 Tailwind CSS 的 utility-first（工具类优先）风格进行了优化，适合希望在排版、主题和可复用 UI 模式上获得有观点的指导，而不是从一份空白 CSS 文件起步的团队。

主要能力

借助 ckm:ui-styling，Agent 可以：

• 使用 shadcn/ui 模式为基于 React 的 UI（Next.js、Vite、Remix、Astro）设计样式
• 运用 Tailwind CSS 工具类处理布局、间距和有状态样式
• 基于 Radix UI 约定给出兼顾可访问性的组件结构方案
• 帮助定义颜色、圆角、排版尺度等设计系统基础元素
• 在 token 和组件两个层面支持 dark mode 和主题定制
• 提出响应式布局策略（mobile-first、自适应网格、flexbox 等）
• 利用精选的 canvas-fonts/ 目录为 UI 和海报匹配合适的字体
• 协助产出与界面风格一致的视觉资源，例如简单海报或品牌视觉素材

适用人群

如果你符合以下场景，ckm:ui-styling 会比较适合：

• 在 React 或 Next.js 环境下工作的 UI/UX 设计师
• 负责落地或扩展设计系统的前端工程师
• 在构建新仪表盘、营销站点或应用 Shell 的产品团队
• 想要无障碍、风格统一的 UI，又不想从零学习复杂自定义设计语言的开发者

不太适用的情况包括：

• 没有 HTML/CSS 层的非 Web 界面（原生移动端、桌面应用等）
• 完全回避 Tailwind 或 shadcn/ui，而采用其他设计框架的项目
• 仅有后端或 API-first，几乎没有 UI 需求的服务

技术栈契合度

ckm:ui-styling 主要针对以下方向进行了优化：

• UI design – 布局、层级、排版、颜色和组件状态
• Frontend development – React、Next.js、utility-first CSS 和组件架构
• Design systems – 设计 tokens、统一组件和可重复模式

如果你的技术栈已经使用或计划使用 shadcn/ui、Radix UI、Tailwind CSS，这项技能会非常贴合你的工作流。

使用指南

1. 安装 ui-styling 技能

要将 ui-styling 添加到 Agent 环境中，可从上游仓库安装：

npx skills add https://github.com/nextlevelbuilder/ui-ux-pro-max-skill --skill ui-styling

这会将 ckm:ui-styling 的配置和支持资源拉取到源码仓库的 .claude/skills/ui-styling 目录下。

2. 需要了解的文件和结构

安装完成后，可以重点查看以下文件和目录：

• SKILL.md – UI Styling Skill 的主要说明文档，包含描述、元数据以及指向 shadcn/ui 和 Tailwind 文档的链接
• LICENSE.txt – 技能本身的 MIT 许可证
• canvas-fonts/ – 基于 Open Font License (OFL) 的精选字体文件，用于 canvas 视觉和排版实验
• references/ – 额外的设计或实现参考资料（若在你的代码检出中存在）
• scripts/ – 与技能工作流相关的辅助脚本（若在你的代码检出中存在）

canvas-fonts/ 目录包含多个字体家族（如 ArsenalSC、Big Shoulders、Boldonse、Bricolage Grotesque、Crimson Pro、DM Mono、Erica One、Geist Mono、IBM Plex、Instrument Sans），同时提供 .ttf 文件和对应的 -OFL.txt 许可证文件。当你在 canvas 环境中生成海报、首屏大图或其他品牌物料时，这些字体能在合规前提下直接使用。

3. 在 React / Next.js 项目中的典型流程

步骤 1：先明确目标组件或布局

该技能的 argument-hint 为：

[component or layout]

先说明你希望设计样式的对象，例如：

• "Dashboard sidebar navigation"
• "Marketing homepage hero section"
• "Data table with pagination and filters"
• "Multi-step form with validation states"

越清晰地描述组件或布局，Agent 越能合理组合 shadcn/ui primitives、Tailwind utilities，以及合适的字体排版方案。

步骤 2：使用 shadcn/ui 作为组件层

根据 SKILL.md，ckm:ui-styling 是围绕 shadcn/ui 生态和 Radix UI primitives 设计的。在实践中意味着：

• 在给出 UI 结构建议时优先使用 shadcn/ui 组件（buttons、dialogs、dropdowns、forms、tables、navigation 等）
• 按照 Radix UI 标准遵循可访问性模式（焦点顺序、ARIA 属性、键盘导航）
• 产出的代码应适配 shadcn/ui 组件的“复制-粘贴即用”方式

当你希望 Agent 以 shadcn/ui 的组件模型进行思考，而不是只给出通用 HTML 片段时，就可以使用这项技能。

步骤 3：应用 Tailwind CSS 的 utility-first 样式

该技能假定你已经配置了 Tailwind CSS。你可以让 Agent：

• 推荐用于间距、排版、边框、阴影和状态样式的 Tailwind class 组合
• 使用 sm:、md:、lg: 等前缀实现响应式行为
• 通过合理命名与分组保持 JSX 代码的可读性

由于核心技术栈包含 Tailwind，这是获取更接近生产环境、可直接使用的布局与样式方案的最佳方式，而不是零散的自定义 CSS。

步骤 4：定义主题、tokens 和 dark mode

当你需要以下能力时，ckm:ui-styling 会很合适：

• 能与语义 token（如 primary、secondary、accent、muted）良好映射的配色方案
• 可沉淀为设计 tokens 的间距、圆角和排版尺度建议
• 使用 Tailwind 及所选框架主题方案实现 dark mode 变体的指导

可以让 Agent 提出 token 结构，并展示如何将其映射到 Tailwind config 和组件 props，形成一个统一的设计系统。

步骤 5：使用 canvas fonts 做视觉与海报

内置的 canvas-fonts/ 目录支持各类基于 canvas 的设计工作，例如：

• 生成与 UI 视觉一致的 hero 图或社交分享图片
• 在设计早期制作海报或简单的品牌物料

该技能本身不会提供直接绘制 canvas 的可执行脚本，但会确保你拥有一套经过筛选、带完整许可证说明的字体，可用于你自己的 canvas 流程或设计工具中。

4. 什么时候该选用这项技能

在以下场景下，优先使用 ckm:ui-styling，而不是通用编码技能：

• 你希望同时获得视觉和实现层面的建议（不仅仅是原始 JSX）
• 你在意可访问性和 UX 细节（焦点状态、ARIA、键盘导航等）
• 你的技术栈已经包含或计划引入 shadcn/ui 和 Tailwind
• 你正在定义或扩展一个设计系统，而不是只做单页静态页面

如果你只需要一个简单的静态 HTML 块，或者团队已有完全锁定的设计系统且不打算做变化，这项技能可能有些“重”。

5. 适配到你自己的仓库

上游提供的工作流只是示例，你应根据自身情况：

• 阅读 SKILL.md，理解其对 shadcn/ui、Tailwind 和 React 框架的预设
• 将推荐的结构映射到你自己的组件库和 Tailwind 配置中
• 只复用符合你品牌、可访问性标准和设计语言的模式

常见问题

ckm:ui-styling 是否绑定特定的前端框架？

该技能面向基于 React 的框架设计，并在上游 SKILL.md 中明确提到可用于 Next.js、Vite、Remix 和 Astro。默认假定你熟悉 JSX 和组件驱动的 UI 开发模式。

不用 shadcn/ui 也能用这项技能吗？

当你使用 shadcn/ui 时，ckm:ui-styling 的价值最大，因为其大部分模式和参考都与该生态和 Radix UI primitives 对齐。你也可以将思路迁移到其他组件库，但当 shadcn/ui 是你栈的一部分时，Agent 的建议会更清晰、可直接落地。

Tailwind CSS 是必须的吗？可以用其他 CSS 方案吗？

这项技能基于 Tailwind CSS 的 utility-first 样式思路。你可以将推荐的 utility classes 转换到其他系统，但这会增加额外工作量。若想获得可直接 copy-paste 的输出，建议在启用 Tailwind 的项目中搭配使用 ckm:ui-styling。

ui-styling 如何考虑可访问性？

该技能的核心技术栈包含 shadcn/ui 和 Radix UI，它们都优先考虑可访问性模式。当你需要无障碍的 dialogs、forms、tables、navigation 等交互组件，并希望在焦点管理、ARIA 属性和键盘交互方面保持一致时，可以使用 ckm:ui-styling 获得相应指导。

canvas fonts 有什么用途？可以在生产环境使用吗？

canvas-fonts/ 目录包含字体文件及对应的 -OFL.txt 许可证文档，基于 SIL Open Font License (OFL)。它们主要用于 canvas 视觉设计、海报和品牌物料。请逐一查看每款字体的 OFL 文件，确认与你项目相关的使用条款；总体来说，OFL 字体可以在符合文件所述条件的前提下用于、修改并随软件或文档一起分发。

ckm:ui-styling 是否可以替代完整的设计系统？

不能。ckm:ui-styling 的作用是基于 shadcn/ui 和 Tailwind CSS，帮助你定义并实现类似设计系统的模式——包括 tokens、组件和主题。它更适合作为你进行设计系统建设时的辅助，而不是对设计文档和 Figma 资源库的完全替代。

在哪些情况下不适合使用 ckm:ui-styling？

以下情况你可能不需要这项技能：

• 项目使用完全不同的样式方案（例如纯 CSS-in-JS、完全不使用 Tailwind），且不希望引入 Tailwind 风格的 utilities
• 未使用 React 或兼容框架
• 只需要低保真线框图，或仅有后端逻辑、对精致 UI 没有要求

哪里可以进一步了解相关工具？

上游 SKILL.md 提供了以下链接：

• shadcn/ui: https://ui.shadcn.com/llms.txt
• Tailwind CSS: https://tailwindcss.com/docs

可结合这些官方资源与 ckm:ui-styling 一起使用，更深入理解该技能所依托的组件和工具类体系。