Agent Skills › alamenai/terrae › docs

docs

GitHub

用于生成或更新 Terrae 项目组件文档，支持组件页面、周报及 API 参考等类型。遵循特定目录结构和 UI 模式，包含安装说明、示例代码、属性表及使用案例，并在保存前向用户展示以获取反馈。

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

Trigger Scenarios

需要创建新的组件文档页面需要更新现有组件的 README 或 API 参考需要添加或修改项目周报条目

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