Agent Skills › alamenai/terrae › docs

docs

GitHub

用于生成或更新Terrae组件文档，支持组件文档页、周报、README及API参考。遵循特定结构编写内容，包含安装、示例、属性表等，并在保存前需用户确认。

.claude/skills/docs/SKILL.md alamenai/terrae

Trigger Scenarios

需要创建新组件的官方文档页面更新现有组件的说明或示例撰写项目周报条目补充或修改README文件

Install

npx skills add alamenai/terrae --skill docs -g -y

More Options

Non-standard path

npx skills add https://github.com/alamenai/terrae/tree/main/.claude/skills/docs -g -y

Use without installing

npx skills use alamenai/terrae@docs

指定 Agent (Claude Code)

npx skills add alamenai/terrae --skill docs -a claude-code -g -y

安装 repo 全部 skill

npx skills add alamenai/terrae --all -g -y

预览 repo 内 skill

npx skills add alamenai/terrae --list

SKILL.md

Frontmatter

{
    "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

Determine Documentation Type Ask the user what they need:
- Component documentation page
- Weeklog entry
- README update
- API reference
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

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>
  )
}

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
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
Review Process
- Show the documentation to the user before saving
- Ask for feedback and adjustments
- Only save after user approval