documentation

Render Markdown and Mermaid diagrams in-app via CMD-I.

1|Updated Jul 23, 2024
One-click install
npx skills add https://github.com/toddmoy/protobox --skill documentation-toddmoy
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: documentation
Source: https://github.com/toddmoy/protobox/tree/main/.claude/skills/documentation
Command: npx skills add https://github.com/toddmoy/protobox --skill documentation-toddmoy

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

Produce visual, product-focused documentation inside the app to keep docs accessible, discoverable, and in sync with code.

Core Features & Use Cases

  • Mermaid diagrams: Create flow and sequence diagrams for complex flows.
  • Markdown-in-app: Render README and docs with rich formatting.
  • Diagrams alongside code: Link diagrams to code structure for clarity.

Quick Start

Enable the in-app docs view ( CMD-I ), then add diagrams and markdown to the root Readme.

Frequently Asked Questions about documentation

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I keep product documentation in sync with my codebase?

Centralize documentation in your repository's README and bundle it into the application at build time. This keeps docs as a single source of truth, automatically synced with code changes and accessible in-app via CMD-I without manual updates.

Can I render Markdown and diagrams inside my application?

Yes. This Skill renders README and Markdown files with syntax highlighting and displays Mermaid diagrams (sequence, state, flow) in a modal viewer directly in-app, making visual documentation immediately accessible to developers and product managers.

What's the best way to document complex flows and system architecture in code?

Use Mermaid diagrams alongside your codebase documentation to visualize complex flows and sequences. Link diagrams to code structure in your README, then bundle them for in-app viewing so teams see architecture and logic without leaving the application.

How do I make documentation discoverable for my team without external tools?

Store all documentation in the repository root README with Mermaid diagrams and Markdown formatting, then enable in-app access through CMD-I. This centralizes discovery in a single location teams already use, reducing tool switching.

Does this work with existing README-driven documentation workflows?

Yes. The Skill treats your root README as the authoritative documentation source, rendering it with rich formatting and bundling it at build time. It integrates seamlessly into README-driven workflows without requiring format changes.

What content formats can I include in in-app documentation?

You can include Markdown with syntax highlighting for formatted text and code, plus Mermaid diagrams for visual flows and sequences. Both formats render directly in-app with proper styling and interactivity.