@bastani/atomic 0.9.10 → 0.9.11-alpha.10

package/dist/builtin/workflows/skills/impeccable/scripts/detector/registry/antipatterns.mjs

@@ -32,9 +32,9 @@ const ANTIPATTERNS = [
     id: 'single-font',
     category: 'slop',
     scopes: ['type'],
-    name: 'Single font for everything',
+    name: 'Single font without hierarchy',
     description:
-      'Only one font family is used for the entire page. Pair a distinctive display font with a refined body font to create typographic hierarchy.',
+      'Only one font family is used for the entire page. A single family can work when weight and size contrast carry the hierarchy; otherwise pair a distinctive display font with a refined body font.',
     skillSection: 'Typography',
     skillGuideline: 'only one font family for the entire page',
   },
@@ -104,15 +104,69 @@ const ANTIPATTERNS = [
     skillSection: 'Motion',
     skillGuideline: 'bounce or elastic easing',
   },
+  {
+    id: 'pulsing-dot',
+    category: 'slop',
+    name: 'Pulsing status dot',
+    description:
+      'Small pulsing status dots simulate liveness decoratively. Reserve pulse animation for indicators tied to genuinely live, changing data; a static indicator with clear labeling is honest and calmer.',
+    skillSection: 'Motion',
+    skillGuideline: 'decorative pulsing status dot',
+  },
+  {
+    id: 'blinking-cursor',
+    category: 'slop',
+    severity: 'advisory',
+    name: 'Decorative blinking cursor',
+    description:
+      'A blinking text cursor animated into a hero or landing section simulates typing where no input exists. It borrows the dev-tool aesthetic as decoration. Real editable fields draw their own caret; anywhere else, let the composition hold attention without a fake prompt.',
+    skillSection: 'Motion',
+  },
+  {
+    id: 'shape-assembled-illustration',
+    category: 'slop',
+    severity: 'advisory',
+    name: 'Shape-assembled illustration',
+    description:
+      'A large inline SVG that builds a pictorial scene from a pile of primitive shapes reads as placeholder clip art, not illustration. Icons, logos, and data graphics are fine at their scale; a hero-sized visual deserves real artwork, a photograph, or a deliberately drawn graphic.',
+    skillSection: 'Imagery',
+  },
   {
     id: 'dark-glow',
     category: 'slop',
-    name: 'Dark mode with glowing accents',
+    name: 'Glowing shadow accents',
+    description:
+      'Colored glow shadows — a zero-offset chromatic halo (box- or text-shadow) on any background, or any colored blurred shadow on a dark background — are the default "cool" look of AI-generated UIs. Use neutral elevation shadows and subtle, purposeful lighting instead.',
+    skillSection: 'Color & Contrast',
+    skillGuideline: 'dark mode with glowing accents',
+  },
+  {
+    id: 'radial-halo',
+    category: 'slop',
+    name: 'Radial-gradient background halo',
     description:
-      'Dark backgrounds with colored box-shadow glows are the default "cool" look of AI-generated UIs. Use subtle, purposeful lighting instead — or skip the dark theme entirely.',
+      'A chromatic radial-gradient wash — saturated at the center, fading to transparent — used as a decorative background glow on a dark page. Same tell as glowing shadows, drawn with a gradient instead of a shadow. Ground the surface with a solid or subtly shifted background instead.',
     skillSection: 'Color & Contrast',
     skillGuideline: 'dark mode with glowing accents',
   },
