Answer Me With HTML — One-Page Explainers from Your AI Agent
A Claude Code / agent skill that turns hard questions into one readable HTML page with SVG sequence diagrams, flow charts, ER diagrams, timelines and comparison tables. The model writes only a Markdown draft; a CLI handles layout, colors and SVG coordinates — 8x fewer output tokens and 2.6x faster than hand-writing HTML. Supports blueprint, shadcn and paper themes with light/dark mode, plus explainer video generation.
Prompt template
Install the skill with npx skills add QingYunA/answer-me-with-html, then ask hard questions naturally — the agent decides when a page is worth it and renders a clean interactive HTML explainer.
How to use
- 1Install the skill — run npx skills add QingYunA/answer-me-with-html in your agent project, or use the Claude Code plugin marketplace
- 2Ask a hard question naturally — e.g. Explain the TCP three-way handshake, Redis or Memcached for our cache?, or Map out how the modules in this repo fit together
- 3The agent writes a short Markdown draft using components like sequence, flow, tree, timeline, chart, annot, kv, callout, ask, table and code
- 4The bundled CLI (am) picks the template, lays out panels, computes SVG coordinates with dagre, applies the theme and opens a single self-contained .html file
- 5Read the page — diagrams auto-layout, tables render with checkmarks, and you can reply inline or pick decision options directly on the page
- 6For explainer videos, ask for a 3b1b-style video — the same draft plus narration beats generates an interactive player page with chapter navigation and browser-side MP4/WebM export
Pro tips
- Short one-line questions get a one-line answer — the skill only triggers when a page adds real value
- The CLI catches draft errors and returns line numbers with correct examples, so the agent fixes it in one try
- Each page is a single offline .html file with no CDN links or web fonts — easy to share
- ASD-STE100 writing check warns about long sentences, passive voice and wordy phrases; enable strict mode for formal docs
- Code blocks can quote real lines from your files with src= and lines=, so the page shows actual code, not retyped approximations
Works best with
Ratings & Reviews
Loading reviews…
Related Skills
Codebase to Course — Turn any GitHub repo into an interactive HTML course
An Agent Skill that turns any GitHub codebase into a beautiful, interactive HTML course. Give it a repo URL and it produces a self-contained course website with lessons, code walkthroughs, quizzes, and progress tracking. Perfect for onboarding new developers, creating documentation, or learning from open source projects. The course is generated as static HTML that can be hosted anywhere — GitHub Pages, Netlify, Vercel, or locally. No build step, no dependencies, just open index.html.
No AI Slop — Remove 20+ AI Writing Patterns While Preserving Your Voice
A writing editing skill that detects and removes 20+ patterns of AI-generated slop (binary contrasts, throat-clearing openers, faux-insight setups, colon reveals, dramatic fragments, importance puffery, weasel attribution, synonym cycling, fake-profound endings, and more) without flattening your personal vocabulary, cadence, humor, and imperfections.
Ecommerce Image Skills — 12 Agent Skills for Product Photography
Twelve installable Agent Skills that turn a casual product photo into platform-ready ecommerce images — Amazon main images, lifestyle scenes, infographics, A+ modules, size charts, on-model shots, sale banners, Xiaohongshu covers and Taobao detail pages. Powered by GPT Image 2.5 (Flare / Sunburst).