check-design

check-design is a skill for Claude Code, Codex from leifericf/agentic-sdk. It costs 38 tokens per session (1,496 once invoked), scanned A, original, MIT.

A code-review check for UI design quality and the structured data that describes a view. It compares the result with the project's design rules, required states, and performance targets.

In plain words
What is it for?
Use it to review user-interface surfaces and their view specifications when the project marks the work as UI-related.
Why use it?
It helps catch weak defaults, missing interface states, unnecessary options, and designs that cannot be represented or cleaned up reliably.

Skill for Claude CodeCodex

Install

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.

agentmods
npx agentmods add skills/leifericf/agentic-sdk/check-design
Any agent
npx skills add leifericf/agentic-sdk --skill check-design
Clone the repo
git clone --depth 1 https://github.com/leifericf/agentic-sdk

Made for: Claude Code, Codex.

Wrote 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.

agentmods badge for check-design

README.md
[![agentmods](https://agentmods.dev/badge/skills/leifericf/agentic-sdk/check-design.svg)](https://agentmods.dev/skills/leifericf/agentic-sdk/check-design)
Your own site
<a href="https://agentmods.dev/skills/leifericf/agentic-sdk/check-design"><img src="https://agentmods.dev/badge/skills/leifericf/agentic-sdk/check-design.svg" alt="Measured on agentmods" height="20"></a>
Per session 38 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 1,496 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. Scan, not verified.
Origin original No closer match found in the catalogue.
Token cost

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.

ModelPer sessionOnce invoked
Fable 5 $0.00038 $0.01496
Opus 5 $0.00019 $0.00748
Sonnet 5 $0.00008 $0.00299
Haiku 4.5 $0.00004 $0.00150

Measured 4d ago against content hash 62c887ee5a8c, method: parsed. Prices are Anthropic first-party input rates as of 2026-08-30, from the pricing page.

Security

Grade A, and why

check-design 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.

skills/check-design/SKILL.md · 133 lines

How it starts

The opening of the file, as written. The whole thing — 133 lines — stays where its author put it; the contents beside it link to each section on GitHub.

check-design

Role: review the shard against the project's design language and the data-oriented UI contract.

Failure model: the UI ships a stance violation, an uncleansable view-spec, a frame-budget miss, or a state the design language requires but the view omits.

Active only when the descriptor has :ui? true. The authorities are the project's design docs (the design language, the design system, the spatial or interaction layer, the view-spec, the performance-UX targets, the token catalog); read them first. Scope is UI surfaces and the view-spec a feature produces. Code with no UI surface is out of scope; return NO FINDINGS.

What follows is the sweep pattern, not the spec.

Look for

  1. Maximalism over opinion. A new option, toggle, or configuration knob where a good default would serve. Flag exposed settings that exist because the author would not commit to a choice. The inverse is also a finding: a hardcoded value that genuinely needs to be configurable (a theme, a device, a shortcut set) but was buried.
  2. Weak defaults. A default that lands the user in a poor first experience: an empty state with no guidance, a sort or filter that hides the obvious result, an elevated widget shown with no path to reach it. The default is the product.
  3. Clutter, or wasted space. A view-spec that piles widgets the workflow does not need, or one that wastes real estate where density would serve. Whitespace must buy focus; density must serve the workflow. Cite the widget that does not earn its place.
  4. Effects that do not justify themselves. A visual or motion effect that decorates without improving understanding, feedback, or spatial context. A purely aesthetic touch is allowed only if it is subtle and rare; a gratuitous one is a finding.
  5. View-spec not data-clean. A function, closure, or object in a widget map instead of plain data; an event handler that is a callback instead of an action value; a late-binding value inlined instead of a placeholder keyword. The view-spec must be serializable data that round-trips through the project's reader.
  6. Look encoded in the view-spec, or a raw value where a token exists. Pixel colors, font sizes, spacing, or timings carried in the view-spec instead of semantic state the renderer interprets; a raw literal where a design token names the value. The view-spec names the type and references a token; the renderer owns the look.
  7. A new widget type that should not be. A fresh widget type where an existing one parameterized would do, or a new type with no recorded decision when it is a real choice between alternatives. Cite the existing widget it duplicates.
  8. Frame-budget or latency risk on the UI data path. A prepare or layout path too expensive to run per frame: a non-virtualized large grid, a linear pass over the whole set on every keystroke, a sort or projection recomputed when the input did not change. This overlaps check-performance; file it here only when the cost is born by the UI data path specifically.
  9. Diff-defeating churn. A view-spec rebuilt so unchanged subtrees become fresh equal-but-distinct objects, or missing stable keys, so the renderer cannot match old to new. This makes the per-frame diff do work the design commits to avoiding.
  10. Platform leakage into the UI data. A host-OS branch in the prepare, layout, or hit-test path, so the view-spec or bounds differ across platforms when the design commits to pixel identity.
  11. Missing states. A view that renders only the happy path, omitting the empty, loading, error, or permission-denied state the design language requires.
  12. Focus or accessibility gap. A focusable widget with no focus state, an unpredictable focus order, or focus lost across a transition; a treatment with no reduced-motion fallback, text that cannot scale, or contrast too low to read.
  13. Motion or depth that does not communicate. A motion that answers no "what changed", a depth treatment that reveals no structure, or a use that contradicts the grammar (slide for navigation, zoom for focus, fade for appearance).
  14. Experience target missed. A treatment whose feedback or interaction response would exceed the experience targets (immediate feedback, interaction response, consistent frame pacing). Overlaps check-performance; file it here when the UI experience target is what breaks.

Read the full file on GitHub · 133 lines

Changes

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.

  1. 4d ago First seen · 133 lines · 38 tokens per session scan A 62c887ee5a8c

Subscribe to this mod's changes

check-design is a skill published in the GitHub repository leifericf/agentic-sdk (5 stars, last pushed 2d ago), licensed MIT. It adds 38 tokens to every session and 1,496 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.

Related

Other skills, from other repositories

systematic-debugging

Use when encountering any bug, test failure, or unexpected behavior, before proposing fixes.

obra/superpowers · 21 tokens

brainstorming

You MUST use this before any creative work - creating features, building components, adding functionality, or modifying behavior. Explores user intent, requirements and design before implementation.

obra/superpowers · 37 tokens

auto-perf-optimize

Run agent-driven VS Code performance or memory investigations. Use when asked to launch Code OSS, automate a VS Code scenario, run the Chat memory smoke runner, capture renderer heap snapshots, take workflow screenshots, compare run summaries, or drive a repeatable scenario before heap-snapshot analysis.

microsoft/vscode · 62 tokens

chat-perf

Run chat perf benchmarks and memory leak checks against the local dev build or any published VS Code version. Use when investigating chat rendering regressions, validating perf-sensitive changes to chat UI, or checking for memory leaks in the chat response pipeline.

microsoft/vscode · 51 tokens

chat-pet-sprite-creation

Use when creating or changing VS Code chat pet sprite art, sprite sheets, state animations, eye treatments, Stable/Insiders variants, or pet transitions under src/vs/workbench/contrib/chat/browser/widget/media/chatPet.

microsoft/vscode · 53 tokens

cpu-profile-analysis

Analyze V8/Chrome CPU profiles (.cpuprofile) and DevTools trace files (Trace-.json). Use when: profiling performance, investigating slow functions, comparing code paths, finding bottlenecks, analyzing timeToRequest, understanding call trees from sampling profiler data, analyzing layout/paint/rendering, investigating…

microsoft/vscode · 71 tokens