用途
component-library 是一个面向设计系统构建的技能，用于规划组件集合的统一结构、交互状态与语义化命名。它适用于创建可复用的 Figma 组件、变体或设计库，目标是让设计组件与前端代码形成可维护的 UI 契约。
主要能力
组件解剖与结构层级
技能提出将复杂组件拆解为标准解剖槽位：容器/包裹层（处理内边距、表面背景、边框与阴影）、前置元素（图标、头像或状态徽章）、内容区（标签、描述、子元素）与后置元素（箭头、计数徽章、操作图标或快捷键标签）。
七状态矩阵
要求每个交互组件（按钮、输入框、选择器、复选框）显式设计并测试七种状态：默认/静止、悬停、聚焦/聚焦可见（2px 高对比轮廓）、按下/激活、加载（锁定交互、保留标签于 DOM）、禁用（禁用指针事件、降低对比度）以及错误/无效（使用语义危险令牌与 ARIA 错误消息）。
变体、尺寸与属性可组合性
变体分类包括层级变体（primary、secondary、outline、ghost、destructive）与尺寸梯度（sm 32px、md 40px 默认、lg 48px）。技能强调 Figma 组件变体名称应与 TypeScript 组件属性逐字匹配，并给出 ButtonProps 接口示例，包含 variant、size、isLoading、leadingIcon、trailingIcon。
无头基础与无障碍原语
建议基于成熟的无头引擎（Radix UI、React Aria 或 Floating UI）构建，避免重复实现下拉焦点管理、ARIA 弹层定位与键盘方向键导航，并确保组件通过完整键盘审计（Enter、Space、Escape、方向键导航）。
使用方式
技能以组件规范文档（如 BUTTON-SPEC.md）作为交付物格式，包含解剖与布局、变体与状态矩阵表、尺寸规格、无障碍与键盘行为等部分。同时提供验证清单，要求检查七状态覆盖、TypeScript 属性名与 Figma 变体一一对应、键盘导航与 ARIA 属性经屏幕阅读器测试、交互高度满足触摸目标最小值（默认不低于 40px），并在 Storybook 中记录视觉回归测试快照。技能还列出反模式：使用 div 模拟按钮、加载指示器导致布局位移、缺失聚焦环。
适用场景
适用于设计系统按钮统一改造等场景。资料中的示例问题为：Web 应用存在 14 种不同按钮样式、聚焦状态不一致、加载旋转器导致布局跳动；解决方案为基于 Radix UI 原语构建统一 Button 组件，含 5 种变体、3 种尺寸与固定宽度加载状态覆盖层；结果为消除 1,400 行重复 CSS，表单提交零布局位移。
限制
资料未提供该技能的具体安装命令、运行平台、收费方式或价格信息，暂未提供。