# Docs

> Generate or update documentation for Terrae components Use when this capability is needed.

- Skill: `tomevault-io/docs-2` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add tomevault-io/docs-2`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/docs-2/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Docs & Writing
- Author: tomevault-io (https://skillmd.com/u/tomevault-io)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/tomevault-io/docs-2

---


# 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

---
> Converted and distributed by [TomeVault](https://tomevault.io/claim/alamenai) — claim your Tome and manage your conversions.
<!-- tomevault:4.0:skill_md:2026-04-11 -->