Patterns for organizing and structuring documentation including hierarchy, navigation, and information architecture.
/plugin marketplace add lerianstudio/ring/plugin install ring-tw-team@ringThis skill inherits all available tools. When active, it can use any tool Claude has access to.
Good structure helps users find what they need quickly. Organize content by user tasks and mental models, not by internal system organization.
Documentation/
├── Welcome/ # Entry point, product overview
├── Getting Started/ # First steps, quick wins
├── Guides/ # Task-oriented documentation
│ ├── Understanding X # Conceptual
│ ├── Use Cases # Real-world scenarios
│ └── Best Practices # Recommendations
├── API Reference/ # Technical reference
│ ├── Introduction # API overview
│ └── Endpoints/ # Per-resource documentation
└── Updates/ # Changelog, versioning
| Page Type | Structure |
|---|---|
| Overview | Brief description → "In this section you will find:" → Linked list of child pages |
| Conceptual | Lead paragraph → Key characteristics (bullets) → How it works → Subtopics with --- dividers → Related concepts |
| Task-Oriented | Brief context → Prerequisites → Numbered steps → Verification → Next steps |
Use --- between major sections for visual separation.
When to use:
Don't overuse: Not every heading needs a divider.
| Pattern | Usage |
|---|---|
| Breadcrumb | Show hierarchy: Guides > Core Entities > Accounts |
| Prev/Next | Connect sequential content: [Previous: Assets] | [Next: Portfolios] |
| On-this-page | For long pages, show section links at top |
Scannable content:
Progressive disclosure:
Use tables when: Comparing items across same attributes, showing structured data (API fields), displaying options with consistent properties
Use lists when: Items don't have comparable attributes, sequence matters (steps), items have varying detail levels
| Type | When |
|---|---|
| Inline code | Short references: "Set the assetCode field..." |
| Code blocks | Complete, runnable examples |
Rules:
| Page Type | Target | Reasoning |
|---|---|---|
| Overview | 1-2 screens | Quick orientation |
| Concept | 2-4 screens | Thorough explanation |
| How-to | 1-3 screens | Task completion |
| API endpoint | 2-3 screens | Complete reference |
| Best practices | 3-5 screens | Multiple recommendations |
If >5 screens, consider splitting.
This skill should be used when the user asks about libraries, frameworks, API references, or needs code examples. Activates for setup questions, code generation involving libraries, or mentions of specific frameworks like React, Vue, Next.js, Prisma, Supabase, etc.
Applies Anthropic's official brand colors and typography to any sort of artifact that may benefit from having Anthropic's look-and-feel. Use it when brand colors or style guidelines, visual formatting, or company design standards apply.
Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code, generative art, algorithmic art, flow fields, or particle systems. Create original algorithmic art rather than copying existing artists' work to avoid copyright violations.