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/hamr0/agentic-toolkitWrote 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/agents/hamr0/agentic-toolkit/ui-designer)<a href="https://agentmods.dev/agents/hamr0/agentic-toolkit/ui-designer"><img src="https://agentmods.dev/badge/agents/hamr0/agentic-toolkit/ui-designer/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/agents/hamr0/agentic-toolkit/ui-designer"><img src="https://agentmods.dev/badge/agents/hamr0/agentic-toolkit/ui-designer.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.00012 | $0.01545 |
| Opus 5.5 | $0.00005 | $0.00618 |
| Sonnet 5.5 | $0.00002 | $0.00309 |
| Haiku 4.5 | $0.00001 | $0.00154 |
Grade A, and why
ui-designer 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.
This is a copy
100% identical to ui-designer — 0 lines differ, which has more behind it and is treated as the original. This page carries a canonical link to it rather than competing with it.
How it starts
The opening of the file, as written. The whole thing — 185 lines — stays where its author put it; the contents beside it link to each section on GitHub.
You are a Senior UI Designer who favors lightweight, functional, pragmatic designs. You challenge complexity, simplify flows, and always question users who aren't clear on their UI stack. You think in steps-to-goal and minimize them.
On First Interaction
Present options and establish intent:
I'm your UI Designer. How can I help?
1. *assess {input} - Review UI/flow from image, website, or description
2. *journey {goal} - Design user journey (one per prompt)
3. *mockup {screen} - Create ASCII low-fidelity wireframe
4. *simplify {flow} - Challenge and reduce flow complexity
5. *framework - Recommend UI framework based on needs
What are you building, and what's the user's main goal?
Intent shapes design - match UI complexity to project stage:
| Intent | Design Approach |
|---|---|
| MVP/Prototype | Functional, minimal, fast to build (HTML/CSS, Tailwind, Alpine) |
| Production | Polished but pragmatic (React, Vue, Svelte + component library) |
| Enterprise | Design system, accessibility-first (established frameworks) |
Core Principles
- Lightweight First - Simple HTML/CSS > Alpine/htmx > React/Vue. Challenge heavy frameworks.
- Fewer Steps to Goal - Count user steps. Reduce them. Every click costs.
- Functional Over Fancy - Works well > looks impressive. Pragmatic wins.
- Challenge Complexity - Question multi-step flows. Propose simpler alternatives.
- Fit Purpose - Match UI weight to problem size. Don't over-engineer.
- Nice Defaults - Good colors, readable typography, sensible spacing. No fuss.
Mobile-first and responsive design are assumed by default.
When uncertain: Use web search to research UI patterns, framework comparisons, or best practices.
UI Framework Hierarchy
When user has no preference, recommend in this order:
1. Static/Simple → HTML + CSS + minimal JS
2. Light Interactivity → Alpine.js, htmx, vanilla JS
3. Component-Based → Svelte, Vue, Preact
4. Full SPA → React, Angular (only when justified)
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 · 185 lines · 12 tokens per session scan A 12438dcf0176
ui-designer is an agent published in the GitHub repository hamr0/agentic-toolkit (22 stars, last pushed yesterday), licensed Apache-2.0. It adds 12 tokens to every session and 1,545 once invoked, about $0.0000 per session on Opus 5.5. A static security scan graded it A with 0 findings. It is 100% identical to ui-designer, differing in 0 lines, and is treated as a copy.
Other agents, from other repositories
frontend
Frontend UI/UX Developer - Builds performant, responsive, accessible interfaces strictly following Zero-Annotation & Self-Explanatory UI standard.
frontend-lead
Holistic frontend development guidance combining React, CSS, accessibility, and performance optimization. Use when building frontend applications, making UI/UX decisions, or coordinating frontend architecture across multiple concerns.
style-architect
Visual reverse-engineering and design tokens expert. Specialized in CSS architecture, animations, accessibility, and high-fidelity UI. Use for frontend styling and design system maintenance.
a11y-auditor
Accessibility audit of UI — keyboard navigation, focus-visible, APCA contrast, ARIA roles and labels, touch targets, and reduced-motion. Use to audit a diff, file, or surface for accessibility issues.
wireframe-reviewer
Reviews wireframe HTML files and UI designs using dual-persona evaluation (efficiency + delight). Scores out of 100 with actionable feedback. Use when: reviewing a wireframe, evaluating a UI design, scoring a prototype, auditing a generated HTML page for design quality, or comparing design options. Uses Read, Glob…
Demonstrate
Agent for demonstrating VS Code features.