About explain-visually
explain-visually is a skill for turning source material into a self-contained HTML explanation with text, examples, and diagrams. It guides authors to distinguish facts from assumptions and verify the rendered page across screen sizes.
Key features
- 01Source analysis and fact checking
- 02Structured explanations with clear sections
- 03Self-contained HTML with inline CSS and SVG
- 04Responsive layout and accessible interactions
- 05Browser-based visual verification
Use cases
- 01Explain a technical concept with diagrams
- 02Turn documentation into a visual guide
- 03Present a supported process or comparison
- 04Check an explanatory page on mobile and desktop
Install
Copy the command and run it in a terminal.
npx skills add https:/After installing, type/explain-visuallyin Claude Code to confirm it loaded.
Bundled filesagents/openai.yaml
Details
From the project READMEExplain visually
Build an HTML page that explains a concept with text, examples, and diagrams.
Understand the source
- Read the relevant source material.
- Identify the audience, main point, components, sequence, decisions, tradeoffs, and useful next action.
- Separate verified facts from assumptions. Do not invent missing behaviour.
- Choose the relationships that are easier to explain with a visual.
Shape the explanation
Lead with the answer. Use a small number of sections. Each section should explain one part.
Use concrete titles. Define jargon before using it. Prefer real names, paths, commands, interfaces, states, and observed behaviour to generic labels.
Include a before-and-after, sequence, comparison, hierarchy, or state change only when the source supports it. End with what the reader should do next. Do not repeat the summary.
Build the artifact
- Create one self-contained HTML file unless the user requests another structure.
- Use semantic HTML, inline CSS, and inline SVG. Avoid runtime dependencies unless the project already provides them or the user asks for them.
- Choose colours, fonts, and layout that fit the subject. Do not reuse the same palette, font pairing, dashboard, or slide template by default.
- Use responsive type and spacing. Let mobile sections grow naturally instead of preserving a desktop aspect ratio.
- Use SVG for flows, relationships, states, and architecture. Use HTML and CSS for comparisons, timelines, cards, and annotated examples.
- Keep labels short and place the explanation beside the visual.
- For three or more components, build the diagram in stages. Redraw the previous state and add one component at a time.
- Add interaction only when it teaches something, such as changing an input, revealing a state, or comparing two cases.
- Make controls keyboard accessible and give meaningful graphics a text equivalent.
Do not add charts, gradients, icons, or motion unless they help explain the source material.
Verify
Open the artifact in an available real browser or renderer and inspect it at desktop and narrow mobile widths.
Check:
- no clipped, overlapping, or overflowing text
- readable type and diagram labels at each width
- visible focus states and keyboard-operable controls
- sufficient contrast and reduced-motion behaviour where animation exists
- no console errors, missing assets, or failed network requests
- every factual claim is supported by the source
Fix defects before returning the file. If no browser or renderer is available, state that you did not verify the layout.
Return the artifact link and a short note naming the source and widths checked. Do not narrate the build process.