用途:在构建设计系统、创建组件库、定义设计令牌、实现主题(浅色/深色或多品牌)或配置 Storybook 时触发;也覆盖从零搭建系统与将零散组件系统化两种场景。
主要能力与原则:令牌先于组件,所有视觉决策需先成为命名令牌;提倡组合而非配置,用子组件/插槽替代膨胀的变体属性;每个组件需配套 Storybook 故事作为活文档、无障碍测试与视觉回归基线;无障碍(ARIA 角色、键盘导航、焦点管理)视为准入要求,建议使用 Radix UI 等无头库;设计系统视为 API,重命名颜色即破坏性变更,严格语义化版本并使用 changesets 自动发布。
核心概念:令牌分三层——原始(如 --blue-500)、语义(如 --color-interactive-primary,组件只引用语义层)、组件级;主题架构以 :root 为浅色默认,[data-theme="dark"] 覆盖,prefers-color-scheme 作系统回退,品牌类只覆盖颜色;动效令牌需遵循 prefers-reduced-motion。组件 API 涵盖 CVA 变体、复合组件(React context 共享状态)与多态组件(as prop 或 AsChild)。
常见任务:用 CSS 变量定义原始/语义/深色令牌;用 CVA 构建带变体 Button;Storybook 初始化与带 controls 的故事;useTheme 实现深色模式;复合 Tabs;用 Style Dictionary 建立令牌流水线;以 exports 字段、tsup 构建和 changesets 发布与版本化组件库。
限制与注意:Tailwind 中使用 CSS 变量需方括号与 -- 前缀(如 bg-[--color-interactive-primary]);changesets publish 需干净工作目录与正确 npm 认证,否则可能以 0 退出但未发布;复合组件需在错误层级抛出明确错误信息;autodocs 的文档表格取自首个导出故事的 args,需显式定义 argTypes;任何令牌重命名都属破坏性变更。首次激活时会检查同伴技能并按需提示安装:npx skills add AbsolutelySkilled/AbsolutelySkilled --skill <name>。完整令牌命名与多品牌模式可加载 references/token-architecture.md。其他细节(如具体收费、平台支持)暂未提供。