Borrowing it
Nothing to install: this file belongs to micheltlutz/dev-challenge. Take a copy, put it at the same path in your own repository, and replace the rules that are about this project with yours.
curl -O https://raw.githubusercontent.com/micheltlutz/dev-challenge/main/.claude/skills/design-fidelity/SKILL.mdgit clone --depth 1 https://github.com/micheltlutz/dev-challengeWrote 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/micheltlutz/dev-challenge/design-fidelity)<a href="https://agentmods.dev/skills/micheltlutz/dev-challenge/design-fidelity"><img src="https://agentmods.dev/badge/skills/micheltlutz/dev-challenge/design-fidelity/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/skills/micheltlutz/dev-challenge/design-fidelity"><img src="https://agentmods.dev/badge/skills/micheltlutz/dev-challenge/design-fidelity.svg" alt="Reviewed on agentmods" width="80" height="20"></a>- NVIDIA SkillSpector pass
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.00075 | $0.01124 |
| Opus 5 | $0.00037 | $0.00562 |
| Sonnet 5 | $0.00015 | $0.00225 |
| Haiku 4.5 | $0.00007 | $0.00112 |
Grade A, and why
design-fidelity 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 9d 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 — 113 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Design fidelity
Check an implementation against the lab's design system, and say specifically what is off rather than "looks close".
Sources, in order of authority
- Figma — the canonical design. Node ids per screen are in
specs/design/screens.md. Reachable via the optional Figma MCP server in.mcp.json. specs/design/tokens.json— sampled from the exported mockups. The machine-readable fallback, and good enough for every challenge.specs/design/style-guide.md— the same thing in prose, with the reasoning.- The mockup PNGs in
readme_files/images/.
If a token disagrees with Figma, Figma wins — and the token is a bug worth an issue.
How to check
If browser automation is available, screenshot the running UI at the design's viewport (1440×1024 desktop, 375×812 mobile) and compare against the mockup side by side. Otherwise read the stylesheet and component source.
Sample computed styles rather than trusting the source — a variable can be defined correctly and then overridden.
The checklist
Colour
| Role | Token | Value |
|---|---|---|
| Primary action | --color-action-default |
#19191C |
| Brand purple | --color-brand-primary |
#8E48EC |
| Deep purple | --color-brand-primary-deep |
#4E01B4 |
| Canvas | --color-surface-canvas |
#EFEFF0 |
| Credit | --color-semantic-credit |
#0CB97B |
| Debit | --color-semantic-debit |
#E02244 |
The mistake to look for first: a purple primary button. It is the single most common fidelity failure. Purple is for brand surfaces — the auth split panel, the active nav item, the statement table header. Actions are near-black.
Second: hard-coded hex. If the stylesheet contains #8E48EC rather than
var(--color-brand-primary), say so. The tokens exist to be imported.
Money semantics
Credit green, debit red — and never colour alone. The design pairs it with
↑/↓ and +/-, and WEB05-AC3 checks for it. A table that only uses
colour is unreadable to a red-green colour-blind user, which is roughly one in
twelve men.
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.
- 9d ago First seen · 113 lines · 75 tokens per session scan A dc75fd784953
design-fidelity is a skill published in the GitHub repository micheltlutz/dev-challenge (32 stars, last pushed 7d ago), licensed MIT. It adds 75 tokens to every session and 1,124 once invoked, about $0.0004 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
ss-lint
Quick automated lint — detects common design system violations in seconds.
ss-audit
Audit screens for UX issues using Nielsen's heuristics and modern mobile UX best practices.
design-standards
Apply production-grade design standards when building or reviewing pages, components, or UI. Use this skill whenever the user asks to build a page, design a component, lay out a section, review the UI, fix the layout, or check design quality. Triggers on build a page, create a component, design a section, hero, card…
code-quality-principles
Applies KISS, YAGNI, and SOLID principles for clean code with reduced complexity. Use when refactoring or reviewing code for over-engineering.
app-ui-design
Mobile app UI design expert for iOS and Android. Use when designing app interfaces, creating design systems, ensuring accessibility, or following platform guidelines. Covers Material Design 3, Human Interface Guidelines, color theory, typography, and 2025 trends.
ln-75-architecture-diagram-builder
Creates current or target architecture diagrams as the primary deliverable. Not for UI design, architecture audits, or invented structure.