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 viknesh20-20/claude-code-tool-kit --skill design-flowgit clone --depth 1 https://github.com/viknesh20-20/claude-code-tool-kitWrote 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/viknesh20-20/claude-code-tool-kit/design-flow)<a href="https://agentmods.dev/skills/viknesh20-20/claude-code-tool-kit/design-flow"><img src="https://agentmods.dev/badge/skills/viknesh20-20/claude-code-tool-kit/design-flow/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/viknesh20-20/claude-code-tool-kit/design-flow"><img src="https://agentmods.dev/badge/skills/viknesh20-20/claude-code-tool-kit/design-flow.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.00049 | $0.01465 |
| Opus 5.5 | $0.00020 | $0.00586 |
| Sonnet 5.5 | $0.00010 | $0.00293 |
| Haiku 4.5 | $0.00005 | $0.00146 |
Grade A, and why
design-flow 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 — 161 lines — stays where its author put it; the contents beside it link to each section on GitHub.
/design-flow
Design a complete user flow at the right altitude. Most flow design fails because it stops at the happy path — this skill walks the full surface (decisions, branches, edge cases, recovery) and outputs something engineers can actually build.
When to use
- Designing a new feature flow before any UI work.
- Spec'ing an existing flow that's never been documented.
- Translating a vague product goal ("we need onboarding") into a concrete user-facing journey.
- Comparing your flow against how Stripe / Linear / Notion / Shopify handle the same problem.
Operating method — ASK FIRST
Before designing anything, get answers in one round:
- Who is the user? Persona + context. Not "a user" — "a small-business owner whose first action is connecting a bank account on a phone."
- What's their goal? The thing they want completed.
- What's the success criterion? Measurable. "First-time user can complete in under 90 seconds, ≤ 3 attempts."
- What's the entry point? Where do they arrive from? Email link, marketing CTA, in-app banner, deep link from another product?
- What's the hardest case? The edge that's breaking it today (or the case you're worried about).
- What constraints? Compliance (KYC, GDPR consent), accessibility, mobile-first, third-party integrations.
Do not start designing without these. Designing the wrong flow takes the same time as designing the right one — and one of them ships.
Method
1. Story altitude
Walk the journey end to end in plain language. 5–12 numbered steps. Each step:
- Where the user is (URL / screen / state).
- What they see.
- What they decide.
- What they do.
- What the system responds.
This pass tests whether the journey is coherent before any wireframing.
2. Decisions and branches
Every flow has decisions. Build a table:
| Decision point | Default path | Alternatives | If user bails | If error |
|---|---|---|---|---|
| Pick auth method | Magic link to email | Google OAuth, SAML SSO | Save email, send link 1h later | Show error + retry |
| Confirm phone | Enter SMS code | Resend, change number | Hold account 7d | Show error + alt verification |
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 First seen · 161 lines · 49 tokens per session scan A f72d572af494
design-flow is a skill published in the GitHub repository viknesh20-20/claude-code-tool-kit (7 stars, last pushed 5mo ago), licensed MIT. It adds 49 tokens to every session and 1,465 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
frontend-design
Produce intentional, responsive, accessible UI work and perform visual QA instead of generic component assembly.
frontend-design
Use this as the design-lead layer for VideoStudio COMPOSE work. It shapes project/composition/composition-manifest.json::artdirection and the model-authored HTML/SVG motion graphics in index.html.
ui-design-source
Use this skill when the user provides Figma material, design-export files, screenshots of design tools, PDFs, JSON, existing HTML or other UI source code, or asks for design-to-HTML/code fidelity. It adapts OpenDesign/Figma handoff discipline for UIDesigner without requiring a live source runtime.
design-system-importer
Use this when COMPOSE or an AUTO compose segment has any external reference media or style source: a reference image, reference video, DESIGN.md, brand guide, screenshot, existing website, design notes, or an explicit named visual direction.
ui-design-contract
Use this skill before rendering when the direction must persist across multiple screens/components, brand or system work, conflicting references, formal handoff, or a genuinely vague visual system. Ordinary single-screen screenshots and clear briefs use ui-design-executor's compact source/visual thesis instead of…
ui-design-system
Use this skill when creating, extending, or auditing a product UI system. It adapts Better Design-style design-system discipline without requiring an external runtime package.