Check Component Skill

Verify that all 8 required outputs exist and are wired correctly after creating a new component.

Instructions

Given a component name (e.g., cyclone, MapCyclone), normalize it to its kebab-case slug (e.g., cyclone) and run through every check below.

Check 1: Component Source File

• File exists: src/registry/map/{slug}.tsx
• Has "use client" directive (if it uses hooks, event handlers, or browser APIs)
• Exports a named component (e.g., MapCyclone)
• Uses type not interface for type definitions
• Uses arrow functions with explicit returns
• Default values use SCREAMING_SNAKE_CASE constants above the component
• Required props come before optional props in the type definition
• Cleanup in useEffect return functions (removes layers, sources, markers, event listeners)

Check 2: Barrel Export

• src/registry/map/index.tsx has an export line for the component
• If the component exposes a control hook, it is also exported (e.g., useCycloneControl)

Check 3: Registry Entry

• registry.json has an entry in items with:
  • name in kebab-case (e.g., cyclone)
  • registryDependencies includes "https://www.terrae.dev/map.json"
  • files[0].path matches the source file path
  • files[0].target follows components/ui/map/{slug}.tsx

Check 4: Example Files

• At least one example exists: src/app/docs/_components/examples/{slug}-example.tsx
• Examples import from @/registry/map
• Examples wrap the map in <div className="h-full w-full">
• Examples use process.env.NEXT_PUBLIC_MAPBOX_ACCESS_TOKEN || "" as access token
• Examples that use hooks or event handlers have "use client"

Check 5: Documentation Page

• File exists: src/app/docs/{slug}/page.tsx
• Exports metadata with a title
• Uses DocsLayout with title, description, prev, and next
• First section is "Installation" with two CodeBlocks (base map + component)
• Basic ComponentPreview appears directly after Installation
• Every example rendered on the page has a matching getExampleSource call
• If the component has configurable props, a properties Table section exists
• All documented props match the actual component props (no missing, no extra)

Check 6: Sidebar Navigation

• src/app/docs/_components/docs-sidebar.tsx has a NavItem for the component
• The href matches /docs/{slug}
• Has badge: "new"
• Placed in the correct section ("Core" or "Features")
• The Lucide icon is imported

Check 7: Components Page

• src/app/docs/components/page.tsx has a ComponentItem entry
• The href matches /docs/{slug}
• Has isNew: true
• category matches the sidebar section
• installCommand URL matches https://www.terrae.dev/{registry-name}.json
• The Lucide icon is imported

Check 8: Changelog

• src/app/docs/changelog/page.tsx has an entry in the most recent ChangelogEntry
• Entry has title, description (with <code> tag for component name), and href
• href matches /docs/{slug}

Output Format

Present results as a checklist table:

| #   | Output             | Status | Notes                   |
| --- | ------------------ | ------ | ----------------------- |
| 1   | Component source   | pass   |                         |
| 2   | Barrel export      | pass   |                         |
| 3   | Registry entry     | fail   | Missing target path     |
| 4   | Examples           | pass   | 3 examples found        |
| 5   | Documentation page | warn   | Missing props: `scale`  |
| 6   | Sidebar navigation | pass   |                         |
| 7   | Components page    | pass   |                         |
| 8   | Changelog          | pass   |                         |

• pass: Everything correct
• warn: Works but has minor issues (e.g., missing optional prop in docs table)
• fail: Missing or broken, needs fixing

After the table, list specific issues with file paths and line numbers.

Fix Phase

If any checks have fail or warn status, fix them automatically:

1. Work through issues in check order (1–8)
2. Apply the minimal change needed for each issue
3. After all fixes, re-run the checks to confirm everything passes
4. Present the updated checklist table showing all checks as pass

If a fix requires a decision (e.g., which sidebar section to place the component in), ask the user before proceeding.