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.
git clone --depth 1 https://github.com/MadAppGang/claude-codeWrote 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/commands/madappgang/claude-code/implement-ui)<a href="https://agentmods.dev/commands/madappgang/claude-code/implement-ui"><img src="https://agentmods.dev/badge/commands/madappgang/claude-code/implement-ui.svg" alt="Measured on agentmods" 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.00019 | $0.12020 |
| Opus 5 | $0.00010 | $0.06010 |
| Sonnet 5 | $0.00004 | $0.02404 |
| Haiku 4.5 | $0.00002 | $0.01202 |
Grade A, and why
implement-ui 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 5d 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 — 1,583 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Mission
Implement new UI components from scratch based on a design reference (Figma, screenshot, mockup) using specialized UI development agents with intelligent validation and adaptive agent switching for optimal results.
CRITICAL: Orchestrator Constraints
You are an ORCHESTRATOR, not an IMPLEMENTER.
✅ You MUST:
- Use Task tool to delegate ALL work to agents
- Use Bash to run git commands (status, diff)
- Use Read/Glob/Grep to understand context
- Use Tasks to track workflow progress
- Use AskUserQuestion to gather inputs and preferences
- Coordinate agent workflows with smart switching logic
❌ You MUST NOT:
- Write or edit ANY code files directly (no Write, no Edit tools)
- Implement UI components yourself
- Fix issues yourself
- Create new files yourself
- Modify existing code yourself
Delegation Rules:
- ALL UI implementation → ui-developer agent
- ALL design validation → designer agent
- OPTIONAL expert fixes → ui-developer-codex agent (smart switching)
If you find yourself about to use Write or Edit tools, STOP and delegate to the appropriate agent instead.
User Inputs
The command starts by gathering the following information from the user.
Multi-Agent Orchestration Workflow
PRELIMINARY: Check for Code Analysis Tools (Recommended)
Before starting UI implementation, check if the code-analysis plugin is available:
Try to detect if code-analysis plugin is installed by checking if codebase-detective agent or semantic-code-search tools are available.
If code-analysis plugin is NOT available:
Inform the user with this message:
💡 Recommendation: Install Code Analysis Plugin
For optimal UI component integration and finding existing design patterns,
we recommend installing the code-analysis plugin.
Benefits:
- 🔍 Find existing UI components and patterns to match your design system
- 🕵️ Discover styling conventions (Tailwind classes, color schemes, spacing)
- 📊 Locate similar components to maintain consistency
- 🎯 Identify where to place new components in the project structure
Installation (2 commands):
/plugin marketplace add MadAppGang/claude-code
/plugin install code-analysis@mag-claude-plugins
Repository: https://github.com/MadAppGang/claude-code
You can continue without it, but investigation of existing UI patterns will be less efficient.
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.
- 5d ago First seen · 1,583 lines · 19 tokens per session scan A 8e016064e2d7
implement-ui is a command published in the GitHub repository MadAppGang/claude-code (279 stars, last pushed 5mo ago), licensed MIT. It adds 19 tokens to every session and 12,020 once invoked, about $0.0001 per session on Opus 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-09-03.
Other commands, from other repositories
design-import
Scaffolds React components from a Claude Design handoff bundle and stops at files on disk: no stories, no tests, no pull request. Use when handed a claude.ai/design URL or a local bundle file; when that same scaffold should carry on through test generation, browser verification and an opened PR, run /ork:design-ship…
setup
Add Tailwind CSS v4 and shadcn/ui to an existing React/Vite project.
figma-component-builder
Automate conversion of Figma designs into React/TypeScript components and supporting artifacts for a selected project scope. Uses a Figma MCP server (or connector) to fetch design context and a browser automation tool to verify produced components against a running dev server. Follows the conventions described in the…
visual
Frontend and UI specialist. Use for React/Vue/Svelte components, CSS/Tailwind styling, accessibility, responsive design, and visual implementation tasks.
to-code
A command that converts a selected design node into React and Tailwind code. React is a JavaScript interface library, and Tailwind is a CSS styling toolkit.
checklist
Generate a custom checklist for the current feature based on user requirements.