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 6 Templates Browse Components

0 npm

No build step, no node_modules

100% Offline

Double-click to open anywhere, even without internet

6 Templates

Common layouts: reports, dashboards, timelines, and kanban

Agent Skill

Install once into Claude, Cursor, Pi, or Codex

Layout Templates

6 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

Analytics 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

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

Side-by-Side 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

Vertical Event 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

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

Backlog (2)

TASK-401: V1 deprecation

In Progress (2)

TASK-403: DNS dynamic routing

Blocked (1)

TASK-405: TCP handshake timeout

Done (3)

TASK-406: 3x stress baseline

UI Snippets

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 (6 Core 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

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

24 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

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."

# 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