Snap Visual

Turn an explanation into a single, self-contained HTML page in one consistent visual language, and open it in the user's browser. The output is a brief — a calm, readable explainer document with prose, diagrams, comparisons, and timelines — not a dashboard or an app.

The visual language is fixed and opinionated on purpose. The user has tuned it; every brief should look like it came from the same hand. Your job is to compose content into that language, not to redesign it.

Delegation-first execution

HTML generation is context-heavy. When the harness supports sub-agents or task delegation, the invoking agent must delegate the full HTML build-and-open workflow to a file-editing sub-agent instead of composing the HTML in the main conversation.

Main agent responsibilities:

• Gather only the source context needed to explain the topic: goal, audience, key facts, constraints, source paths/URLs, and any user-requested emphasis.
• Start a sub-agent with that compact brief plus the absolute path to this snap-visual skill directory.
• Instruct the sub-agent to read SKILL.md, references/template.html, and references/patterns.html; create /tmp/<slug>.html; open it; and return only the file path plus a one-line tour.
• Do not ask the sub-agent to paste the generated HTML back into the main chat. Do not inline large HTML in the main context.

Sub-agent prompt shape: