html-diagram
Create a self-contained HTML file for visualizing architecture and understanding the stack with a high-quality SVG diagram.
Skill by firemonster612
Install
Works with Claude Code, Claude apps, Codex, Cursor, Gemini CLI, GitHub Copilot, VS Code, OpenCode, Goose, Windsurf. Read the repository before you give any tool access to your data.
npx agentmarket install skill/firemonster612-html-diagram
Asks which of your tools to add it to (Claude Code, Codex, Cursor, VS Code, Windsurf, Gemini CLI, Claude Desktop) and shows the change first. See https://agentmart.dev/cli.
Get the weekly diff
The weekly diff: one email a week with new agent tools, notable updates and grade changes, plus security alerts for tools you follow. Double opt-in, one-click unsubscribe.
About
Use cases: design, frontend
Reviews
Write a reviewNo reviews yet. Installed it? Reviews come from verified installers only. How reviews work
Permissions: not checked yet.
What's inside
- Skill name
html-diagram- Description
- Create a self-contained HTML file for visualizing architecture and understanding the stack with a high-quality SVG diagram. Use when the user wants a full-screen diagram, wants the output to be light on prose, or wants an HTML artifact that is mostly there to make the architecture click fast.
- License
- unknown
- Instructions
- 19 lines in SKILL.md · view on GitHub
Files (28)
- SKILL.md
- openai.yaml · agents/
- architecture-example.html · references/
- 01-exploration-code-approaches.html · references/html-effectiveness/
- 02-exploration-visual-designs.html · references/html-effectiveness/
- 03-code-review-pr.html · references/html-effectiveness/
- 04-code-understanding.html · references/html-effectiveness/
- 05-design-system.html · references/html-effectiveness/
- 06-component-variants.html · references/html-effectiveness/
- 07-prototype-animation.html · references/html-effectiveness/
- 08-prototype-interaction.html · references/html-effectiveness/
- 09-slide-deck.html · references/html-effectiveness/
- 10-svg-illustrations.html · references/html-effectiveness/
- 11-status-report.html · references/html-effectiveness/
- 12-incident-report.html · references/html-effectiveness/
- 13-flowchart-diagram.html · references/html-effectiveness/
- 14-research-feature-explainer.html · references/html-effectiveness/
- 15-research-concept-explainer.html · references/html-effectiveness/
- 16-implementation-plan.html · references/html-effectiveness/
- 17-pr-writeup.html · references/html-effectiveness/
- 18-editor-triage-board.html · references/html-effectiveness/
- 19-editor-feature-flags.html · references/html-effectiveness/
- 20-editor-prompt-tuner.html · references/html-effectiveness/
- CODE_OF_CONDUCT.md · references/html-effectiveness/
- LICENSE · references/html-effectiveness/
- README.md · references/html-effectiveness/
- SECURITY.md · references/html-effectiveness/
- index.html · references/html-effectiveness/
The license isn't open source, so the instructions aren't shown here. Read SKILL.md on GitHub
More from firemonster612/dot-agents
- 0.559score
review-loop
firemonster612
Independent Claude and GPT review of a finished change, argued finding by finding with the author.
SkillAFreshness: AClaude Code +9 - 0.555score
full-send
firemonster612
Use when the user says full send or full stop.
SkillAFreshness: AClaude Code +9 - 0.534score
codebase-design
firemonster612
Shared vocabulary for designing deep modules.
SkillAFreshness: AClaude Code +9 - 0.519score
computer-use-linux
firemonster612
Use when you need to do computer use tasks on linux, for browser only tasks, use playwriter
SkillBFreshness: BClaude Code +9 - 0.518score
cli-subagents
firemonster612
Use when you need to use a model as a subagent that is not supported in your harness natively via the CLI.
SkillBFreshness: BClaude Code +9 - 0.499score
diagnosing-bugs
firemonster612
Diagnosis loop for hard bugs and performance regressions.
SkillBFreshness: BClaude Code +9 - 0.494score
prototype
firemonster612
Build a throwaway prototype to answer a design question.
SkillBFreshness: BClaude Code +9 - 0.494score
domain-modeling
firemonster612
Build and sharpen a project's domain model.
SkillBFreshness: BClaude Code +9 - 0.494score
grilling
firemonster612
Grill the user relentlessly about a plan, decision, or idea.
SkillBFreshness: BClaude Code +9 - 0.491score
maintain-verification-skill
firemonster612
Periodic pass that keeps a project's verification skill and feature map honest: parallel source readers per feature, one live session driving every feature…
SkillBFreshness: BClaude Code +9 - 0.483score
handoff
firemonster612
Compact the current conversation into a handoff document for another agent to pick up.
SkillBFreshness: BClaude Code +9 - 0.474score
human-writing
firemonster612
Write text that reads as authentically human rather than AI-generated.
SkillCFreshness: CClaude Code +9
Signals
- Stars
- 0
- Forks
- 0
- Open issues
- 0
- Last commit (this folder)
- Jul 22, 2026 (3 months ago)
From GitHub (fetched Oct 24, 2026).
Details
- License
- License unknown
- Repository
- github.com/firemonster612/dot-agents
- First seen
- Oct 24, 2026
- Last checked
- Oct 24, 2026
- Source
- GitHubgithub-graphql
Same skill elsewhere
Copies of this SKILL.md published by others; search shows only one of them.
- 0.474score
html-diagram
thekorn
Create a self-contained HTML file for visualizing architecture and understanding the stack with a high-quality SVG diagram.
SkillCFreshness: CClaude Code +9 - 0.315score
html-diagram
onekr-billy
Create a self-contained HTML file for visualizing architecture and understanding the stack with a high-quality SVG diagram.
SkillBFreshness: BClaude Code +9
More from firemonster612
- 0.559score
review-loop
firemonster612
Independent Claude and GPT review of a finished change, argued finding by finding with the author.
SkillAFreshness: AClaude Code +9 - 0.555score
full-send
firemonster612
Use when the user says full send or full stop.
SkillAFreshness: AClaude Code +9 - 0.534score
codebase-design
firemonster612
Shared vocabulary for designing deep modules.
SkillAFreshness: AClaude Code +9 - 0.519score
computer-use-linux
firemonster612
Use when you need to do computer use tasks on linux, for browser only tasks, use playwriter
SkillBFreshness: BClaude Code +9 - 0.518score
cli-subagents
firemonster612
Use when you need to use a model as a subagent that is not supported in your harness natively via the CLI.
SkillBFreshness: BClaude Code +9 - 0.499score
diagnosing-bugs
firemonster612
Diagnosis loop for hard bugs and performance regressions.
SkillBFreshness: BClaude Code +9
Cite this page
html-diagram skill. Agent Mart. https://agentmart.dev/skills/firemonster612-html-diagram (last updated 2026-10-24)