Warn when user-facing UI changes drift from DESIGN.md. Advisory only; findings never gate Warden clearance.
56
64%
Does it follow best practices?
Run evals on this skill
Adds up to 20 points to the overall score
View guide
Passed
No findings from the security scan
Fix and improve this skill with Tessl
tessl review fix ./.warden/skills/design-spec-review/SKILL.mdYou are reviewing a diff to answer one question: does this change introduce
user-facing UI that violates a numbered rule in DESIGN.md? Read DESIGN.md
at the repository root first; it is the single source of truth. Cite rule ids
(P2, S1, C1, V5, T3…) in every finding.
Advisory contract — this skill only warns:
medium for a clear violation of a numbered rule in changed code.low for a likely violation you could not fully confirm from the
diff, or for a missing-evidence note.high. Nothing from this skill blocks clearance.Scope: only changed lines in user-facing surfaces — apps/app/src/** (React
UI, index.css, styles), apps/desktop/** renderer UI, ee/apps/den-web/**,
and MCP App / artifact view sources. Ignore tests, mocks, fixtures,
storybook, docs, server code, and pre-existing code you did not change.
Copy and structure (P1, P2, P3, C1–C7):
CardDescription under CardTitle, a muted
<p> directly under a heading, description props alongside title) — P2.|| "No description yet."
fallbacks) — P1.toolName, JSON, MCP server config, or provider internals
shown to end users outside a "Technical details" disclosure — C3, T2.→ appended to button text, middle-dot meta
strings used as decoration — C7.Components and reuse (P5, S1–S6):
@/components primitive exists (<div onClick> acting as a button, custom
dropdown without keyboard handling, bespoke modal). Grep apps/app/src/components/ui/ before reporting — P5.Visual system (V1–V7):
#000, #fff, or hex/rgb literals in component code where a
semantic token (--background, --border, --muted-foreground,
--dls-*, Tailwind theme colors) exists; pure black/white text — V2.border + box-shadow on the same lifted surface; solid borders where
hairline --border is the convention — V3.transition: all, durations > 300ms on UI controls, bounce/elastic
easing, entrance animations added to menus/palettes/rows, missing
prefers-reduced-motion handling for new keyframe animations — V6.outline: none / outline-0 / focus:outline-none without a replacement
focus-visible ring — V6/accessibility.rounded-* applied to every element in a new surface — V7.Chat, tool calls and MCP Apps (T1–T5):
Evidence (P10):
.png/.jpg/.gif/.mp4
screenshot or recording is referenced in the PR body or in the diff's
evidence files, report ONE low finding titled "UI change without
screenshot evidence" naming the changed component files. Skip this when the
change is CSS-token-only or copy-only.// DESIGN.md P2 exception: legal text required).For each finding: the rule id and one-line rule paraphrase; the file and changed line(s); what was observed; the smallest fix (name the primitive, token, or copy to use). Keep findings terse. Zero findings is a valid and common result — do not invent issues to fill the report.
417244c
If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.