Can I include Mermaid diagrams in the HTML?

Yes, the skill includes specialized support for Mermaid.js to help visualize concepts as part of the 'Insight' phase of the document journey.

Does this skill generate the CSS for me?

No, it uses a standardized base template with pre-defined CSS variables to ensure design consistency and dark mode compatibility across all generated documents.

Where are the generated HTML files stored?

Files are automatically organized and created in the 'claude_files/html/' directory within your local workspace for easy management.

Why does the skill enforce a 'Journey-first' structure?

This framework prevents information overload by prioritizing high-level insights (the Hook and Insight) while keeping supporting evidence accessible but collapsed.

HTML Journey Generator

Name: HTML Journey Generator
Author: WarrenZhu050413

byWarrenZhu050413

•

Learning & Documentation

Generates high-impact, journey-optimized HTML documents for presenting insights and technical data through a curated narrative arc.

This skill enables Claude to transform raw information into structured, visually appealing HTML reports designed for clarity and action. By utilizing a standardized workflow of Hook, Context, Insight, Evidence, and Action, it ensures that users are guided through a narrative that surfaces key findings first rather than being overwhelmed by data. It features built-in dark mode support, Mermaid diagram integration, and collapsible technical sections, making it ideal for creating professional-grade analysis reports, technical tutorials, and decision-making documents directly within the local workspace while maintaining strict CSS consistency.

Key Features

01Built-in Visualizations: Native support for Mermaid diagrams to illustrate complex concepts.

025 GitHub stars

03Standardized Narrative Framework: Guides users from context to action with a journey-first structure.

04Collapsible Technical Evidence: Hides deep technical logs or raw data to maintain readability while preserving details.

05Responsive & Dark Mode Ready: Uses template-based CSS variables to ensure consistency across environments.

06Curated Component Library: Includes pre-styled cards, two-column layouts, and priority callouts.

Use Cases

01Building interactive step-by-step tutorials for complex software workflows.

02Creating executive summaries of technical audits or code reviews.

03Generating data-driven comparison reports for architectural and tool selection decisions.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add warrenzhu050413/warren-claude-code-plugin-marketplace generating-html

For use in Claude.ai and ChatGPT

Download Skill