SuperAPI AI 工具集
合作ENAI 行业资讯收藏
Skill 广场nebula-component-creation

nebula-component-creation

前端与建站

查看项目

更新于 10-15 10:52

技能介绍

用途

nebula-component-creation 用于在 Acquia Nebula 项目中创建 React 组件。它适用于以下场景：需要创建、添加或构建新组件；需要复制现有示例组件。该技能的核心思路是：始终从 examples/components/ 中的示例出发，通过复制并修改示例来生成新组件，从而保证 component.yml 结构、JSX 约定以及 Workbench 预览覆盖在各组件之间保持一致。

主要能力

  • 从示例创建新组件：在 examples/components/ 中找到相似的示例作为起点（例如用 blockquote 作为 alert 组件的基础，用 button 作为任何交互元素的基础），将示例组件文件夹复制到 src/components/<new_name>/，然后修改复制后的文件实现新组件。
  • 复制现有示例组件：当请求的组件已存在于 examples/components/ 时，可直接复制。复制时需分析依赖：读取示例组件的 index.jsx，识别所有 @/components/<name> 导入，并递归发现嵌套依赖（例如 hero 导入 two_column_text，后者又导入 heading 和 text）。然后检查 src/components/ 中已存在的组件，仅复制缺失的组件，不覆盖已有组件。
  • 预览覆盖：预览覆盖要求委托给 canvas-workbench（Workbench 组件审查流程见 canvas-workbench/references/components.md，mocks.json 规则见 canvas-component-definition/references/component-mocks.md）。当示例包含 mocks.json 时，更新复制后的 mocks.json 以保持或编写预览覆盖；若新组件需要 Workbench 内置 Default 标签之外的命名状态，则编写新的 mocks.json。决定保留、删除还是编写 mocks.json 时，遵循 canvas-component-definition/references/component-mocks.md。

使用方式

创建新组件的工作流：

  1. 在 examples/components/ 中找到相似的示例作为起点。
  2. 将示例组件文件夹复制到 src/components/<new_name>/。
  3. 按需更新或编写 mocks.json 以保持预览覆盖。
  4. 修改复制后的文件实现新组件。

示例：基于 Blockquote 创建 Alert 组件：

cp -r examples/components/blockquote src/components/alert

然后修改复制后的文件实现 Alert 组件。

复制现有示例组件的工作流：

  1. 检查是否存在示例：若请求的组件（如 hero）存在于 examples/components/，计划直接复制。
  2. 分析依赖：读取示例组件的 index.jsx，识别所有 @/components/<name> 导入。
  3. 递归发现嵌套依赖：对每个依赖检查其 index.jsx 中的额外 @/components/<name> 导入，直到发现所有依赖。
  4. 检查已存在内容：列出 src/components/ 的内容。
  5. 仅复制缺失组件：只复制 src/components/ 中尚不存在的示例组件（及其预览覆盖，若复制文件夹中包含）。不要覆盖已有组件。

示例场景：用户请求 hero 组件。

# Step 1: Check existing components in src/
ls src/components/

# Suppose output shows only: button/  global.css

# Step 2: Analyze hero dependencies (hero → two_column_text → heading, text)
# Missing components: hero, two_column_text, heading, text
# button already exists, so skip it if it were a dependency

# Step 3: Copy all missing components in one batch
cp -r examples/components/hero src/components/
cp -r examples/components/two_column_text src/components/
cp -r examples/components/heading src/components/
cp -r examples/components/text src/components/

组件文件夹结构要求：src/components/ 中的每个组件文件夹必须恰好包含两个文件：

src/components/<component-name>/
├── index.jsx      # React component implementation
└── component.yml  # Component metadata and props for Drupal Canvas

index.jsx 包含实际的 React 组件实现，component.yml 定义组件的元数据、props 和 slots（用于 Drupal Canvas）。目录名必须与 machineName 完全匹配，新组件和修改组件在 src/components/ 中使用 kebab-case（带连字符）。遗留例外：examples/components/ 可能包含遗留的 snake_case 名称，除非明确要求迁移，否则保持这些示例不变。

创建组件后验证文件夹结构：

# List all component folders and their contents
ls -la src/components/*/

# Verify each new component has both required files
ls src/components/<component-name>/index.jsx
ls src/components/<component-name>/component.yml

若组件文件夹缺少任一文件，则组件不完整且无法工作。

组件使用 @/components 导入别名，指向 src/components。复制并修改示例时，导入会自动生效。

创建或视觉修改组件后，应使其处于可审查的 Workbench 状态，并在认为任务完成前使用 nebula-component-validation。

适用场景

  • 在 Nebula 项目中新增 React 组件。
  • 从 examples/components/ 复制现成示例组件及其依赖。
  • 需要保持组件结构、命名和 Workbench 预览覆盖一致性的开发流程。

限制与注意事项

  • 每个组件文件夹必须同时包含 index.jsx 和 component.yml，缺一不可。
  • 目录名必须与 component.yml 中的 machineName 完全匹配，新组件使用 kebab-case。
  • 复制示例组件时不得覆盖 src/components/ 中已存在的组件。
  • 必须递归检查所有 @/components/ 导入，避免遗漏依赖。
  • 必须使用 @/components 导入别名，而非重复实现已有 UI 元素。
  • 预览覆盖与 mocks.json 的具体规则需参考 canvas-workbench 和 canvas-component-definition 的相关文档。
  • 关于收费、价格、平台支持范围等信息，资料中暂未提供。