Ky Markdown Rebuilder
KyrieCheungYep/ky-markdown-rebuilder
Rebuild visual documents into reliable Markdown by combining text extraction with page or screenshot alignment.
Generate rich, self-contained HTML documents instead of Markdown when output needs visual hierarchy, diagrams, or interactivity.
Install HTML Over Markdown
$ npx skills add happycapy-ai/Happycapy-skills --skill html-over-markdown -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install happycapy-ai/Happycapy-skills html-over-markdown --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/happycapy-ai/Happycapy-skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/html-over-markdown .claude/skills/html-over-markdown && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "html-over-markdown" agent skill from https://github.com/happycapy-ai/Happycapy-skills/tree/main/skills/html-over-markdown into .claude/skills/html-over-markdown/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "html-over-markdown", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/happycapy-ai/Happycapy-skills/tree/main/skills/html-over-markdownType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add happycapy-ai/Happycapy-skills --skill html-over-markdown -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install happycapy-ai/Happycapy-skills html-over-markdown --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/happycapy-ai/Happycapy-skills.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/html-over-markdown .agents/skills/html-over-markdown && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "html-over-markdown" agent skill from https://github.com/happycapy-ai/Happycapy-skills/tree/main/skills/html-over-markdown into .agents/skills/html-over-markdown/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "html-over-markdown", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add happycapy-ai/Happycapy-skills --skill html-over-markdown -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install happycapy-ai/Happycapy-skills html-over-markdown --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/happycapy-ai/Happycapy-skills.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/html-over-markdown .cursor/skills/html-over-markdown && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "html-over-markdown" agent skill from https://github.com/happycapy-ai/Happycapy-skills/tree/main/skills/html-over-markdown into .cursor/skills/html-over-markdown/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "html-over-markdown", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/happycapy-ai/Happycapy-skills.git --path skills/html-over-markdown--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add happycapy-ai/Happycapy-skills --skill html-over-markdown -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install happycapy-ai/Happycapy-skills html-over-markdown --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/happycapy-ai/Happycapy-skills.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/html-over-markdown .gemini/skills/html-over-markdown && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "html-over-markdown" agent skill from https://github.com/happycapy-ai/Happycapy-skills/tree/main/skills/html-over-markdown into .gemini/skills/html-over-markdown/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "html-over-markdown", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install happycapy-ai/Happycapy-skills html-over-markdownInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add happycapy-ai/Happycapy-skills --skill html-over-markdown -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/happycapy-ai/Happycapy-skills.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/html-over-markdown .github/skills/html-over-markdown && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "html-over-markdown" agent skill from https://github.com/happycapy-ai/Happycapy-skills/tree/main/skills/html-over-markdown into .github/skills/html-over-markdown/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "html-over-markdown", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add happycapy-ai/Happycapy-skills --skill html-over-markdown -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install happycapy-ai/Happycapy-skills html-over-markdown --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/happycapy-ai/Happycapy-skills.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/html-over-markdown .opencode/skills/html-over-markdown && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "html-over-markdown" agent skill from https://github.com/happycapy-ai/Happycapy-skills/tree/main/skills/html-over-markdown into .opencode/skills/html-over-markdown/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "html-over-markdown", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
html-over-markdown- GitHub stars
- 137
- Token cost
- ~1.7k tokens
- SKILL.md length
- 807 words
- Files
- 6 (incl. references, assets)
- Skills in repo
- 28
- Repo updated
- First seen
- Licence
- MIT
At a glance
Generate rich, self-contained HTML documents instead of Markdown when output needs visual hierarchy, diagrams, or interactivity.
- Works in 6 steps: Identify the scenario from the 5… → Read the matching section in… → Pull reusable snippets from… → …
- Implementation plans
- SKILL.md covers Why this exists, When to use vs. skip, Workflow and The 5 scenarios, plus 3 more sections
- Calls python
What it does
HTML Over Markdown is an agent skill from happycapy-ai/Happycapy-skills. Generate rich, self-contained HTML documents instead of Markdown when output needs visual hierarchy, diagrams, or interactivity. Use for specs, implementation plans, side-by-side design comparisons, PR writeups and code explainers, research and status and incident reports, slide decks, SVG flowcharts, and throwaway editors like triage boards, feature-flag editors, and prompt tuners. Prefer this skill whenever the user asks for a report, plan, or explainer they'll actually want to read — even if they don't…
Its SKILL.md is about 1.7k tokens, which your agent loads only when the skill is triggered. The skill folder holds 7 other files, including reference files and assets (for example `references/design-language.md`, `references/playbook.md` and `references/principles.md`).
It sits in Documents & Office, covering Diagrams, Markdown and Slides and decks. The repository describes itself as: A curated collection of high-quality Claude Code skills to enhance your development workflow. The licence is MIT.
When your agent uses it
- Implementation plans
- Side-by-side design comparisons
- PR writeups and code explainers
- Research and status and incident reports
Example prompts
- “ll actually want to read — even if they don”
- “/html-over-markdown”
Requirements
- Python 3
Workflow steps
6 steps, taken from the first numbered list in SKILL.md.
- Identify the scenario from the 5 families in the table below.
- Read the matching section in references/playbook.md for patterns and a prompt template.
- Pull reusable snippets from references/snippets.md (grids, diffs, SVG, sliders, export buttons).
- Start from assets/base-template.html — it has the default style already wired up. Copy it, then fill in.
- Write the result to ./outputs/.html and declare it in the block as outputs/.html`.
- Only if the HTML needs a real server (e.g., fetch, complex event handlers that fail on file://), run python -m http.server 8080…
What it can do on your machine
Read from SKILL.md and the folder at commit 9ff72fe. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
Shell commands in SKILL.md call:
python
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
HTML Over Markdown loads about 1.7k tokens when it runs, and up to ~11k if it reads all its reference files. Until then it costs about 138 tokens; SKILL.md has 807 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
Safety
Auto-check passed
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.
SKILL.md
The full file from happycapy-ai/Happycapy-skills at commit 9ff72fe, republished under its MIT licence (© happycapy-ai). 807 words, ~1,651 tokens.
Download SKILL.mdSave it as
.claude/skills/html-over-markdown/SKILL.md (or your agent's skills folder). This skill also uses 5 other files; get the full folder from GitHub.- name
- html-over-markdown
- description
- Generate rich, self-contained HTML documents instead of Markdown when output needs visual hierarchy, diagrams, or interactivity. Use for specs, implementation plans, side-by-side design comparisons, PR writeups and code explainers, research and status and incident reports, slide decks, SVG flowcharts, and throwaway editors like triage boards, feature-flag editors, and prompt tuners. Prefer this skill whenever the user asks for a report, plan, or explainer they'll actually want to read — even if they don't explicitly say "HTML".
HTML Over Markdown
Produce a single self-contained .html file as the primary output format instead of Markdown.
Why this exists
Markdown flattens spatial information — diffs, dependency graphs, side-by-side comparisons — into linear text. It has no color, no diagrams, no interaction, and people rarely read past ~100 lines. HTML trades a document the user would skim for one they would actually read.
Concrete wins over Markdown:
- Information density: tables, SVG, CSS, scripts, images — all in one file
- Visual clarity: tabs, collapsible sections, responsive layout, typographic hierarchy
- Sharing: one link, any browser, no special viewer
- Two-way interaction: sliders, toggles, editors, and a copy-back-to-prompt loop
- Expressiveness: no more ASCII diagrams or unicode color approximations
When to use vs. skip
Use this skill when the user asks for:
- A spec, plan, proposal, brainstorm, or multi-option exploration
- A PR writeup, code review, or code/feature explainer
- A report — status, research, incident, weekly
- A side-by-side comparison of designs, approaches, or benchmarks
- A slide deck or visual walkthrough
- A throwaway interactive editor (triage board, feature flags, prompt tuner)
- Anything they'd "actually want to read" — even without the word HTML
Do NOT use this skill when:
- The deliverable is a real
.pdf/.docx/.pptx/.xlsxfile → use those skills - The user wants a production web app (multi-file React/Vue/Next) → use
frontend-designorartifacts-builder - The spec is Git-tracked and teammates need clean diffs → keep Markdown
- The user wants a poster or visual artwork → use
canvas-design - The answer is a one-paragraph reply → just answer
If unsure, read references/principles.md → "What this skill is NOT for".
Workflow
- Identify the scenario from the 5 families in the table below.
- Read the matching section in
references/playbook.mdfor patterns and a prompt template. - Pull reusable snippets from
references/snippets.md(grids, diffs, SVG, sliders, export buttons). - Start from
assets/base-template.html— it has the default style already wired up. Copy it, then fill in. - Write the result to
./outputs/<descriptive-kebab-case>.htmland declare it in the<attachments>block as<file type="static">outputs/<name>.html</file>. - Only if the HTML needs a real server (e.g.,
fetch, complex event handlers that fail onfile://), runpython -m http.server 8080 --directory outputsand/app/export-port.sh 8080. For plain static pages, skip this.
The 5 scenarios
| # | Scenario | Typical trigger | Signature patterns |
|---|---|---|---|
| 1 | Spec, Planning & Exploration | "Help me plan…", "explore approaches…", "compare options" | Side-by-side grid, labeled tradeoffs, mockups, data-flow SVG |
| 2 | Code Review & PR | "Explain this PR", "review this code", "help onboard a reviewer" | Annotated diff with margin notes, severity chips, module graph |
| 3 | Design & Prototype | "Design system", "component variants", "prototype an animation" | Variant matrix, color swatches, tunable sliders + Copy-as-CSS |
| 4 | Report, Research & Explainer | "Status report", "explain how X works", "incident writeup" | TL;DR, collapsible sections, tabbed samples, SVG diagrams, timeline |
| 5 | Custom Editor | "Let me reorder…", "tune this config", "edit this prompt with live preview" | Drag-drop or forms, live preview, required: Copy-as-{JSON,Prompt,Markdown} button |
Open references/playbook.md and jump to the matching scenario for full patterns, structural templates, and prompt seeds.
Show full SKILL.md (325 more words)Show less
The 5 principles (keep these in mind throughout)
- Self-contained: one
.html, all CSS/JS/SVG inline. CDN links are OK; build steps are not. - SVG, never ASCII: any diagram — flow, sequence, architecture, dependency — must be SVG.
- Spatial, not linear: if you'd use a bullet list for it in Markdown, think again. Options go in a grid, diffs go inline with margins, dependencies go in a graph.
- Export-to-prompt: any interactive control must have a button that writes something to the clipboard (JSON, Markdown, or a natural-language prompt) so the loop closes back into Claude Code.
- Readable at a glance: responsive, quiet palette, obvious hierarchy. Optimize for "opens file → understands in 10 seconds".
Full rationale, reasoning, and the default style blueprint are in references/principles.md.
Default style and output conventions
The default aesthetic is Anthropic warm-editorial — ivory #FAF9F5 background, clay #D97757 as the single accent, serif headings with mono uppercase eyebrows, 1.5px warm-gray borders. Full tokens, typography, and signature patterns live in references/design-language.md — read it before producing output.
The starter template in assets/base-template.html has the full palette wired up (--ivory, --clay, --oat, --olive, --rust, warm grays --g100…--g700, serif/sans/mono stacks, h1 with <em> in clay, callouts with clay stripe, mono chips).
Prefer adapting this template over writing new CSS from scratch. If the user references a design system of their own, mirror its tokens. If they ask explicitly for Anthropic brand styling, optionally combine with brand-guidelines.
File naming: ./outputs/<descriptive-kebab-case>.html. Pick a name that would make sense six months later — rate-limiter-explainer.html, not output.html.
A note on philosophy
The author of the underlying methodology deliberately warned against turning this into a rigid /html template skill, because the knowing-when-and-what matters more than the generation mechanics. This skill honors that: it teaches decision-making and patterns, bundles copy-paste snippets rather than generators, and trusts you to compose. Don't over-engineer — most of the time, the right move is to start from the base template, pick a scenario pattern, and write the thing.
© happycapy-ai, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
SKILL.md and 5 other files (references, assets) in skills/html-over-markdown of happycapy-ai/Happycapy-skills.
- SKILL.md
- assets/base-template.html
- references/design-language.md
- references/playbook.md
- references/principles.md
- references/snippets.md
Open the folder on GitHubat commit 9ff72fe
Compare with similar skills
HTML Over Markdown next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| HTML Over Markdown this skillhappycapy-ai/Happycapy-skills | 137 | — | ~1.7k | Automated safety check: Pass | MIT | |
| Ky Markdown RebuilderKyrieCheungYep/ky-markdown-rebuilder | 117 | — | ~5.7k | Automated safety check: Pass | None | |
| Smalldocs Authorespressoplease/smalldocs | 209 | — | ~1.1k | Automated safety check: Pass | Custom licence | |
| PPTX To Mdsammcj/agentic-coding | 162 | — | ~1.8k | Automated safety check: Pass | Apache-2.0 | |
| Visualizedisplay-dev/visualize | 136 | — | ~7.4k | Automated safety check: Pass | MIT | |
| Markvisgeekplux/markvis | 1.6k | — | ~786 | Automated safety check: Pass | MIT |
Similar skills
Smalldocs Author
espressoplease/smalldocs
Create finished SmallDocs Markdown for an application using the SmallDocs renderer.
PPTX To Md
sammcj/agentic-coding
Convert a PPTX slide deck into per-slide markdown that preserves both the verbatim text and the meaning of embedded screenshots, diagrams and charts in their original layout positions.
Visualize
display-dev/visualize
Generate beautiful, on-brand HTML artifacts — reports, diagrams, diff reviews, slide decks, plans, recaps, dashboards.
Markvis
geekplux/markvis
A skill your agent uses when the user wants a chart of numbers in Markdown (bar, line, area, scatter, pie, hist, heatmap, funnel, waterfall, radar, gauge, sankey, treemap, dumbbell, bullet, boxplot…
Human Review
petergyang/human-review
Open an HTML file, Markdown file, or localhost page in the browser so the user can edit text directly and leave comments on specific parts, then send all edits and comments back to you.
More from happycapy-ai/Happycapy-skills
All 28 skills in this repoHappycapy Skill Creator
happycapy-ai/Happycapy-skills
Automate HappyCapy skill creation by finding and adapting existing skills from anthropics/skills repository.
360 Panorama Viewer
happycapy-ai/Happycapy-skills
Build a fully self-contained 360° equirectangular panorama viewer as a single HTML file.
Generate Image
happycapy-ai/Happycapy-skills
Generate and transform images using AI Gateway API. An agent skill from happycapy-ai/Happycapy-skills.
LLM Council
happycapy-ai/Happycapy-skills
Multi-model LLM Council with live dashboard. An agent skill from happycapy-ai/Happycapy-skills.
PPTX
happycapy-ai/Happycapy-skills
Create polished PowerPoint (.pptx) presentations directly from a topic or content description.
World Class Carousel
happycapy-ai/Happycapy-skills
Generate world-class Instagram carousel content on any topic.
Related
Categories
Questions about HTML Over Markdown
What does HTML Over Markdown do?
Generate rich, self-contained HTML documents instead of Markdown when output needs visual hierarchy, diagrams, or interactivity. HTML Over Markdown is an agent skill from happycapy-ai/Happycapy-skills. Generate rich, self-contained HTML documents instead of Markdown when output needs visual hierarchy, diagrams, or interactivity.
When should I use HTML Over Markdown?
HTML Over Markdown fits situations like: implementation plans; side-by-side design comparisons; PR writeups and code explainers; research and status and incident reports.
How do I install HTML Over Markdown in Claude Code?
Run `npx skills add happycapy-ai/Happycapy-skills --skill html-over-markdown -a claude-code`. Or copy the skill folder (skills/html-over-markdown in happycapy-ai/Happycapy-skills) into .claude/skills/html-over-markdown in your project. Claude Code loads it when a task matches its description.
How do I install HTML Over Markdown in Codex?
Run `npx skills add happycapy-ai/Happycapy-skills --skill html-over-markdown -a codex`. Or copy the skill folder (skills/html-over-markdown in happycapy-ai/Happycapy-skills) into .agents/skills/html-over-markdown in your project. Codex loads it when a task matches its description.
Can I use HTML Over Markdown in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add happycapy-ai/Happycapy-skills --skill html-over-markdown -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/html-over-markdown, .gemini/skills/html-over-markdown, .github/skills/html-over-markdown and .opencode/skills/html-over-markdown in your project.
What does HTML Over Markdown need to run?
Going by SKILL.md and its folder, HTML Over Markdown needs the command-line tools its instructions call (python). Our summary lists: Python 3.
Does HTML Over Markdown access the network?
SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.
Is HTML Over Markdown safe to install?
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.
What licence does HTML Over Markdown use?
HTML Over Markdown is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does HTML Over Markdown use?
About 1.7k tokens (SKILL.md is roughly 6.6k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 9.4k tokens, read only when the agent opens those files.
What are the alternatives to HTML Over Markdown?
Skills that share tags, products or a category with HTML Over Markdown: Ky Markdown Rebuilder (KyrieCheungYep/ky-markdown-rebuilder, 117 stars), Smalldocs Author (espressoplease/smalldocs, 209 stars), PPTX To Md (sammcj/agentic-coding, 162 stars) and Visualize (display-dev/visualize, 136 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains HTML Over Markdown?
happycapy-ai (a GitHub user) maintains it in happycapy-ai/Happycapy-skills, which has 137 GitHub stars. The repository holds 28 skills in this directory. The repository was last updated on September 3, 2026.
Source: happycapy-ai/Happycapy-skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.