// Create a beautiful HTML explanation of a repo, spec, PR, architecture, or concept so a smart beginner can understand and retell it.
| name | explain-visually |
| description | Create a beautiful HTML explanation of a repo, spec, PR, architecture, or concept so a smart beginner can understand and retell it. |
| user-invocable | true |
| argument-hint | <repo, spec, PR, architecture, concept, or source material> |
Create a human-facing HTML artifact that explains an idea visually. Beauty serves clarity. The reader should understand the idea well enough to retell it.
Read the source material. Identify the audience, core idea, moving parts, decisions, tradeoffs, and what the human should remember.
Ground the explanation in facts from the source. Prefer concrete names, paths, commands, interfaces, examples, and observed behavior over positioning language.
Default to explaining for a smart beginner. Define jargon before using it. If a term needs domain context, replace it with plain language or explain it visually.
Write the teaching path before building:
Default teaching path:
Create a responsive HTML explainer. Use Tailwind CSS via CDN for layout and responsive behavior. Use custom CSS only for fonts, theme tokens, diagrams, and small refinements.
Default format: slide-like sections on desktop, readable stacked sections on mobile. Do not preserve a fixed 16:9 frame on mobile.
Use:
Run browser-verify before finishing. Check desktop and mobile viewports. Fix overflow, overlap, clipped text, unreadable scale, cramped spacing, and broken responsive layout.
md:text-7xl; avoid lg:text-9xl unless the title is very short.text-anchor, dominant-baseline, explicit font sizes, and enough padding so labels do not drift, clip, or touch borders.overflow: hidden on content containers to hide layout problems.Create camera-readable Markdown teaching documents for courses, YouTube videos, workshops, and companion docs. Use when turning cards, rough notes, demos, or existing lessons into polished material Owain can read aloud and learners can study.
Write compact, reusable teaching cards that make one idea click. Use when turning rough expertise, lesson sections, YouTube ideas, demos, or course material into clear teachable units.
Format Markdown for iA Writer. Minimal, prose-first, almost no bold or italic.
Turn a vague, messy, or multi-part user ask into a clean, self-contained prompt that a fresh agent could execute without further questions. Interview the user one question at a time — walking down the decision tree, branching on each answer — until the prompt is tight, then output the final prompt as the deliverable. Trigger eagerly: any voice-dictated input, filler-heavy prose, underspecified references ("the thing", "that script"), multi-part requests, or any plan the user wants stress-tested. The skill itself can be skipped for trivial one-line requests where producing a prompt artifact would be pure ceremony — but once invoked, always produce the prompt, even if execution looks trivial.
Rewrite text to remove AI tells. Use when editing or reviewing writing that sounds like a chatbot wrote it. Detects and replaces inflated significance, rule-of-three, em dash overuse, AI vocabulary, condescending openers, reader-lecturing, signposting, and other tells.