What problem does it solve? Static prose explanations of complex code mechanisms often fail to build accurate mental models, especially for visual learners. This Skill turns a concrete system, mechanism, or design from your codebase into a single interactive HTML document with toggles, steppers, diffs, and side-by-side comparisons that walk a real worked example through its states. ## Core Features & Use Cases - Interactive Explanations: Produces one self-contained HTML file with inline CSS and vanilla JS — no build step, no network calls, opens offline by double-clicking. - Verified Correctness: Requires hand-tracing a concrete worked example against the actual source code before building, baking verified states into the artifact rather than trusting live computation. - Matched Interactions: Chooses the right interaction pattern for the concept — compare toggles for divergences, steppers for protocols and lifecycles, side-by-side views for design tradeoffs, and live playgrounds for transformations. - Use Case: You are trying to understand how client-side rebasing diverges from server-side rebasing in a collaborative editor. Invoke the Skill to get an HTML page that threads a real "Hello" edit through both approaches step by step, with color-coded states and a toggle between current and intended behavior. ## Quick Start Ask the AI to run /visually-explain on a specific mechanism in the codebase, such as "visually explain how the rebasing logic in livetext works".
