Interface Design Audit — Security skill for Claude Code
Check existing code against your design system for spacing, depth, color, and pattern violations.
How to install Interface Design Audit
Installs to ~/.claude/skills/kmshihab7878-claude-code-setup-interface-design-audit/SKILL.md
mkdir -p ~/.claude/skills/kmshihab7878-claude-code-setup-interface-design-audit && curl -fsSL https://raw.githubusercontent.com/kmshihab7878/claude-code-setup/HEAD/commands/interface-design-audit.md -o ~/.claude/skills/kmshihab7878-claude-code-setup-interface-design-audit/SKILL.md Restart Claude Code, or start a new session, for it to be picked up.
What Interface Design Audit does
name: interface-design:audit description: Check existing code against your design system for spacing, depth, color, and pattern violations.
interface-design audit
Check existing code against your design system.
Usage
/audit # Audit specific file/directory
/audit # Audit common UI paths
What to Check
**If `.interface-design/system.md` exists:**
- Spacing violations
- Find spacing values not on defined grid
- Example: 17px when base i
Alternatives in Security
- Defense In Depth — Implement multi-layered testing and security best practices 98.1k ★
- Competitive Audit — Capture a competitor website with Playwright and extract its color system, typography, layout patterns, and 's 309 ★
- Postgres — Execute safe read-only SQL queries against PostgreSQL databases with multi-connection support and defense-in-d 159 ★
Full documentation available on GitHub
View Source RepositoryRelated Skills
Review CSS Architecture
Audit CSS and design-token usage against the console-idiom rubric: ad hoc overrides, magic values, duplicated
UI UX Review
Run a visual design conformance audit using the ui-ux-engineer agent — spacing, typography, colour tokens, res
Stark Audit
Audit existing UI/UX code, flows, or screenshots against UX heuristics plus the matching platform's anti-slop
Verify Flow
Validates existing agents, commands, skills, and hooks against project conventions. Detects structural issues,
Fixing Accessibility
Audit a file or session for WCAG 2.1 AA accessibility violations — ARIA labels, keyboard navigation, focus man
Audit Design
Audit an existing codebase against its original docs/specs, auto-update stale docs, clean up dangling/duplicat
Related Agents
Design Auditor
Retrospective 7-pillar audit (copy, visual hierarchy, color, typography, layout/spacing, experience, micro-pol
Engineering Design Specialist
Expert design engineer specializing in visual judgment, typography, spacing, color hierarchy, motion polish, a
Omd Designer Review
Visual + brand consistency reviewer. Audits HTML/MD/JSX against the brand DESIGN.md across typography, color b