HTML Show — Development agent for Claude Code
将 Markdown 文档转为 HTML Preview,支持交互原型、流程图、状态图与能力矩阵.
How to install HTML Show
Installs to ~/.claude/agents/timzaak-web-dev-skills-html-show.md
mkdir -p ~/.claude/agents && curl -fsSL https://raw.githubusercontent.com/timzaak/web-dev-skills/HEAD/agents/html-show.md -o ~/.claude/agents/timzaak-web-dev-skills-html-show.md Restart Claude Code, or start a new session, for it to be picked up.
What HTML Show does
name: html-show description: 将 Markdown 文档转为 HTML Preview,支持交互原型、流程图、状态图与能力矩阵。
tools:
- Read
- Write
- Edit
- Grep
- Glob
- Bash
文档 HTML 可视化专家
运行时边界统一参考:`${CLAUDE_PLUGIN_ROOT}/protocols/runtime-boundaries.md`
职责
负责生成和维护 `.ai/preview/` 下的 HTML 文件,将 Markdown 文档转为可视化审阅表达。
处理任何 Markdown 文档的可视化,但重点不是复写 Markdown,而是生成可快速理解的解释视图:
- 前端或交互功能:目标体验的低保真页面、关键路径、业务状态切换、示例数据。
- 后端或无 UI 功能:流程图、状态图、调用方场景、能力边界矩阵、验收矩阵、pipeline 或 hub map。
- 技术设计:结构变化地图、依赖图、影响面摘要、风险热力、测试覆盖和文件影响。
- 任务文档:
Alternatives in Development
- Agent Contract: Direct Markdown Sharing — This contract defines the public Proof SDK flow for creating and operating on shared documents over HTTP 700 ★
- PR Screenshotter — Produces real before/after PNG screenshots for a YAS branch's rendering changes and publishes them to the yas 241 ★
- Sample Renderer — 각 디자인 팩으로 실제 PPT 슬라이드/웹 페이지 샘플을 생성하고, 비교용 baseline 출력도 함께 생성해 preview.png를 산출하는 렌더링 엔지니어 188 ★
Full documentation available on GitHub
View Source RepositoryRelated Agents
Page Writer Sonnet
Writes a long file from a short brief — the board, a chewed plan page, a status document, an explainer, a draf
Solution Map Render
Fills four of the solution-map HTML template's five slots from the generated markdown files and the map JSON,
Context Engine
Context window management — tracks tool call count, auto-detects when context fills up, triggers state save +
Brand Designer
Use this agent for brand identity work — SVG logo systems and concepts, mascots, wordmarks, icon marks, busine
Computer Use Operator
Desktop automation specialist. Controls native macOS apps via Computer Use MCP. Handles Finder, System Setting
Pan Previewer
Read-only foresight agent. Given a phase, set of phases, or milestone, produces a structured forecast (blast r
Related Skills
Multi Chart Draw Skills
支持多种图表类型的绘制工具,包括思维导图、流程图、数据可视化图表、数学函数图等;可根据用户需求生成 Mermaid、ECharts、Mindmap、DrawIO、GeoGebra 等格式的图表,并导出为 PNG、SVG、
Interactive Diagram
生成可交互式、可拖动的 HTML 图表(流程图、架构图、思维导图、序列图),并将其作为独立文件保存。支持 Dagre 自动布局、平移/缩放,并可导出为 PNG/SVG/JSON 格式。零依赖。Claude Code 技能
Termpeek
Preview images, video, PDFs, code and diffs from inside an AI coding CLI that can't show them to you. Works wi