AI skills that solve visual problems in HTML.
HTML is the most capable visual medium available to AI today. It's the one language where AI can think visually — iterating on layout, color, typography, and structure in real time, with instant feedback in a browser.
Every visual problem — diagrams, presentations, dashboards, reports — can be solved by starting in HTML. Not because HTML is the final format, but because it's the best thinking format. You sketch, explore, and refine in HTML, then compile to whatever the destination requires: PNG, PPTX, PDF, draw.io.
I don't expect anyone to install these skills as-is and use them forever. That's not how skills work — not really.
We all learn tools in our own way. As human beings, we always end up using things a little differently from how they were designed. You'll only use a subset of any skill. You'll want things the original author never thought of. You can't install too many skills — each one needs to earn its place in your workflow, shaped to your needs.
This repo exists so you can see one way to do it, then make your own. Fork it. Read through it. Keep the parts that resonate, cut the rest, rewrite what doesn't fit. That's the intended lifecycle.
PRs are welcome if you find something that improves the starting point for everyone — but there's no obligation. The best outcome is that this inspires you to build something better for yourself.
MIT License — do what you want with it.
One content script. Twenty styles. Same quarterly report, completely different visual worlds — all generated in HTML, then compiled to PPTX.
Four of these became full 5-slide decks:
| Neobrutalism | Chinese Ink 水墨 |
|---|---|
 |
 |
| Pitch Deck Bold | Soviet Constructivism |
 |
 |
The full example — content, HTML decks, compiled PPTX files — is in examples/q2-report/.
| Skill | What it does |
|---|---|
drawing-in-html |
Create professional diagrams — architecture, flow, component, deployment — using HTML/CSS. Brainstorm visually, explore alternatives, export to PNG. |
pptx-from-html |
Design presentations in HTML first — brainstorm content, explore 10-20 visual styles, iterate until happy — then compile to PPTX. |
Each AI coding agent has its own skills folder. Clone or fork this repo, then copy (or symlink) the skill directories you want into the right location:
| Agent | Skills folder |
|---|---|
| Claude Code | .claude/skills/ |
| GitHub Copilot | .claude/skills/ |
For example, to add drawing-in-html:
cp -r html-everything/skills/drawing-in-html ~/.claude/skills/drawing-in-htmlOr symlink if you want to stay in sync with your fork:
ln -s /path/to/html-everything/skills/drawing-in-html ~/.claude/skills/drawing-in-htmlAll contributions welcome — bug fixes, new skills, improvements to existing ones.
- Fork the repo
- Create a branch
- Make your changes
- Open a PR
If you're building a new HTML-based skill, follow the existing structure: a SKILL.md with frontmatter, plus any assets/ and references/ the skill needs.
MIT — see LICENSE.