@devinilabs/reelstack 1.2.0 → 1.3.0

package/cli/lint.js

@@ -7,17 +7,19 @@
  *   - HERO_TEXT_OVERFLOW:         counter or hero text wider than canvas - 64px gutter.
  *   - AUDIO_NOT_LOCKED:           file imports <Audio> but defines no BEAT const block.
  *   - HAND_DRAWN_BRAND:           inline <svg> longer than 800 chars in a logo-sized element.
- *   - BANNED_FONT:                fontFamily uses one of the generic LLM-default fonts.
- *   - PURE_BLACK_TEXT:            color: "#000" / "#000000" — kills warmth on cream/glass families.
- *   - AI_PURPLE_ACCENT:           hex color in the AI-purple blocklist (#7c3aed, etc.).
- *   - EMOJI_GLYPH:                literal emoji in JSX text — hand-drawn brand violation.
- *   - ACCENT_ALLOWLIST_VIOLATION: hex color outside the resolved family's ALLOWED_ACCENTS list.
+ *   - ACCENT_ALLOWLIST_VIOLATION: (warn) hex color outside the resolved family's ALLOWED_ACCENTS list — intentional sponsor/custom accents are fine, the rule catches accidental token typos.
  *   - SPACING_NON_GRID:           padding/margin/gap not on the 4px grid.
  *   - MISSING_REDUCE_MOTION:      component imports useCurrentFrame but lacks a `reduceMotion` prop.
  *   - GENERIC_PLACEHOLDER:        "Lorem ipsum", "John Doe", "Acme Corp" — leftover stub copy.
- *   - PILL_TAG_OVERSTRETCHED:     pill/tag/chip/badge component forced wider than its content via style overrides.
- *   - RIPPLE_TOO_LOUD:            SonarRings/ParticleBurst/IridescentRing exceeds house-style intensity ceiling.
- *   - RIPPLE_STACK:               more than 2 ripple emitters anchored to the same (cx, cy) in one scene.
+ *   - HOOK_LATENCY:               earliest <Sequence> starts after frame 30 — first second of reel is empty.
+ *   - CTA_MISSING:                (warn) no CTA component or CTA keyword (follow/subscribe/etc.) found anywhere.
+ *   - NON_HW_ACCEL_PROP:          interpolate(frame,…) / spring(…) assigned to top/left/right/bottom/width/height — triggers layout reflow. Catches BOTH inline form (style={{top: interpolate(…)}}) AND variable form (const slide = interpolate(…); style={{top: slide}}).
+ *   - TEXT_DWELL_TOO_SHORT:       (warn) Sequence wraps readable text with durationInFrames < 30 (under 1s).
+ *   - FILLER_WORD:                (warn) JSX text uses AI-copy cliché (Elevate, Seamless, Unleash, …).
+ *
+ * Violations carry an optional `severity: "error" | "warning"` field. Missing
+ * severity = "error" (backward-compat for the 12 original rules). `reelstack
+ * lint` exits 1 if any error fires, 0 if only warnings.
  *
  * With `--critique`, the same set of static checks drives a 5-dimension radar
  * (Palette · Motion · Timing · Hierarchy · Brand fit) plus a Keep / Fix / Quick
@@ -36,34 +38,6 @@ const CANVAS_H = 1920;
 const CANVAS_W = 1080;
 const HERO_TEXT_MAX = CANVAS_W - 64; // 1016
 
-// ─── Inline taste-skill blocklists ──────────────────────────────────────
-// Maintenance note: these mirror the canonical lists in utils/banned-fonts.ts
-// and utils/ai-purple-blocklist.ts. We inline here because cli/* is plain
-// CommonJS and importing TS source would require a build step. Refactor in
-// v1.2 if/when we add tsc emit to the publish pipeline.
-const BANNED_FONTS = [
-  "Inter",
-  "Roboto",
-  "Helvetica",
-  "Arial",
-  "Open Sans",
-  "Lato",
-  "Montserrat",
-  "Poppins",
-  "Raleway",
-];
-
-const AI_PURPLE_HEXES = [
-  "#7c3aed",
-  "#8b5cf6",
-  "#6366f1",
-  "#a78bfa",
-  "#c084fc",
-  "#9333ea",
-  "#7e22ce",
-  "#a855f7",
-];
-
 const FAMILY_ALLOWED_ACCENTS = {
   glass: [
     "#7FE8D4", "#8B7FE8", "#E89BC4", "#F2D88F",
@@ -89,9 +63,6 @@ const GENERIC_PLACEHOLDERS = [
   /placeholder text/i,
 ];
 
-// Emoji & symbol ranges (covers most emoji + dingbats).
-const EMOJI_REGEX = /[\u{1F300}-\u{1F9FF}\u{2600}-\u{27BF}]/u;
-
 function lint(file) {
   if (!fs.existsSync(file)) {
     fail(`File not found: ${file}`);
@@ -253,129 +224,6 @@ function lint(file) {
     }
   });
 
-  // ─── Banned fonts (taste-skill rule) ─────────────────────────────────
-  try {
-    const fontFamilyRegex = /fontFamily:\s*["'`]([^"'`]+)["'`]/g;
-    let mFF;
-    while ((mFF = fontFamilyRegex.exec(src)) !== null) {
-      const decl = mFF[1].toLowerCase();
-      const hit = BANNED_FONTS.find((f) => decl.includes(f.toLowerCase()));
-      if (hit) {
-        violations.push({
-          line: lineOfIdx(mFF.index),
-          code: "BANNED_FONT",
-          msg: `fontFamily "${mFF[1]}" includes generic LLM-default font "${hit}". Use the family's typography preset instead.`,
-        });
-      }
-    }
-  } catch {}
-
-  // ─── Pure-black text (taste-skill rule) ──────────────────────────────
-  // Detects pure black across multiple CSS color forms on color/background/
-  // fill/stroke properties:
-  //   - #000 / #000000 (case insensitive)
-  //   - rgb(0,0,0) / rgb( 0 , 0 , 0 ) (whitespace tolerant)
-  //   - rgba(0,0,0, 1) (alpha 0..1)
-  //   - "black" CSS keyword
-  try {
-    const blackHexRe = /^#0{3}$|^#0{6}$/i;
-    const blackRgbRe = /^rgba?\(\s*0\s*,\s*0\s*,\s*0\s*(?:,\s*(?:0|0?\.\d+|1(?:\.0+)?)\s*)?\)$/i;
-    const propRe = /(color|background|fill|stroke):\s*["'`]([^"'`]+)["'`]/g;
-    let mB;
-    while ((mB = propRe.exec(src)) !== null) {
-      const prop = mB[1];
-      const val = mB[2].trim();
-      const isBlack =
-        blackHexRe.test(val) ||
-        blackRgbRe.test(val) ||
-        val.toLowerCase() === "black";
-      if (isBlack) {
-        violations.push({
-          line: lineOfIdx(mB.index),
-          code: "PURE_BLACK_TEXT",
-          msg: `${prop}: "${val}" is pure black — kills warmth. Use the family's text-primary token (e.g. #0E0E12 / #1a1a1a / #0E0B12).`,
-        });
-      }
-    }
-  } catch {}
-
-  // ─── AI-purple accent (taste-skill rule) ─────────────────────────────
-  // Catches purple references across:
-  //   - 6-char hex (#7c3aed)
-  //   - 3-char hex shorthand normalized to 6-char (#73e → #7733ee)
-  //   - rgb(R, G, B) / rgba(R, G, B, A) numeric forms (converted to hex)
-  // Forbidden-family files (importing @devinilabs/reelstack/families/forbidden)
-  // get an exemption for #6B5BD9 (ultraviolet) and #A87FE8 (plasma) since
-  // those are family-native accents that happen to land in the purple gamut.
-  try {
-    const blocklist = new Set(AI_PURPLE_HEXES.map((h) => h.toLowerCase()));
-    const isForbiddenFamily =
-      /from\s+["']@devinilabs\/reelstack\/families\/forbidden/.test(src);
-    const forbiddenExempt = new Set(["#6b5bd9", "#a87fe8"]);
-
-    const toHex = (n) => {
-      const v = Math.max(0, Math.min(255, Number(n)));
-      return v.toString(16).padStart(2, "0");
-    };
-    const expandShortHex = (hex) =>
-      "#" + hex.slice(1).split("").map((ch) => ch + ch).join("");
-
-    const flaggedAt = new Set(); // dedupe by hex+line
-    const pushIfBlocked = (canonHex, displayValue, idx) => {
-      const lc = canonHex.toLowerCase();
-      if (!blocklist.has(lc)) return;
-      if (isForbiddenFamily && forbiddenExempt.has(lc)) return;
-      const line = lineOfIdx(idx);
-      const key = lc + ":" + line;
-      if (flaggedAt.has(key)) return;
-      flaggedAt.add(key);
-      violations.push({
-        line,
-        code: "AI_PURPLE_ACCENT",
-        msg: `${displayValue} is on the AI-purple blocklist — every "AI" demo uses these. Pick a family-native accent instead.`,
-      });
-    };
-
-    // 6-char hex
-    const hex6Re = /#[0-9a-fA-F]{6}\b/g;
-    let mH6;
-    while ((mH6 = hex6Re.exec(src)) !== null) {
-      pushIfBlocked(mH6[0], `Hex ${mH6[0]}`, mH6.index);
-    }
-
-    // 3-char hex (NOT followed by another hex pair so we don't double-match #abcdef).
-    // Use lookahead to ensure exactly 3 hex digits, terminated by non-hex.
-    const hex3Re = /#[0-9a-fA-F]{3}(?![0-9a-fA-F])/g;
-    let mH3;
-    while ((mH3 = hex3Re.exec(src)) !== null) {
-      const expanded = expandShortHex(mH3[0]);
-      pushIfBlocked(expanded, `Hex ${mH3[0]} (≡ ${expanded})`, mH3.index);
-    }
-
-    // rgb()/rgba() numeric color
-    const rgbRe = /rgba?\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*(?:,\s*(?:0|0?\.\d+|1(?:\.0+)?)\s*)?\)/gi;
-    let mRgb;
-    while ((mRgb = rgbRe.exec(src)) !== null) {
-      const canon = "#" + toHex(mRgb[1]) + toHex(mRgb[2]) + toHex(mRgb[3]);
-      pushIfBlocked(canon, `${mRgb[0]} (≡ ${canon})`, mRgb.index);
-    }
-  } catch {}
-
-  // ─── Emoji glyphs in JSX text ────────────────────────────────────────
-  try {
-    const textRegex = />([^<>]+)</g;
-    let mE;
-    while ((mE = textRegex.exec(src)) !== null) {
-      if (EMOJI_REGEX.test(mE[1])) {
-        violations.push({
-          line: lineOfIdx(mE.index),
-          code: "EMOJI_GLYPH",
-          msg: `Literal emoji in JSX text — hand-drawn brand violation. Use /reelstack-icons or a custom motion glyph.`,
-        });
-      }
-    }
-  } catch {}
-
   // ─── Accent allowlist (per-family) ───────────────────────────────────
   try {
     const familyMatch = src.match(/from\s+["']@devinilabs\/reelstack\/families\/(\w+)/);
@@ -389,7 +237,6 @@ function lint(file) {
       while ((mA = hexAccentRegex.exec(src)) !== null) {
         const lc = mA[0].toLowerCase();
         if (/^#0{6}$/.test(lc)) continue;
-        if (AI_PURPLE_HEXES.includes(lc)) continue;
         if (allowLc.includes(lc)) continue;
         const key = lc + ":" + lineOfIdx(mA.index);
         if (flagged.has(key)) continue;
@@ -397,7 +244,8 @@ function lint(file) {
         violations.push({
           line: lineOfIdx(mA.index),
           code: "ACCENT_ALLOWLIST_VIOLATION",
-          msg: `Hex ${mA[0]} is not in the ${family} family's ALLOWED_ACCENTS list. Use the palette tokens instead.`,
+          severity: "warning",
+          msg: `Hex ${mA[0]} is not in the ${family} family's ALLOWED_ACCENTS list — intentional sponsor/custom accents are fine; check this isn't an accidental typo of a family token.`,
         });
       }
     }
@@ -494,118 +342,183 @@ function lint(file) {
     }
   } catch {}
 
-  // ─── Pill / tag width discipline ─────────────────────────────────────
-  // Pill, Tag, Chip, and Badge components must hug their content. When
-  // they sit inside a flex column the default `align-items: stretch`
-  // bleeds across the canvas and breaks the eyebrow-callout pattern.
-  // The components themselves now ship with `alignSelf: flex-start` +
-  // `width: max-content`, so this rule catches the only remaining gap:
-  // call-site `style` overrides that re-stretch the pill.
+  // ─── Hook latency ────────────────────────────────────────────────────
+  // Reels lose viewers around frame 30 if nothing visible has happened.
+  // Find the lowest `from={N}` across all <Sequence> tags. Conservative:
+  // if ANY `from` uses a dynamic expression (e.g. from={SCENES.S1.start}),
+  // skip the rule — we can't reason about its value. Only fire when EVERY
+  // from is a literal number AND the smallest is > 30.
   try {
-    const HUG_OK = /^(max-content|fit-content|min-content|auto)$/i;
-    for (const mTag of src.matchAll(/<(\w+(?:Pill|Tag|Chip|Badge))\b([^>]*?)(?:\/?>|>)/g)) {
-      const componentName = mTag[1];
-      const opener = mTag[0];
-      const idx = mTag.index;
-      const styleMatch = opener.match(/style=\{\{([\s\S]*?)\}\}/);
-      if (!styleMatch) continue;
-      const styleBlock = styleMatch[1];
-
-      const widthMatch = styleBlock.match(/\bwidth:\s*["'`]?([^,"\s'`}]+)["'`]?/);
-      if (widthMatch && !HUG_OK.test(widthMatch[1])) {
-        violations.push({
-          line: lineOfIdx(idx),
-          code: "PILL_TAG_OVERSTRETCHED",
-          msg: `<${componentName}> has style.width="${widthMatch[1]}" — tag/pill components must hug content. Remove width or set "max-content".`,
-        });
+    if (!isTemplate) {
+      const allFromTags = [...src.matchAll(/<Sequence\b[^>]*?\sfrom=\{([^}]+)\}/g)];
+      if (allFromTags.length > 0) {
+        let allLiteral = true;
+        let earliest = Infinity;
+        let earliestIdx = 0;
+        for (const m of allFromTags) {
+          const expr = m[1].trim();
+          if (!/^\d+$/.test(expr)) {
+            allLiteral = false;
+            break;
+          }
+          const n = Number(expr);
+          if (n < earliest) {
+            earliest = n;
+            earliestIdx = m.index;
+          }
+        }
+        if (allLiteral && earliest > 30) {
+          violations.push({
+            line: lineOfIdx(earliestIdx),
+            code: "HOOK_LATENCY",
+            severity: "error",
+            msg: `Earliest <Sequence> starts at frame ${earliest} — viewers scroll past after frame 30. Show something in the first second.`,
+          });
+        }
       }
+    }
+  } catch {}
 
-      if (/\balignSelf:\s*["'`]stretch["'`]/.test(styleBlock)) {
+  // ─── CTA presence ────────────────────────────────────────────────────
+  // Every reel must end on an explicit ask. Pass if EITHER a CTA-named
+  // component exists OR any JSX text contains a CTA keyword.
+  try {
+    if (!isTemplate) {
+      const ctaKeywordRe = /\b(follow|subscribe|save|share|DM|comment|link in bio|try|build|book|sign up|download|get started|learn more|watch|ship)\b/i;
+      const ctaComponentRe = /<(CTA(?:Scene)?|CallToAction|Outro|Footer)\b/i;
+      const jsxText = [...src.matchAll(/>([^<>]+)</g)].map((m) => m[1]).join(" ");
+      const hasComponent = ctaComponentRe.test(src);
+      const hasKeyword = ctaKeywordRe.test(jsxText);
+      if (!hasComponent && !hasKeyword) {
         violations.push({
-          line: lineOfIdx(idx),
-          code: "PILL_TAG_OVERSTRETCHED",
-          msg: `<${componentName}> has alignSelf: "stretch" — tag/pill components must hug content. Remove or set "flex-start".`,
+          line: 1,
+          code: "CTA_MISSING",
+          severity: "warning",
+          msg: `No CTA found — neither a <CTAScene>/<Outro>/<Footer> component nor a CTA keyword (follow, subscribe, save, share, link in bio, try, build, watch, ship). Add an explicit ask in the final scene — unless this is ambient/brand/educational content where the platform UI handles the ask.`,
         });
       }
+    }
+  } catch {}
 
-      if (/\bflex:\s*["'`]?[1-9]/.test(styleBlock)) {
-        violations.push({
-          line: lineOfIdx(idx),
-          code: "PILL_TAG_OVERSTRETCHED",
-          msg: `<${componentName}> has flex grow > 0 — tag/pill components must hug content.`,
-        });
-      }
+  // ─── Non-hardware-accelerated animation target ──────────────────────
+  // interpolate(frame, …) or spring(…) on layout props (top/left/right/
+  // bottom/width/height) triggers reflow and tanks render smoothness.
+  // Animate transform/opacity only.
+  //
+  // Catches TWO forms:
+  //   1) Inline:  `top: interpolate(frame, …)` / `width: spring(…)`
+  //   2) Variable: `const slide = interpolate(frame, …); … style={{ top: slide }}`
+  //
+  // For (2): build a set of identifiers bound to interpolate(frame,…) or
+  // spring(…) at top-level (const/let/var). Then for each banned prop in the
+  // file, check whether the value expression references any animated name.
+  // Conservative: only top-level assignments — destructured / nested-scope
+  // assignments skipped to avoid false positives.
+  try {
+    const bannedProps = ["top", "left", "right", "bottom", "width", "height"];
 
-      if (/\bflexGrow:\s*[1-9]/.test(styleBlock)) {
-        violations.push({
-          line: lineOfIdx(idx),
-          code: "PILL_TAG_OVERSTRETCHED",
-          msg: `<${componentName}> has flexGrow > 0 — tag/pill components must hug content.`,
-        });
+    // Form 1: inline
+    const inlineRe = new RegExp(`\\b(${bannedProps.join("|")})\\s*:\\s*(?:interpolate|spring)\\s*\\(`, "g");
+    for (const m of src.matchAll(inlineRe)) {
+      violations.push({
+        line: lineOfIdx(m.index),
+        code: "NON_HW_ACCEL_PROP",
+        severity: "error",
+        msg: `Animating "${m[1]}" with interpolate()/spring() triggers layout reflow. Use transform: translateY/translateX/scale or opacity instead.`,
+      });
+    }
+
+    // Form 2: variable
+    const animVars = new Set();
+    const assignRe = /\b(?:const|let|var)\s+(\w+)\s*=\s*(?:interpolate\s*\(\s*frame\b|spring\s*\()/g;
+    for (const m of src.matchAll(assignRe)) {
+      animVars.add(m[1]);
+    }
+    if (animVars.size > 0) {
+      const flagged = new Set(); // dedupe by line+prop+var
+      for (const prop of bannedProps) {
+        // Match `prop: <expr>` where <expr> goes up to comma/close-brace.
+        // Word boundary `\b` ensures `top:` doesn't match `marginTop:` /
+        // `borderTop:` / `paddingTop:`.
+        const propRe = new RegExp(`\\b${prop}\\s*:\\s*([^,}\\n]+)`, "g");
+        for (const m of src.matchAll(propRe)) {
+          const valExpr = m[1];
+          // Skip if already caught by inline form (avoid double-fire).
+          if (/\b(interpolate|spring)\s*\(/.test(valExpr)) continue;
+          for (const v of animVars) {
+            const refRe = new RegExp(`\\b${v}\\b`);
+            if (refRe.test(valExpr)) {
+              const line = lineOfIdx(m.index);
+              const key = `${line}:${prop}:${v}`;
+              if (flagged.has(key)) continue;
+              flagged.add(key);
+              violations.push({
+                line,
+                code: "NON_HW_ACCEL_PROP",
+                severity: "error",
+                msg: `Animating "${prop}" via animated variable "${v}" (assigned from interpolate/spring) triggers layout reflow. Use transform: translateY/translateX/scale or opacity instead.`,
+              });
+              break;
+            }
+          }
+        }
       }
     }
   } catch {}
 
-  // ─── Ripple-effect intensity ceiling ─────────────────────────────────
-  // Ripple primitives (SonarRings, ParticleBurst, IridescentRing) read
-  // as ambient texture, not protagonist. When their counts climb or when
-  // multiple ripple emitters stack at the same anchor in the same scene,
-  // the eye loses the hero copy. Ceilings here are the values used in
-  // the canonical reels (ClaudeWatchReel, GraphifyReel) — anything above
-  // is louder than the house style sanctions.
+  // ─── Text dwell time (warning) ───────────────────────────────────────
+  // <Sequence durationInFrames={X}> with X < 30 wrapping a text element
+  // means viewers can't read it. Warn (not error) — some intentional
+  // flash effects are valid.
   try {
-    const RIPPLE_CEILINGS = {
-      SonarRings:     { prop: "count", max: 4,  msg: "SonarRings count > 4 reads as visual noise. House ceiling is 4." },
-      ParticleBurst:  { prop: "count", max: 20, msg: "ParticleBurst count > 20 overwhelms the hero. House ceiling is 20." },
-      IridescentRing: { prop: "radius", max: 260, msg: "IridescentRing radius > 260 dominates the frame. House ceiling is 260." },
-    };
-    for (const [name, rule] of Object.entries(RIPPLE_CEILINGS)) {
-      const tagRe = new RegExp(`<${name}\\b([^>]*?)(?:/?>|>)`, "g");
-      for (const mTag of src.matchAll(tagRe)) {
-        const opener = mTag[0];
-        const idx = mTag.index;
-        const propRe = new RegExp(`\\b${rule.prop}=\\{(-?\\d+)\\}`);
-        const propMatch = opener.match(propRe);
-        if (!propMatch) continue;
-        const value = Number(propMatch[1]);
-        if (value > rule.max) {
+    if (!isTemplate) {
+      const seqRe = /<Sequence\b([^>]*?)>([\s\S]*?)<\/Sequence>/g;
+      const textElemRe = /<(span|p|h[1-6]|Counter|HeroText|StaggeredWords|ScaleBlurText|EditorialSerifText|EyebrowPill)\b[^>]*>[^<]*\S/;
+      for (const m of src.matchAll(seqRe)) {
+        const propsBlock = m[1];
+        const inner = m[2];
+        const durMatch = propsBlock.match(/durationInFrames=\{(\d+)\}/);
+        if (!durMatch) continue;
+        const dur = Number(durMatch[1]);
+        if (dur >= 30) continue;
+        if (textElemRe.test(inner)) {
           violations.push({
-            line: lineOfIdx(idx),
-            code: "RIPPLE_TOO_LOUD",
-            msg: `<${name} ${rule.prop}={${value}}> — ${rule.msg}`,
+            line: lineOfIdx(m.index),
+            code: "TEXT_DWELL_TOO_SHORT",
+            severity: "warning",
+            msg: `<Sequence> wraps readable text with durationInFrames=${dur} (<30 frames / 1s). Increase so viewers can read.`,
           });
         }
       }
     }
+  } catch {}
 
-    // Ripple-stack penalty: more than 2 ripple emitters anchored to the
-    // same (cx, cy) in the same Sequence implies overlapping shockwaves.
-    // We approximate "same anchor" by exact-match cx + cy props in adjacent
-    // JSX nodes within ~12 lines.
-    const ripplePoints = []; // { cx, cy, line, name }
-    const rippleRe = /<(SonarRings|ParticleBurst|IridescentRing)\b([^>]*?)(?:\/?>|>)/g;
-    for (const mR of src.matchAll(rippleRe)) {
-      const opener = mR[0];
-      const cx = (opener.match(/\bcx=\{(-?\d+)\}/) || [])[1];
-      const cy = (opener.match(/\bcy=\{(-?\d+)\}/) || [])[1];
-      if (cx == null || cy == null) continue;
-      ripplePoints.push({
-        key: `${cx},${cy}`,
-        line: lineOfIdx(mR.index),
-        name: mR[1],
-      });
-    }
-    const stackCounts = {};
-    for (const p of ripplePoints) {
-      stackCounts[p.key] = (stackCounts[p.key] || []);
-      stackCounts[p.key].push(p);
-    }
-    for (const [anchor, group] of Object.entries(stackCounts)) {
-      if (group.length > 2) {
+  // ─── Filler words (warning, taste-skill rule) ───────────────────────
+  // AI-copy clichés — Elevate, Seamless, Unleash, etc. — read as
+  // AI-generated. Warn so buyers can choose intentional uses.
+  try {
+    if (!isTemplate) {
+      const FILLER_WORDS = [
+        "elevate", "seamless", "unleash", "next-gen", "revolutionary",
+        "game-changing", "empower", "streamline", "cutting-edge",
+        "synergy", "disrupt", "harness", "leverage",
+      ];
+      const fillerRe = new RegExp(`\\b(${FILLER_WORDS.join("|")})\\b`, "gi");
+      const textRe = />([^<>]+)</g;
+      const seen = new Set();
+      for (const m of src.matchAll(textRe)) {
+        const text = m[1];
+        const hit = text.match(fillerRe);
+        if (!hit) continue;
+        const line = lineOfIdx(m.index);
+        const key = `${hit[0].toLowerCase()}:${line}`;
+        if (seen.has(key)) continue;
+        seen.add(key);
         violations.push({
-          line: group[0].line,
-          code: "RIPPLE_STACK",
-          msg: `${group.length} ripple primitives anchored at (${anchor}) — house rule: max 2 ripple emitters per anchor. Spread them or remove one.`,
+          line,
+          code: "FILLER_WORD",
+          severity: "warning",
+          msg: `JSX text contains AI-copy cliché "${hit[0]}". Replace with a concrete verb that describes what the product actually does.`,
         });
       }
     }
@@ -643,10 +556,6 @@ function computeCritique(violations, src = "") {
   const audioViols = countCode(v, "AUDIO_NOT_LOCKED");
   const spacingViols = countCode(v, "SPACING_NON_GRID");
   const heroOverflowViols = countCode(v, "HERO_TEXT_OVERFLOW");
-  const bannedFontViols = countCode(v, "BANNED_FONT");
-  const blackTextViols = countCode(v, "PURE_BLACK_TEXT");
-  const aiPurpleViols = countCode(v, "AI_PURPLE_ACCENT");
-  const emojiViols = countCode(v, "EMOJI_GLYPH");
   const placeholderViols = countCode(v, "GENERIC_PLACEHOLDER");
 
   // interpolate(frame,…) without explicit `easing:` option in same call.
@@ -709,7 +618,7 @@ function computeCritique(violations, src = "") {
   const hierarchy = Math.max(0, 10 - spacingViols * 1 - heroOverflowViols * 3);
   const brand = Math.max(
     0,
-    10 - bannedFontViols * 5 - blackTextViols * 2 - aiPurpleViols * 5 - emojiViols * 3 - placeholderViols * 2,
+    10 - placeholderViols * 2,
   );
 
   const keep = [];
@@ -718,22 +627,23 @@ function computeCritique(violations, src = "") {
     keep.push("Audio-locked beats present — motion choreographed to whisper SRT.");
   }
   if (countCode(v, "SAFE_ZONE_BREACH") === 0) keep.push("IG safe zones respected (no top/bottom-band breaches).");
-  if (bannedFontViols === 0 && blackTextViols === 0 && aiPurpleViols === 0) keep.push("Typography + palette stay on-family — no LLM-default fonts or AI-purple hexes.");
+  if (placeholderViols === 0) keep.push("Copy is shipped-ready — no stub placeholder text in the file.");
   if (heroOverflowViols === 0) keep.push("Hero text fits the 1080 width gutter.");
   if (keep.length === 0) keep.push("(No clean wins detected — work the punch list below.)");
 
   const severityOrder = [
     "AUDIO_NOT_LOCKED",
-    "BANNED_FONT",
-    "AI_PURPLE_ACCENT",
+    "CTA_MISSING",
+    "HOOK_LATENCY",
+    "NON_HW_ACCEL_PROP",
     "MOTION_FLOOR_VIOLATION",
     "HERO_TEXT_OVERFLOW",
     "SAFE_ZONE_BREACH",
     "HAND_DRAWN_BRAND",
     "ACCENT_ALLOWLIST_VIOLATION",
-    "PURE_BLACK_TEXT",
-    "EMOJI_GLYPH",
     "GENERIC_PLACEHOLDER",
+    "TEXT_DWELL_TOO_SHORT",
+    "FILLER_WORD",
     "MISSING_REDUCE_MOTION",
   ];
   const sorted = [...v].sort(
@@ -853,13 +763,25 @@ async function run(argv) {
     success(`Lint clean: ${path.relative(process.cwd(), abs)}`);
     process.exit(0);
   }
-  warn(`${v.length} violation(s) in ${path.relative(process.cwd(), abs)}:`);
+  // Severity split: missing severity = "error" (back-compat for the 12 original rules).
+  const errors = v.filter((it) => it.severity !== "warning");
+  const warns = v.filter((it) => it.severity === "warning");
+  if (warns.length > 0) {
+    warn(`${errors.length} error(s), ${warns.length} warning(s) in ${path.relative(process.cwd(), abs)}:`);
+  } else {
+    warn(`${v.length} violation(s) in ${path.relative(process.cwd(), abs)}:`);
+  }
   console.log("");
-  for (const item of v) {
-    console.log(`  ${c.gray(`L${item.line}`)}  ${c.yellow(item.code)}  ${item.msg}`);
+  // Sort errors first, then warnings — within each group preserve original order.
+  const sorted = [...errors, ...warns];
+  for (const item of sorted) {
+    const isWarn = item.severity === "warning";
+    const sevTag = isWarn ? c.cyan("WARN") : c.red("ERR ");
+    const codeFmt = isWarn ? c.cyan(item.code) : c.yellow(item.code);
+    console.log(`  ${c.gray(`L${item.line}`)}  ${sevTag}  ${codeFmt}  ${item.msg}`);
   }
   console.log("");
-  process.exit(1);
+  process.exit(errors.length > 0 ? 1 : 0);
 }
 
 module.exports = { run, lint, critique, computeCritique, renderCritique };

package/cli/render.js

@@ -12,7 +12,7 @@
  *   --palette-optimize            Use a 64-color palette quantization for GIF (default 256).
  *
  * Pre-render pipeline:
- *   1. Lint. Aborts on violations unless --force.
+ *   1. Lint. Errors abort the render unless --force; warnings print but don't block.
  *   2. Smoke check: render frame 0 / midpoint / last via `remotion still`,
  *      check each PNG > 30KB. Warn if any frame looks all-black.
  *   3. Render MP4.
@@ -310,9 +310,19 @@ async function run(argv) {
   if (candidate && !args.force) {
     info(`Linting ${path.relative(process.cwd(), candidate)} before render…`);
     const v = lint(candidate);
-    if (v.length > 0) {
-      warn(`Lint reported ${v.length} violation(s). Pass --force to render anyway.`);
-      v.forEach((item) =>
+    // Severity-aware gate: warnings print but don't block; errors block.
+    // Missing severity = "error" (back-compat with the 12 original rules).
+    const errors = v.filter((it) => it.severity !== "warning");
+    const warns = v.filter((it) => it.severity === "warning");
+    if (warns.length > 0) {
+      info(`${warns.length} warning(s) — non-blocking:`);
+      warns.forEach((item) =>
+        console.log(`  ${c.gray(`L${item.line}`)}  ${c.cyan(item.code)}  ${item.msg}`),
+      );
+    }
+    if (errors.length > 0) {
+      warn(`Lint reported ${errors.length} error(s). Pass --force to render anyway.`);
+      errors.forEach((item) =>
         console.log(`  ${c.gray(`L${item.line}`)}  ${c.yellow(item.code)}  ${item.msg}`),
       );
       process.exit(1);

package/docs/buyers-guide.md

@@ -214,7 +214,7 @@ Re-runs the full readiness gate against the latest npm release. New presets ship
 
 ReelStack v1.1+ stands on the shoulders of two outside skills, fully baked in (no peer install required):
 
-- **[leonxlnx/taste-skill](https://github.com/leonxlnx/taste-skill)** (MIT) — UI design-discipline ruleset by `@leonxlnx`. ReelStack bakes the master rules and per-family variant overlays (Soft / Minimalist / Brutalist) directly into its components, palettes, and lint. Anti-emoji, font lockdown, max-1-accent rule, hardware-accel-only animation, `prefers-reduced-motion` parity, 4-px grid alignment — all enforced by default. Full rule citations at [`docs/design-discipline.md`](design-discipline.md).
+- **[leonxlnx/taste-skill](https://github.com/leonxlnx/taste-skill)** (MIT) — UI design-discipline ruleset by `@leonxlnx`. ReelStack bakes the master rules and per-family variant overlays (Soft / Minimalist / Brutalist) directly into its components, palettes, and lint. Max-1-accent rule, hardware-accel-only animation, `prefers-reduced-motion` parity, 4-px grid alignment — all enforced by default. Full rule citations at [`docs/design-discipline.md`](design-discipline.md).
 - **[alchaincyf/huashu-design](https://github.com/alchaincyf/huashu-design)** (Personal Use Only) — design productivity skill by `@AlchainHust` (花叔). ReelStack adopts huashu-design's UX patterns (Design Direction Advisor, 5-dimension critique, multi-format export) without copying any code or text. The Warm Signature family's `huashu` preset is named for this same project as a credit hook.
 
 If ReelStack helps you ship, please consider starring both upstream skills.