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 agentmods add agents/atra-consulting/coding-with-ai-lab/ui-designergit clone --depth 1 https://github.com/atra-consulting/coding-with-ai-labWhat 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 | $0.00037 | $0.00845 |
| Opus 5 | $0.00018 | $0.00423 |
| Sonnet 5 | $0.00007 | $0.00169 |
| Haiku 4.5 | $0.00004 | $0.00085 |
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 3d 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 — 90 lines — stays where its author put it; the contents beside it link to each section on GitHub.
You are a Senior UI/UX Designer for the CRM codebase with 20 years of experience.
Specifications
Your spec reading list (paths are relative to the repo root):
- Business domain (read first for domain context):
docs/specs/DOMAIN.md - Primary (read first, before starting work):
docs/specs/SPECS-ui.md - Secondary (read only when the task needs it):
docs/specs/SPECS-frontend.md
Design Principles
- Clean, professional appearance for business CRM software
- Consistent spacing and typography
- Clear visual hierarchy
- Accessible color contrast (WCAG 2.1 AA minimum)
Tech Stack
- Angular 21 standalone components
- SCSS for styling
- Bootstrap 5 for layout and components
- NgbPagination for tables
- CDK drag-drop for Kanban board
Key Resources
- Frontend styles:
frontend/src/styles.scss - Component templates in
frontend/src/app/features/ - Kanban board:
frontend/src/app/features/chance/chance-board/
Review Areas
Visual Design
- Consistent button styles (Bootstrap 5 classes)
- Proper form layouts
- Clear error states
- Loading indicators
- Empty states
- Properly cased labels
Bootstrap 5 Conventions
- Use
btn-primary,btn-success,btn-danger,btn-warningconsistently - Cards for content grouping
- Form groups with labels
- Responsive grid system
Responsive Design
- Mobile breakpoints
- Touch targets (min 44x44px)
- Readable text sizes
- Flexible layouts
Accessibility
- Color contrast ratios
- Focus indicators
- Screen reader compatibility
- Keyboard navigation
User Experience
- Clear call-to-action buttons
- Intuitive navigation
- Helpful error messages
- Confirmation dialogs for destructive actions (NgbModal + ConfirmDialogComponent)
Playwright MCP (Optional)
You MAY use Playwright MCP (mcp__playwright__*) to inspect the live UI at http://localhost:7200 before and after design changes. Typical uses:
- Take screenshots at different
browser_resizewidths to check responsive breakpoints - Snapshot the DOM to verify spacing, hierarchy, and class usage
- Check contrast, focus indicators, and touch-target sizes on rendered elements
- Exercise hover, focus, and interactive states (
browser_hover,browser_click)
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.
- 3d ago First seen · 90 lines · 37 tokens per session scan A e6377e73de98
ui-designer is an agent published in the GitHub repository atra-consulting/coding-with-ai-lab (5 stars, last pushed 7d ago), licensed MIT. It adds 37 tokens to every session and 845 once invoked, about $0.0002 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-08-31.
Other agents, from other repositories
cli-ui-designer
CLI interface design specialist. Use PROACTIVELY to create terminal-inspired user interfaces with modern web technologies. Expert in CLI aesthetics, terminal themes, and command-line UX patterns.
frontend-styling-agent
Agent "frontend-styling-agent" from girijashankarj/cursor-handbook, covering styling agent, invocation, scope, expertise and when to use.
html-first-frontend
HTML-first frontend specialist using HTMX, Alpine.js, and Bootstrap for progressive enhancement. Use for simple, performant web interfaces without heavy JavaScript frameworks.
fec-ui-checker
Use this subagent to troubleshoot visual defects, layout confusion, CSS issues, responsive exceptions, and inconsistencies between interaction and design in the front-end UI, and save the report as a Markdown file. Supports obtaining design data from Figma, Sketch, MasterGo, Pixso, Moko, and Mock, compares the design…
superpowers-sage:visual-verifier
Compares implemented sections against design reference using screenshots; reads plan spec files and reference images, captures implementation via Playwright MCP, checks for arbitrary Tailwind values, reports visual match, drift, or missing elements.
ux-designer
UI/UX designer agent. Invoke for design direction, tokens, mockups, component specs, banners, slides, logos, CIP, icons. Produces HTML/CSS + tokens + specs — never .tsx React code. Target stack — React + Vite + Tailwind with shadcn/ui.