agent-html-skills

In the author's own words, from each skill's SKILL.md.

• html-architecture-diagrams

  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 — across services, regions, queues, caches, databases, or organizational boundaries. R…

  plugins/html-skills/skills/html-architecture-diagrams/SKILL.md on GitHub (opens in a new tab)

• html-brainstorm-grid

  TRIGGER: before putting UI / layout / screen / component mockups into `AskUserQuestion` `preview:` chips, invoke this skill and ask the user "quick inline chips, or a real HTML grid?" — no exception for "simulate", "demo", "mock up", "quick decision". Generates side-by-side HTML grids of 3–6 distinctly different approaches for the GENERATIVE phase, when candidates are NOT yet named. If candidates…

  plugins/html-skills/skills/html-brainstorm-grid/SKILL.md on GitHub (opens in a new tab)

• html-code-review

  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 area, or subsystem — especially before merging, when onboarding others to a change,…

  plugins/html-skills/skills/html-code-review/SKILL.md on GitHub (opens in a new tab)

• html-comparison-matrix

  TRIGGER: before putting a comparison with more than 2 axes, more than 3 candidates, or weights into `AskUserQuestion` `preview:` chips, invoke this skill and ask "quick inline chips, or a full HTML matrix with live weights?" — no exception for "simulate", "demo", "quick decision". Builds sortable, weighted scoring matrices for the EVALUATIVE phase, when 2+ candidates ARE named. If candidates are…

  plugins/html-skills/skills/html-comparison-matrix/SKILL.md on GitHub (opens in a new tab)

• html-data-explorer

  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 overkill. Reach for this when the user pastes data, mentions a CSV/JSON/log file, o…

  plugins/html-skills/skills/html-data-explorer/SKILL.md on GitHub (opens in a new tab)

• html-design-prototypes

  TRIGGER: before putting a UI / screen / component / animation comparison into `AskUserQuestion` `preview:` chips, invoke this skill and ask "quick inline chips, or a real HTML prototype?" — no exception for "simulate", "demo", "mock up". Builds real HTML prototypes for visual design, component playgrounds, animation tuning, and design-system exploration — even when the production target is React,…

  plugins/html-skills/skills/html-design-prototypes/SKILL.md on GitHub (opens in a new tab)

• html-design-tokens

  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 tokens, or wants to document any system of values that drives visual design. Markdown…

  plugins/html-skills/skills/html-design-tokens/SKILL.md on GitHub (opens in a new tab)

• html-erd-explorer

  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 model", "schema diagram", or just "the tables". Reach for this any time the conversati…

  plugins/html-skills/skills/html-erd-explorer/SKILL.md on GitHub (opens in a new tab)

• html-interactive-playground

  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 whenever the user wants to experiment with values, fine-tune behaviors, explore a par…

  plugins/html-skills/skills/html-interactive-playground/SKILL.md on GitHub (opens in a new tab)

• html-mind-map

  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 wants to capture, organize, or explore branching ideas, hypotheses, knowledge s…

  plugins/html-skills/skills/html-mind-map/SKILL.md on GitHub (opens in a new tab)

• html-research-reports

  Synthesize multi-source research (codebase, git history, Slack, web, MCPs) into readable HTML reports — concept explainers, status reports, incident reports, technical deep-dives, decision memos. Use whenever the user wants a write-up, explainer, summary, deep-dive, retrospective, or report — especially one they will share. Strongly prefer this over markdown for any report longer than a screen. S…

  plugins/html-skills/skills/html-research-reports/SKILL.md on GitHub (opens in a new tab)

• html-skills-listen

  Session primitive for html-skills: starts the per-session local receiver and `Monitor` so submissions from html-skills artifacts arrive as session notifications instead of copy-paste. Every html-skills content skill invokes it from its pre-flight block before writing an artifact; idempotent. Returns the localhost URL to inject as `window.__CLAUDE_SUBMIT_URL__`. Don't invoke outside that flow.

  plugins/html-skills/skills/html-skills-listen/SKILL.md on GitHub (opens in a new tab)

• html-skills-stop

  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 html-skills artifacts ("I'm done with html-skills", "stop the listener", "end html-skills session"), OR at session end if the user mentions cleanup. Safe to inv…

  plugins/html-skills/skills/html-skills-stop/SKILL.md on GitHub (opens in a new tab)

• html-slideshow-deck

  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 to share via a link rather than as a PowerPoint or Keynote file. Prefer HTML ov…

  plugins/html-skills/skills/html-slideshow-deck/SKILL.md on GitHub (opens in a new tab)

• html-spec-planning

  Create rich HTML documents for project specs, implementation plans, design exploration, RFCs, and proposals. Use whenever the user asks for a spec, plan, RFC, design doc, or proposal, or wants to explore approaches, options, or alternatives — even when they don't explicitly say "HTML". Strongly prefer HTML over markdown for any planning artifact longer than a screen, especially when it will be sh…

  plugins/html-skills/skills/html-spec-planning/SKILL.md on GitHub (opens in a new tab)

• html-svg-diagrams

  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, mermaid blocks, or markdown text for anything spatial or relational. Reach for this w…

  plugins/html-skills/skills/html-svg-diagrams/SKILL.md on GitHub (opens in a new tab)

• html-testing-checklist

  Generate thorough, interactive HTML testing checklists — a real test plan organized into end-to-end flows, with pass/fail/blocked step states, a progress bar, filter and search, and copyable, syntax-highlighted command snippets. Always ends with a Submit button that returns every step's state and notes for failure triage and fixes. Use whenever the user wants to test, QA, verify, or validate a ch…

  plugins/html-skills/skills/html-testing-checklist/SKILL.md on GitHub (opens in a new tab)

• html-throwaway-editor

  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 to triage, reorder, edit, annotate, curate, prioritize, or pick values where t…

  plugins/html-skills/skills/html-throwaway-editor/SKILL.md on GitHub (opens in a new tab)

• html-timeline-roadmap

  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, or look back at how a project unfolded. Reach for this whenever the explanation…

  plugins/html-skills/skills/html-timeline-roadmap/SKILL.md on GitHub (opens in a new tab)

No skill matches that filter.

Similar skills

• superpowersby obra An agentic skills framework & software development methodology that works. 300k stars · 15 skills
• skillsby mattpocock Skills for Real Engineers. Straight from my .agents directory. 293k stars · 30 skills
• ECCby affaan-m The agent harness performance optimization system. Skills, instincts, memory, security, and research-first development for Claude Code, Cod… 280k stars · 30 skills
• reaby morluto Reverse engineer anything with agents, from app behavior down to native binaries. 270k stars · 1 skill
• andrej-karpathy-skillsby multica-ai A single CLAUDE.md file to improve Claude Code behavior, derived from Andrej Karpathy's observations on LLM coding pitfalls. 220k stars · 1 skill
• skillsby anthropics Public repository for Agent Skills 181k stars · 19 skills