CheckComponentSkill check

组件检查技能用于验证新创建的组件是否符合规范,包括源文件、导出、注册表条目、示例文件、文档页面、侧边栏导航、组件页面和变更日志等八个方面的检查。关键词包括:组件验证、源文件检查、注册表条目、文档一致性、导航正确性。

前端开发 0 次安装 0 次浏览 更新于 3/4/2026

验证所有输出在创建新组件后是否存在,并修复任何问题

检查组件技能

验证在创建新组件后所有8个必需的输出是否存在并且连接正确。

指令

给定一个组件名称(例如,cycloneMapCyclone),将其规范化为其kebab-case slug(例如,cyclone),然后按照下面的每个检查进行。

检查1:组件源文件

  • 文件存在:src/registry/map/{slug}.tsx
  • 包含"use client"指令(如果它使用钩子,事件处理程序或浏览器API)
  • 导出一个命名组件(例如,MapCyclone
  • 使用type而不是interface进行类型定义
  • 使用带有显式返回的箭头函数
  • 默认值使用SCREAMING_SNAKE_CASE常量在组件上方
  • 必需的props在类型定义中排在可选props之前
  • 在useEffect返回函数中进行清理(移除图层,源,标记,事件监听器)

检查2:桶导出

  • src/registry/map/index.tsx有一个导出行用于组件
  • 如果组件暴露了一个控制钩子,它也被导出(例如,useCycloneControl

检查3:注册表条目

  • registry.jsonitems中有条目:
    • name为kebab-case(例如,cyclone
    • registryDependencies包括"https://www.terrae.dev/map.json"
    • files[0].path与源文件路径匹配
    • files[0].target遵循components/ui/map/{slug}.tsx

检查4:示例文件

  • 至少存在一个示例:src/app/docs/_components/examples/{slug}-example.tsx
  • 示例从@/registry/map导入
  • 示例包装地图在<div className="h-full w-full">
  • 示例使用process.env.NEXT_PUBLIC_MAPBOX_ACCESS_TOKEN || ""作为访问令牌
  • 使用钩子或事件处理程序的示例有"use client"

检查5:文档页面

  • 文件存在:src/app/docs/{slug}/page.tsx
  • 导出metadata带有title
  • 使用DocsLayout带有titledescriptionprevnext
  • 第一节是"Installation"带有两个CodeBlocks(基础地图+组件)
  • 基本ComponentPreview直接出现在Installation之后
  • 页面上每个示例都有匹配的getExampleSource调用
  • 如果组件有可配置的属性,存在属性Table
  • 所有记录的属性与实际组件属性匹配(没有遗漏,没有多余)

检查6:侧边栏导航

  • src/app/docs/_components/docs-sidebar.tsx有一个NavItem用于组件
  • href匹配/docs/{slug}
  • badge: "new"
  • 放在正确的部分("Core""Features"
  • 导入了Lucide图标

检查7:组件页面

  • src/app/docs/components/page.tsx有一个ComponentItem条目
  • href匹配/docs/{slug}
  • isNew: true
  • category匹配侧边栏部分
  • installCommand URL匹配https://www.terrae.dev/{registry-name}.json
  • 导入了Lucide图标

检查8:变更日志

  • src/app/docs/changelog/page.tsx在最新的ChangelogEntry中有条目
  • 条目有titledescription(用<code>标签标记组件名称),和href
  • href匹配/docs/{slug}

输出格式

将结果呈现为检查列表表格:

| #   | 输出             | 状态 | 注释                   |
| --- | ------------------ | ------ | ----------------------- |
| 1   | 组件源码         | pass   |                         |
| 2   | 桶导出          | pass   |                         |
| 3   | 注册表条目       | fail   | 缺少目标路径      |
| 4   | 示例             | pass   | 发现3个示例        |
| 5   | 文档页面         | warn   | 缺少属性:`scale`  |
| 6   | 侧边栏导航       | pass   |                         |
| 7   | 组件页面         | pass   |                         |
| 8   | 变更日志         | pass   |                         |
  • pass: 一切正确
  • warn: 工作但有小问题(例如,文档表中缺少可选属性)
  • fail: 缺失或损坏,需要修复

在表格之后,列出具体问题及文件路径和行号。

修复阶段

如果任何检查有failwarn状态,自动修复它们:

  1. 按检查顺序(1-8)处理问题
  2. 为每个问题应用最小的更改
  3. 修复后重新运行检查以确认一切通过
  4. 呈现更新的检查列表表格,显示所有检查为pass

如果修复需要决策(例如,将组件放置在哪个侧边栏部分),在进行之前询问用户。