vizit_skill

Overview

This skill creates concise visual explanations in the Vizit (A2UI) panel to help users understand a concept, architecture, flow, or decision they found confusing. It produces a focused, visual-first diagram or annotated flow and always includes a copyable markdown handoff block so other agents can consume the result. The visuals are optimized for a narrow dark-themed panel and emphasize clarity over verbosity.

How this skill works

When you trigger the skill (phrases like “vizit”, “show me in vizit”, or “I don't get it”), the skill inspects the last few exchanges to identify the single point of confusion. It selects an appropriate visual format (architecture diagram, numbered flow, comparison cards, before/after) and writes self-contained HTML+CSS to the A2UI log using the specified dark theme and layout. Every output ends with a required <textarea readonly> containing a complete markdown summary so other agents can continue the conversation.

When to use it

• When the user says “I don't understand” or asks to “visualize this” after a text explanation
• To show how components connect in an architecture or system
• To illustrate a sequence of steps, data flow, or lifecycle
• To compare options or clarify a proposed decision visually
• To hand off a clear, copyable summary to another AI agent

Best practices

• Visualize only the one thing the user found confusing — avoid full summaries
• Pick a diagram type that makes the relationship obvious at a glance (arrows, numbered steps, side-by-side cards)
• Design for ~400px panel width with dark theme and ample bottom padding for the ShortcutBar
• Include concise callouts and labels; minimize body text on the canvas
• Always include the mandatory copyable markdown handoff near the bottom

Example use cases

• Draw an annotated architecture diagram to show how services communicate and where a bug occurs
• Show a numbered flow for a request lifecycle so the user sees the sequence and timing
• Create a side-by-side pros/cons card to clarify a proposed design choice
• Render before/after panels to explain a refactor or migration impact
• Produce an annotated pseudo-code/data-flow diagram when the user is confused about code behavior