M3 Anti-Slop Validator

Purpose

Enforce M3 Expressive aesthetic standards by detecting and preventing generic "AI slop" patterns: purple gradients, flat layouts, timid contrasts, and cookie-cutter designs. Provides automated validation with aesthetic quality scoring (0-100) and actionable remediation steps.

When to Use

Use this skill when you need to:

• Validate component aesthetics against M3 Expressive standards before deployment
• Detect generic AI patterns (Inter fonts, purple gradients, flat backgrounds)
• Score design quality with objective 0-100 aesthetic rating
• Generate remediation reports with specific improvement recommendations
• Prevent design system drift by catching slop before it ships
• Enforce expressive standards in CI/CD pipelines
• Audit existing components for M3 compliance

Trigger scenarios:

• "Is this component too generic?"
• "Validate this design against M3 Expressive standards"
• "Why does this feel like AI-generated slop?"
• "Score this component's aesthetic quality"

Overview

This skill enforces M3 Expressive aesthetic standards by:

1. Detecting Generic Fonts - Flag Inter, Roboto, Arial, system fonts (unless paired with distinctive display fonts)
2. Identifying Clichéd Colors - Detect purple gradients on white, timid palettes, boring color schemes
3. Spotting Flat Layouts - Find solid backgrounds, lack of depth, no layering
4. Flagging Predictable Patterns - Generic component arrangements, cookie-cutter designs
5. Scoring Aesthetic Quality - Overall creativity and distinctiveness rating (0-100)

Core Validation Categories

1. Generic Fonts (Critical)

Forbidden Fonts (Without Distinctive Pairing):

• ❌ Inter, Roboto, Open Sans, Arial, Helvetica, Lato
• ❌ System fonts (-apple-system, BlinkMacSystemFont, etc.)

Detection: Scans code for forbidden font families. If found alone (without distinctive display font), flags as critical violation.

Pass: Plus Jakarta Sans, Poppins, Montserrat, Sora, Crimson Pro Fail: Inter alone, Roboto alone, system fonts

2. Clichéd Colors (Critical)

Forbidden Color Patterns:

• ❌ Purple gradient on white (#7C4DFF → #9C27B0 on #FFFFFF)
• ❌ Generic Material Blue (#2196F3, #1976D2)
• ❌ Timid palettes (all colors < 20% saturation)
• ❌ Evenly distributed colors (no dominant color)

Pass: Vibrant, personalized palettes (teal/coral, magenta/cyan) Fail: Purple gradients, desaturated colors, no dominant color

3. Flat Layouts (Warning)

Forbidden Layout Patterns:

• ❌ Solid backgrounds (no gradients, no patterns)
• ❌ No elevation (all elements at same z-level)
• ❌ Uniform spacing (all gaps identical, no rhythm)

Pass: Layered gradients, elevation tokens, varied spacing Fail: Flat solids, no depth effects, mechanical spacing

4. Predictable Patterns (Warning)

Forbidden Design Patterns:

• ❌ Monotone font pairing (Roboto display + Roboto body)
• ❌ Timid weight contrasts (400 vs 500, ratio < 1.5x)
• ❌ Timid size contrasts (24px vs 16px, ratio < 2x)
• ❌ No hover states (static components)

Pass: High-contrast pairings, extreme weights (100 vs 900), spring-physics hover Fail: Same font family, timid contrasts, no interactions

Aesthetic Quality Score (0-100)

Scoring Algorithm:

• Typography (25 points): Font distinctiveness, weight contrast, size contrast
• Color (25 points): Palette vibrancy, saturation, dominance
• Layout (25 points): Depth effects, elevation, spacing rhythm
• Interaction (25 points): Hover states, animations, spring physics

Grade Scale:

• A (90-100): Exceptional - Strong M3 Expressive principles
• B (80-89): Good - Minor improvements possible
• C (70-79): Acceptable - Needs improvement
• D (60-69): Below standards - Review violations
• F (<60): Critical - Complete redesign recommended

Validation Report Format

{
  "aestheticQuality": {
    "total": 72,
    "breakdown": {
      "typography": 18,
      "color": 20,
      "layout": 15,
      "interaction": 19
    },
    "grade": "C",
    "recommendation": "Acceptable design. Focus on improving typography and color for more impact."
  },
  "violations": [
    {
      "category": "typography",
      "pattern": "Generic font detected",
      "severity": "critical",
      "details": {
        "fontFamily": "Inter, sans-serif",
        "location": "Line 42",
        "suggestion": "Replace 'Inter' with 'Plus Jakarta Sans Variable'."
      }
    }
  ],
  "remediationSteps": ["1. Replace Inter with Plus Jakarta Sans Variable", "2. Use vibrant color palette: teal + coral + purple", "3. Add layered background gradients", "4. Apply elevation tokens for depth", "5. Add spring-physics hover effects"]
}

Usage

Basic Validation

# Validate aesthetic quality and detect AI slop
m3-anti-slop-validator \
  --file frontend/src/components/ui/Card/Card.tsx \
  --tokens design-system/tokens-expressive.json \
  --report validation-report.json

Within Design Systems

// Run after M3 migrations to validate final output
const validation = await runSkill("m3-anti-slop-validator", {
  code: finalCode,
  tokens: tokensExpressive,
});

if (validation.aestheticQuality.total < 80) {
  console.warn("⚠️ Low aesthetic quality score. Review violations.");
}

Validation Checklist

• No forbidden fonts (Inter, Roboto, Arial) without distinctive pairing
• No purple gradients on white backgrounds
• Color saturation ≥ 30% (vibrant, not timid)
• Dominant color palette (not evenly distributed)
• Layered backgrounds (gradients, patterns, not flat solids)
• Elevation tokens used for depth
• Varied spacing rhythm (not uniform)
• Weight contrast ≥ 3x (100 vs 900, not 400 vs 500)
• Size contrast ≥ 3x (57px vs 12px, not 24px vs 16px)
• Hover states with spring physics
• Aesthetic quality score ≥ 80

Troubleshooting

Issue: False Positive on Inter Font

Solution:

• Ensure distinctive display font is clearly defined in code
• Pair with Playfair Display, Crimson Pro, or similar high-contrast font

Issue: Low Color Score Despite Vibrant Palette

Solution:

• Check for dominant color (avoid evenly distributed colors)
• Ensure 40-80% saturation range
• Avoid generic Material Blue (#2196F3)

Issue: Layout Score Low Despite Using Elevation

Solution:

• Add layered backgrounds (gradients, patterns)
• Vary spacing scales (8px, 16px, 24px, 40px)
• Ensure visual hierarchy is clear

Related Skills

• m3-expressive-typography-enhancer - Enhance typography with variable fonts
• m3-atmospheric-backgrounds - Create layered atmospheric effects
• m3-spring-motion-choreography - Add spring-physics interactions

---

Version: 2.0.0 (Optimized) Status: Production Ready