Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx skills add PrabhdeepSingh/claude-plugins --skill design-treegit clone --depth 1 https://github.com/PrabhdeepSingh/claude-pluginsWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/prabhdeepsingh/claude-plugins/design-tree)<a href="https://agentmods.dev/skills/prabhdeepsingh/claude-plugins/design-tree"><img src="https://agentmods.dev/badge/skills/prabhdeepsingh/claude-plugins/design-tree/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<a href="https://agentmods.dev/skills/prabhdeepsingh/claude-plugins/design-tree"><img src="https://agentmods.dev/badge/skills/prabhdeepsingh/claude-plugins/design-tree.svg" alt="Reviewed on agentmods" width="80" height="20"></a>What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00062 | $0.05716 |
| Opus 5.5 | $0.00025 | $0.02286 |
| Sonnet 5.5 | $0.00012 | $0.01143 |
| Haiku 4.5 | $0.00006 | $0.00572 |
Grade A, and why
design-tree scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 1mo ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
How it starts
The opening of the file, as written. The whole thing — 181 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Design Tree — decide by branching, not by marching
Design isn't a straight line from question to answer. It's a tree: each decision point is a node with multiple branches; you pick one, sometimes backtrack, and move forward. The genealogy of what you chose and what you didn't is the record that keeps decisions from getting silently relitigated later, and that lets you backtrack to a real fork when a downstream choice invalidates an earlier one.
This skill makes you design that way: interview first to confirm you're solving the right problem, then expose the real decision points, enumerate genuine alternatives, record the chosen branch with its rationale, and preserve the rejected branches with the reasons they lost.
How to apply this
Before mapping any decision, interview the user. Before branching, before enumerating anything — ask. A few sharp, targeted questions about intent, constraints, success criteria, and non-goals are the highest-leverage work in any design task. Designing the right problem is worth more than any number of well-reasoned branches on the wrong one.
When planning or designing an approach, run through this in sequence: interview → load applicable standards → find decision points → enumerate alternatives → record choices and rationale → emit the tree. When invoked directly as /sonu:design-tree, apply it to $ARGUMENTS — the text typed after the invocation; if that token appears literally or is empty, apply it to the current design, plan, or discussion in context; and if the intent is to design AND implement end-to-end, run /sonu:build instead — it runs this methodology as its design gate, then builds test-first and self-reviews. When in plan mode, write the tree into the plan file's ## Design Tree section; otherwise print it in-chat.
1. Interview first — confirm the problem before solving it
This is the highest-leverage step. Ask before you branch. The goal is a shared understanding of what you're designing: intent, constraints, success criteria, and non-goals. A few sharp questions up front save context, tokens, and the headache of treeing the wrong thing.
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 1mo ago Changed · +7 lines 14e4b3d91dbd
- 1mo ago Changed · +2 lines 3e78bf119188
- 1mo ago First seen · 172 lines · 62 tokens per session scan A ad74f9d5a8fb
design-tree is a skill published in the GitHub repository PrabhdeepSingh/claude-plugins (4 stars, last pushed today), licensed MIT. It adds 62 tokens to every session and 5,716 once invoked, about $0.0002 per session on Opus 5.5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-31.
Other skills, from other repositories
svg-mastery
Expert knowledge for working with SVG (Scalable Vector Graphics) — optimization, embedding, animation, accessibility, responsive scaling, React integration, filters, and programmatic creation. Use when the user asks to "optimize SVG", "clean up SVG", "reduce SVG file size", "embed SVG in HTML", "inline SVG vs img…
icon-library
Fetch pre-made SVG icons from open-source icon libraries (Lucide, Heroicons, Tabler Icons) for use in websites, presentations, Figma designs, or any project. Use when the user asks to "add an icon", "use a search icon", "find an icon for settings", "get SVG icons", or needs clean SVG icons. NEVER draw icons manually …
animation-system
CSS and GSAP animation patterns for websites — ScrollTrigger, timelines, stagger effects, page transitions, micro-interactions, and performance optimization. Use when implementing animations for web design projects, when the user wants scroll-triggered animations, page load reveals, GSAP integration with React/Vite…
design-review
Review and critique existing designs, websites, or frontend code against design principles. Checks for common anti-patterns like generic fonts, poor contrast, inconsistent spacing, and lack of visual hierarchy. Use when the user asks to "review my design", "what's wrong with this layout", "critique my website", "how…
frontend-aesthetics
Design guidance and aesthetic patterns for building beautiful, distinctive frontends — websites, web apps, landing pages. Provides typography strategies, color application, motion choreography, layout composition, and component design recipes. Use when the user asks to "make this look better", "improve the design"…
styleguide
Create a comprehensive design language and styleguide for any project — websites, apps, blogs, presentations, marketing pages. Given a project type, brand, and audience, produces aesthetic direction, font selections with pairings, color strategy, spacing philosophy, imagery style, and tone. Use when the user asks to…