mcpField
C
component-engineering

component-engineering

github.com/igorwarzocha开发12298 次安装38 周前更新
代码仓库

关于 component-engineering

component-engineering 是用于构建和审查无障碍、可组合 React 组件的技能。它通过规范文档和创建、审查工作流，指导架构、语义、键盘行为与样式设计。

主要功能

  1. 01React 组件创建流程
  2. 02组件审查流程
  3. 03分类与语义元素选择
  4. 04键盘支持和无障碍检查
  5. 05组合设计与 asChild 指引
  6. 06使用 data 属性和 cn 处理样式

适用场景

  1. 01创建可复用的 React 组件
  2. 02审查组件的无障碍设计
  3. 03检查组件组合方式与样式

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/igorwarzocha/opencode-workflows --skill component-engineering

安装后在 Claude Code 中输入/component-engineering确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

references/
accessibility.md
composition.md
distribution.md
patterns.md
styling.md
taxonomy.md

详细介绍

组件工程规范

本技能体现了构建专业、易访问且可组合的 React 制品的正式标准。 你必须阅读以下参考文件以履行职责： - **架构**：`composition.md` - asChild、分类体系、组合。 - **无障碍性**：`accessibility.md` - 键盘映射、ARIA、焦点管理。 - **样式**：`styling.md` - `cn` 工具、数据属性、CVA、设计令牌。 ### /component-review [file] 严格依据规范的各项支柱审查文件。 1. 在继续之前，你必须阅读 `references/` 目录中的所有参考文件。 2. 使用 `taxonomy.md` 对制品进行分类。 3. 评估**无障碍性**：你必须依据 `accessibility.md` 检查键盘支持和语义化 HTML。 4. 评估**架构**：你必须依据 `composition.md` 检查是否存在单体模式，而非组合模式。 5. 评估**样式**：检查是否使用 `data-slot` 以及是否展开传递 props，并依据 `styling.md` 进行核查。 ### /component-create [name] [intent] 遵循“架构优先”工作流构建新制品。 1. 你必须阅读相关的 `references/*.md` 文件，以选择正确的模式。 2. 选择**分类体系**类型。 3. 选择基础**语义元素**或**无头原语**。 4. 你必须实现**键盘映射**。 5. 如果组件是激活器/触发器，你必须支持 **asChild**。 6. 你必须公开**数据属性**（`data-state`、`data-slot`）。 7. 使用 `cn` 工具合并类名。

评论

支持 Markdown