decisions-visual-plan
Routes technical planning tasks to the appropriate visualization medium.
Install
mkdir -p .claude/skills/decisions-visual-plan && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/11028" && unzip -o skill.zip -d .claude/skills/decisions-visual-plan && rm skill.zipInstalls to .claude/skills/decisions-visual-plan
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
Route technical planning and review between Decisions Mermaid viewer, BuilderIO visual-plan/recap skills, and Open Design when the work needs richer artifacts.Key capabilities
- →Visualize system architecture
- →Plan UI wireframe review
- →Structure implementation plans
How it works
It routes planning tasks to appropriate visual surfaces like Mermaid or MDX canvases.
Inputs & outputs
When to use decisions-visual-plan
- →Visualize system architecture
- →Plan UI wireframe review
- →Structure technical implementation plan
About this skill
Decisions Visual Planning
I am picking the right visual surface so the user can review structure before code ships — not dumping prose in chat.
Choose the surface
| User job | Use | How |
|---|---|---|
| Quick architecture / ER / sequence / state diagram | Mermaid | show_mermaid_diagram or open_page page=diagram viewer — see decisions-mermaid-diagrams |
| Approve a multi-step implementation plan with inline diagrams | visual-plan | /visual-plan skill (BuilderIO) — MDX plan with diagram blocks |
| Review a branch/PR shape before line-by-line diff | visual-recap | /visual-recap skill (BuilderIO) |
| UI mockup, deck, branded prototype, hand-drawn whiteboard | Open Design | decisions-open-design — desktop app + od mcp |
| End agent turn with clear done/blocked signal | quick-recap | Green/yellow/red status block |
Mermaid + visual-plan together
- Architecture / data-flow / API sequence in a plan → render with
show_mermaid_diagram(Decisions freestanding viewer at/diagram/). - UI wireframes, artboards, prototype tabs → use visual-plan top canvas (see vendored
visual-plan/references/canvas.md). - Do not duplicate: one Mermaid block for backend structure; canvas wireframes for screens — not both for the same fact.
Reference clones
Sibling to DecisionsAI (same parent as reference/ecc):
../reference/builderio-skills— BuilderIO/skills- Vendored skills:
plugins/visual-plan-pack/skills/(sync:python3 scripts/sync_visual_plan_pack.py)
Agent-Native Plans app (optional)
Hosted or self-hosted Plan app for sharing visual-plan MDX outside the IDE. See BuilderIO agent-native if you need shareable review links — Decisions Mermaid viewer covers the lightweight diagram case without that dependency.
When not to use it
- →Code generation
Limitations
- →Requires visual surface selection
- →Not for prose-heavy docs
How it compares
It prioritizes visual structure for review before code implementation.
Compared to similar skills
decisions-visual-plan side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| decisions-visual-plan (this skill) | 0 | 1mo | No flags | Intermediate |
| storyboard | 0 | 3mo | Review | Beginner |
| ui-ux-pro-max | 1,909 | 5mo | Review | Intermediate |
| svg-precision | 527 | 4mo | Review | Intermediate |
Try saying
Example prompts that trigger this skill in your AI assistant.
More by tensology
View all by tensology →You might also like
storyboard
damacus
Interactive storyboard creation for exploring narrative arcs, user journeys, and UI flows. Supports "Narrative" (Product Manager style) and "UI Flow" (Mock-Audit style) modes. Use when you need to visualize ideas, define UI elements, or map emotional journeys before implementation.
ui-ux-pro-max
nextlevelbuilder
UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 8 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app, .html, .tsx, .vue, .svelte. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient.
svg-precision
dkyazzentwatwa
Deterministic SVG generation, validation, and rendering. Use for icons, diagrams, charts, UI mockups, or technical drawings requiring structural correctness and cross-viewer compatibility.
draw-io
davila7
draw.io diagram creation, editing, and review. Use for .drawio XML editing, PNG conversion, layout adjustment, and AWS icon usage.
penpot-uiux-design
github
Comprehensive guide for creating professional UI/UX designs in Penpot using MCP tools. Use this skill when: (1) Creating new UI/UX designs for web, mobile, or desktop applications, (2) Building design systems with components and tokens, (3) Designing dashboards, forms, navigation, or landing pages, (4) Applying accessibility standards and best practices, (5) Following platform guidelines (iOS, Android, Material Design), (6) Reviewing or improving existing Penpot designs for usability. Triggers: "design a UI", "create interface", "build layout", "design dashboard", "create form", "design landing page", "make it accessible", "design system", "component library".
ui-ux-designer
sickn33
Create interface designs, wireframes, and design systems. Masters user research, accessibility standards, and modern design tools. Specializes in design tokens, component libraries, and inclusive design. Use PROACTIVELY for design systems, user flows, or interface optimization.