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/randomittin/heimdall/designmatchnpx skills add randomittin/heimdall --skill designmatchgit clone --depth 1 https://github.com/randomittin/heimdallWrote 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/randomittin/heimdall/designmatch)<a href="https://agentmods.dev/skills/randomittin/heimdall/designmatch"><img src="https://agentmods.dev/badge/skills/randomittin/heimdall/designmatch.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.00069 | $0.03050 |
| Opus 5 | $0.00034 | $0.01525 |
| Sonnet 5 | $0.00014 | $0.00610 |
| Haiku 4.5 | $0.00007 | $0.00305 |
Grade A, and why
designmatch 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.
How it starts
The opening of the file, as written. The whole thing — 235 lines — stays where its author put it; the contents beside it link to each section on GitHub.
designmatch
Overview
Match RN screen → HTML canonical at ≥95% visual parity. Closed loop: VQA stub seeds redux → Playwright renders canonical PNG → adb/xcrun captures native PNG → pixelmatch + ssim.js scores diff → composite triptych for eyeball review → iterate.
Origin: a production React Native app. A single screen's SSIM climbed 35% → 55% over ~30 commits of eyeballed pixel-tweaking before this loop replaced it.
Pass gate: SSIM ≥ 0.95 OR pixelDiffPct ≤ 5%.
When to Use
- RN screen drift from Claude Design HTML canonical
- Visual parity audit before ship
- Per-screen iteration loop on real device
- Closing the design ↔ code feedback gap
Do NOT use for: unit logic, redux state shape, navigation graph correctness — those are not visual.
Quick Start — URL in, ready-to-translate out
From the RN project root:
designmatch init "<claude-design-url>" --app-dir . --port-all
This single command does the full bootstrap:
- App side: copies
assets/visual-qa.tsinto the app (src/lib/visual-qa.tsby default; auto-detectssrc/utils/,src/,app/, or root), writes default.designmatch/state.vqa.json, updates.gitignore. - Fetch: Playwright headless downloads the entire canonical bundle (HTML + JSX + assets) to
.designmatch/canonical/by intercepting every network response, then flipsconfig.jsonkind fromurl→local-dir(original URL preserved for re-fetch). - Port-all: discovers every
screen-*.jsx|tsx/*Screen.jsx|tsxin the bundle and writes each tosrc/screens/<Name>.tsxpreceded by the TRANSLATION GUIDE (web → RN idiom map). - Wire: prints the
App.tsxsnippet (primeVisualQaFlag / applyVisualQaState / overrideFeatureFlags / VqaBadge / long-press handler).
Slash command equivalent (inside a Heimdall session): /hmd:designmatch <url-or-path>.
Auth: if the canonical URL is behind login, add --headed so Chromium launches visibly for interactive auth — the fetch picks up after sign-in.
Granular subcommands (when you want pieces, not the one-shot):
What ships with it
9 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.
- assets/visual-qa.ts 8.6 KB runs code
- references/anti-patterns.md 6.4 KB
- references/canonical-values.md 3.0 KB
- scripts/emit-parity.js 6.3 KB runs code
- scripts/fetch-canonical.js 5.1 KB runs code
- scripts/iterate-screen.sh 6.4 KB runs code
- scripts/render-canonical.js 8.1 KB runs code
- scripts/render-web-candidate.js 9.2 KB runs code
- scripts/visual-diff.js 8.6 KB runs code
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 · 235 lines · 69 tokens per session scan A 90a1152f4733
designmatch is a skill published in the GitHub repository randomittin/heimdall (5 stars, last pushed 13d ago), licensed MIT. It adds 69 tokens to every session and 3,050 once invoked, about $0.0003 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
ss-audit
Audit screens for UX issues using Nielsen's heuristics and modern mobile UX best practices.
agentic-a11y
Use when auditing a user-facing app — web, mobile (iOS/Android/React Native/Flutter), desktop, CLI, or games — for accessibility barriers or WCAG 2.2 conformance, before shipping UI changes, or in response to concerns about screen-reader, keyboard, low-vision, motor, cognitive, or photosensitive users. Not for general…
flutter-ui
Build Flutter UI from Figma MCP or image input. Scans src for design tokens (colors, sizes, text styles), existing components, and naming conventions before writing a single line of code. Never hard-codes values.
design-ui
Design UI screens in Google Stitch and produce a Compose Implementation Blueprint with HTML + token inventories persisted for downstream skills.
pdlc-ui-design-pro
UI/UX 专业设计（PDLC 集成层，依赖 ui-ux-pro-max）.
pdlc-ui-design
Skill "pdlc-ui-design" from kanfu-panda/pdlc-skills, covering ui/ux 设计, pdlc 前置检查（必须执行，不可跳过）, 工作流程, 文档内容 and 线框图示例格式.