---
name: docs
description: Generate or update documentation for Terrae components
argument-hint: [component-name]
---

# 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:

     ```tsx
     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