@triedotdev/mcp 1.0.32 → 1.0.34

package/dist/{chunk-3724RQC3.js → chunk-3NXWEJUV.js}

@@ -1074,19 +1074,121 @@ Output STRICT JSON:
 };
 
 // src/agents/design-engineer.ts
+var AI_SLOP_COLORS = [
+  // Neon/toxic greens (AI loves these for "success")
+  { pattern: /#[0-4][eEfF][0-5][0-4][0-2][0-4]/i, name: "toxic neon green", suggestion: "emerald-500 (#10b981) or green-600 (#16a34a)" },
+  { pattern: /#00[fF][fF]00/i, name: "pure lime green", suggestion: "emerald-400 (#34d399) for a modern SaaS look" },
+  { pattern: /#[0-3][fF][fF][0-3][fF][0-3]/i, name: "cyan-green neon", suggestion: "teal-500 (#14b8a6) for sophistication" },
+  // Garish purples/magentas
+  { pattern: /#[fF][0-3][0-5][fF][0-3][fF]/i, name: "hot magenta", suggestion: "fuchsia-500 (#d946ef) or violet-500 (#8b5cf6)" },
+  { pattern: /#[8-9aA][0-3][0-3][fF][fF][fF]/i, name: "electric purple", suggestion: "indigo-500 (#6366f1) for a Stripe-like feel" },
+  // Oversaturated blues
+  { pattern: /#00[0-5][0-5][fF][fF]/i, name: "electric blue", suggestion: "blue-600 (#2563eb) or sky-500 (#0ea5e9)" },
+  { pattern: /#0{4}[fF]{2}/i, name: "pure blue", suggestion: "blue-500 (#3b82f6) for modern SaaS" },
+  // Harsh reds
+  { pattern: /#[fF][fF]0{4}/i, name: "pure red", suggestion: "rose-500 (#f43f5e) or red-500 (#ef4444)" },
+  { pattern: /#[fF][0-3][0-3][0-3][0-3][0-3]/i, name: "harsh red", suggestion: "rose-600 (#e11d48) for errors, or softer coral (#fb7185)" },
+  // Dated yellows/oranges
+  { pattern: /#[fF][fF][fF][fF]00/i, name: "pure yellow", suggestion: "amber-400 (#fbbf24) or yellow-500 (#eab308)" },
+  { pattern: /#[fF][fF][aA-fF]000/i, name: "orange-yellow", suggestion: "amber-500 (#f59e0b) for warnings" },
+  // Gray issues
+  { pattern: /#[8-9][8-9][8-9][8-9][8-9][8-9]/i, name: "flat mid-gray", suggestion: "slate-400 (#94a3b8) or zinc-500 (#71717a) for depth" },
+  { pattern: /#[cC][cC][cC][cC][cC][cC]/i, name: "washed-out gray", suggestion: "slate-300 (#cbd5e1) or neutral-300 (#d4d4d4)" }
+];
+var MODERN_PALETTES = {
+  // Dark mode palettes (most popular on Awwwards)
+  vercel: {
+    name: "Vercel/Next.js",
+    bg: "#000000",
+    surface: "#111111",
+    border: "#333333",
+    text: "#ededed",
+    muted: "#888888",
+    accent: "#0070f3"
+  },
+  linear: {
+    name: "Linear",
+    bg: "#000212",
+    surface: "#0a0a1a",
+    border: "#1a1a2e",
+    text: "#f7f8f8",
+    muted: "#8f9ba8",
+    accent: "#5e6ad2"
+  },
+  stripe: {
+    name: "Stripe",
+    bg: "#0a2540",
+    surface: "#0d3358",
+    border: "#1a4a70",
+    text: "#ffffff",
+    muted: "#adbdcc",
+    accent: "#635bff"
+  },
+  // Light mode palettes
+  notion: {
+    name: "Notion",
+    bg: "#ffffff",
+    surface: "#f7f6f3",
+    border: "#e3e2de",
+    text: "#37352f",
+    muted: "#9b9a97",
+    accent: "#2eaadc"
+  },
+  figma: {
+    name: "Figma",
+    bg: "#ffffff",
+    surface: "#f5f5f5",
+    border: "#e5e5e5",
+    text: "#1e1e1e",
+    muted: "#8c8c8c",
+    accent: "#0d99ff"
+  },
+  framer: {
+    name: "Framer",
+    bg: "#ffffff",
+    surface: "#fafafa",
+    border: "#ebebeb",
+    text: "#171717",
+    muted: "#666666",
+    accent: "#0055ff"
+  }
+};
+var PROJECT_CONTEXTS = {
+  marketing: {
+    patterns: [/landing|hero|pricing|features|testimonial|cta|homepage/i, /marketing|campaign|launch/i],
+    effects: ["3D product showcases", "scroll-triggered reveals", "parallax sections", "text animations", "gradient meshes"]
+  },
+  dashboard: {
+    patterns: [/dashboard|admin|analytics|settings|sidebar|table|chart/i],
+    effects: ["subtle micro-interactions", "skeleton loaders", "toast animations", "chart transitions"]
+  },
+  ecommerce: {
+    patterns: [/product|cart|checkout|shop|store|catalog/i],
+    effects: ["image zoom", "add-to-cart animations", "filter transitions", "product card hovers"]
+  },
+  portfolio: {
+    patterns: [/portfolio|gallery|showcase|project|work|case-study/i],
+    effects: ["image reveals", "cursor effects", "page transitions", "scroll-linked galleries"]
+  }
+};
 var DesignEngineerAgent = class extends BaseAgent {
   name = "design-engineer";
-  description = "Award-winning frontend craft: design systems, motion design, creative CSS, Awwwards-level polish";
-  version = "1.0.0";
+  description = "Award-winning frontend craft: design systems, motion design, creative CSS, modern color palettes, Awwwards-level polish";
+  version = "2.0.0";
   shouldActivate(context) {
     return context.touchesUI;
   }
   async analyzeFiles(files, _context) {
     const issues = [];
+    const allContent = await this.getAllContent(files);
+    const projectContext = this.detectProjectContext(allContent);
+    const hasMotionLibrary = this.detectMotionLibraries(allContent);
     for (const file of files) {
       try {
         const content = await this.readFile(file);
         if (this.isFrontendFile(file)) {
+          issues.push(...this.analyzeColorPalette(content, file));
+          issues.push(...this.analyzeMotionLibraries(content, file, hasMotionLibrary, projectContext));
           issues.push(...this.analyzeDesignSystem(content, file));
           issues.push(...this.analyzeMotionDesign(content, file));
           issues.push(...this.analyzeVisualCraft(content, file));
@@ -1099,9 +1201,340 @@ var DesignEngineerAgent = class extends BaseAgent {
     }
     return issues;
   }
+  /**
+   * Get all content from files for context detection
+   */
+  async getAllContent(files) {
+    const contents = [];
+    for (const file of files.slice(0, 20)) {
+      try {
+        const content = await this.readFile(file);
+        contents.push(content);
+      } catch {
+      }
+    }
+    return contents.join("\n");
+  }
+  /**
+   * Detect project context (marketing, dashboard, ecommerce, portfolio)
+   */
+  detectProjectContext(content) {
+    for (const [context, config] of Object.entries(PROJECT_CONTEXTS)) {
+      for (const pattern of config.patterns) {
+        if (pattern.test(content)) {
+          return context;
+        }
+      }
+    }
+    return "general";
+  }
+  /**
+   * Detect which motion libraries are already installed
+   */
+  detectMotionLibraries(content) {
+    const detected = /* @__PURE__ */ new Set();
+    if (/framer-motion|from ['"]framer-motion['"]/.test(content)) detected.add("framer-motion");
+    if (/gsap|from ['"]gsap['"]/.test(content)) detected.add("gsap");
+    if (/@react-three\/fiber|from ['"]@react-three\/fiber['"]/.test(content)) detected.add("three");
+    if (/lenis|locomotive-scroll/.test(content)) detected.add("scroll");
+    if (/react-spring|@react-spring/.test(content)) detected.add("react-spring");
+    if (/auto-animate|@formkit\/auto-animate/.test(content)) detected.add("auto-animate");
+    return detected;
+  }
   isFrontendFile(file) {
     return /\.(tsx|jsx|vue|svelte|astro|css|scss|sass|less|styled\.(ts|js))$/.test(file);
   }
+  /**
+   * Analyze color palette for AI slop and suggest modern alternatives
+   * Inspired by top SaaS sites: Linear, Vercel, Stripe, Notion, Figma, Framer
+   */
+  analyzeColorPalette(content, file) {
+    const issues = [];
+    const lines = content.split("\n");
+    const colorsFound = [];
+    for (let i = 0; i < lines.length; i++) {
+      const line = lines[i];
+      const lineNumber = i + 1;
+      const hexMatches = line.matchAll(/#[0-9a-fA-F]{3,8}\b/g);
+      for (const match of hexMatches) {
+        const hex = match[0].toLowerCase();
+        colorsFound.push({ hex, line: lineNumber });
+        for (const slop of AI_SLOP_COLORS) {
+          if (slop.pattern.test(hex)) {
+            issues.push(this.createIssue(
+              this.generateIssueId(),
+              "moderate",
+              `AI slop color detected: ${slop.name} (${hex})`,
+              `Replace with modern SaaS palette: ${slop.suggestion}. See Linear, Vercel, Stripe for inspiration.`,
+              file,
+              lineNumber,
+              0.85,
+              void 0,
+              true
+            ));
+            break;
+          }
+        }
+        if (/^#(ff0000|00ff00|0000ff|ffff00|ff00ff|00ffff)$/i.test(hex)) {
+          issues.push(this.createIssue(
+            this.generateIssueId(),
+            "serious",
+            `Pure saturated color ${hex} \u2014 looks amateur, not SaaS-ready`,
+            "Use desaturated alternatives. Modern SaaS uses muted, sophisticated colors. Try Tailwind's color palette or Linear's scheme.",
+            file,
+            lineNumber,
+            0.95,
+            void 0,
+            true
+          ));
+        }
+      }
+      if (/linear-gradient|radial-gradient/i.test(line)) {
+        const gradientColors = line.match(/#[0-9a-fA-F]{3,8}/g) || [];
+        if (gradientColors.length >= 3) {
+          const hasSaturated = gradientColors.some(
+            (c) => /^#(ff|00)[0-9a-f]{4}$/i.test(c) || /^#[0-9a-f]{2}(ff|00)[0-9a-f]{2}$/i.test(c)
+          );
+          if (hasSaturated) {
+            issues.push(this.createIssue(
+              this.generateIssueId(),
+              "moderate",
+              "Multi-color gradient with saturated colors \u2014 can look dated or garish",
+              "Modern SaaS uses subtle gradients: 2 colors max, low saturation, or monochromatic. See Stripe's gradient mesh.",
+              file,
+              lineNumber,
+              0.75,
+              void 0,
+              false
+            ));
+          }
+        }
+      }
+      if (/#000000|#ffffff/i.test(line) && /color:|background:/i.test(line)) {
+        issues.push(this.createIssue(
+          this.generateIssueId(),
+          "low",
+          "Pure black/white detected \u2014 consider off-black/off-white for sophistication",
+          "Modern SaaS uses near-black (#171717, #0a0a0a) and near-white (#fafafa, #f5f5f5). Pure #000/#fff can feel harsh.",
+          file,
+          lineNumber,
+          0.65,
+          void 0,
+          false
+        ));
+      }
+    }
+    if (colorsFound.length > 5) {
+      const uniqueColors = new Set(colorsFound.map((c) => c.hex));
+      if (uniqueColors.size > 15) {
+        issues.push(this.createIssue(
+          this.generateIssueId(),
+          "moderate",
+          `${uniqueColors.size} unique colors detected \u2014 palette lacks cohesion`,
+          `Modern SaaS uses 5-8 core colors max. Establish a design system with tokens: --color-primary, --color-surface, --color-text, --color-muted, --color-accent. Reference: ${this.getRandomPaletteRecommendation()}`,
+          file,
+          void 0,
+          0.8,
+          void 0,
+          false
+        ));
+      }
+      let violetCount = 0;
+      for (const { hex } of colorsFound) {
+        const rgb = this.hexToRgb(hex);
+        if (!rgb) continue;
+        const hue = this.rgbToHue(rgb.r, rgb.g, rgb.b);
+        if (hue >= 250 && hue <= 310) violetCount++;
+      }
+      if (violetCount >= 3 && violetCount / colorsFound.length > 0.35) {
+        issues.push(this.createIssue(
+          this.generateIssueId(),
+          "moderate",
+          "Palette leans heavily on violet/purple \u2014 looks templated/AI-generated",
+          "Use Josef Albers \u201CInteraction of Color\u201D approach: constrain to 1-2 hue families, anchor with neutrals, and build contrast via value/temperature shifts rather than piling on violet gradients.",
+          file,
+          void 0,
+          0.78,
+          void 0,
+          false
+        ));
+      }
+    }
+    return issues;
+  }
+  /**
+   * Convert hex color to RGB
+   */
+  hexToRgb(hex) {
+    const normalized = hex.replace("#", "");
+    if (normalized.length === 3) {
+      const r = parseInt(normalized[0] + normalized[0], 16);
+      const g = parseInt(normalized[1] + normalized[1], 16);
+      const b = parseInt(normalized[2] + normalized[2], 16);
+      return { r, g, b };
+    }
+    if (normalized.length === 6) {
+      const r = parseInt(normalized.slice(0, 2), 16);
+      const g = parseInt(normalized.slice(2, 4), 16);
+      const b = parseInt(normalized.slice(4, 6), 16);
+      return { r, g, b };
+    }
+    return null;
+  }
+  /**
+   * Calculate hue in degrees from RGB
+   */
+  rgbToHue(r, g, b) {
+    const rNorm = r / 255;
+    const gNorm = g / 255;
+    const bNorm = b / 255;
+    const max = Math.max(rNorm, gNorm, bNorm);
+    const min = Math.min(rNorm, gNorm, bNorm);
+    const delta = max - min;
+    if (delta === 0) return 0;
+    let hue;
+    switch (max) {
+      case rNorm:
+        hue = (gNorm - bNorm) / delta % 6;
+        break;
+      case gNorm:
+        hue = (bNorm - rNorm) / delta + 2;
+        break;
+      default:
+        hue = (rNorm - gNorm) / delta + 4;
+        break;
+    }
+    hue *= 60;
+    if (hue < 0) hue += 360;
+    return hue;
+  }
+  /**
+   * Get a random modern palette recommendation
+   */
+  getRandomPaletteRecommendation() {
+    const palettes = Object.values(MODERN_PALETTES);
+    const palette = palettes[Math.floor(Math.random() * palettes.length)];
+    return `${palette.name} palette: bg ${palette.bg}, text ${palette.text}, accent ${palette.accent}`;
+  }
+  /**
+   * Analyze motion library usage and suggest Awwwards-level effects
+   */
+  analyzeMotionLibraries(content, file, hasLibraries, projectContext) {
+    const issues = [];
+    const isReact = /from ['"]react['"]|import React/.test(content);
+    const hasAnimations = /animation|transition|@keyframes|animate/i.test(content);
+    const purposefulMotionSignals = hasAnimations || /hero|landing|modal|dialog|drawer|toast|tooltip|hover|scroll|parallax|reveal|transition|carousel|slider|gallery/i.test(content);
+    if (!purposefulMotionSignals) {
+      return issues;
+    }
+    if (isReact && !hasLibraries.has("framer-motion") && !hasLibraries.has("react-spring")) {
+      if (/useState.*animation|setAnimation|isAnimating|animationState/i.test(content)) {
+        issues.push(this.createIssue(
+          this.generateIssueId(),
+          "moderate",
+          "Manual animation state management \u2014 use Framer Motion instead",
+          `Install framer-motion for declarative animations: \`npm i framer-motion\`. Replace useState + CSS with <motion.div animate={{ ... }} />. See: https://www.framer.com/motion/`,
+          file,
+          void 0,
+          0.8,
+          void 0,
+          false
+        ));
+      }
+      if (/\.map\s*\(.*\).*\.(filter|sort)|filter\(.*\)\.map/.test(content) && hasAnimations) {
+        issues.push(this.createIssue(
+          this.generateIssueId(),
+          "low",
+          "List filtering without exit animations \u2014 use AnimatePresence",
+          "Framer Motion's AnimatePresence handles enter/exit animations for lists: <AnimatePresence>{items.map(...)}</AnimatePresence>",
+          file,
+          void 0,
+          0.7,
+          void 0,
+          false
+        ));
+      }
+      if (/grid|flex.*gap|justify|align/i.test(content) && /setState|dispatch|set[A-Z]/.test(content)) {
+        issues.push(this.createIssue(
+          this.generateIssueId(),
+          "low",
+          "Layout changes without animation \u2014 consider layout prop",
+          "Framer Motion's layout prop auto-animates position/size changes: <motion.div layout>. Creates smooth reflow animations.",
+          file,
+          void 0,
+          0.6,
+          void 0,
+          false
+        ));
+      }
+    }
+    if (!hasLibraries.has("scroll") && !hasLibraries.has("gsap")) {
+      if (/scroll|parallax|reveal|fade.*in|slide.*in/i.test(content)) {
+        const contextConfig = PROJECT_CONTEXTS[projectContext];
+        const effects = contextConfig?.effects?.join(", ") || "scroll-triggered animations";
+        issues.push(this.createIssue(
+          this.generateIssueId(),
+          "low",
+          "Scroll-based effects without a scroll library",
+          `For ${projectContext} sites, consider: Lenis for smooth scrolling (\`npm i @studio-freight/lenis\`), GSAP ScrollTrigger for ${effects}. See Codrops for inspiration.`,
+          file,
+          void 0,
+          0.65,
+          void 0,
+          false
+        ));
+      }
+    }
+    if (projectContext === "marketing" || projectContext === "portfolio") {
+      if (/hero|landing|showcase|featured/i.test(file) || /Hero|Landing|Showcase/.test(content)) {
+        if (!hasLibraries.has("three")) {
+          issues.push(this.createIssue(
+            this.generateIssueId(),
+            "low",
+            "Hero section opportunity \u2014 consider 3D/WebGL elements",
+            "For Awwwards-level impact, add 3D with React Three Fiber: `npm i @react-three/fiber @react-three/drei`. Start with a simple floating object or gradient orb. See: https://codrops.com/tag/threejs/",
+            file,
+            void 0,
+            0.5,
+            void 0,
+            false
+          ));
+        }
+      }
+    }
+    if (/heading|title|h1|h2|hero.*text/i.test(content) && !hasLibraries.has("gsap")) {
+      if (!/split|char|letter/i.test(content)) {
+        issues.push(this.createIssue(
+          this.generateIssueId(),
+          "low",
+          "Headings without text animation \u2014 add character reveals",
+          "Use Splitting.js (free) or GSAP SplitText for character-by-character animations. Classic Awwwards effect: staggered character reveals on scroll.",
+          file,
+          void 0,
+          0.55,
+          void 0,
+          false
+        ));
+      }
+    }
+    if (projectContext !== "general" && !hasLibraries.has("framer-motion") && !hasLibraries.has("gsap")) {
+      const contextConfig = PROJECT_CONTEXTS[projectContext];
+      if (contextConfig) {
+        issues.push(this.createIssue(
+          this.generateIssueId(),
+          "low",
+          `${projectContext.charAt(0).toUpperCase() + projectContext.slice(1)} site detected \u2014 add motion polish`,
+          `Recommended effects for ${projectContext}: ${contextConfig.effects.join(", ")}. Start with Framer Motion for React or GSAP for vanilla JS.`,
+          file,
+          void 0,
+          0.6,
+          void 0,
+          false
+        ));
+      }
+    }
+    return issues;
+  }
   /**
    * Analyze design system patterns
    */
@@ -1477,15 +1910,69 @@ var DesignEngineerAgent = class extends BaseAgent {
    * AI Enhancement for design review
    */
   getAIEnhancementSystemPrompt() {
-    return `You are an award-winning design engineer from a top creative agency. You review code for Awwwards-level polish.
+    return `You are an award-winning design engineer from a top creative agency (Linear, Vercel, Stripe caliber). You review code for Awwwards-level polish and Codrops-worthy effects.
+
+## Guardrails: Design & Engineering Principles
+- Lead with user-centricity, clarity, and accessibility; animation is optional.
+- KISS and DRY: reduce complexity, prefer design tokens and reusable patterns.
+- Reliability and feedback: motion only when it improves understanding or state change.
+- Efficiency and sustainability: bias to stillness, avoid unnecessary paints/GPU work, honor prefers-reduced-motion.
+- Ethics and integrity: honest communication about capabilities, avoid dark patterns.
+
+## Color Analysis Priority
+Detect "AI slop" colors \u2014 the garish, oversaturated colors that AI tools generate:
+- Neon greens (#00ff00, #0f0)
+- Electric blues (#0000ff, #00f)  
+- Hot magentas (#ff00ff, #f0f)
+- Pure saturated primaries
+
+Apply Josef Albers' "Interaction of Color":
+- Constrain to 1-2 hue families; anchor with neutrals (slate/zinc/stone).
+- Build contrast through value (light/dark) and temperature shifts, not saturation.
+- Test adjacency: colors must work in pairs/triads against neutral backgrounds.
+- Avoid overusing violet/purple gradients (common AI tell); explore original complements/analogous schemes.
+
+Replace with modern SaaS palettes from top sites (saaslandingpage.com, awwwards.com), customized via Albers adjacency tests:
+- **Dark mode**: Vercel (#000, #0070f3), Linear (#000212, #5e6ad2), Stripe (#0a2540, #635bff)
+- **Light mode**: Notion (#fff, #f7f6f3, #2eaadc), Figma (#fff, #f5f5f5, #0d99ff), Framer (#fff, #0055ff)
+- **Neutral grays**: Use slate, zinc, or neutral scales, not flat grays
+
+## Inspiration Sources (structured lookups)
+- Codrops Creative Hub (https://tympanus.net/codrops/hub/):
+  - Tags to scan: scroll, hover, typography, cursor, WebGL, WebGPU, GSAP, Framer Motion, Three.js, grid, parallax, page transition, slider/carousel.
+  - Use as inspiration for interaction patterns; keep accessibility, performance, reduced-motion.
+- Awwwards Directory (https://www.awwwards.com/directory/):
+  - Benchmarks: Locomotive, Immersive Garden, Active Theory, Hello Monday, Resn, Obys, Build in Amsterdam.
+  - Categories to map: animated websites, scrolling, one-page, interaction design, WebGL sites, 3D, GSAP, React, Framer.
+  - Extract patterns (structure, choreography, feedback), not pixels; keep clarity, responsiveness, and performance.
+
+## Motion & Creative Effects
+Recommend motion only when it improves comprehension or feedback; keep durations 150-300ms, ease-out preferred, and provide reduced-motion fallbacks. Prefer micro-interactions over showy effects.
+- Default to static if motion adds no clarity.
+- Ensure @media (prefers-reduced-motion) disables non-essential motion.
+- Prioritize transform/opacity over layout-changing properties.
+When warranted by context, suggest libraries:
+- **React projects**: Framer Motion (gestures, layout), React Spring (physics), Auto-Animate (quick wins)
+- **Complex timelines**: GSAP + ScrollTrigger, SplitText for character animations
+- **3D/WebGL**: React Three Fiber + Drei for hero sections, product showcases
+- **Smooth scroll**: Lenis or Locomotive Scroll for butter-smooth scrolling
+- **Text effects**: Splitting.js for character animations, Typed.js for typewriter
+- **Hover effects**: Atropos for 3D tilt, custom cursor effects
+
+## Project Context Effects
+- **Marketing/Landing**: Scroll reveals, parallax, text animations, gradient meshes, 3D elements
+- **Dashboard**: Subtle micro-interactions, skeleton loaders, chart transitions
+- **E-commerce**: Image zoom, add-to-cart animations, filter transitions
+- **Portfolio**: Page transitions, cursor effects, image reveals
 
 Analyze detected issues and code for:
-1. Design system consistency (tokens, spacing scales, color systems)
-2. Motion design quality (easing curves, choreography, performance)
-3. Visual hierarchy and typography systems
-4. Creative CSS techniques (gradients, masks, blend modes, clip-paths)
-5. Modern CSS features (container queries, :has(), subgrid)
-6. Responsive design patterns (fluid typography, aspect ratios)
+1. **Color coherence** \u2014 Is this a cohesive palette or random AI-generated colors?
+2. **Motion library usage** \u2014 Is the project using appropriate animation tools?
+3. **Design system consistency** \u2014 Tokens, spacing scales, color systems
+4. **Motion design quality** \u2014 Easing curves, choreography, performance
+5. **Visual hierarchy** \u2014 Typography systems, contrast, visual flow
+6. **Creative CSS techniques** \u2014 Gradients, masks, blend modes, clip-paths
+7. **Modern CSS features** \u2014 Container queries, :has(), subgrid
 
 Output STRICT JSON:
 {
@@ -1497,17 +1984,34 @@ Output STRICT JSON:
     "line": 123,
     "severity": "moderate",
     "design_impact": "Why this hurts the user experience",
-    "fix": "Creative CSS fix with code example"
+    "fix": "Creative CSS fix with specific color values from modern palettes"
   }],
   "additional": [{
     "issue": "Design opportunity found",
     "file": "path",
     "line": 123,
     "severity": "low",
-    "enhancement": "How to elevate this to award-winning quality",
-    "fix": "Modern CSS/animation code"
+    "enhancement": "How to elevate this to Awwwards quality",
+    "fix": "Modern CSS/animation code with npm install command if needed"
+  }],
+  "motion_recommendations": [{
+    "library": "framer-motion",
+    "install": "npm i framer-motion",
+    "use_case": "What specific effect to implement",
+    "example_code": "Brief code snippet"
   }],
-  "summary": "Overall design craft assessment"
+  "palette_recommendation": {
+    "primary": "#hex",
+    "secondary": "#hex",
+    "background": "#hex",
+    "surface": "#hex",
+    "text": "#hex",
+    "muted": "#hex",
+    "accent": "#hex",
+    "inspiration": "Which top SaaS this is inspired by"
+  },
+  "project_context": "marketing | dashboard | ecommerce | portfolio | general",
+  "summary": "Overall design craft assessment with specific recommendations"
 }`;
   }
 };
@@ -4888,4 +5392,4 @@ export {
   CustomAgent,
   getAgentRegistry
 };
-//# sourceMappingURL=chunk-3724RQC3.js.map
+//# sourceMappingURL=chunk-3NXWEJUV.js.map