ghostclaw: Command for Claude Code

Design Normalize Command

Fix design violations at both layers (config compliance + technical quality) with preview before applying.

Two-Layer Normalization

1. Layer 1: Config Compliance - Replace hardcoded values with design system tokens
2. Layer 2: Technical Quality - Fix Impeccable principle violations

Usage

/design normalize <file_or_component>

Examples:

/design normalize src/components/Button.tsx
/design normalize src/pages/HomePage.tsx
/design normalize src/app/dashboard/page.tsx

Optional flags:

/design normalize src/components/Button.tsx --auto-apply  # Skip preview, apply immediately
/design normalize src/components/Button.tsx --layer=config  # Only fix config violations
/design normalize src/components/Button.tsx --layer=quality  # Only fix quality issues

Process Flow

Step 1: Audit

Run the design audit command internally to identify violations:

• Layer 1: Config violations (hardcoded colors, spacing, fonts, etc.)
• Layer 2: Technical quality issues (contrast, line-height, touch targets, etc.)

Step 2: Generate Fixes

For each violation, generate a fix:

Layer 1: Config Compliance Fixes (Auto-fixable)

1. Hardcoded Colors → Palette Tokens

   // Before:
   <div className="bg-[#3b82f6] text-white">
   
   // After (using .design.json palette):
   <div className="bg-primary-600 text-white">
   

2. Arbitrary Spacing → Scale Tokens

   // Before:
   <div className="p-[13px] mb-[27px]">
   
   // After (using .design.json spacing scale):
   <div className="p-3 mb-6">  // p-3=12px, mb-6=24px from scale
   

3. Custom Font Sizes → Modular Scale

   // Before:
   <h1 className="text-[26px]">
   
   // After (using .design.json type scale):
   <h1 className="text-2xl">  // 2xl=24px from scale
   

4. Custom Border Radius → System Values

   // Before:
   <div className="rounded-[13px]">
   
   // After (using .design.json radius values):
   <div className="rounded-lg">  // lg=12px from system