用途:在用户请求创建 React 组件、UI 组件或搭建前端脚手架时,生成带 TypeScript、Hooks 和无障碍属性的现代 React 组件。生成前需先读取 config/defaults.md,并按用户配置的技术栈调整模式、导入与代码示例。
主要能力:覆盖数据展示组件(如泛型 DataTable)、表单组件(FormField)、模态/对话框(Modal,含焦点管理与 Escape 关闭)、布局组件(PageLayout)、按钮组件(forwardRef、variant/size/loading)、复合组件(Compound Components,如 Select 与 Option 通过 Context 共享状态)以及渲染属性模式(Render Props,如 Toggle)。生成流程为:确定组件类型与需求、生成 TypeScript props 接口、创建带 Hooks 的函数组件、添加无障碍属性,并在适用处加入键盘导航。
使用方式与规范:组件需导出 TypeScript props 接口;若涉及数据获取,应处理 loading/error/empty 状态;交互元素需具备键盘处理器与 aria 属性。无障碍清单包括语义化 HTML、必要时补充 ARIA role、非文本内容使用 aria-label/aria-labelledby、错误消息用 aria-describedby、焦点管理、键盘导航(Enter、Escape、方向键)、可见焦点指示、颜色对比、用 aria-busy 与 role="status" 宣布加载状态、用 role="alert" 宣布错误状态。生成后需做完整性检查,任一检查不通过应先修复再交付。
资源:assets/component-template/Component.tsx 提供最小起步模板。
限制:资料未提供安装命令、收费、价格、平台或效果等信息。