zhongwei/gh-sevos-claude-code-marketplace-plugins-pm-assistant
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
Zhongwei Li
2025-11-30 08:56:03 +08:00
commit f4f7407b2a
16 changed files with 6188 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

591
skills/html-visualization/SKILL.md Normal file
View File

@@ -0,0 +1,591 @@
---
name: html-visualization
description: Create interactive HTML visualizations for any concept - technical documentation, business processes, tutorials, architecture diagrams, or educational content. Supports multiple formats (long-page, slideshow, dashboard, infographic) with Mermaid diagrams, syntax highlighting, and responsive design. Use when user requests visual documentation, presentations, learning materials, or disposable HTML documents. Triggers include "create visualization", "HTML document", "presentation", "onboarding guide", "tutorial page", "explain with diagrams", or "interactive documentation".
tools: Glob, Grep, Read, WebFetch, WebSearch, TodoWrite, mcp__context7__resolve-library-id, mcp__context7__get-library-docs
color: purple
---
# HTML Visualization Generator
You are an elite technical communicator and visualization specialist who creates exceptional interactive HTML documents. Your mission is to transform complex concepts, systems, and processes into clear, engaging, and visually rich standalone HTML documents.
## Core Purpose
Create single-file, self-contained HTML documents that:
- Present information in a clear, visually engaging way
- Support multiple presentation formats (long-page, slideshow, dashboard, infographic)
- Include rich Mermaid diagrams with pastel color schemes
- Work offline with all dependencies loaded via CDN
- Are responsive, accessible, and print-friendly
- Require no build process or server - just open in a browser
## Your Working Process
### Phase 1: Research & Understanding
**1.1 Determine Information Source**
Ask yourself: What's the best source for this content?
- **Codebase Analysis**: When visualizing existing code, architecture, database schemas, or implementations
- Read actual source files (models, controllers, migrations, configs)
- Examine database schemas and relationships
- Review tests to understand use cases
- Trace through real code paths
- NEVER rely on potentially outdated documentation files
- **Technical Documentation**: When explaining frameworks, libraries, or APIs
- Use `mcp__context7__resolve-library-id` to find the library
- Use `mcp__context7__get-library-docs` to fetch up-to-date documentation
- Synthesize information for clarity
- **Web Research**: When covering general concepts, best practices, or industry standards
- Use WebSearch to find authoritative sources
- Use WebFetch to read specific articles or documentation
- Verify information across multiple sources
- **User Description**: When visualizing processes, concepts, or information provided by the user
- Extract key concepts and relationships
- Ask clarifying questions if needed
- Structure information logically
**1.2 Deep Analysis**
For codebase analysis:
- Map out relationships (models, classes, modules)
- Identify patterns, validations, business rules
- Extract real-world use cases from code/tests
- Understand the "why" behind design decisions
For technical documentation:
- Identify core concepts and their relationships
- Extract key examples and usage patterns
- Note common pitfalls and best practices
- Understand version-specific features
For web research:
- Synthesize information from multiple sources
- Identify authoritative, current information
- Balance breadth and depth appropriately
### Phase 2: Content Planning
**2.1 Choose Presentation Format**
Based on the content and user request, select:
- **Long-page**: Best for comprehensive guides, reference documentation, onboarding
- Scrollable sections with navigation
- Good for deep dives and reference material
- Supports progressive disclosure
- **Slideshow**: Best for presentations, step-by-step tutorials, concepts with clear progression
- Reveal.js-based slides
- One concept per slide
- Great for presenting or teaching
- **Dashboard**: Best for multi-faceted topics, API documentation, feature exploration
- Tabbed or accordion interface
- Organized by category or aspect
- Easy navigation between related topics
- **Infographic**: Best for visual overviews, process flows, high-level architecture
- Vertical flow with large diagrams
- Minimal text, maximum visual impact
- Embedded SVGs and Mermaid diagrams
**2.2 Design Content Structure**
Create a logical flow:
1. **Overview**: High-level introduction and context
2. **Core Concepts**: Main ideas, definitions, architecture
3. **Deep Dives**: Detailed explanations with examples
4. **Visual Models**: Diagrams showing relationships and flows
5. **Practical Application**: Code examples, use cases, workflows
6. **Next Steps**: Further reading, exercises, related topics
**2.3 Plan Diagrams**
Identify opportunities for visual learning:
- **Entity-Relationship Diagrams**: Database schemas, model relationships
- **Class Diagrams**: Object hierarchies and dependencies
- **Sequence Diagrams**: Request flows, interactions, processes
- **Flowcharts**: Business logic, decision trees, algorithms
- **Architecture Diagrams**: System components, microservices, layers
- **State Diagrams**: Lifecycle, workflow states, transitions
- **Mind Maps**: Concept relationships, topic organization
Always use light pastel colors:
- Primary: #FFE6E6 (light red/pink)
- Secondary: #E6F3FF (light blue)
- Tertiary: #E6FFE6 (light green)
- Quaternary: #FFF4E6 (light orange)
- Quinary: #F0E6FF (light purple)
### Phase 3: HTML Generation
**3.1 File Location and Opening**
**CRITICAL: All generated HTML files must be saved to `/tmp` directory and automatically opened in the browser.**
1. **Generate a descriptive filename** with timestamp:
- Format: `/tmp/{descriptive-name}-{timestamp}.html`
- Example: `/tmp/multi-tenancy-onboarding-20250104-143022.html`
- Use kebab-case for the descriptive name
- Timestamp format: `YYYYMMDD-HHMMSS`
2. **Write the HTML file** using the Write tool:
- Use the full path: `/tmp/{filename}.html`
- Ensure the file contains complete, valid HTML
3. **Open the file in the browser** immediately after creation:
- Use Bash tool: `xdg-open /tmp/{filename}.html`
- This will open the file in the user's default browser
- If `xdg-open` fails, inform the user of the file location
4. **Inform the user** with a clear message:
```
✅ Created visualization: /tmp/{filename}.html
🌐 Opening in your default browser...
The file has been saved and will remain available at this location.
```
**3.2 Base Structure**
Every HTML document should include:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>[Descriptive Title]</title>
<!-- Mermaid.js for diagrams -->
<script src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js"></script>
<!-- Syntax highlighting -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
<!-- Format-specific dependencies (Reveal.js for slideshows, etc.) -->
<style>
/* Embedded CSS for complete self-containment */
/* Professional typography and spacing */
/* Responsive design for all screen sizes */
/* Print styles for PDF export */
</style>
</head>
<body>
<!-- Content structure based on chosen format -->
<script>
// Initialize Mermaid with pastel theme
mermaid.initialize({
startOnLoad: true,
theme: 'base',
themeVariables: {
primaryColor: '#FFE6E6',
primaryTextColor: '#333',
primaryBorderColor: '#999',
lineColor: '#666',
secondaryColor: '#E6F3FF',
tertiaryColor: '#E6FFE6'
}
});
// Initialize syntax highlighting
hljs.highlightAll();
// Format-specific initialization
</script>
</body>
</html>
```
**3.3 Format-Specific Templates**
See the templates directory for complete examples:
- `templates/long-page-template.html` - Comprehensive documentation format
- `templates/slideshow-template.html` - Reveal.js presentation format
- `templates/dashboard-template.html` - Tabbed interface format
- `templates/infographic-template.html` - Visual-first format
**3.4 Content Quality Standards**
- **Accuracy**: Every fact, code example, and relationship must be correct
- **Clarity**: Write for intelligent readers unfamiliar with this specific topic
- **Completeness**: Cover the full picture without overwhelming
- **Visual Appeal**: Use diagrams generously and consistently
- **Practicality**: Include actionable information and real examples
- **Accessibility**: Semantic HTML, proper headings, alt text, ARIA labels
### Phase 4: Refinement
**4.1 Validate Content**
- Verify all code examples are accurate
- Ensure diagrams correctly represent relationships
- Check that explanations are clear and jargon is explained
- Confirm all CDN links are valid and use specific versions
**4.2 Test Rendering**
- HTML structure is valid
- All scripts load correctly
- Mermaid diagrams render properly
- Syntax highlighting works
- Responsive design functions across screen sizes
- Print/PDF export is clean
**4.3 Polish**
- Consistent styling throughout
- Proper heading hierarchy
- Smooth navigation
- Professional appearance
- Loading states for heavy content
## CDN Dependencies Reference
**Always use specific version numbers for reliability:**
```html
<!-- Mermaid.js -->
<script src="https://cdn.jsdelivr.net/npm/mermaid@10.9.0/dist/mermaid.min.js"></script>
<!-- Highlight.js (syntax highlighting) -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
<!-- Reveal.js (for slideshows) -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@5.0.4/dist/reveal.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@5.0.4/dist/theme/white.css">
<script src="https://cdn.jsdelivr.net/npm/reveal.js@5.0.4/dist/reveal.js"></script>
<!-- Font Awesome (icons) -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<!-- Google Fonts (typography) -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
```
## Mermaid Diagram Best Practices
**Use appropriate diagram types:**
```mermaid
%% Entity-Relationship Diagram
erDiagram
CUSTOMER ||--o{ ORDER : places
ORDER ||--|{ LINE-ITEM : contains
CUSTOMER {
string name
string email
}
%% Class Diagram
classDiagram
class Animal {
+String name
+makeSound()
}
class Dog {
+bark()
}
Animal <|-- Dog
%% Sequence Diagram
sequenceDiagram
participant User
participant API
participant Database
User->>API: Request data
API->>Database: Query
Database-->>API: Results
API-->>User: Response
%% Flowchart
flowchart TD
A[Start] --> B{Decision}
B -->|Yes| C[Action 1]
B -->|No| D[Action 2]
C --> E[End]
D --> E
%% State Diagram
stateDiagram-v2
[*] --> Draft
Draft --> Review
Review --> Published
Review --> Draft
Published --> [*]
%% Architecture Diagram
graph TB
subgraph "Frontend"
A[React App]
end
subgraph "Backend"
B[API Gateway]
C[Service 1]
D[Service 2]
end
subgraph "Data"
E[(Database)]
end
A --> B
B --> C
B --> D
C --> E
D --> E
```
**Apply pastel styling:**
```javascript
mermaid.initialize({
startOnLoad: true,
theme: 'base',
themeVariables: {
primaryColor: '#FFE6E6',
primaryTextColor: '#333',
primaryBorderColor: '#999',
lineColor: '#666',
secondaryColor: '#E6F3FF',
tertiaryColor: '#E6FFE6',
quaternaryColor: '#FFF4E6',
quinaryColor: '#F0E6FF',
fontFamily: 'Inter, sans-serif',
fontSize: '14px'
}
});
```
## Important Constraints
**MUST DO:**
- ✅ Save all HTML files to `/tmp` directory with timestamped filenames
- ✅ Open the file in browser using `xdg-open` immediately after creation
- ✅ Create self-contained HTML files (all dependencies via CDN)
- ✅ Use specific version numbers for all CDN resources
- ✅ Verify information against actual sources (code, docs, research)
- ✅ Use light pastel colors for all Mermaid diagrams
- ✅ Include proper semantic HTML and accessibility features
- ✅ Make responsive designs that work on mobile and desktop
- ✅ Add print styles for clean PDF export
- ✅ Initialize all JavaScript libraries properly
**MUST NOT DO:**
- ❌ Create markdown files (only HTML)
- ❌ Rely on potentially outdated documentation when code is available
- ❌ Include placeholder content or "TODO" items
- ❌ Use dark colors in Mermaid diagrams
- ❌ Require build tools, servers, or external files
- ❌ Make assumptions - research or ask for clarification
- ❌ Use relative file paths (all dependencies must be CDN or embedded)
## File Naming and Location
**All files MUST be created in `/tmp` directory with timestamps.**
Format: `/tmp/{descriptive-name}-{timestamp}.html`
Examples:
- `/tmp/architecture-overview-20250104-143022.html` - System architecture long-page
- `/tmp/onboarding-tutorial-20250104-143155.html` - Onboarding guide
- `/tmp/api-documentation-dashboard-20250104-150330.html` - API docs in dashboard format
- `/tmp/deployment-process-slideshow-20250104-151200.html` - Deployment presentation
- `/tmp/database-schema-infographic-20250104-152045.html` - Database ER infographic
- `/tmp/react-hooks-guide-20250104-160000.html` - React hooks tutorial
**After creating the file, ALWAYS run:**
```bash
xdg-open /tmp/{filename}.html
```
## Examples
### Example 1: Technical Onboarding from Codebase
**User request:**
```
Create an onboarding guide for our multi-tenant Rails system
```
**You would:**
1. **Research Phase:**
- Search for tenant-related models: `app/models/*tenant*.rb`
- Read tenant migration files in `db/migrate/`
- Examine `config/application.rb` for tenant config
- Review `app/controllers/concerns/tenant_scoped.rb` or similar
- Check test files for usage examples
2. **Content Planning:**
- Format: Long-page (comprehensive reference)
- Structure: Overview → Architecture → Database → Code Examples → Workflows
- Diagrams: ER diagram of tenant relationships, sequence diagram of tenant resolution, architecture diagram
3. **Generate HTML:**
- Create `/tmp/multi-tenancy-onboarding-20250104-143022.html`
- Include introduction explaining why multi-tenancy
- Add Mermaid ER diagram showing tenant tables
- Show code examples from actual models
- Include sequence diagram of request flow with tenant scoping
- Add practical exercises for new developers
- Open in browser: `xdg-open /tmp/multi-tenancy-onboarding-20250104-143022.html`
4. **Validate:**
- Verify all code examples are from actual codebase
- Test that diagrams accurately represent schema
- Ensure explanations are clear for newcomers
### Example 2: Library Documentation Visualization
**User request:**
```
Create a presentation about React hooks
```
**You would:**
1. **Research Phase:**
- Use `mcp__context7__resolve-library-id` with "react"
- Use `mcp__context7__get-library-docs` to fetch React hooks documentation
- Focus on: useState, useEffect, useContext, useMemo, useCallback
- Extract code examples and best practices
2. **Content Planning:**
- Format: Slideshow (step-by-step learning)
- Structure: Intro slide → Each hook gets 2-3 slides → Best practices → Q&A
- Diagrams: Component lifecycle flowchart, state flow diagrams
3. **Generate HTML:**
- Create `/tmp/react-hooks-presentation-20250104-150000.html` with Reveal.js
- Slide 1: Title and overview
- Slides 2-4: useState with examples and diagram
- Slides 5-7: useEffect with lifecycle diagram
- Continue for other hooks
- Final slides: Patterns and anti-patterns
- Use syntax highlighting for all code examples
- Open in browser: `xdg-open /tmp/react-hooks-presentation-20250104-150000.html`
4. **Validate:**
- Verify code examples match current React documentation
- Test slide transitions work smoothly
- Ensure diagrams clarify concepts
### Example 3: Business Process Visualization
**User request:**
```
Visualize our customer onboarding process as an infographic
```
**You would:**
1. **Research Phase:**
- Ask user to describe the process steps
- Identify key stakeholders and touchpoints
- Clarify success criteria and common issues
2. **Content Planning:**
- Format: Infographic (visual-first)
- Structure: Vertical flow with large diagrams
- Diagrams: Swimlane diagram showing roles, flowchart of process steps, state diagram
3. **Generate HTML:**
- Create `/tmp/customer-onboarding-infographic-20250104-152000.html`
- Minimal navigation (infographics are meant to scroll)
- Large, clear Mermaid swimlane diagram
- Icons for each step (Font Awesome)
- Color-coded stages using pastel colors
- Brief text annotations
- Responsive design for viewing on tablets
- Open in browser: `xdg-open /tmp/customer-onboarding-infographic-20250104-152000.html`
4. **Validate:**
- Verify process accuracy with user
- Ensure visual flow is clear and logical
- Test on different screen sizes
### Example 4: API Documentation Dashboard
**User request:**
```
Create interactive documentation for our REST API endpoints
```
**You would:**
1. **Research Phase:**
- Read route files (`config/routes.rb` or `app/routes/`)
- Examine controller actions and parameters
- Check API serializers for response formats
- Review tests for example requests/responses
- Look for OpenAPI/Swagger specs if available
2. **Content Planning:**
- Format: Dashboard (tabbed by resource)
- Structure: Tab per resource → Endpoints → Examples → Schema
- Diagrams: Architecture diagram, sequence diagrams for complex flows
3. **Generate HTML:**
- Create `/tmp/api-documentation-dashboard-20250104-160000.html`
- Tabbed interface with one tab per resource (Users, Orders, Products)
- Each tab contains: overview, endpoints table, request/response examples
- Syntax-highlighted JSON examples
- Mermaid sequence diagrams for authentication flow
- Copy-to-clipboard buttons for code examples
- Open in browser: `xdg-open /tmp/api-documentation-dashboard-20250104-160000.html`
4. **Validate:**
- Verify all endpoints match actual routes
- Test all tabs and navigation work
- Ensure examples are runnable
## Tips for Success
**Research Phase:**
- Don't skip research - accurate content is paramount
- Use the right tool: codebase (Grep/Read), libraries (Context7), concepts (WebSearch)
- When analyzing code, trace through actual execution paths
- Verify information from multiple angles
**Content Design:**
- Start with a clear outline before generating HTML
- Use progressive disclosure - don't overwhelm with everything at once
- Plan diagram placement for maximum pedagogical value
- Consider your audience's familiarity with the topic
**Visual Design:**
- Maintain consistent spacing and typography
- Use white space effectively
- Limit color palette for professional appearance
- Ensure sufficient contrast for readability
- Test on different screen sizes
**Diagrams:**
- Every diagram should clarify, not complicate
- Label all components clearly
- Use consistent notation within a document
- Place diagrams near related text
- Include diagram captions/titles
**Code Examples:**
- Use real, tested code when possible
- Syntax highlight everything
- Keep examples focused and minimal
- Include comments for clarity
- Show both good and bad patterns when teaching
**Polish:**
- Proofread all text for clarity and correctness
- Test all interactive features
- Validate HTML structure
- Check print/PDF output
- Verify all CDN resources load
You are creating materials that help people understand and master complex topics. Quality and accuracy are your top priorities. Take the time to research thoroughly, plan carefully, and execute beautifully.

116
skills/html-visualization/examples/README.md Normal file
View File

@@ -0,0 +1,116 @@
# 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.

688
skills/html-visualization/templates/dashboard-template.html Normal file
View File

@@ -0,0 +1,688 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Topic Name - Dashboard</title>
<!-- Mermaid.js -->
<script src="https://cdn.jsdelivr.net/npm/mermaid@10.9.0/dist/mermaid.min.js"></script>
<!-- Syntax highlighting -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
line-height: 1.6;
color: #333;
background: #f8f9fa;
}
/* Header */
header {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 2rem;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
header h1 {
font-size: 2rem;
margin-bottom: 0.5rem;
}
header p {
opacity: 0.9;
}
/* Container */
.container {
max-width: 1400px;
margin: 0 auto;
padding: 2rem;
}
/* Tabs */
.tabs {
display: flex;
gap: 0.5rem;
margin-bottom: 2rem;
flex-wrap: wrap;
background: white;
padding: 1rem;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.tab {
padding: 0.75rem 1.5rem;
background: transparent;
border: none;
border-radius: 6px;
cursor: pointer;
font-size: 0.95rem;
font-weight: 500;
color: #555;
transition: all 0.2s;
display: flex;
align-items: center;
gap: 0.5rem;
}
.tab:hover {
background: #f0f0f0;
color: #667eea;
}
.tab.active {
background: #667eea;
color: white;
}
.tab i {
font-size: 1rem;
}
/* Tab content */
.tab-content {
display: none;
background: white;
padding: 2rem;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
animation: fadeIn 0.3s;
}
.tab-content.active {
display: block;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
/* Typography */
h2 {
font-size: 1.8rem;
margin-bottom: 1rem;
color: #667eea;
padding-bottom: 0.5rem;
border-bottom: 2px solid #e0e0e0;
}
h3 {
font-size: 1.4rem;
margin: 2rem 0 1rem;
color: #444;
}
h4 {
font-size: 1.1rem;
margin: 1.5rem 0 0.75rem;
color: #555;
}
p {
margin-bottom: 1rem;
}
ul, ol {
margin: 1rem 0 1rem 2rem;
}
li {
margin-bottom: 0.5rem;
}
/* Code blocks */
pre {
background: #f6f8fa;
border: 1px solid #e1e4e8;
border-radius: 6px;
padding: 1rem;
overflow-x: auto;
margin: 1rem 0;
position: relative;
}
code {
background: #f6f8fa;
padding: 0.2rem 0.4rem;
border-radius: 3px;
font-family: 'Monaco', 'Courier New', monospace;
font-size: 0.9em;
}
pre code {
background: none;
padding: 0;
}
/* Copy button for code */
.copy-btn {
position: absolute;
top: 0.5rem;
right: 0.5rem;
padding: 0.25rem 0.5rem;
background: #667eea;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 0.75rem;
opacity: 0;
transition: opacity 0.2s;
}
pre:hover .copy-btn {
opacity: 1;
}
.copy-btn:hover {
background: #5568d3;
}
/* Mermaid diagrams */
.mermaid {
background: #fafafa;
border: 1px solid #e0e0e0;
border-radius: 8px;
padding: 2rem;
margin: 1.5rem 0;
text-align: center;
}
/* Info boxes */
.info-box {
background: #e6f3ff;
border-left: 4px solid #667eea;
padding: 1rem 1.5rem;
margin: 1.5rem 0;
border-radius: 4px;
}
.info-box.warning {
background: #fff4e6;
border-left-color: #ff9800;
}
.info-box.tip {
background: #e6ffe6;
border-left-color: #4caf50;
}
.info-box.error {
background: #ffe6e6;
border-left-color: #f44336;
}
.info-box h4 {
margin-top: 0;
}
/* Tables */
table {
width: 100%;
border-collapse: collapse;
margin: 1.5rem 0;
}
th, td {
padding: 0.75rem;
text-align: left;
border-bottom: 1px solid #e0e0e0;
}
th {
background: #f6f8fa;
font-weight: 600;
color: #555;
}
tr:hover {
background: #f9f9f9;
}
/* Cards */
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 1.5rem;
margin: 1.5rem 0;
}
.card {
background: #f8f9fa;
border: 1px solid #e0e0e0;
border-radius: 8px;
padding: 1.5rem;
transition: all 0.2s;
}
.card:hover {
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
transform: translateY(-2px);
}
.card h4 {
margin-top: 0;
color: #667eea;
}
/* Endpoint display */
.endpoint {
background: #f8f9fa;
border: 1px solid #e0e0e0;
border-radius: 8px;
padding: 1.5rem;
margin: 1.5rem 0;
}
.endpoint-header {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 1rem;
}
.method {
padding: 0.25rem 0.75rem;
border-radius: 4px;
font-weight: 600;
font-size: 0.85rem;
}
.method.get { background: #e6ffe6; color: #2e7d32; }
.method.post { background: #e6f3ff; color: #1565c0; }
.method.put { background: #fff4e6; color: #ef6c00; }
.method.delete { background: #ffe6e6; color: #c62828; }
.endpoint-path {
font-family: 'Monaco', monospace;
font-size: 1.1rem;
font-weight: 500;
}
/* Responsive */
@media (max-width: 768px) {
.container {
padding: 1rem;
}
.tabs {
flex-direction: column;
}
.tab {
width: 100%;
}
.tab-content {
padding: 1.5rem;
}
header h1 {
font-size: 1.5rem;
}
}
/* Print styles */
@media print {
body {
background: white;
}
header {
background: none;
color: #333;
}
.tabs {
display: none;
}
.tab-content {
display: block !important;
box-shadow: none;
page-break-inside: avoid;
margin-bottom: 2rem;
}
.copy-btn {
display: none;
}
}
</style>
</head>
<body>
<header>
<h1>API Documentation</h1>
<p>Complete reference for the REST API</p>
</header>
<div class="container">
<!-- Tabs -->
<div class="tabs">
<button class="tab active" data-tab="overview">
<i class="fas fa-home"></i> Overview
</button>
<button class="tab" data-tab="users">
<i class="fas fa-users"></i> Users
</button>
<button class="tab" data-tab="products">
<i class="fas fa-box"></i> Products
</button>
<button class="tab" data-tab="orders">
<i class="fas fa-shopping-cart"></i> Orders
</button>
<button class="tab" data-tab="auth">
<i class="fas fa-lock"></i> Authentication
</button>
</div>
<!-- Overview Tab -->
<div class="tab-content active" id="overview">
<h2>API Overview</h2>
<p>
Welcome to the API documentation. This API provides comprehensive access to all features.
</p>
<h3>Architecture</h3>
<div class="mermaid">
graph LR
A[Client] -->|HTTPS| B[API Gateway]
B --> C[Auth Service]
B --> D[User Service]
B --> E[Product Service]
B --> F[Order Service]
D --> G[(Database)]
E --> G
F --> G
style A fill:#FFE6E6
style B fill:#E6F3FF
style C fill:#E6FFE6
style D fill:#E6FFE6
style E fill:#E6FFE6
style F fill:#E6FFE6
style G fill:#FFF4E6
</div>
<h3>Quick Start</h3>
<div class="card-grid">
<div class="card">
<h4>1. Get API Key</h4>
<p>Sign up and generate your API key from the dashboard.</p>
</div>
<div class="card">
<h4>2. Make Request</h4>
<p>Include your API key in the Authorization header.</p>
</div>
<div class="card">
<h4>3. Handle Response</h4>
<p>Parse JSON responses and handle errors appropriately.</p>
</div>
</div>
<h3>Base URL</h3>
<pre><code>https://api.example.com/v1</code></pre>
<div class="info-box">
<h4>Rate Limits</h4>
<p>All endpoints are rate-limited to 100 requests per minute per API key.</p>
</div>
</div>
<!-- Users Tab -->
<div class="tab-content" id="users">
<h2>Users API</h2>
<p>Manage user accounts and profiles.</p>
<!-- List Users -->
<div class="endpoint">
<div class="endpoint-header">
<span class="method get">GET</span>
<span class="endpoint-path">/users</span>
</div>
<p><strong>Description:</strong> Retrieve a list of users.</p>
<h4>Query Parameters</h4>
<table>
<thead>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Required</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>page</code></td>
<td>integer</td>
<td>No</td>
<td>Page number (default: 1)</td>
</tr>
<tr>
<td><code>limit</code></td>
<td>integer</td>
<td>No</td>
<td>Items per page (default: 20)</td>
</tr>
</tbody>
</table>
<h4>Example Request</h4>
<pre><code class="language-bash">curl -X GET "https://api.example.com/v1/users?page=1&limit=20" \
-H "Authorization: Bearer YOUR_API_KEY"</code><button class="copy-btn" onclick="copyCode(this)">Copy</button></pre>
<h4>Example Response</h4>
<pre><code class="language-json">{
"data": [
{
"id": 1,
"name": "John Doe",
"email": "john@example.com",
"created_at": "2024-01-01T00:00:00Z"
}
],
"meta": {
"page": 1,
"total": 100
}
}</code><button class="copy-btn" onclick="copyCode(this)">Copy</button></pre>
</div>
<!-- Create User -->
<div class="endpoint">
<div class="endpoint-header">
<span class="method post">POST</span>
<span class="endpoint-path">/users</span>
</div>
<p><strong>Description:</strong> Create a new user.</p>
<h4>Request Body</h4>
<pre><code class="language-json">{
"name": "Jane Doe",
"email": "jane@example.com",
"password": "securepassword123"
}</code><button class="copy-btn" onclick="copyCode(this)">Copy</button></pre>
<div class="info-box tip">
<h4>Validation Rules</h4>
<ul>
<li>Email must be unique</li>
<li>Password must be at least 8 characters</li>
<li>Name is required</li>
</ul>
</div>
</div>
</div>
<!-- Products Tab -->
<div class="tab-content" id="products">
<h2>Products API</h2>
<p>Manage product catalog.</p>
<h3>Product Schema</h3>
<div class="mermaid">
erDiagram
PRODUCT {
int id PK
string name
string description
decimal price
int category_id FK
datetime created_at
}
CATEGORY {
int id PK
string name
}
PRODUCT }o--|| CATEGORY : belongs_to
</div>
<div class="endpoint">
<div class="endpoint-header">
<span class="method get">GET</span>
<span class="endpoint-path">/products</span>
</div>
<p><strong>Description:</strong> List all products with filtering.</p>
</div>
</div>
<!-- Orders Tab -->
<div class="tab-content" id="orders">
<h2>Orders API</h2>
<p>Process and track orders.</p>
<h3>Order Lifecycle</h3>
<div class="mermaid">
stateDiagram-v2
[*] --> Pending
Pending --> Processing : payment confirmed
Processing --> Shipped : items dispatched
Shipped --> Delivered : received
Pending --> Cancelled : cancelled
Processing --> Cancelled : cancelled
Delivered --> [*]
Cancelled --> [*]
</div>
</div>
<!-- Auth Tab -->
<div class="tab-content" id="auth">
<h2>Authentication</h2>
<p>Secure your API requests with token-based authentication.</p>
<h3>Authentication Flow</h3>
<div class="mermaid">
sequenceDiagram
participant Client
participant API
participant Auth
Client->>API: POST /auth/login
API->>Auth: Validate credentials
Auth-->>API: Generate token
API-->>Client: Return JWT token
Client->>API: Request with token
API->>Auth: Verify token
Auth-->>API: Token valid
API-->>Client: Protected resource
</div>
<h3>Obtaining a Token</h3>
<pre><code class="language-bash">curl -X POST "https://api.example.com/v1/auth/login" \
-H "Content-Type: application/json" \
-d '{
"email": "user@example.com",
"password": "yourpassword"
}'</code><button class="copy-btn" onclick="copyCode(this)">Copy</button></pre>
<div class="info-box warning">
<h4>Security Best Practices</h4>
<ul>
<li>Never share your API key</li>
<li>Use HTTPS for all requests</li>
<li>Rotate tokens regularly</li>
<li>Store tokens securely</li>
</ul>
</div>
</div>
</div>
<script>
// Initialize Mermaid with pastel theme
mermaid.initialize({
startOnLoad: true,
theme: 'base',
themeVariables: {
primaryColor: '#FFE6E6',
primaryTextColor: '#333',
primaryBorderColor: '#999',
lineColor: '#666',
secondaryColor: '#E6F3FF',
tertiaryColor: '#E6FFE6',
quaternaryColor: '#FFF4E6',
quinaryColor: '#F0E6FF',
fontFamily: 'Inter, sans-serif'
}
});
// Initialize syntax highlighting
hljs.highlightAll();
// Tab switching
const tabs = document.querySelectorAll('.tab');
const tabContents = document.querySelectorAll('.tab-content');
tabs.forEach(tab => {
tab.addEventListener('click', () => {
const targetTab = tab.dataset.tab;
// Remove active class from all tabs and contents
tabs.forEach(t => t.classList.remove('active'));
tabContents.forEach(c => c.classList.remove('active'));
// Add active class to clicked tab and corresponding content
tab.classList.add('active');
document.getElementById(targetTab).classList.add('active');
// Re-render Mermaid diagrams
mermaid.init(undefined, document.querySelectorAll('.mermaid'));
});
});
// Copy to clipboard
function copyCode(button) {
const pre = button.parentElement;
const code = pre.querySelector('code');
const text = code.textContent;
navigator.clipboard.writeText(text).then(() => {
button.textContent = 'Copied!';
setTimeout(() => {
button.textContent = 'Copy';
}, 2000);
});
}
</script>
</body>
</html>

655
skills/html-visualization/templates/infographic-template.html Normal file
View File

@@ -0,0 +1,655 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Topic Name - Infographic</title>
<!-- Mermaid.js -->
<script src="https://cdn.jsdelivr.net/npm/mermaid@10.9.0/dist/mermaid.min.js"></script>
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
line-height: 1.6;
color: #333;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
padding: 2rem 0;
}
.infographic {
max-width: 900px;
margin: 0 auto;
background: white;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
/* Header */
.header {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 4rem 2rem;
text-align: center;
position: relative;
overflow: hidden;
}
.header::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="40" fill="white" opacity="0.05"/></svg>');
background-size: 100px;
}
.header h1 {
font-size: 3rem;
font-weight: 900;
margin-bottom: 0.5rem;
position: relative;
z-index: 1;
}
.header p {
font-size: 1.3rem;
opacity: 0.95;
position: relative;
z-index: 1;
}
/* Content sections */
.section {
padding: 3rem 2rem;
position: relative;
}
.section:nth-child(even) {
background: #f8f9fa;
}
.section-number {
position: absolute;
top: 2rem;
left: 2rem;
font-size: 4rem;
font-weight: 900;
color: #667eea;
opacity: 0.1;
}
.section h2 {
font-size: 2rem;
margin-bottom: 1.5rem;
color: #667eea;
font-weight: 700;
text-align: center;
}
.section h3 {
font-size: 1.5rem;
margin: 2rem 0 1rem;
color: #444;
font-weight: 600;
}
.section p {
font-size: 1.1rem;
margin-bottom: 1rem;
text-align: center;
max-width: 700px;
margin-left: auto;
margin-right: auto;
}
/* Icon grid */
.icon-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 2rem;
margin: 2rem 0;
}
.icon-item {
text-align: center;
padding: 1.5rem;
border-radius: 12px;
transition: transform 0.3s;
}
.icon-item:hover {
transform: translateY(-5px);
}
.icon-item i {
font-size: 3rem;
margin-bottom: 1rem;
display: block;
}
.icon-item h4 {
font-size: 1.2rem;
margin-bottom: 0.5rem;
font-weight: 600;
}
.icon-item p {
font-size: 0.95rem;
color: #666;
}
/* Color variants */
.icon-item:nth-child(4n+1) { background: #FFE6E6; }
.icon-item:nth-child(4n+1) i { color: #e53935; }
.icon-item:nth-child(4n+2) { background: #E6F3FF; }
.icon-item:nth-child(4n+2) i { color: #1e88e5; }
.icon-item:nth-child(4n+3) { background: #E6FFE6; }
.icon-item:nth-child(4n+3) i { color: #43a047; }
.icon-item:nth-child(4n+4) { background: #FFF4E6; }
.icon-item:nth-child(4n+4) i { color: #fb8c00; }
/* Stats */
.stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 2rem;
margin: 2rem 0;
}
.stat {
text-align: center;
padding: 2rem 1rem;
background: white;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.stat-number {
font-size: 3rem;
font-weight: 900;
color: #667eea;
display: block;
margin-bottom: 0.5rem;
}
.stat-label {
font-size: 0.95rem;
color: #666;
text-transform: uppercase;
letter-spacing: 0.05em;
}
/* Timeline */
.timeline {
position: relative;
padding: 2rem 0;
margin: 2rem 0;
}
.timeline::before {
content: '';
position: absolute;
left: 50%;
top: 0;
bottom: 0;
width: 3px;
background: linear-gradient(180deg, #667eea 0%, #764ba2 100%);
transform: translateX(-50%);
}
.timeline-item {
position: relative;
margin-bottom: 3rem;
display: flex;
align-items: center;
}
.timeline-item:nth-child(odd) {
flex-direction: row;
}
.timeline-item:nth-child(even) {
flex-direction: row-reverse;
}
.timeline-content {
width: 45%;
padding: 1.5rem;
background: white;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.timeline-dot {
position: absolute;
left: 50%;
width: 20px;
height: 20px;
background: #667eea;
border: 4px solid white;
border-radius: 50%;
transform: translateX(-50%);
box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.2);
}
.timeline-content h4 {
font-size: 1.3rem;
margin-bottom: 0.5rem;
color: #667eea;
}
.timeline-content p {
text-align: left;
font-size: 0.95rem;
}
/* Mermaid diagrams */
.mermaid {
background: #fafafa;
border-radius: 12px;
padding: 2rem;
margin: 2rem 0;
}
/* Large diagram section */
.diagram-section {
padding: 3rem 1rem;
background: #fafafa;
}
/* CTA Section */
.cta-section {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 4rem 2rem;
text-align: center;
}
.cta-section h2 {
color: white;
font-size: 2.5rem;
margin-bottom: 1rem;
}
.cta-section p {
color: white;
font-size: 1.2rem;
margin-bottom: 2rem;
opacity: 0.95;
}
.cta-button {
display: inline-block;
padding: 1rem 2rem;
background: white;
color: #667eea;
text-decoration: none;
border-radius: 8px;
font-weight: 600;
font-size: 1.1rem;
transition: transform 0.2s;
}
.cta-button:hover {
transform: scale(1.05);
}
/* Process flow */
.process-flow {
display: flex;
justify-content: space-between;
align-items: center;
margin: 2rem 0;
gap: 1rem;
}
.process-step {
flex: 1;
text-align: center;
padding: 2rem 1rem;
background: white;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
position: relative;
}
.process-step::after {
content: '→';
position: absolute;
right: -1.5rem;
top: 50%;
transform: translateY(-50%);
font-size: 2rem;
color: #667eea;
}
.process-step:last-child::after {
display: none;
}
.process-step i {
font-size: 2.5rem;
color: #667eea;
margin-bottom: 1rem;
}
.process-step h4 {
font-size: 1.1rem;
margin-bottom: 0.5rem;
}
.process-step p {
font-size: 0.9rem;
color: #666;
}
/* Responsive */
@media (max-width: 768px) {
body {
padding: 0;
}
.infographic {
border-radius: 0;
}
.header h1 {
font-size: 2rem;
}
.header p {
font-size: 1.1rem;
}
.section {
padding: 2rem 1rem;
}
.timeline::before {
left: 20px;
}
.timeline-item {
flex-direction: row !important;
padding-left: 50px;
}
.timeline-content {
width: 100%;
}
.timeline-dot {
left: 20px;
}
.process-flow {
flex-direction: column;
}
.process-step::after {
content: '↓';
right: auto;
top: auto;
bottom: -1.5rem;
left: 50%;
transform: translateX(-50%);
}
}
/* Print styles */
@media print {
body {
background: white;
padding: 0;
}
.infographic {
box-shadow: none;
}
.section {
page-break-inside: avoid;
}
}
</style>
</head>
<body>
<div class="infographic">
<!-- Header -->
<div class="header">
<h1>The Complete Guide</h1>
<p>Understanding [Topic] in 5 Minutes</p>
</div>
<!-- Introduction Section -->
<div class="section">
<div class="section-number">01</div>
<h2>What is it?</h2>
<p>
A brief, compelling introduction to the topic. Explain in simple terms what it is and why it matters.
</p>
<div class="stats">
<div class="stat">
<span class="stat-number">85%</span>
<span class="stat-label">Improvement</span>
</div>
<div class="stat">
<span class="stat-number">10x</span>
<span class="stat-label">Faster</span>
</div>
<div class="stat">
<span class="stat-number">50K+</span>
<span class="stat-label">Users</span>
</div>
<div class="stat">
<span class="stat-number">99.9%</span>
<span class="stat-label">Uptime</span>
</div>
</div>
</div>
<!-- Key Features Section -->
<div class="section">
<div class="section-number">02</div>
<h2>Key Features</h2>
<p>The main capabilities and benefits that make this powerful.</p>
<div class="icon-grid">
<div class="icon-item">
<i class="fas fa-rocket"></i>
<h4>Fast Performance</h4>
<p>Lightning-fast processing with optimized algorithms</p>
</div>
<div class="icon-item">
<i class="fas fa-shield-alt"></i>
<h4>Secure</h4>
<p>Enterprise-grade security built in from the ground up</p>
</div>
<div class="icon-item">
<i class="fas fa-puzzle-piece"></i>
<h4>Flexible</h4>
<p>Adapts to your needs with extensive customization</p>
</div>
<div class="icon-item">
<i class="fas fa-chart-line"></i>
<h4>Scalable</h4>
<p>Grows with your business from startup to enterprise</p>
</div>
</div>
</div>
<!-- Architecture Diagram -->
<div class="section diagram-section">
<div class="section-number">03</div>
<h2>How It Works</h2>
<p>Visual overview of the architecture and data flow.</p>
<div class="mermaid">
graph TB
subgraph "User Interface"
A[Web App]
B[Mobile App]
C[Desktop App]
end
subgraph "API Layer"
D[API Gateway]
E[Load Balancer]
end
subgraph "Services"
F[Auth Service]
G[Business Logic]
H[Data Processing]
end
subgraph "Data Storage"
I[(Primary DB)]
J[(Cache)]
K[(File Storage)]
end
A --> D
B --> D
C --> D
D --> E
E --> F
E --> G
E --> H
F --> I
G --> I
G --> J
H --> K
style A fill:#FFE6E6
style B fill:#FFE6E6
style C fill:#FFE6E6
style D fill:#E6F3FF
style E fill:#E6F3FF
style F fill:#E6FFE6
style G fill:#E6FFE6
style H fill:#E6FFE6
style I fill:#FFF4E6
style J fill:#FFF4E6
style K fill:#FFF4E6
</div>
</div>
<!-- Process Flow -->
<div class="section">
<div class="section-number">04</div>
<h2>The Process</h2>
<p>Step-by-step workflow from start to finish.</p>
<div class="process-flow">
<div class="process-step">
<i class="fas fa-sign-in-alt"></i>
<h4>Step 1</h4>
<p>User initiates the process</p>
</div>
<div class="process-step">
<i class="fas fa-cogs"></i>
<h4>Step 2</h4>
<p>System processes data</p>
</div>
<div class="process-step">
<i class="fas fa-check-circle"></i>
<h4>Step 3</h4>
<p>Results are validated</p>
</div>
<div class="process-step">
<i class="fas fa-paper-plane"></i>
<h4>Step 4</h4>
<p>Output is delivered</p>
</div>
</div>
</div>
<!-- Timeline -->
<div class="section">
<div class="section-number">05</div>
<h2>Evolution Timeline</h2>
<p>How we got here and where we're going.</p>
<div class="timeline">
<div class="timeline-item">
<div class="timeline-content">
<h4>Phase 1: Foundation</h4>
<p>Built the core infrastructure and basic features</p>
</div>
<div class="timeline-dot"></div>
</div>
<div class="timeline-item">
<div class="timeline-content">
<h4>Phase 2: Growth</h4>
<p>Expanded capabilities and user base</p>
</div>
<div class="timeline-dot"></div>
</div>
<div class="timeline-item">
<div class="timeline-content">
<h4>Phase 3: Scale</h4>
<p>Enhanced performance and reliability</p>
</div>
<div class="timeline-dot"></div>
</div>
<div class="timeline-item">
<div class="timeline-content">
<h4>Phase 4: Innovation</h4>
<p>Introducing AI and advanced automation</p>
</div>
<div class="timeline-dot"></div>
</div>
</div>
</div>
<!-- CTA Section -->
<div class="cta-section">
<h2>Ready to Get Started?</h2>
<p>Join thousands of users already benefiting from this solution</p>
<a href="#" class="cta-button">Learn More</a>
</div>
</div>
<script>
// Initialize Mermaid with pastel theme
mermaid.initialize({
startOnLoad: true,
theme: 'base',
themeVariables: {
primaryColor: '#FFE6E6',
primaryTextColor: '#333',
primaryBorderColor: '#999',
lineColor: '#666',
secondaryColor: '#E6F3FF',
tertiaryColor: '#E6FFE6',
quaternaryColor: '#FFF4E6',
quinaryColor: '#F0E6FF',
fontFamily: 'Inter, sans-serif',
fontSize: '16px'
}
});
</script>
</body>
</html>

483
skills/html-visualization/templates/long-page-template.html Normal file
View File

@@ -0,0 +1,483 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Topic Name - Documentation</title>
<!-- Mermaid.js -->
<script src="https://cdn.jsdelivr.net/npm/mermaid@10.9.0/dist/mermaid.min.js"></script>
<!-- Syntax highlighting -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
line-height: 1.6;
color: #333;
background: #f8f9fa;
}
.container {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: 250px 1fr;
gap: 2rem;
}
/* Header */
header {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 3rem 2rem;
text-align: center;
}
header h1 {
font-size: 2.5rem;
margin-bottom: 0.5rem;
font-weight: 700;
}
header p {
font-size: 1.1rem;
opacity: 0.9;
}
/* Navigation */
nav {
position: sticky;
top: 2rem;
height: fit-content;
background: white;
padding: 1.5rem;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
nav h3 {
margin-bottom: 1rem;
font-size: 0.875rem;
text-transform: uppercase;
color: #667eea;
letter-spacing: 0.05em;
}
nav ul {
list-style: none;
}
nav a {
display: block;
padding: 0.5rem 0.75rem;
color: #555;
text-decoration: none;
border-radius: 4px;
transition: all 0.2s;
font-size: 0.95rem;
}
nav a:hover {
background: #f0f0f0;
color: #667eea;
padding-left: 1rem;
}
nav a.active {
background: #667eea;
color: white;
}
/* Main content */
main {
background: white;
padding: 3rem;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
margin: 2rem 0;
}
section {
margin-bottom: 4rem;
scroll-margin-top: 2rem;
}
section:last-child {
margin-bottom: 0;
}
h2 {
font-size: 2rem;
margin-bottom: 1rem;
color: #667eea;
padding-bottom: 0.5rem;
border-bottom: 2px solid #e0e0e0;
}
h3 {
font-size: 1.5rem;
margin: 2rem 0 1rem;
color: #444;
}
h4 {
font-size: 1.2rem;
margin: 1.5rem 0 0.75rem;
color: #555;
}
p {
margin-bottom: 1rem;
}
ul, ol {
margin: 1rem 0 1rem 2rem;
}
li {
margin-bottom: 0.5rem;
}
/* Code blocks */
pre {
background: #f6f8fa;
border: 1px solid #e1e4e8;
border-radius: 6px;
padding: 1rem;
overflow-x: auto;
margin: 1rem 0;
}
code {
background: #f6f8fa;
padding: 0.2rem 0.4rem;
border-radius: 3px;
font-family: 'Monaco', 'Courier New', monospace;
font-size: 0.9em;
}
pre code {
background: none;
padding: 0;
}
/* Mermaid diagrams */
.mermaid {
background: #fafafa;
border: 1px solid #e0e0e0;
border-radius: 8px;
padding: 2rem;
margin: 2rem 0;
text-align: center;
}
/* Info boxes */
.info-box {
background: #e6f3ff;
border-left: 4px solid #667eea;
padding: 1rem 1.5rem;
margin: 1.5rem 0;
border-radius: 4px;
}
.info-box.warning {
background: #fff4e6;
border-left-color: #ff9800;
}
.info-box.tip {
background: #e6ffe6;
border-left-color: #4caf50;
}
.info-box h4 {
margin-top: 0;
}
/* Tables */
table {
width: 100%;
border-collapse: collapse;
margin: 1.5rem 0;
}
th, td {
padding: 0.75rem;
text-align: left;
border-bottom: 1px solid #e0e0e0;
}
th {
background: #f6f8fa;
font-weight: 600;
color: #555;
}
tr:hover {
background: #f9f9f9;
}
/* Responsive */
@media (max-width: 768px) {
.container {
grid-template-columns: 1fr;
}
nav {
position: static;
order: -1;
}
main {
padding: 1.5rem;
}
header h1 {
font-size: 1.8rem;
}
}
/* Print styles */
@media print {
body {
background: white;
}
.container {
display: block;
}
nav {
display: none;
}
main {
box-shadow: none;
padding: 0;
}
section {
page-break-inside: avoid;
}
h2 {
page-break-after: avoid;
}
}
</style>
</head>
<body>
<header>
<h1>Topic Name</h1>
<p>A comprehensive guide for understanding and working with [feature/concept]</p>
</header>
<div class="container">
<nav>
<h3>Contents</h3>
<ul>
<li><a href="#overview">Overview</a></li>
<li><a href="#architecture">Architecture</a></li>
<li><a href="#use-cases">Use Cases</a></li>
<li><a href="#examples">Code Examples</a></li>
<li><a href="#next-steps">Next Steps</a></li>
</ul>
</nav>
<main>
<section id="overview">
<h2>Overview</h2>
<p>
Brief introduction to the topic. Explain what it is, why it matters, and what this document covers.
</p>
<div class="info-box">
<h4>Key Concepts</h4>
<ul>
<li>Concept 1: Brief explanation</li>
<li>Concept 2: Brief explanation</li>
<li>Concept 3: Brief explanation</li>
</ul>
</div>
</section>
<section id="architecture">
<h2>Architecture</h2>
<p>
High-level architecture explanation with visual diagrams.
</p>
<div class="mermaid">
graph TB
subgraph "Frontend Layer"
A[Web Client]
B[Mobile App]
end
subgraph "Application Layer"
C[API Gateway]
D[Service 1]
E[Service 2]
end
subgraph "Data Layer"
F[(Database)]
G[(Cache)]
end
A --> C
B --> C
C --> D
C --> E
D --> F
E --> F
D --> G
style A fill:#FFE6E6
style B fill:#FFE6E6
style C fill:#E6F3FF
style D fill:#E6FFE6
style E fill:#E6FFE6
style F fill:#FFF4E6
style G fill:#FFF4E6
</div>
<h3>Component Relationships</h3>
<p>Detailed explanation of how components interact...</p>
</section>
<section id="use-cases">
<h2>Use Cases</h2>
<h3>Use Case 1: Primary Workflow</h3>
<p>Description of the main use case and workflow.</p>
<div class="mermaid">
sequenceDiagram
participant User
participant Frontend
participant API
participant Database
User->>Frontend: Initiates action
Frontend->>API: POST /api/action
API->>Database: Query data
Database-->>API: Return results
API-->>Frontend: JSON response
Frontend-->>User: Display result
</div>
<h3>Use Case 2: Alternative Scenario</h3>
<p>Another common scenario and how it works...</p>
</section>
<section id="examples">
<h2>Code Examples</h2>
<h3>Basic Example</h3>
<pre><code class="language-javascript">// Example code with syntax highlighting
function example() {
const data = fetchData();
return processData(data);
}
</code></pre>
<div class="info-box tip">
<h4>Best Practice</h4>
<p>Always validate input before processing...</p>
</div>
<h3>Advanced Example</h3>
<pre><code class="language-javascript">// More complex example
class AdvancedFeature {
constructor(config) {
this.config = config;
}
async process() {
// Implementation details
}
}
</code></pre>
</section>
<section id="next-steps">
<h2>Next Steps</h2>
<p>Practical exercises and further learning resources.</p>
<h3>Practice Exercises</h3>
<ol>
<li>Exercise 1: Build a simple implementation</li>
<li>Exercise 2: Add advanced features</li>
<li>Exercise 3: Optimize performance</li>
</ol>
<h3>Further Reading</h3>
<ul>
<li>Documentation link 1</li>
<li>Documentation link 2</li>
<li>Related topics</li>
</ul>
</section>
</main>
</div>
<script>
// Initialize Mermaid with pastel theme
mermaid.initialize({
startOnLoad: true,
theme: 'base',
themeVariables: {
primaryColor: '#FFE6E6',
primaryTextColor: '#333',
primaryBorderColor: '#999',
lineColor: '#666',
secondaryColor: '#E6F3FF',
tertiaryColor: '#E6FFE6',
quaternaryColor: '#FFF4E6',
quinaryColor: '#F0E6FF',
fontFamily: 'Inter, sans-serif'
}
});
// Initialize syntax highlighting
hljs.highlightAll();
// Smooth scroll for navigation links
document.querySelectorAll('nav a').forEach(link => {
link.addEventListener('click', (e) => {
e.preventDefault();
const target = document.querySelector(link.getAttribute('href'));
target.scrollIntoView({ behavior: 'smooth' });
});
});
// Active section highlighting in nav
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const id = entry.target.getAttribute('id');
document.querySelectorAll('nav a').forEach(link => {
link.classList.remove('active');
});
document.querySelector(`nav a[href="#${id}"]`)?.classList.add('active');
}
});
}, { threshold: 0.5 });
document.querySelectorAll('section').forEach(section => {
observer.observe(section);
});
</script>
</body>
</html>

366
skills/html-visualization/templates/slideshow-template.html Normal file
View File

@@ -0,0 +1,366 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Topic Name - Presentation</title>
<!-- Reveal.js -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@5.0.4/dist/reveal.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@5.0.4/dist/theme/white.css">
<!-- Mermaid.js -->
<script src="https://cdn.jsdelivr.net/npm/mermaid@10.9.0/dist/mermaid.min.js"></script>
<!-- Syntax highlighting -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<style>
.reveal {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.reveal h1 {
font-weight: 700;
color: #667eea;
}
.reveal h2 {
font-weight: 600;
color: #764ba2;
}
.reveal h3 {
font-weight: 500;
color: #555;
}
.reveal .slides {
text-align: left;
}
.reveal .title-slide {
text-align: center;
}
.reveal code {
background: #f6f8fa;
padding: 0.2rem 0.4rem;
border-radius: 3px;
font-family: 'Monaco', 'Courier New', monospace;
}
.reveal pre {
box-shadow: 0 5px 15px rgba(0,0,0,0.15);
border-radius: 8px;
}
.reveal pre code {
background: #f6f8fa;
padding: 1rem;
max-height: 500px;
}
.reveal .mermaid {
background: #fafafa;
border-radius: 8px;
padding: 1rem;
margin: 1rem 0;
}
.reveal .info-box {
background: #e6f3ff;
border-left: 4px solid #667eea;
padding: 1rem 1.5rem;
margin: 1rem 0;
border-radius: 4px;
}
.reveal .info-box.warning {
background: #fff4e6;
border-left-color: #ff9800;
}
.reveal .info-box.tip {
background: #e6ffe6;
border-left-color: #4caf50;
}
.reveal .two-column {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
align-items: center;
}
.reveal ul {
list-style-type: none;
padding-left: 0;
}
.reveal ul li:before {
content: "▸ ";
color: #667eea;
font-weight: bold;
margin-right: 0.5rem;
}
.reveal .footer {
position: absolute;
bottom: 1rem;
left: 1rem;
font-size: 0.6em;
color: #999;
}
/* Progress bar color */
.reveal .progress {
background: rgba(102, 126, 234, 0.2);
height: 3px;
}
.reveal .progress span {
background: #667eea;
}
</style>
</head>
<body>
<div class="reveal">
<div class="slides">
<!-- Slide 1: Title -->
<section class="title-slide">
<h1>Topic Name</h1>
<h3>Subtitle or Brief Description</h3>
<p style="margin-top: 2rem; color: #666;">Presenter Name | Date</p>
</section>
<!-- Slide 2: Overview -->
<section>
<h2>Overview</h2>
<ul>
<li>Key concept 1</li>
<li>Key concept 2</li>
<li>Key concept 3</li>
<li>What you'll learn today</li>
</ul>
</section>
<!-- Slide 3: Architecture -->
<section>
<h2>Architecture Overview</h2>
<div class="mermaid">
graph LR
A[Component A] -->|data| B[Component B]
B -->|process| C[Component C]
C -->|result| D[Component D]
style A fill:#FFE6E6
style B fill:#E6F3FF
style C fill:#E6FFE6
style D fill:#FFF4E6
</div>
<p style="font-size: 0.9em; margin-top: 1rem;">
Brief explanation of the architecture...
</p>
</section>
<!-- Slide 4: Two Column Layout -->
<section>
<h2>Concept Explanation</h2>
<div class="two-column">
<div>
<h3>What it is</h3>
<ul>
<li>Point 1</li>
<li>Point 2</li>
<li>Point 3</li>
</ul>
</div>
<div>
<h3>Why it matters</h3>
<ul>
<li>Benefit 1</li>
<li>Benefit 2</li>
<li>Benefit 3</li>
</ul>
</div>
</div>
</section>
<!-- Slide 5: Code Example -->
<section>
<h2>Code Example</h2>
<pre><code class="language-javascript">// Basic implementation
function example(data) {
// Validate input
if (!data) {
throw new Error('Data required');
}
// Process
const result = data.map(item => {
return transform(item);
});
return result;
}
</code></pre>
<div class="info-box tip" style="font-size: 0.8em;">
<strong>Tip:</strong> Always validate input before processing
</div>
</section>
<!-- Slide 6: Sequence Diagram -->
<section>
<h2>Request Flow</h2>
<div class="mermaid">
sequenceDiagram
participant User
participant Frontend
participant API
participant DB
User->>Frontend: Action
Frontend->>API: Request
API->>DB: Query
DB-->>API: Data
API-->>Frontend: Response
Frontend-->>User: Display
</div>
</section>
<!-- Slide 7: Vertical Slides (nested) -->
<section>
<section>
<h2>Advanced Topics</h2>
<p>Press <strong>↓</strong> to explore subtopics</p>
<ul>
<li>Topic 1</li>
<li>Topic 2</li>
<li>Topic 3</li>
</ul>
</section>
<section>
<h3>Topic 1: Details</h3>
<p>Deep dive into the first topic...</p>
<pre><code class="language-javascript">// Example for topic 1
const topic1 = new Feature();
</code></pre>
</section>
<section>
<h3>Topic 2: Details</h3>
<p>Deep dive into the second topic...</p>
</section>
</section>
<!-- Slide 8: Best Practices -->
<section>
<h2>Best Practices</h2>
<div class="info-box">
<h3 style="margin-top: 0;">✅ Do</h3>
<ul style="font-size: 0.9em;">
<li>Follow established patterns</li>
<li>Write clear, documented code</li>
<li>Test thoroughly</li>
</ul>
</div>
<div class="info-box warning">
<h3 style="margin-top: 0;">❌ Don't</h3>
<ul style="font-size: 0.9em;">
<li>Skip validation</li>
<li>Ignore error handling</li>
<li>Hardcode values</li>
</ul>
</div>
</section>
<!-- Slide 9: Summary -->
<section>
<h2>Summary</h2>
<ul>
<li>We covered the core concepts</li>
<li>Examined architecture and flow</li>
<li>Reviewed code examples</li>
<li>Discussed best practices</li>
</ul>
<div style="margin-top: 2rem; padding: 1rem; background: #f6f8fa; border-radius: 8px;">
<strong>Key Takeaway:</strong> One sentence summary of the main point
</div>
</section>
<!-- Slide 10: Q&A -->
<section class="title-slide">
<h2>Questions?</h2>
<p style="margin-top: 2rem; font-size: 0.8em;">
Contact: email@example.com<br>
Docs: https://docs.example.com
</p>
</section>
</div>
</div>
<!-- Reveal.js -->
<script src="https://cdn.jsdelivr.net/npm/reveal.js@5.0.4/dist/reveal.js"></script>
<script>
// Initialize Mermaid with pastel theme
mermaid.initialize({
startOnLoad: true,
theme: 'base',
themeVariables: {
primaryColor: '#FFE6E6',
primaryTextColor: '#333',
primaryBorderColor: '#999',
lineColor: '#666',
secondaryColor: '#E6F3FF',
tertiaryColor: '#E6FFE6',
quaternaryColor: '#FFF4E6',
quinaryColor: '#F0E6FF',
fontFamily: 'Inter, sans-serif'
}
});
// Initialize syntax highlighting
hljs.highlightAll();
// Initialize Reveal.js
Reveal.initialize({
hash: true,
slideNumber: true,
transition: 'slide',
backgroundTransition: 'fade',
progress: true,
controls: true,
keyboard: true,
overview: true,
center: false,
touch: true,
loop: false,
rtl: false,
fragments: true,
help: true,
showNotes: false,
autoPlayMedia: null,
preloadIframes: null,
mouseWheel: false,
hideInactiveCursor: true,
hideCursorTime: 5000,
width: 1280,
height: 720,
margin: 0.04,
minScale: 0.2,
maxScale: 2.0
});
// Re-render Mermaid diagrams when slides change
Reveal.on('slidechanged', () => {
mermaid.init(undefined, document.querySelectorAll('.mermaid'));
});
</script>
</body>
</html>