Convert markdown documents into self-contained glanceable HTML pages with diagrams and drill-downs.
npx skills add https://github.com/hanh-nd/agent-kit --skill preview-hanh-nd
Please help me install this Agent Skill. Skill: preview Source: https://github.com/hanh-nd/agent-kit/tree/main/plugins/agent-kit/.gemini/skills/preview Command: npx skills add https://github.com/hanh-nd/agent-kit --skill preview-hanh-nd
<details> sections, so no information is lost. - Automatic strategy routing: Detects the document shape (design brief, implementation plan, or generic) from content signals and applies the matching layout strategy without any flags or configuration. - Mandatory Mermaid diagrams and theme toggle: Every page includes at least one rendered Mermaid v11 diagram with a validate-before-render guard, plus a light/dark theme toggle. - Use Case: Point it at a folder containing a design brief's README.md and DETAIL.md, and it writes a PREVIEW.html next to them that a teammate can grasp in seconds and expand for full detail. ## Quick Start Ask the agent to preview the markdown file or folder at a given path, and it will generate and open a PREVIEW.html in that directory.High-intent search queries and answers about installing and using this skill.
Pass the markdown file or folder path to the preview skill and it reads the content, picks a layout strategy, and writes a self-contained PREVIEW.html next to the input. The page opens automatically in your browser on macOS, Linux, or Windows.
The skill auto-detects design briefs (README plus DETAIL structure) and implementation plans (ARCHITECTURE plus TASKS or WBS markers) and renders decision cards, scope columns, and a Mermaid flow diagram. Ambiguous documents fall back to a generic section-card layout.
No. The output is one self-contained HTML file with all CSS and JavaScript inline. Only CDN resources like Google Fonts, Mermaid v11, and optional Chart.js are loaded externally, so the file opens directly in any browser.
The skill validates Mermaid code with mermaid.parse before rendering and repairs broken blocks when possible. If a block cannot be fixed, it degrades to a styled code block so the page always renders without the Mermaid error graphic.
Given a folder, PREVIEW.html is written inside that folder itself. Given a single file, it is written into the folder containing that file. Existing PREVIEW.html files are overwritten silently.
rickyanandaBuild and maintain interlinked markdown knowledge bases with YAML frontmatter and wikilinks.
HHU3637krConsolidate phase documents, capture lessons, and archive completed Specs.
vjcspyGenerate Mermaid v11+ diagrams from textual descriptions of flows and architectures.
tolgaioEnhance Markdown blog posts with structural and formatting improvements for static site generation.