117 lines
3.5 KiB
Markdown
117 lines
3.5 KiB
Markdown
# 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.
|