gh-sevos-claude-code-marketplace-plugins-pm-assistant/skills/html-visualization/examples/README.md

HTML Visualization Skill - Examples

This directory contains example visualizations created with the html-visualization skill.

Example Requests

Here are some ways to trigger this skill:

1. Technical Documentation from Codebase

Create an HTML onboarding guide for our multi-tenant Rails system

This will:

• Analyze your codebase for tenant-related code
• Create ER diagrams of database relationships
• Include sequence diagrams of request flow
• Provide code examples from actual implementation
• Use long-page format for comprehensive reference

2. Library/Framework Tutorial

Create a slideshow presentation about React hooks

This will:

• Fetch latest React documentation via Context7 MCP
• Create slides for each hook (useState, useEffect, etc.)
• Include code examples with syntax highlighting
• Add lifecycle diagrams
• Use Reveal.js for presentation format

3. API Documentation

Create interactive API documentation for our REST endpoints

This will:

• Read routes and controllers from codebase
• Create tabbed dashboard interface
• Include request/response examples
• Add authentication flow diagrams
• Provide copy-to-clipboard for code snippets

4. Process Visualization

Visualize our customer onboarding process as an infographic

This will:

• Work from your description of the process
• Create flowcharts and swimlane diagrams
• Use vertical scroll format with large visuals
• Include minimal text, maximum visual impact
• Apply pastel color scheme throughout

5. Architecture Overview

Create an architecture visualization for our microservices system

This will:

• Analyze your codebase structure
• Create architecture diagrams showing services
• Include sequence diagrams for key flows
• Show component relationships
• Use dashboard or long-page format

Tips for Best Results

1. Be specific about format: Mention "slideshow", "dashboard", "long-page", or "infographic" if you have a preference

2. Provide context: If the skill should analyze code, make sure your request mentions the specific area (e.g., "our authentication system", "payment processing")

3. Mention diagrams: If you want specific types of diagrams, ask for them (e.g., "include an ER diagram", "show the sequence flow")

4. Specify audience: Mention if it's for onboarding, documentation, presentation, or reference

Output

The skill will create a self-contained HTML file that:

• Saved to /tmp directory with a timestamped filename (e.g., /tmp/api-docs-20250104-143022.html)
• Automatically opens in your default browser using xdg-open
• Works offline (all dependencies via CDN)
• Includes Mermaid diagrams with pastel colors
• Has syntax-highlighted code examples
• Is responsive and mobile-friendly
• Can be printed or exported to PDF
• Requires no build process - just open in browser

File Location

All generated HTML files are saved to /tmp with timestamps:

• Format: /tmp/{descriptive-name}-{timestamp}.html
• Example: /tmp/multi-tenancy-onboarding-20250104-143022.html

The files remain available in /tmp until system restart or cleanup. You can:

• Reopen them anytime: xdg-open /tmp/{filename}.html
• List recent files: ls -lt /tmp/*.html | head
• Move to a permanent location: mv /tmp/{filename}.html ~/Documents/

Customization

After the HTML is generated, you can:

• Edit content directly in the HTML file
• Adjust colors in the CSS section
• Modify Mermaid diagrams
• Add or remove sections
• Change the layout and styling

All templates are in the templates/ directory for reference.