Visual Documentation Skills
Plugin Verified ActiveSkills for creating stunning visual HTML documentation with modern UI design, SVG diagrams, flowcharts, dashboards, timelines, technical documentation, and comprehensive project architecture diagrams
To empower users to easily create visually appealing and informative HTML documentation for projects, systems, and processes with modern UI design.
Features
- Generates architecture diagrams
- Creates flowcharts and process diagrams
- Builds interactive dashboards and KPI visualizations
- Produces project timelines and Gantt charts
- Outputs technical and API documentation
Use Cases
- Documenting project architecture and system design
- Visualizing complex workflows and decision trees
- Creating performance monitoring dashboards
- Planning and visualizing project schedules and roadmaps
- Generating technical specifications and API references
Non-Goals
- Creating dynamic web applications
- Interacting with external services or APIs
- Performing real-time data analysis or updates
- Managing project tasks or workflows directly
Trust
- info:Issues Attention6 issues opened, 0 closed in the last 90 days, indicating a closure rate of 0% and a notable number of open issues.
Installation
First, add the marketplace
/plugin marketplace add mhattingpete/claude-skills-marketplace/plugin install visual-documentation-plugin@mhattingpete-claude-skillsContains 5 extensions
Skill (5)
Create comprehensive HTML architecture diagrams showing data flows, business objectives, features, technical architecture, and deployment. Use when users request system architecture, project documentation, high-level overviews, or technical specifications.
Create HTML dashboards with KPI metric cards, bar/pie/line charts, progress indicators, and data visualizations. Use when users request dashboards, metrics displays, KPI visualizations, data charts, or monitoring interfaces.
Create HTML flowcharts and process diagrams with decision trees, color-coded stages, arrows, and swimlanes. Use when users request flowcharts, process diagrams, workflow visualizations, or decision trees.
Create HTML technical documentation with code blocks, API workflows, system architecture diagrams, and syntax highlighting. Use when users request technical documentation, API docs, API references, code examples, or developer documentation.
Create HTML timelines and project roadmaps with Gantt charts, milestones, phase groupings, and progress indicators. Use when users request timelines, roadmaps, Gantt charts, project schedules, or milestone visualizations.
Quality Score
VerifiedTrust Signals
Similar Extensions
Context7 Plugin
100Upstash Context7 MCP server for up-to-date documentation lookup. Pull version-specific documentation and code examples directly from source repositories into your LLM context.
Brand Landingpage
99Guides developers from brand discovery through iterative design to deployment-ready HTML via Stitch.
Accessibility Compliance
99WCAG accessibility auditing, compliance validation, UI testing for screen readers, keyboard navigation, and inclusive design
Shadcn
99UI component and design system framework. Search registries, install components as source code, and audit your project.
Product Skills
9913 production-ready product skills: product manager toolkit (RICE, PRDs), agile product owner, product strategist, UX researcher, UI design system, competitive teardown, landing page generator, SaaS scaffolder, product analytics, experiment designer, product discovery, roadmap communicator, code-to-prd, research summarizer, apple-hig-expert (Apple Human Interface Guidelines), spec-to-repo. Agent skill and plugin for Claude Code, Codex, Gemini CLI, Cursor, OpenClaw.
Gh Star History
97Visualize GitHub star history and regional breakdown as interactive charts