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.