Plugin Claude Code
HTML-output skills for Claude Code — 17 patterns that produce self-contained HTML artifacts instead of long-form markdown when HTML is the better surface.
53 1mo ago A
tokens not measured
original MIT
Instructions file
Instructions for f-labs-io/agent-html-skills, covering agent-html-skills — conventions for claude code and versioning (required).
53 1mo ago A 404 tokens
original MIT
html-skills
03Plugin Claude Code
Seventeen HTML-output skills that help Claude Code reach for self-contained HTML artifacts (specs, diagrams, dashboards, prototypes, decks, mind maps, design tokens, comparison matrices, testing checklists, and more) instead of long-form markdown when HTML is the better surface.
53 1mo ago A
tokens not measured
original MIT
Skill Claude CodeCodex
Create HTML system architecture diagrams — microservice maps, dependency graphs, deployment topologies, data ownership maps, integration diagrams. Useful during incidents, design reviews, onboarding, and capacity planning. Use whenever the user wants to visualize, document, or explain how a system fits together …
53 1mo ago A 100 tokens
original MIT
Skill Claude CodeCodex
TRIGGER: about to populate AskUserQuestion options with preview: content for any visual / UX / layout / screen / component / mockup comparison. STOP and ask first: "Quick inline chip comparison, or a full HTML grid you can open in the browser?" Chips flatten color, type, density, motion, and interaction into…
53 1mo ago A 235 tokens
original MIT
Skill Claude CodeCodex
Generate HTML artifacts for code review, PR explanation, and codebase understanding — rendered diffs with inline annotations, severity-coded findings, refactor risk maps, before/after migration views, and subsystem walkthroughs. Use whenever the user wants to review, explain, or understand a PR, refactor, codebase…
53 1mo ago A 108 tokens
original MIT
Skill Claude CodeCodex
TRIGGER: about to populate AskUserQuestion options with preview: content for any comparison heavier than 2-3 short text labels (>2 axes, >3 candidates, or weighted/scored). STOP and ask first: "Quick inline chip per option, or a full HTML matrix with weighted columns and live re-ranking?" No carve-out for "simulate"…
53 1mo ago A 228 tokens
original MIT
Skill Claude CodeCodex
Build HTML data explorers for CSV, JSON, log, and event data — filterable tables, faceted search, inline charts, timeline scrubbing, A/B test result dashboards. Use whenever the user has a dataset to explore, browse, filter, chart, facet, or analyze — especially for ad-hoc analysis where opening a heavy BI tool is…
53 1mo ago A 149 tokens
original MIT
Skill Claude CodeCodex
TRIGGER: about to populate AskUserQuestion options with preview: content for any visual UI / screen / layout / component / animation comparison. STOP and ask first: "Quick inline chip comparison, or a full HTML prototype you can open in the browser?" Chips flatten color, type, spacing, and motion into monospace; HTML…
53 1mo ago A 216 tokens
original MIT
Skill Claude CodeCodex
Showcase design tokens — color palettes, type scales, spacing systems, radius scales, shadow systems, motion tokens — as HTML pages with copy-paste CSS variable exports, contrast ratio checks, and live sample type. Use whenever the user shows or asks about a palette, theme, design system, branding colors, design…
53 1mo ago A 102 tokens
original MIT
Skill Claude CodeCodex
Generate HTML entity-relationship diagrams (ERDs) and database schema visualizations with clickable tables, relationship paths, and migration before/after views. Use whenever the user has a database schema, data model, or table structure to document, explain, migrate, or explore — even when they call it a "data…
53 1mo ago A 97 tokens
original MIT
Skill Claude CodeCodex
Create HTML playgrounds with sliders, knobs, toggles, and live preview for tuning algorithm parameters, animation values, design tokens, layout dimensions, or any value that's painful to express in text. Always include a Submit button (calls submitToClaude) so chosen values can be sent back to Claude Code. Use…
53 1mo ago A 114 tokens
original MIT
Skill Claude CodeCodex
Create branching, draggable HTML mind maps and concept maps for capturing brainstorms, mapping knowledge structures, exploring debugging hypotheses, or organizing nested ideas. Always include a Submit button (calls submitToClaude) to send the captured structure back to the agent for next steps. Use whenever the user…
53 1mo ago A 107 tokens
original MIT
Skill Claude CodeCodex
Synthesize multi-source research (codebase, git history, Slack, web, MCPs) into readable HTML reports — concept explainers, weekly status reports, incident reports, technical deep-dives, learning artifacts. Use whenever the user wants a write-up, explainer, summary, deep-dive, status report, retrospective, or report…
53 1mo ago B 174 tokens
original MIT
Skill Claude CodeCodex
Sets up the per-session local receiver and Monitor for interactive html-skills artifacts so user submissions arrive as session notifications instead of as copy-paste round-trips. Other html-skills interactive skills (html-mind-map, html-throwaway-editor, html-brainstorm-grid, html-comparison-matrix…
53 1mo ago A 161 tokens
original MIT
Skill Claude CodeCodex
Tears down server mode for html-skills for THIS Claude Code session — kills the receiver, stops the Monitor armed by html-skills-listen, and cleans up its temp files. Parallel sessions are unaffected. Invoke when the user is done with interactive html-skills artifacts ("I'm done with html-skills", "stop the listener"…
53 1mo ago A 106 tokens
original MIT
Skill Claude CodeCodex
Generate keyboard-navigable HTML slideshow decks for presentations, tech talks, leadership briefings, onboarding walkthroughs, and any sequential visual narrative. Use whenever the user wants slides, a deck, a presentation, a tech talk, a brown-bag, a briefing, or any sequential walkthrough — especially when they want…
53 1mo ago A 109 tokens
original MIT
Skill Claude CodeCodex
Create rich HTML documents for project specs, implementation plans, design exploration, RFCs, and brainstorming. Use whenever the user asks for a spec, plan, RFC, design doc, brainstorm, or wants to explore approaches/options/alternatives — even when they don't explicitly say "HTML". Strongly prefer HTML over markdown…
53 1mo ago A 95 tokens
original MIT
Skill Claude CodeCodex
Create SVG-based technical diagrams inside HTML — flowcharts, sequence diagrams, state machines, data-flow diagrams, dependency graphs, request/response timelines. Use whenever the user wants to visualize, illustrate, diagram, or sketch a technical concept, system, or process. Strongly prefer SVG over ASCII art…
53 1mo ago A 103 tokens
original MIT
Skill Claude CodeCodex
Generate thorough, interactive HTML testing checklists that help developers and testers systematically verify software — a real test plan organized into end-to-end flows, with a prominent progress bar, pass/fail/blocked step states, filter and search navigation, and syntax-highlighted code and command snippets. Always…
53 1mo ago A 211 tokens
original MIT
Skill Claude CodeCodex
Build single-purpose, throwaway HTML editors for one specific piece of data — drag-and-drop boards, form-based config editors, side-by-side prompt tuners, dataset curators, annotation tools. Always end with a Submit button (calls submitToClaude) so the result can be sent back to the agent. Use whenever the user wants…
53 1mo ago A 147 tokens
original MIT
Skill Claude CodeCodex
Create HTML timelines and roadmaps with status pills, dependency arrows, and milestone markers — for quarterly planning, project retrospectives, release histories, incident timelines, sprint visualizations. Use whenever the user wants to visualize a sequence of events over time, a plan, a roadmap, a release schedule…
53 1mo ago A 95 tokens
original MIT