Docs Skill

Generate or update documentation for Terrae components.

Reference

Use src/app/docs/lines-animated/page.tsx as the reference for component documentation structure and patterns.

Instructions

1. Determine Documentation Type Ask the user what they need:

   • Component documentation page
   • Weeklog entry
   • README update
   • API reference

2. For Component Documentation Location: src/app/docs/{component-name}/page.tsx Examples Location: src/app/docs/_components/examples/{example-name}.tsx

   Structure:

   • Title and description (in DocsLayout)
   • Installation section
   • First example (directly after installation, NO title/description)
   • Additional examples (each with DocsSection title and description)
   • Animation Modes or similar feature explanations (if applicable)
   • Properties table
   • Use Cases grid (exactly 2 use cases, not more)
   • Performance Tips

3. Example Component Patterns

   • Use h-full w-full for the container div (NOT fixed heights like h-[400px])

   • The ComponentPreview wrapper handles sizing

   • Always get accessToken from environment variable

   • Example structure:

     export const ExampleName = () => {
       const accessToken = process.env.NEXT_PUBLIC_MAPBOX_ACCESS_TOKEN || ""
     
       return (
         <div className="h-full w-full">
           <Map accessToken={accessToken} center={CENTER} zoom={10}>
             {/* Component here */}
           </Map>
         </div>
       )
     }
     

4. For Weeklog Entries Location: src/app/docs/weeklog/page.tsx

   Add new entries at the top with:

   • Date
   • Summary of changes
   • Links to relevant components

5. Documentation Patterns

   • Use code blocks with proper syntax highlighting
   • Include working examples
   • Show both basic and advanced usage
   • Document all props with types and defaults
   • Add visual examples where helpful
   • Use DocsCode for inline code references
   • Use DocsLink for external links

6. Review Process

   • Show the documentation to the user before saving
   • Ask for feedback and adjustments
   • Only save after user approval