+  {
+    id: 'radial-spotlight-glow',
+    category: 'slop',
+    name: 'Decorative radial spotlight glow',
+    description:
+      'A soft, low-opacity accent-colored radial gradient fading to transparent, dropped behind a hero or section as a "spotlight." It is a reflex AI decoration — the translucent cousin of the saturated radial halo. Let the surface stand on its own, or light the composition with a deliberate material accent rather than a floating colored haze.',
+    skillSection: 'Color & Contrast',
+    skillGuideline: 'dark mode with glowing accents',
+  },
+  {
+    id: 'marquee',
+    category: 'slop',
+    name: 'Auto-scrolling marquee',
+    description:
+      'Continuously auto-scrolling content demands attention it has not earned and hides half its content at any moment. Reserve motion for content that changes; let readers move at their own pace.',
+    skillSection: 'Motion',
+    skillGuideline: 'auto-scrolling marquee',
+  },
   {
     id: 'icon-tile-stack',
     category: 'slop',
@@ -144,33 +198,37 @@ const ANTIPATTERNS = [
     skillGuideline: 'tiny uppercase tracked label above the hero headline',
   },
   {
-    id: 'repeated-section-kickers',
+    id: 'kicker-above-heading',
     category: 'slop',
     scopes: ['type'],
-    severity: 'advisory',
-    name: 'Repeated section kicker labels',
+    name: 'Kicker / eyebrow label above heading',
     description:
-      'Repeating tiny uppercase tracked labels above section headings turns a brand page into AI editorial scaffolding. Replace them with stronger structure, artifacts, imagery, or a deliberate brand system.',
+      'A tiny tracked uppercase or small-caps label sitting as its own block directly above a heading is banned outright, repeated or not. Generated kickers never earn their place: the heading carries its own weight. Delete the label and let the heading speak; if the words matter, work them into the heading or the body.',
     skillSection: 'Typography',
-    skillGuideline: 'repeated eyebrow or kicker labels as section scaffolding',
+    skillGuideline: 'kicker or eyebrow labels above headings',
   },
   {
-    id: 'numbered-section-markers',
+    id: 'numbered-section-labels',
     category: 'slop',
-    scopes: ['layout'],
+    scopes: ['type'],
     severity: 'advisory',
-    name: 'Numbered section markers (01 / 02 / 03)',
+    name: 'Tiny numbered section labels',
     description:
-      'Numbered display markers as section labels (01, 02, 03) are the AI editorial scaffold one tier deeper than tracked eyebrow chips. If you find yourself reaching for them, choose a different section cadence.',
+      'Small numeric index labels riding next to section headings, repeated section after section, are AI editorial scaffolding — a page numbering its own chapters instead of earning structure. Let hierarchy, content, and rhythm carry the sequence.',
     skillSection: 'Layout & Space',
     skillGuideline: 'numbered section markers',
   },
   {
     id: 'em-dash-overuse',
     category: 'slop',
+    // Advisory: humans use em-dashes legitimately, so this rule is opt-in noise
+    // rather than a failure. It fires only on the AI saturation pattern, not on
+    // ordinary prose. Advisory findings are surfaced separately, never counted
+    // as failures, and skipped by the design hook unless a project opts in.
+    advisory: true,
     name: 'Em-dash overuse',
     description:
-      'More than two em-dashes (— or --) in body copy is an AI cadence tell. Use commas, colons, periods, or parentheses instead.',
+      'Em-dash saturation in body copy is an AI cadence tell. Advisory only: humans use em-dashes legitimately, so this fires only on saturation — at least 8 em-dashes (— or --) at a density near one per 500 characters of body text — never on a long article that uses a few. Prefer commas, colons, periods, or parentheses.',
     skillSection: 'Copy',
     skillGuideline: 'no em dashes',
   },
@@ -223,6 +281,49 @@ const ANTIPATTERNS = [
   },
 
   // ── Quality: general design and accessibility issues ──
+  {
+    id: 'script-error',
+    category: 'quality',
+    severity: 'error',
+    name: 'Uncaught script error on load',
+    description:
+      'A script threw an uncaught exception or failed to parse while the page loaded. Broken JavaScript silently kills reveals, interactions, and dynamic content, and can leave most of a page invisible. Fix the error before judging anything else.',
+  },
+  {
+    id: 'content-hidden-at-rest',
+    category: 'quality',
+    severity: 'error',
+    scopes: ['layout'],
+    name: 'Content invisible at rest',
+    description:
+      'A large share of the page text sits at opacity 0 or visibility hidden even after every reveal handler had a chance to run. This is the failed-reveal signature: the content shipped but never becomes visible. Make content visible by default and let JavaScript enhance its entrance instead of gating its existence.',
+  },
+  {
+    id: 'edge-flush-cards',
+    category: 'quality',
+    scopes: ['layout'],
+    name: 'Cards flush against the scroller edge',
+    description:
+      'Cards inside a horizontal scroller or tab panel sit flush against the container edge at rest while keeping a gutter on the other side, so their edges and rounded corners get cut off. Usually the panel is sized wider than its clip box. Keep a consistent inset on both sides.',
+  },
+  {
+    id: 'text-occlusion',
+    category: 'quality',
+    scopes: ['layout'],
+    name: 'Text occluded by an overlapping element',
+    description:
+      'Text is painted under an opaque element or a second text run, so part of it cannot be read. A decorative box, a stacked layer, or an inline element with leaked padding lands on the words instead of beside them. Give overlapping layers room, or move the text out from under the layer above it.',
+    skillSection: 'Layout & Space',
+  },
+  {
+    id: 'first-viewport-column-overflow',
+    category: 'quality',
+    scopes: ['layout'],
+    name: 'One column stretches the first viewport',
+    description:
+      'A multi-column opening section lets one column run far past the fold while its sibling fits in a single viewport, so the short column floats in dead space and the fold falls deep inside one section. Balance the columns, cap the tall one, or let the long content flow below the opening row.',
+    skillSection: 'Layout & Space',
+  },
   {
     id: 'gray-on-color',
     category: 'quality',
@@ -292,6 +393,15 @@ const ANTIPATTERNS = [
     description:
       'Heading levels should not skip (e.g. h1 then h3 with no h2). Screen readers use heading hierarchy for navigation. Skipping levels breaks the document outline.',
   },
+  {
+    id: 'heading-rhythm',
+    category: 'quality',
+    scopes: ['layout', 'type'],
+    name: 'Heading crowded against the previous block',
+    description:
+      'A heading binds to the content it introduces, so the rendered space above it should exceed the space below it. When headings across a page sit as close or closer to the block above than to their own content, every section reads as if it captions the previous one. Open up the space above each heading.',
+    skillSection: 'Layout & Space',
+  },
   {
     id: 'justified-text',
     category: 'quality',
@@ -308,6 +418,14 @@ const ANTIPATTERNS = [
     description:
       'Body text below 12px is hard to read, especially on high-DPI screens. Use at least 14px for body content, 16px is ideal.',
   },
+  {
+    id: 'undersized-ui-text',
+    category: 'quality',
+    scopes: ['type'],
+    name: 'Undersized functional text',
+    description:
+      'Interactive and content-bearing UI text (links, buttons, nav items, labels, table cells, meta rows, timecodes) below 11px is a legibility failure, not a style choice. WCAG sets no absolute pixel floor, but functional text under 11px is a defensible quality bar: it fails on high-DPI and small viewports and it degrades tap and read targets. The 11px floor holds even inside a footer; only non-interactive legal smallprint gets the softer 10px floor. Being ON the DESIGN.md size ramp does not exempt a value here: adding 8px to the ramp launders the token but not the legibility problem, and that is exactly the escape hatch this rule closes. Exempts sup/sub, visually-hidden (sr-only) text, and code/terminal contexts. Decorative letterspaced micro-labels are still functional and stay in scope.',
+  },
   {
     id: 'all-caps-body',
     category: 'quality',
@@ -336,6 +454,13 @@ const ANTIPATTERNS = [
     skillSection: 'Layout & Space',
     skillGuideline: 'content wider than its container',
   },
+  {
+    id: 'repeated-container-text',
+    category: 'quality',
+    name: 'Same text repeated inside one container',
+    description:
+      'The same literal text rendered three or more times in structurally different spots inside a single card or panel is redundant messaging — usually a status or label wired into every slot of a template. Say it once, in the slot where it matters most.',
+  },
   {
     id: 'clipped-overflow-container',
     category: 'quality',
@@ -388,12 +513,11 @@ const ANTIPATTERNS = [
     skillGuideline: 'font size outside the project design system',
   },
 
-  // ── Provider tells: opt-in via --gpt / --gemini (gated off by default) ──
+  // ── Common generated-UI tells ───────────────────────────────────────────
   {
     id: 'gpt-thin-border-wide-shadow',
     category: 'slop',
     severity: 'advisory',
-    gated: 'gpt',
     name: 'Hairline border with wide shadow',
     description:
       'A hairline border paired with a wide, diffuse shadow is a recurring generated-UI signature. Commit to one — a defined edge or a soft elevation — rather than both at once.',
@@ -404,7 +528,6 @@ const ANTIPATTERNS = [
     id: 'repeating-stripes-gradient',
     category: 'slop',
     severity: 'advisory',
-    gated: 'gpt',
     name: 'Repeating-gradient stripes',
     description:
       'Repeating-gradient stripes used as surface decoration are a recurring generated-UI signature. Reach for a deliberate texture or leave the surface plain.',
@@ -415,10 +538,9 @@ const ANTIPATTERNS = [
     id: 'codex-grid-background',
     category: 'slop',
     severity: 'advisory',
-    gated: 'gpt',
     name: 'Decorative grid-line background',
     description:
-      'A two-axis grid drawn with hairline linear-gradient layers ("1px, transparent 1px" on both axes) is a recurring generated-UI signature. Reserve grid overlays for actual canvas, map, blueprint, or measurement surfaces; elsewhere use product structure or a plain surface.',
+      'A decorative grid or line-field background drawn with hairline linear-gradient layers tiled by a fixed pixel cell is a recurring generated-UI signature. Reserve grid overlays for actual canvas, map, blueprint, or measurement surfaces; elsewhere use product structure or a plain surface.',
     skillSection: 'Visual Details',
     skillGuideline: 'two-axis grid-line gradient background',
   },
@@ -426,7 +548,6 @@ const ANTIPATTERNS = [
     id: 'theater-slop-phrase',
     category: 'slop',
     severity: 'advisory',
-    gated: 'gpt',
     name: 'Theater framing copy',
     description:
       'Dismissing something as "theater" is a recurring generated-copy tic. Say plainly what the thing does or does not do.',
@@ -437,7 +558,6 @@ const ANTIPATTERNS = [
     id: 'image-hover-transform',
     category: 'slop',
     severity: 'advisory',
-    gated: 'gemini',
     name: 'Image hover transform',
     description:
       'Scaling or rotating an image on hover is a recurring generated-UI signature. Let imagery sit still, or use a subtler, purposeful interaction.',
@@ -457,6 +577,18 @@ function getAntipattern(id) {
   return ANTIPATTERNS.find(rule => rule.id === id);
 }
 
+// Advisory rules are detected and reported, but never treated as failures:
+// the CLI lists them under a separate "Advisory" section, they do not affect
+// exit codes or the failure count, and the design hook skips them by default.
+// The set is derived from the registry so a rule only needs `advisory: true`.
+const ADVISORY_RULE_IDS = new Set(
+  ANTIPATTERNS.filter(rule => rule.advisory === true).map(rule => rule.id),
+);
+
+function isAdvisoryRule(id) {
+  return ADVISORY_RULE_IDS.has(id);
+}
+
 function getRulesForCategory(category) {
   return ANTIPATTERNS.filter(rule => rule.category === category);
 }
@@ -465,25 +597,6 @@ function getRuleEngineSupport(engine) {
   return RULE_ENGINE_SUPPORT[engine] || new Set();
 }
 
-// Set of provider tags that gate rules off by default (e.g. 'gpt', 'gemini').
-const GATED_PROVIDERS = new Set(
-  ANTIPATTERNS.map(rule => rule.gated).filter(Boolean),
-);
-
-// Drop findings for rules gated behind a provider tag unless that provider
-// was explicitly enabled (CLI --gpt / --gemini). Non-gated findings always
-// pass through. `findings` carry the rule id on `.antipattern`.
-function filterByProviders(findings, providers = []) {
-  const enabled = new Set(providers || []);
-  if (!GATED_PROVIDERS.size) return findings;
-  return findings.filter(f => {
-    const rule = getAntipattern(f.antipattern);
-    if (!rule || !rule.gated) return true;
-    return enabled.has(rule.gated);
-  });
-}
-
-
 // Set of scope tags rules can declare (e.g. 'type', 'layout'). Used by the
 // CLI --scope flag to narrow output to one design domain.
 const RULE_SCOPES = new Set(
@@ -505,10 +618,10 @@ export {
   ANTIPATTERNS,
   RULE_SCOPES,
   RULE_ENGINE_SUPPORT,
-  GATED_PROVIDERS,
+  ADVISORY_RULE_IDS,
   getAntipattern,
   getRulesForCategory,
   getRuleEngineSupport,
-  filterByProviders,
+  isAdvisoryRule,
   filterByScopes,
 };