用途：指导构建可访问、令牌驱动的 React 组件，涵盖样式方案、TypeScript 集成、组合模式，以及如何消费来自 token 技能的设计令牌。适用于创建 React 组件库、构建使用设计令牌的组件、在 React/Next.js 中搭建设计系统，以及把设计稿转换为 React 组件。
主要能力：推荐流程为——判断组件类型（基础/组合/布局）；选择样式方案（CSS Modules、Tailwind、styled-components、CSS-in-JS 或 Vanilla Extract）；用 TypeScript 定义带默认值的 props 接口；通过 CSS 自定义属性或主题上下文接入令牌；补充 ARIA、键盘处理与焦点管理等无障碍能力；最后以命名导出方式输出组件、类型与变体。技能给出了建议的目录结构（components/primitives、composite、layout 及 tokens、hooks）。
示例模式：Button 使用 forwardRef、clsx、variant/size/loading 等属性，并通过 var(--color-primary-500)、var(--spacing-md)、var(--radius-md) 等令牌实现样式；Input 支持 label、helperText、error 与前后缀装饰，使用 aria-invalid、aria-describedby 及 role="alert"；Stack 通过 as、direction、gap、align、justify 等属性映射到 flex 样式；Card 提供 padding、elevation、variant、interactive 与 CardHeader、CardBody、CardFooter 子组件；ThemeProvider 提供 light/dark/system 三种主题与 useTheme；Select 用 Context 实现 Trigger、Content、Option 的复合组件模式。
限制：该技能聚焦模式与约定，不涉及具体安装命令、版本号或运行步骤；收费、价格与平台支持信息暂未提供；代码示例仅供参考，实际项目需按所选样式方案与令牌体系调整。