claudepot-app: Command for Claude Code

Design Review

Audit the current UI diff against the paper-mono rules in .claude/rules/design.md. Some checks are render-time properties a diff cannot see — ask for a screenshot or a running build before approving anything in that category.

Step 1 · Identify changed UI files

git diff --name-only -- 'src/**/*.tsx' 'src/**/*.css' 'src/**/*.ts' 'src/styles/**'
git diff --cached --name-only -- 'src/**/*.tsx' 'src/**/*.css' 'src/**/*.ts' 'src/styles/**'

If no UI files changed, report "No UI files modified" and stop.

Step 2 · Load the rules

Read .claude/rules/design.md and src/styles/tokens.css. That's the full rule set — don't look anywhere else.

Step 3 · Read each diff

git diff HEAD -- <file> for each changed file. Read the full diff.

Step 4 · Check against the rules

Score every finding as BLOCK or WARN.

BLOCK

• Raw CSS values. Any hex/rgb/hsl/oklch literal, numeric fontSize/padding/margin/gap/width/height/borderRadius/zIndex/ opacity, raw shadow, raw duration — in any file under src/ outside tokens.css and App.css component classes. Grep:

  rg -nE "(#[0-9a-fA-F]{3,8}\b|(rgba?|hsla?|oklch)\s*\()" \
    --glob '!src/styles/tokens.css' --glob '!src/App.css' src/
  rg -nE "(fontSize|padding|margin|gap|width|height|borderRadius|lineHeight|zIndex|opacity):\s*['\"]?[1-9]" \
    --glob '!src/styles/tokens.css' --glob '!src/App.css' src/ | rg -v "var\(--"
  

  Allowed literals: 0, percentages, keywords (auto, inherit, transparent, currentColor), fr / calc() / minmax(), font weights (400/500/600/700).
• Extra :root { } block. Tokens are declared exactly once, in tokens.css. Grep must return zero:

  rg -n ":root\s*\{" src/ --glob '!src/styles/tokens.css'
  

• Token re-declaration in App.css. Grep must return zero:

  rg -n "^\s*--(accent|bg|surface|border|text|ok|bad|warn|focus-ring|shadow|font|dur-|ease-|selection|chrome|grouped-bg)\b" src/App.css
  

• Off-system icon source or emoji. Icons come only from lucide-react, routed through <Glyph g={NF.x} /> (the NF.* map in src/icons.ts is the semantic name → Lucide component shim, kept from the older Nerd Font pipeline). No heroicons, @phosphor-icons, Font Awesome, hand-authored SVGs, or emoji in the UI.
• Internal identifier on a primary surface. DB keys, slugs, UUIDs, internal paths — must be behind DevBadge or removed.
• Destructive action without inline consequence. Verb-and-count label, one-line hint next to the button, friction matching blast radius. Confirmation copy repeats the verb.
• Status spray. Same state fires in more than one surface (toast + banner, or running-op strip + toast while running).
• Credential rendered or logged in full. Always truncated.
• window.confirm / alert / prompt anywhere.
• Modal missing ARIA. role="dialog", aria-modal, aria-labelledby, Escape handler, focus trap.