Skip to content

README.md

Latest commit

 

History

History
92 lines (55 loc) · 3.75 KB

README.md

File metadata and controls

92 lines (55 loc) · 3.75 KB

html-everything

AI skills that solve visual problems in HTML.

Manifesto

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.

This repo is a hint, not a product.

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.

What this looks like

One content script. Twenty styles. Same quarterly report, completely different visual worlds — all generated in HTML, then compiled to PPTX.

20 styles on one page

Four of these became full 5-slide decks:

Neobrutalism Chinese Ink 水墨
Neobrutalism Chinese Ink
Pitch Deck Bold Soviet Constructivism
Pitch Deck Soviet

The full example — content, HTML decks, compiled PPTX files — is in examples/q2-report/.

Skills

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.

Install

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-html

Or 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-html

Contributing

All contributions welcome — bug fixes, new skills, improvements to existing ones.

  1. Fork the repo
  2. Create a branch
  3. Make your changes
  4. 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.

License

MIT — see LICENSE.