by GoDiao
A cross-platform agent skill with 24 magazine-quality HTML examples — teach AI agents to generate rich, self-contained HTML output
# Add to your Claude Code skills
git clone https://github.com/GoDiao/show-htmlA cross-platform agent skill that teaches AI agents to generate self-contained, zero-dependency HTML pages for rich output — code reviews, slide decks, status reports, interactive editors, dashboards, and more.
Live demo: godiao.github.io/show-html
This project is inspired by ThariqS/html-effectiveness — a gallery of standalone HTML examples demonstrating "the unreasonable effectiveness of HTML" as a flexible agent output format. The first 20 example HTML files in this skill's assets/ are sourced from that repository under the Apache 2.0 license. Examples 21–24 are original additions.
| # | Category | Examples | |---|----------|---------| | 01–02 | Code Exploration | Three approaches comparison, visual design directions | | 03–04 | Code Review | Annotated PR diff, module dependency map | | 05–06 | Design System | Living design tokens, component variant matrix | | 07–08 | Prototyping | Animation sandbox with easing controls, clickable interaction flow | | 09–10 | Presentations | Arrow-key slide deck, SVG figure sheet | | 11–12 | Reports | Weekly status with charts, incident timeline | | 13 | Diagrams | Annotated flowchart with clickable steps | | 14–15 | Research | Feature explainer with collapsible sections, concept explainer with live visualization | | 16 | Planning | Implementation plan with milestones and risk table | | 17 | Communication | PR writeup for reviewers | | 18–20 | Editor Tools | Triage board (drag & drop), feature flag editor, prompt tuner | | 21–24 | Data & Visualization | Metrics dashboard, sortable/filterable table, system architecture (Mermaid.js), gantt timeline |
No comments yet. Be the first to share your thoughts!
Each file has a unique visual personality:
The gallery index (index.html) offers 4 themes via a floating switcher:
| Theme | Description | |-------|-------------| | Gallery (default) | Warm editorial — Playfair Display, ivory backgrounds | | Dark Exhibition | Deep charcoal with neon accents, spotlight cards | | Terminal | Black & green hacker aesthetic, Space Mono, glow effects | | Zen | Ultra-minimal white, barely-there accents, no shadows |
All 24 sub-pages inherit the selected theme via localStorage — only colors change, layout and typography remain untouched.
show-html/ directory in your agent's skill pathshow-html.skill package/show-html or /show-html:code-review etc.Open show-html/assets/index.html directly in a browser — no build step, no server needed.