explain-visually
Build a self-contained, responsive HTML page that explains a concept, system, change, or decision with accurate writing and diagrams. Use when asked to visualize, diagram, or explain a repository, architecture, specification, pull request, process, or technical idea as an HTML page.
- Installs
- 147
- Last 24h
- —
- Trending rank
- —
- Security
- Not audited
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/owainlewis/agent-skills --skill explain-visually- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads explain-visually automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
SKILL.md
The instructions your agent reads when the skill is triggered.
Explain 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.
FAQ
What does the explain-visually skill do?
Build a self-contained, responsive HTML page that explains a concept, system, change, or decision with accurate writing and diagrams. Use when asked to visualize, diagram, or explain a repository, architecture, specification, pull request, process, or technical idea as an HTML page.
How do I install explain-visually?
Run npx skills add https://github.com/owainlewis/agent-skills --skill explain-visually in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/explain-visually/ (personal) or .claude/skills/explain-visually/ (project).
Which AI agents can use explain-visually?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is explain-visually safe to install?
No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.
Who maintains explain-visually?
It is published by owainlewis in owainlewis/agent-skills. It has 147 recorded installs.
More from owainlewis/agent-skills
clarify
owainlewis/agent-skills
Turn a vague request, voice dump, rough plan, or half-written prompt into a self-contained prompt that a fresh agent can execute. Use when asked to clarify, refine, improve, tighten, or stress-test an agent task. Resolve safe defaults directly. Ask one question at a time only when the answer would materially change the work.
compress
owainlewis/agent-skills
Shorten a prompt, specification, plan, skill, note, or brain dump without changing its meaning or behaviour. Use when asked to compress, shorten, simplify, tighten, remove repetition, or use fewer tokens. Preserve facts, constraints, examples, edge cases, and checks that affect the result.
humanizer
owainlewis/agent-skills
Rewrite any writing so it sounds clear, human, and plain. Use for landing pages, emails, docs, posts, scripts, lessons, prompts, and messages with AI slop, purple prose, cliches, em dashes, hype, vague claims, or over-polished language.
prompt-enhance
owainlewis/agent-skills
Rewrites a rough prompt, voice dump, or half-written instruction into an agent-ready prompt. Use when the user asks to make a prompt better, enhance/refine a prompt, clean up instructions for an agent, or improve pasted prompt text. One-shot transformer; does not interview.
feynman
owainlewis/agent-skills
Explains one technical theme as a teachable document with mechanism-first sections, examples, edge cases, and an exercise. Use when the user asks to explain, teach, or document a concept as a course lesson, YouTube reference, or newsletter basis.
backlog-manager
owainlewis/agent-skills
Manage an engineering backlog for humans and AI agents: classify issues, improve issue quality, sync PR state, and label safe tickets for agent execution. Use when GitHub Issues, GitHub Projects, Linear, or an explicit local backlog path is the source of truth.
Popular frontend & design skills
setup-matt-pocock-skills
mattpocock/skills
Configure this repo for the engineering skills: set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.
frontend-design
anthropics/skills
Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.
hyperframes-animation
heygen-com/hyperframes
All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.
prototype
mattpocock/skills
Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.
hyperframes-core
heygen-com/hyperframes
The HyperFrames composition contract — build one renderable project. Use for composition structure, the data- timing attributes, class="clip", tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Read before writing composition HTML.
vercel-react-best-practices
vercel-labs/agent-skills
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.