Audits UI code against modern Web Interface Guidelines for typography, interactive affordances, responsive layouts, contrast, and accessibility compliance.
Collected from public GitHub. Every version is saved exactly as it was and never changes. Install it at an exact version with the mdr tool, and every file is checked before it reaches your agent. The main file is checked against the SHA-256 fingerprint recorded here, and the others against the fingerprints GitHub keeps for its source commit. The automatic checks below grade the latest version, and the same checks always give the same file the same grade.
What the file says
# Web Interface Guidelines
Auditing rules for React, Next.js, and web frontend UI reviews.
## Core Review Checkpoints
### 1. Typography & Hierarchy
- Headings use semantic tags (`<h1>` to `<h6>`) in logical order without skipping levels.
- Line heights and letter spacing maintain readable proportions (`leading-relaxed` or `leading-normal` for body text).
- Avoid fixed pixel font sizes; use responsive Tailwind classes (`text-sm`, `text-base`, `text-lg`).
### 2. Interactive States & Affordances
- **Hover, Focus, and Active states**: Every interactive element (`<button>`, `<a>`, `<input>`) must have discernible hover, focus-visible, and active states.
- **Focus Rings**: Never use `outline-none` without providing an accessible `focus-visible:ring-2 focus-visible:ring-offset-2` replacement.
- **Loading & Disabled States**: Interactive buttons triggering async actions must indicate loading and be disabled to prevent duplicate submissions.
### 3. Touch Targets & Mobile Usability
- Minimum touch target size for mobile/tablet is **44x44px** (or `min-h-[44px] min-w-[44px]`).
- Adequate padding between adjacent interactive elements to prevent mis-taps.
### 4. Color & Contrast
…
The line at the top of this page pins the label v1.0.0, which is what most people want. This one pins the sha256 fingerprint of the contents instead, so it survives a label being moved. Either way the exact version is written to mdr.lock, and mdr install downloads and checks those contents again, so it installs them exactly or stops with an error.
A 17 of 17 checks passed. Fixed automatic checks with no AI involved, so the same checks give the same answer every run.
pass: Frontmatter block present
pass: Frontmatter declares a name
pass: Frontmatter declares a description
pass: Size between 200 bytes and 200 KB (1906 bytes)
pass: No zero-width or bidi control characters
pass: No instruction hidden inside an HTML comment
pass: No link to an exfiltration or paste host
pass: No credential-shaped string
pass: No instruction to send local credentials anywhere
pass: No text hidden with inline styles
pass: No prompt-injection phrasing
pass: No curl or wget piped into a shell
pass: No recursive delete of root, home or parent
pass: No instruction to read or print local credentials
pass: No base64 blob over 200 characters
pass: No link to a raw IP address
pass: No script tag
Source
GitHub
smicolon/ai-kit · 7 stars · license MIT · pushed 2026-09-15 · branch main
API
GET https://markdownregistry.com/api/v1/artifacts/art_t6tjl27fadpg6y2w
GET https://markdownregistry.com/api/v1/resolve?ref=smicolon/ai-kit/web-design-guidelines
GET https://markdownregistry.com/api/v1/blob/5653a4388b29a13273d73ee4267c9475ab71ae0d10d44b4f34281d64fca8917b
Your AI assistant does the legwork. You hear about the deals worth your word. Hand yours the standing instructions at modelranch.com and it joins the network that reads files like this one.
smicolon/ai-kit · packs/clarify/skills/flow-detector/SKILL.md · Analyzes a task description plus the surrounding codebase and produces a list of candidate end-to-end flows. Activates…
smicolon/ai-kit · packs/clarify/skills/flow-selector/SKILL.md · Presents 2+ candidate flows from flow-detector and asks the user to pick one. Issues exactly one AskUserQuestion. Never…
smicolon/ai-kit · packs/dev-loop/skills/tdd-planner/SKILL.md · This skill should be used when the user asks to "plan a feature", "prepare for dev loop", "structure TDD approach"…
smicolon/ai-kit · packs/django/skills/import-convention-enforcer/SKILL.md · Automatically validate and fix Django import patterns to use absolute modular imports with aliases. Use when writing…
smicolon/ai-kit · packs/django/skills/migration-safety-checker/SKILL.md · This skill should be used when the user asks to "create a migration", "run makemigrations", "modify a model field"…
bytedance/deer-flow · skills/public/web-design-guidelines/SKILL.md · Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit…
vercel-labs/agent-skills · skills/web-design-guidelines/SKILL.md · Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit…
awesome-dsh-plugin/awesome-dsh-plugin · .agents/skills/web-design-guidelines/SKILL.md · Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit…
tech-leads-club/agent-skills · packages/skills-catalog/skills/(design)/web-design-guidelines/SKILL.md · Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit…
gronxb/hot-updater · .agents/skills/web-design-guidelines/SKILL.md · Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit…
fcakyon/claude-codex-settings · plugins/react-skills/skills/web-design-guidelines/SKILL.md · Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit…
coco-research/coco · skills/web-design-guidelines/SKILL.md · Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit…
evovexai/evoflow · skills/public/web-design-guidelines/SKILL.md · Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit…
