A simple skill for clean, single-file HTML →

Clean, single-file HTML for your coding agents.

A lightweight skill that teaches agents to output clean, zero-dependency HTML.
No npm, no CDNs, 100% offline. Built-in shadcn-inspired neutrals so reports and dashboards don't look like AI slop.

$ npx skills add QingYunA/agent-html

Explore 7 Templates Browse Components

file:///~/reports/dashboard.html

0 npm

No build step, no node_modules

100% Offline

Double-click to open anywhere, even without internet

7 Templates

Reports, dashboards, timelines, kanban, and code review

Agent Skill

Install once into Claude, Cursor, Pi, or Codex

Ready to Use

Basic Components & Vector Icons

Test the live atomic components and copy-paste snippets directly into your projects.

Buttons & Badges Matrix Interactive

All button variants, sizes (sm/md/lg), icon combinations, and semantic status pills.

STYLE VARIANTS

SIZES & ICONS

STATUS BADGES

200 OK Warning Error In Progress Neutral

Micro-Interactive Primitives Native DOM

Zero-dependency native dialog modals, collapsible details, and executive callouts.

Native <dialog> Modal

Backdrop blur, ESC key dismiss, zero JS libs

Expandable <details> Accordion ▾

Zero JavaScript required. Ideal for collapsible audit logs, trace replays, and long explanations.

Executive Callout Box Highlight critical architectural verdicts, security findings, or launch gates.

Zero-CDN Pure SVG Charts (8 Formats) Zero Libraries · Calibrated Palette

Lightweight vector data curves rendered with native SVG. 100% offline, zero JS libraries, Retina sharp, automatic dark mode adaptation.

24h Throughput (TPS) ↑ +18.4%

Latency Distribution (ms) P95

Node Health Ratio 99.8% SLA

● 65% Healthy832

● 25% Warning320

● 10% Degraded128

Traffic Ingress vs Egress

— In 1.4G ┄ Out 860M

Top Stage Bottlenecks P95 ms

DB Pool Wait280ms

LLM Stream First Token195ms

Auth Gateway JWT48ms

Asset Cache Edge12ms

Cluster Memory Watermark Normal

Timeouts: the only growing error class 57% of W39

■ Timeout■ Upstream 5xx■ Auth

Builds peak weekdays 10–12 hover a cell

Client-Side Filterable Data Table

5-line vanilla JS search logic that runs without React, Vue, or lodash.

Trace ID	Service Cluster	Latency	Memory	Status
`tr-0812-alpha`	Auth-Gateway-Core	14ms	128 MB	Healthy
`tr-0812-beta`	Inference-Worker-Pool	420ms	4.2 GB	Optimized
`tr-0812-gamma`	Async-Redis-Pipeline	1.2s	890 MB	Spike
`tr-0812-delta`	Telemetry-Ingestion	88ms	340 MB	Streaming

Tabs & Form Controls New · Copy back to agent

Accessible tabs (arrow keys) and native, labelled form controls. Whatever a reviewer fills in can be copied straight back to the agent.

3 files changed · +44 −7 lines · 1 blocker, 1 major, 2 minor.

32 Curated Engineering & DevOps Vector Icons Click any icon to copy its SVG code

Vector icons designed with stroke="currentColor" that automatically inherit font color. Zero web fonts, 100% offline.

Check

Alert

Copy

Calendar

Terminal

Filter

External

User

Chevron

Trash

Download

Branch

Commit

Pull Req

Bug

Server

Database

CPU

Activity

Shield

Lock

Refresh

Settings

Plus

Minus

File

Folder

Eye

Comment

Flag

Clock

Layout Templates

7 Common Layout Templates

Pick a layout that fits your output instead of letting models invent messy ad-hoc structures.

Single-Column Document & Executive Report

Centered 860px reading container optimized for executive reviews, audit memos, architecture RFCs, and print-to-PDF workflows. Features metadata headers, score cards, callouts, and native details accordions.

Open Live Demo

templates/en/report.html

API Usage & Cost Dashboard & Real-Time Data Grid

Wide-screen fluid layout with a 4-column KPI stat grid, pure-SVG area and bar charts, dual-filter toolbar (search + status dropdown), and a native modal dialog for create/edit operations.

