component-patterns-code

该技能用于生产级 UI 组件工程，核心理念是把组件视为“带视觉输出的状态机”，而不是静态视觉元素。它提供组件状态矩阵方法：先枚举 Default、Hover、Focus、Active、Disabled、Loading、Error、Success、Skeleton、Empty、Read-only、Selected、Dragging、Overflow 等状态，再按交互、校验、内容、选中、可用性等维度建模复合状态，避免组合爆炸。组件分类涵盖操作类（Button、IconButton、FAB、SegmentedControl）、输入类（TextField、TextArea、Select、Combobox、Checkbox、RadioGroup、Toggle、Slider、DatePicker）、反馈类（Toast、Banner、Dialog、ProgressBar、Skeleton）、导航类（Tabs、Breadcrumb、Sidebar、Pagination、BottomNav）、内容类（Card、Avatar、Badge、Chip、Tooltip、Accordion）与数据类（Table、List、Grid、Chart）。无障碍方面要求键盘可达、遵循 WAI-ARIA 键盘模式、管理焦点顺序与焦点陷阱、使用语义 HTML 优先并补充 ARIA 状态（aria-expanded、aria-selected、aria-checked、aria-busy、aria-invalid、aria-disabled），图标按钮需 aria-label，动态内容用 live region 播报。设计令牌方面要求颜色、间距、字体、圆角、阴影、动效、尺寸均通过令牌消费，禁止硬编码十六进制、像素或字体栈，暗色模式通过令牌切换实现。响应式采用容器查询替代媒体查询，配合 clamp() 流式尺寸，触摸目标至少 24×24 CSS 像素，推荐 44×44。能力范围还涉及 React 的 CVA + Tailwind + Radix 实现、SwiftUI 主题系统与组件、现代 CSS 的容器查询、:has()、subgrid、@layer 等模式。限制方面：资料未提供具体安装命令、收费方式、平台支持范围与版本要求，暂未提供。