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/educlopez/ui-craft/auditnpx skills add educlopez/ui-craft --skill auditgit clone --depth 1 https://github.com/educlopez/ui-craftWrote 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/educlopez/ui-craft/audit)<a href="https://agentmods.dev/skills/educlopez/ui-craft/audit"><img src="https://agentmods.dev/badge/skills/educlopez/ui-craft/audit.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 | $0.00045 | $0.00917 |
| Opus 5 | $0.00023 | $0.00458 |
| Sonnet 5 | $0.00009 | $0.00183 |
| Haiku 4.5 | $0.00005 | $0.00092 |
Grade A, and why
audit 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 4d 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.
What it actually says
Context: this sub-skill is one lens of the broader ui-craft skill. If the ui-craft skill is also installed, read its SKILL.md first for Discovery + Anti-Slop + Craft Test, then apply the specific lens below.
Run a technical audit of the UI at $ARGUMENTS. Load the ui-craft skill and apply the audit lens.
Step 0: Visual capture (mandatory)
Code-only review is insufficient. Every audit/critique starts with the surface as the user sees it. Try the following in order; use the first one available:
- Playwright MCP — if
playwrightMCP server is available, use it. Capture full-page screenshots at three viewports: desktop (1280×800), tablet (768×1024), mobile (375×812). Capture dark mode if the app supports it. - Browser DevTools / Chrome MCP — second choice; same viewport set.
- Other browser automation (
agent-browser,cursor-ide-browser) — third choice. - Ask the user — last resort. If no automation is available, request screenshots from the user before proceeding. Be specific:
- "Visual review needs screenshots. Please provide:
- Full-page at 1280px (desktop)
- Full-page at 768px (tablet)
- Full-page at 375px (mobile)
- Dark mode of each, if supported."
- "Visual review needs screenshots. Please provide:
Do not begin the review until visuals are captured or provided. State this explicitly to the user when no automation succeeds — don't silently fall back to code-only review.
If the user declines to provide screenshots, run a code-only pass and clearly mark the report [CODE-ONLY REVIEW — visual issues not assessed] at the top so the limitation is explicit.
Note: audit is knob-agnostic — accessibility and performance are not tunable.
Scope (non-negotiable checks):
- Accessibility — read
references/accessibility.md:- Visible
:focus-visibleon every interactive element - Keyboard reachable, no focus traps
- Touch targets ≥ 44px (mobile)
- Color not the only signal for state
- Form labels, error association, required indication
prefers-reduced-motionhonored for all animations
- Visible
- Performance — read
references/motion.mdRendering Performance section:- Only
transform/opacityanimated (nowidth/top/height) - No
transition: all will-changescoped to active interaction, removed after- Images have
width/heightoraspect-ratio(CLS) - No layout thrash in scroll/resize handlers
- Only
- Responsive — read
references/responsive.md:- Mobile-first breakpoints, no fixed-width components
env(safe-area-inset-*)respected on fixed elements- Touch zones don't overlap
- No horizontal scroll at 320px
Output format — the Review Format table from SKILL.md:
| Before | After | Why |
|---|
Group findings by priority: Critical (blocks usability/a11y) → High-impact (immediately noticeable) → Quick wins (polish).
Do NOT rewrite code unless asked. Report findings first; wait for approval before editing.
Close with a Craft Report (references/review.md → Craft Report), wrapping the findings table above — Checked states scope (a11y/perf/responsive, at which viewports), Passed carries anything inspected and found sound, Changed stays empty pre-approval, Verdict names the top priority. Produce it even on a clean audit — a11y/perf/responsive coming back clean is the finding.
Next step: /harden — turn the findings into real production coverage (rung 1).
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.
- 4d ago First seen · 65 lines · 45 tokens per session scan A f8fbfd748efd
audit is a skill published in the GitHub repository educlopez/ui-craft (310 stars, last pushed today), licensed MIT. It adds 45 tokens to every session and 917 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-30.
Other skills, from other repositories
software-in-worten
Übersetzt zwischen Benutzeroberfläche und Text — in beide Richtungen. Aus einer beschriebenen Oberfläche wird ein Skill; aus einem Skill wird eine Oberfläche. Nutzen, wenn eine Anwendung entworfen wird und der Ablauf noch unklar ist, wenn ein bestehendes Werkzeug als Skill verfügbar gemacht werden soll, wenn…
gradio-themes
Build and customise Gradio themes. Use when creating, editing, or publishing Python-based Gradio themes that control colours, typography, spacing, shadows, and dark mode.
visual-plan
Turn ordinary text plans into rich interactive visual plans with diagrams, file maps, annotated code, open questions, and UI/prototype review when useful.
shadcn-ui-flutter
A comprehensive Flutter UI library inspired by shadcn/ui. Provides high-quality, customizable, and accessible components including Buttons, Cards, Forms, and more. Use this skill when building Flutter UIs, implementing design systems, or needing specific component usage examples.
accessibility
Audit and improve web accessibility following WCAG 2.2 guidelines. Use when asked to "improve accessibility", "a11y audit", "WCAG compliance", "screen reader support", "keyboard navigation", or "make accessible".
ui-design-system
Master the creation, maintenance, and governance of design systems — from design tokens and component architecture to documentation, versioning, and accessibility.