Open Live Demo

templates/en/dashboard.html

Master-Detail Split Workbench (100vh)

App-like layout occupying full viewport height without page scroll. Left sidebar filters items, right detail pane updates dynamically with 3-column property grids, verdict actions, and syntax-styled code blocks.

Open Live Demo

templates/en/inspector.html

DeepSeek vs GPT-4o Comparison & A/B Eval Matrix

Two-column split view (Baseline vs. Challenger) with verdict callout, parameter specs, sample payload outputs, and a quantitative delta matrix table. Perfect for model evals and prompt revisions.

Open Live Demo

templates/en/compare.html

Vertical Service Recovery Timeline & Incident Postmortem

High-density single-track vertical timeline with semantic status nodes (Error, Warning, Success, Info), exact timestamps, operator tags, expandable diagnosis logs, and one-click "Copy as Markdown" export.

Open Live Demo

templates/en/timeline.html

Triage & Agile Kanban Board (Native Drag & Drop)

4-column task categorization board (Backlog, Progress, Blocked, Done). Zero external dependencies, pure HTML5 drag-and-drop. Features a "Copy Triage Decisions to Agent" button to close the interactive human-in-the-loop workflow.

Open Live Demo

templates/en/kanban.html

Diff-Based Code Review & Per-File Verdicts

Paste raw git diff output and it renders as a line-numbered unified diff. Findings are pinned to exact lines with severity and suggested changes, each file gets a verdict, and one click copies the whole review back to the agent.

Open Live Demo

templates/en/review.html

Why This Approach

Why not a CDN, or just let the AI freestyle CSS?

Three common ways agents ship HTML, and how they hold up.

Option A: External CDN

Pull in Tailwind CDN

Agents love to drop in <script src="cdn.tailwindcss.com">.

✕ Blank page offline or on an intranet
✕ Visible lag and layout flash on open
✕ Easily blocked by Content Security Policy
✕ Old files break once the CDN link dies

Option B: Freestyle CSS

Let the AI hand-write CSS

Without a spec, improvised styles usually look rough.

✕ Harsh borders, chaotic spacing, no taste
✕ Cramped tables, unreadable on mobile
✕ No dark mode, glaring at night
✕ Random class names every run

Option C: agent-html (Recommended)

Lean native CSS

About 75 lines of CSS variables and a handful of base classes.

✓ Fully offline single file, opens instantly
✓ Zero dependencies, no build step
✓ Clean shadcn-style neutral palette
✓ Smooth built-in light / dark switching

Example Prompts

Tested Agent Prompts

A few prompts you can give your coding agent to get clean visual HTML instead of a wall of markdown.

"Don't write a wall of markdown. Give me a clean single-file visual report for this architecture review, including score cards, collapsible findings, and print-to-PDF styles."

"Record an incident postmortem and timeline chronicle for today's gateway outage. Single-track vertical timeline with timestamps, operator tags, and copy-as-markdown."

"Give me a 4-column triage kanban board to categorize these 20 bug tickets. Support native drag-and-drop and a button to copy sorted decisions back to terminal."

"Generate an interactive metrics dashboard for our API latency and throughput. Include 4 KPI stat cards, real-time client-side table filtering, and an action modal."

"Build a side-by-side prompt comparison matrix evaluating Model A vs Model B across 50 benchmark cases. Include a verdict banner and quantitative delta table."

"Create a master-detail trace log viewer for this JSONL debugging session. Left sidebar filters cases, right detail pane displays formatted payloads with a copy button."

"Review this PR diff and turn it into a visual review page. I want a verdict per file and line-level findings I can copy back to you to fix."

"Make me a pre-release checklist page: backups, feature flags, rollback drill, alerts, change ticket. Let me tick items, add an owner and notes, then copy the result back to you."

# 1. Install via skills.sh ecosystem (supports Claude Code, Pi, Cursor, Codex, etc.)
npx skills add QingYunA/agent-html -g

# 2. Or use the standalone CLI to extract templates anywhere
npx agent-html template dashboard > dashboard.html
npx agent-html check dashboard.html