rules.js

// rules.js

const BUZZWORDS = [
  "streamline", "empower", "supercharge", "world-class",
  "enterprise-grade", "next-generation", "cutting-edge",
  "seamless", "revolutionize", "game-changing", "unlock",
];

const OVERUSED_FONTS = ["inter", "geist", "space grotesk", "instrument serif"];
const CREAM_HEXES = ["#faf7f0", "#f5f0e6", "#f8f4ea", "#fdf6e3"];

function textOf($, el) {
  return $(el).text().trim();
}

function declsFor(cssRules, inlineRules, property) {
  return [...cssRules, ...inlineRules].filter((d) => d.property === property);
}

const rules = [
  // ---------------- VISUAL DETAILS (7) ----------------
  {
    id: "border-accent-rounded",
    category: "Visual Details",
    type: "cli",
    check({ cssRules, inlineRules }) {
      const found = [];
      const radius = declsFor(cssRules, inlineRules, "border-radius");
      const borderSide = [...cssRules, ...inlineRules].filter((d) =>
        /^border-(left|right|top|bottom)$/.test(d.property)
      );
      for (const b of borderSide) {
        const sameSelectorRadius = radius.find((r) => r.selector === b.selector);
        if (sameSelectorRadius) {
          found.push({
            message: `Thick ${b.property} clashes with border-radius on "${b.selector}"`,
            selector: b.selector,
          });
        }
      }
      return found;
    },
  },
  { id: "glassmorphism", category: "Visual Details", type: "llm", check: () => null },
  {
    id: "side-tab-accent-border",
    category: "Visual Details",
    type: "cli",
    check({ cssRules, inlineRules }) {
      const found = [];
      const sides = [...cssRules, ...inlineRules].filter((d) =>
        /^border-(left|right)$/.test(d.property)
      );
      for (const s of sides) {
        const widthMatch = s.value.match(/(\d+)px/);
        if (widthMatch && parseInt(widthMatch[1]) >= 3) {
          found.push({
            message: `Side-tab accent border (${s.value}) on "${s.selector}" — most recognizable AI tell`,
            selector: s.selector,
          });
        }
      }
      return found;
    },
  },
  {
    id: "hairline-border-wide-shadow",
    category: "Visual Details",
    type: "opt-in",
    check({ cssRules, inlineRules }) {
      const found = [];
      const borders = [...cssRules, ...inlineRules].filter((d) => d.property === "border");
      const shadows = [...cssRules, ...inlineRules].filter((d) => d.property === "box-shadow");
      for (const b of borders) {
        if (/1px/.test(b.value)) {
          const shadow = shadows.find((s) => s.selector === b.selector);
          if (shadow && /(2[0-9]|[3-9][0-9])px/.test(shadow.value)) {
            found.push({ message: `Hairline border + wide shadow on "${b.selector}"`, selector: b.selector });
          }
        }
      }
      return found;
    },
  },
  {
    id: "repeating-gradient-stripes",
    category: "Visual Details",
    type: "opt-in",
    check({ cssRules, inlineRules }) {
      return [...cssRules, ...inlineRules]
        .filter((d) => /background/.test(d.property) && /repeating-(linear|radial)-gradient/.test(d.value))
        .map((d) => ({ message: `Repeating-gradient stripes on "${d.selector}"`, selector: d.selector }));
    },
  },
  { id: "extreme-border-radius", category: "Visual Details", type: "llm", check: () => null },
  { id: "amateurish-hand-drawn-svg", category: "Visual Details", type: "llm", check: () => null },

  // ---------------- TYPOGRAPHY (10) ----------------
  {
    id: "flat-type-hierarchy",
    category: "Typography",
    type: "cli",
    check({ cssRules, inlineRules }) {
      const sizes = declsFor(cssRules, inlineRules, "font-size")
        .map((d) => parseFloat(d.value))
        .filter((n) => !isNaN(n));
      const unique = [...new Set(sizes)].sort((a, b) => a - b);
      const found = [];
      for (let i = 1; i < unique.length; i++) {
        if (unique[i] / unique[i - 1] < 1.15) {
          found.push({ message: `Font sizes ${unique[i - 1]} and ${unique[i]} too close — flat hierarchy` });
        }
      }
      return found;
    },
  },
  {
    id: "icon-tile-above-heading",
    category: "Typography",
    type: "cli",
    check({ $ }) {
      const found = [];
      $("h1,h2,h3,h4").each((i, h) => {
        const prev = $(h).prev();
        if (prev.length && /(icon|tile)/i.test(prev.attr("class") || "")) {
          found.push({ message: `Icon tile stacked above heading "${textOf($, h)}"` });
        }
      });
      return found;
    },
  },
  {
    id: "italic-serif-headline",
    category: "Typography",
    type: "cli",
    check({ cssRules, inlineRules }) {
      const italic = declsFor(cssRules, inlineRules, "font-style").filter((d) => d.value.includes("italic"));
      const family = declsFor(cssRules, inlineRules, "font-family");
      return italic
        .filter((i) => family.some((f) => f.selector === i.selector && /serif/.test(f.value)))
        .map((i) => ({ message: `Italic serif display headline on "${i.selector}"`, selector: i.selector }));
    },
  },
  {
    id: "hero-eyebrow-pill",
    category: "Typography",
    type: "cli",
    check({ $ }) {
      const found = [];
      $("h1,h2").each((i, h) => {
        const prev = $(h).prev();
        const t = textOf($, prev);
        if (prev.length && t.length < 30 && t === t.toUpperCase() && t.length > 0) {
          found.push({ message: `Hero eyebrow "${t}" sits above heading "${textOf($, h)}"` });
        }
      });
      return found;
    },
  },
  {
    id: "repeated-section-kickers",
    category: "Typography",
    type: "cli",
    check({ $ }) {
      let count = 0;
      $("*").each((i, el) => {
        const t = textOf($, el);
        if (t.length > 0 && t.length < 20 && t === t.toUpperCase() && /^[A-Z\s]+$/.test(t)) count++;
      });
      return count >= 3 ? [{ message: `${count} repeated uppercase section kickers found` }] : [];
    },
  },
  {
    id: "oversized-hero-headline",
    category: "Typography",
    type: "cli",
    check({ $, cssRules, inlineRules }) {
      const found = [];
      const sizes = declsFor(cssRules, inlineRules, "font-size");
      $("h1").each((i, h) => {
        const t = textOf($, h);
        const rule = sizes.find((s) => true); // simplistic: flag long h1 text generally
        if (t.split(" ").length > 6) {
          found.push({ message: `Long headline "${t.slice(0, 40)}..." may be oversized at display size` });
        }
      });
      return found;
    },
  },
  {
    id: "crushed-letter-spacing",
    category: "Typography",
    type: "cli",
    check({ cssRules, inlineRules }) {
      return declsFor(cssRules, inlineRules, "letter-spacing")
        .filter((d) => parseFloat(d.value) <= -0.03)
        .map((d) => ({ message: `Crushed letter-spacing (${d.value}) on "${d.selector}"`, selector: d.selector }));
    },
  },
  {
    id: "overused-font",
    category: "Typography",
    type: "cli",
    check({ cssRules, inlineRules }) {
      return declsFor(cssRules, inlineRules, "font-family")
        .filter((d) => OVERUSED_FONTS.some((f) => d.value.includes(f)))
        .map((d) => ({ message: `Overused font "${d.value}" on "${d.selector}"`, selector: d.selector }));
    },
  },
  {
    id: "single-font-everything",
    category: "Typography",
    type: "cli",
    check({ cssRules, inlineRules }) {
      const families = new Set(declsFor(cssRules, inlineRules, "font-family").map((d) => d.value));
      return families.size === 1 && families.size > 0
        ? [{ message: `Only one font-family used across the whole page: ${[...families][0]}` }]
        : [];
    },
  },
  {
    id: "all-caps-body-text",
    category: "Typography",
    type: "cli",
    check({ cssRules, inlineRules, $ }) {
      const found = [];
      const caps = declsFor(cssRules, inlineRules, "text-transform").filter((d) => d.value === "uppercase");
      for (const c of caps) {
        found.push({ message: `text-transform: uppercase on "${c.selector}" — check it's not long body text`, selector: c.selector });
      }
      return found;
    },
  },

  // ---------------- COLOR & CONTRAST (5) ----------------
  {
    id: "ai-color-palette",
    category: "Color & Contrast",
    type: "cli",
    check({ cssRules, inlineRules }) {
      const found = [];
      const all = [...cssRules, ...inlineRules];
      for (const d of all) {
        if (/#([0-9a-f]{3}){1,2}/.test(d.value)) {
          const hexMatches = d.value.match(/#([0-9a-f]{3}){1,2}/g) || [];
          for (const hex of hexMatches) {
            const rgb = require("./utils").hexToRgb(hex);
            if (rgb && rgb.b > 180 && rgb.r > 100 && rgb.r < 200 && rgb.g < 120) {
              found.push({ message: `Purple/violet tone (${hex}) on "${d.selector}" — AI color palette tell`, selector: d.selector });
            }
          }
        }
      }
      return found;
    },
  },
  {
    id: "dark-mode-glowing-accents",
    category: "Color & Contrast",
    type: "cli",
    check({ cssRules, inlineRules }) {
      const darkBg = declsFor(cssRules, inlineRules, "background-color").filter((d) => /#0|#1|black/.test(d.value));
      const glow = declsFor(cssRules, inlineRules, "box-shadow").filter((d) => /(0\.[3-9]|1)\)/.test(d.value));
      return glow
        .filter((g) => darkBg.some((b) => b.selector === g.selector))
        .map((g) => ({ message: `Dark background with glowing box-shadow on "${g.selector}"`, selector: g.selector }));
    },
  },
  {
    id: "gradient-text",
    category: "Color & Contrast",
    type: "cli",
    check({ cssRules, inlineRules }) {
      const clip = declsFor(cssRules, inlineRules, "-webkit-background-clip")
        .concat(declsFor(cssRules, inlineRules, "background-clip"))
        .filter((d) => d.value === "text");
      return clip.map((d) => ({ message: `Gradient text (background-clip: text) on "${d.selector}"`, selector: d.selector }));
    },
  },
  {
    id: "gray-text-colored-bg",
    category: "Color & Contrast",
    type: "cli",
    check({ cssRules, inlineRules }) {
      const found = [];
      const colors = declsFor(cssRules, inlineRules, "color");
      const bgs = declsFor(cssRules, inlineRules, "background-color");
      const { contrastRatio } = require("./utils");
      for (const c of colors) {
        const bg = bgs.find((b) => b.selector === c.selector);
        if (bg) {
          const cHex = c.value.match(/#[0-9a-f]{3,6}/)?.[0];
          const bHex = bg.value.match(/#[0-9a-f]{3,6}/)?.[0];
          if (cHex && bHex) {
            const ratio = contrastRatio(cHex, bHex);
            if (ratio && ratio < 4.5) {
              found.push({ message: `Low contrast (${ratio.toFixed(2)}:1) text on "${c.selector}"`, selector: c.selector });
            }
          }
        }
      }
      return found;
    },
  },
  {
    id: "cream-beige-palette",
    category: "Color & Contrast",
    type: "cli",
    check({ cssRules, inlineRules }) {
      return declsFor(cssRules, inlineRules, "background-color")
        .filter((d) => CREAM_HEXES.some((hex) => d.value.includes(hex)))
        .map((d) => ({ message: `Default "tasteful" cream background on "${d.selector}"`, selector: d.selector }));
    },
  },

  // ---------------- LAYOUT & SPACE (8) ----------------
  { id: "hero-metric-layout", category: "Layout & Space", type: "llm", check: () => null },
  { id: "identical-card-grids", category: "Layout & Space", type: "llm", check: () => null },
  {
    id: "monotonous-spacing",
    category: "Layout & Space",
    type: "cli",
    check({ cssRules, inlineRules }) {
      const gaps = declsFor(cssRules, inlineRules, "margin").concat(declsFor(cssRules, inlineRules, "padding"));
      const values = [...new Set(gaps.map((g) => g.value))];
      return gaps.length > 4 && values.length === 1
        ? [{ message: `Same spacing value "${values[0]}" used everywhere — no rhythm` }]
        : [];
    },
  },
  {
    id: "nested-cards",
    category: "Layout & Space",
    type: "cli",
    check({ $ }) {
      const found = [];
      $("[class*='card']").each((i, el) => {
        const nested = $(el).find("[class*='card']");
        if (nested.length > 0) {
          found.push({ message: `Card nested inside another card (depth ${nested.length + 1})` });
        }
      });
      return found;
    },
  },
  {
    id: "numbered-section-markers",
    category: "Layout & Space",
    type: "cli",
    check({ $ }) {
      let count = 0;
      $("*").each((i, el) => {
        if (/^0[1-9]$/.test(textOf($, el))) count++;
      });
      return count >= 2 ? [{ message: `${count} numbered section markers (01/02/03...) found` }] : [];
    },
  },
  { id: "line-length-too-long", category: "Layout & Space", type: "browser", check: () => null },
  { id: "content-overflow", category: "Layout & Space", type: "browser", check: () => null },
  { id: "positioned-child-clipped", category: "Layout & Space", type: "browser", check: () => null },

  // ---------------- MOTION (3) ----------------
  {
    id: "bounce-elastic-easing",
    category: "Motion",
    type: "cli",
    check({ cssRules, inlineRules }) {
      return declsFor(cssRules, inlineRules, "transition-timing-function")
        .filter((d) => /bounce|elastic|cubic-bezier\(.*1\.[5-9]/.test(d.value))
        .map((d) => ({ message: `Bounce/elastic easing (${d.value}) on "${d.selector}"`, selector: d.selector }));
    },
  },
  {
    id: "layout-property-animation",
    category: "Motion",
    type: "cli",
    check({ cssRules, inlineRules }) {
      return declsFor(cssRules, inlineRules, "transition")
        .filter((d) => /(width|height|padding|margin)/.test(d.value))
        .map((d) => ({ message: `Animating layout property on "${d.selector}" causes jank`, selector: d.selector }));
    },
  },
  {
    id: "image-hover-transform",
    category: "Motion",
    type: "opt-in",
    check({ cssRules }) {
      return cssRules
        .filter((d) => /:hover/.test(d.selector) && /img/.test(d.selector) && d.property === "transform")
        .map((d) => ({ message: `Image scales/rotates on hover: "${d.selector}"`, selector: d.selector }));
    },
  },

  // ---------------- COPY (4) ----------------
  {
    id: "em-dash-overuse",
    category: "Copy",
    type: "cli",
    check({ allText }) {
      const count = (allText.match(/—/g) || []).length;
      return count > 2 ? [{ message: `${count} em-dashes found — AI cadence tell` }] : [];
    },
  },
  {
    id: "marketing-buzzword",
    category: "Copy",
    type: "cli",
    check({ allText }) {
      const found = [];
      for (const word of BUZZWORDS) {
        if (new RegExp(`\\b${word}\\b`, "i").test(allText)) {
          found.push({ message: `Marketing buzzword "${word}" found` });
        }
      }
      return found;
    },
  },
  { id: "aphoristic-cadence-copy", category: "Copy", type: "llm", check: () => null },
  {
    id: "theater-framing-copy",
    category: "Copy",
    type: "opt-in",
    check({ allText }) {
      return /\btheater\b/i.test(allText) ? [{ message: `"Theater" framing copy tic found` }] : [];
    },
  },

  // ---------------- IMAGERY (1) ----------------
  {
    id: "broken-placeholder-image",
    category: "Imagery",
    type: "cli",
    check({ $ }) {
      const found = [];
      $("img").each((i, el) => {
        const src = $(el).attr("src");
        if (!src || src.trim() === "" || /placeholder/i.test(src)) {
          found.push({ message: `Broken or placeholder image: src="${src}"` });
        }
      });
      return found;
    },
  },

  // ---------------- GENERAL QUALITY (8) ----------------
  { id: "cramped-padding", category: "General quality", type: "browser", check: () => null },
  { id: "body-text-touching-edge", category: "General quality", type: "browser", check: () => null },
  {
    id: "justified-text",
    category: "General quality",
    type: "cli",
    check({ cssRules, inlineRules }) {
      return declsFor(cssRules, inlineRules, "text-align")
        .filter((d) => d.value === "justify")
        .map((d) => ({ message: `Justified text on "${d.selector}" creates rivers of whitespace`, selector: d.selector }));
    },
  },
  {
    id: "low-contrast-text",
    category: "General quality",
    type: "cli",
    check(ctx) {
      return [];
    },
  },
  {
    id: "skipped-heading-level",
    category: "General quality",
    type: "cli",
    check({ $ }) {
      const found = [];
      let lastLevel = 0;
      $("h1,h2,h3,h4,h5,h6").each((i, el) => {
        const level = parseInt(el.tagName[1]);
        if (lastLevel && level - lastLevel > 1) {
          found.push({ message: `Heading skips from h${lastLevel} to h${level}` });
        }
        lastLevel = level;
      });
      return found;
    },
  },
  {
    id: "tight-line-height",
    category: "General quality",
    type: "cli",
    check({ cssRules, inlineRules }) {
      return declsFor(cssRules, inlineRules, "line-height")
        .filter((d) => parseFloat(d.value) > 0 && parseFloat(d.value) < 1.3)
        .map((d) => ({ message: `Tight line-height (${d.value}) on "${d.selector}"`, selector: d.selector }));
    },
  },
  {
    id: "tiny-body-text",
    category: "General quality",
    type: "cli",
    check({ cssRules, inlineRules }) {
      return declsFor(cssRules, inlineRules, "font-size")
        .filter((d) => d.value.includes("px") && parseFloat(d.value) < 12)
        .map((d) => ({ message: `Tiny text (${d.value}) on "${d.selector}"`, selector: d.selector }));
    },
  },
  {
    id: "wide-letter-spacing-body",
    category: "General quality",
    type: "cli",
    check({ cssRules, inlineRules }) {
      return declsFor(cssRules, inlineRules, "letter-spacing")
        .filter((d) => parseFloat(d.value) > 0.05)
        .map((d) => ({ message: `Wide letter-spacing (${d.value}) on "${d.selector}"`, selector: d.selector }));
    },
  },
];

module.exports = rules;