kmshihab7878

Interface Design Audit — Security skill for Claude Code

Security community

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

Terminal
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:**

  1. 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 Repository