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 skills/ntaffzii/skill-agents/ui-design-engineeringnpx skills add ntaffzii/Skill-Agents --skill ui-design-engineeringgit clone --depth 1 https://github.com/ntaffzii/Skill-AgentsWrote 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/ntaffzii/skill-agents/ui-design-engineering)<a href="https://agentmods.dev/skills/ntaffzii/skill-agents/ui-design-engineering"><img src="https://agentmods.dev/badge/skills/ntaffzii/skill-agents/ui-design-engineering.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.00115 | $0.01989 |
| Opus 5 | $0.00057 | $0.00994 |
| Sonnet 5 | $0.00023 | $0.00398 |
| Haiku 4.5 | $0.00012 | $0.00199 |
Grade A, and why
ui-design-engineering 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 6d 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 — 172 lines — stays where its author put it; the contents beside it link to each section on GitHub.
UI Design Engineering
Build interfaces that emerge from the product, user, and workflow rather than from a generic template.
Choose The Mode
- Build mode: inspect the product context, implement the interface, and validate it in a browser.
- Review mode: report concrete violations first, explain impact briefly, and propose the smallest useful fix.
For a detailed review checklist, read references/ui-audit.md.
For attribution and the external ideas that informed this skill, read references/credits.md.
Skill-Agents Integration
When this skill is loaded through mcp-tools:
- Use
route_requestto select the workflow and related skills. - Prefer the
frontend-uitoolset for implementation and browser QA. - Prefer the
design-frontendtoolset when Figma or design mapping is involved. - Use
build_agent_contextto load only the selected workflow and skills. - Use MCP tools in this order when available:
project,repo-index,package, anddocsfor discovery.figmaandbrowser-page-mapfor design and page context.code-editingfor implementation.browser,playwright, andplaywright-actionsfor visual and interaction QA.test-inspection,ci, andvalidationfor verification.
- Follow MCP safety policy and the project's allowed roots. Do not request broader tools than the task needs.
With Local LLM Orchestrator, use main-llm-tools while developing or auditing UI so the model receives this skill and the required MCP tools. A direct model such as main-llm or coding does not load skills automatically.
Workflow
-
Inspect before designing
- Read the existing frontend structure, design tokens, component library, routes, and nearby screens.
- Reuse established primitives and patterns unless they are the source of the problem.
- Identify the actual user, their immediate goal, the environment, and the frequency of the workflow.
-
State the design intent
- Name the product domain, desired density, visual tone, and interaction character.
- Identify one signature element that belongs specifically to this product.
- Name the obvious generic defaults to avoid.
- For operational tools, prioritize scanning, comparison, repeated action, and predictable navigation.
What ships with it
3 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.
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.
- 6d ago First seen · 172 lines · 115 tokens per session scan A 0bd33cf3c0a1
ui-design-engineering is a skill published in the GitHub repository ntaffzii/Skill-Agents (4 stars, last pushed 3d ago), licensed MIT. It adds 115 tokens to every session and 1,989 once invoked, about $0.0006 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 skills, from other repositories
bootstrap
Bootstrap CSS framework for responsive design. Use for quick styling.
electron
Electron cross-platform desktop apps with web technologies. Use for desktop apps.
shadcnui
Skill "shadcnui" from G1Joshi/Agent-Skills, covering shadcn/ui, when to use, core concepts, copy/paste and radix ui.
tailwindcss
Tailwind CSS utility-first framework. Use for custom designs.
pretext
Build creative browser demos with DOM-free text layout.
geo-platform-optimizer
Platform-specific AI search optimization — audit and optimize for Google AI Overviews, ChatGPT, Perplexity, Gemini, and Bing Copilot individually.