@monoes/monodesign 1.2.18 → 1.2.20

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -112,7 +112,7 @@ Source: [`cli/engine/registry/antipatterns.mjs`](packages/@monoes/monodesign/cli
112
112
 
113
113
  ## OKLCH Palette Seed Library
114
114
 
115
- Source: [`packages/@monomind/cli/src/commands/design-palette.ts:29–417`](packages/@monomind/cli/src/commands/design-palette.ts#L29-L417)
115
+ Source: [`packages/@monomind/cli/src/commands/design-palette.ts#SEEDS`](packages/@monomind/cli/src/commands/design-palette.ts#SEEDS), with the seed data in [`design-palette-seeds-1.ts`](packages/@monomind/cli/src/commands/design-palette-seeds-1.ts) and [`design-palette-seeds-2.ts`](packages/@monomind/cli/src/commands/design-palette-seeds-2.ts)
116
116
 
117
117
  - **129 hand-curated seeds** spanning the full hue wheel (0°–360°)
118
118
  - Each seed: `{ id, oklch: [L, C, H], mood: string, strategy: string }`
@@ -742,7 +742,7 @@ function extractGoogleFontFamilies(text) {
742
742
  return families;
743
743
  }
744
744
 
745
- // --- cli/engine/rules/checks.mjs ---
745
+ // --- cli/engine/rules/checks-pure.mjs ---
746
746
  const DETECTOR_IS_BROWSER = typeof window !== 'undefined';
747
747
 
748
748
  // ─── Section 3: Pure Detection ──────────────────────────────────────────────
@@ -1162,6 +1162,7 @@ function checkGlow(opts) {
1162
1162
  return [];
1163
1163
  }
1164
1164
 
1165
+ // --- cli/engine/rules/checks-html.mjs ---
1165
1166
  /**
1166
1167
  * Regex-on-HTML checks shared between browser and Node page-level detection.
1167
1168
  * These don't need DOM access, just the raw HTML string.
@@ -1363,6 +1364,7 @@ function checkHtmlPatterns(html) {
1363
1364
  return findings;
1364
1365
  }
1365
1366
 
1367
+ // --- cli/engine/rules/checks-background.mjs ---
1366
1368
  // ─── Section 4: resolveBackground (unified) ─────────────────────────────────
1367
1369
 
1368
1370
  // Read the element's own background color, computed-style first, with a
@@ -1507,6 +1509,7 @@ function resolveBorderRadiusPx(_el, style, widthPx, _win) {
1507
1509
  return 0;
1508
1510
  }
1509
1511
 
1512
+ // --- cli/engine/rules/checks-dom.mjs ---
1510
1513
  // ─── Section 5: Element Adapters ────────────────────────────────────────────
1511
1514
 
1512
1515
  // Browser adapters — call getComputedStyle/getBoundingClientRect on live DOM
@@ -1630,6 +1633,8 @@ function checkElementHeroEyebrowDOM(el) {
1630
1633
  // resolution every style-based check silently fails on Tailwind v4
1631
1634
  // builds — the values come back as literal "var(--font-weight-bold)"
1632
1635
  // strings and parseFloat returns NaN.
1636
+
1637
+ // --- cli/engine/rules/checks-css-values.mjs ---
1633
1638
  function buildCustomPropMap(document) {
1634
1639
  const map = new Map();
1635
1640
  let sheets;
@@ -1760,6 +1765,7 @@ function parseColorResolved(str, customPropMap) {
1760
1765
  return parseAnyColor(resolved);
1761
1766
  }
1762
1767
 
1768
+ // --- cli/engine/rules/checks-dom-effects.mjs ---
1763
1769
  const REPEATED_KICKER_SKIP_SELECTOR = [
1764
1770
  'nav',
1765
1771
  'form',
@@ -1977,6 +1983,7 @@ function checkElementAIPaletteDOM(el) {
1977
1983
  return findings;
1978
1984
  }
1979
1985
 
1986
+ // --- cli/engine/rules/checks-quality.mjs ---
1980
1987
  const QUALITY_TEXT_TAGS = new Set(['p', 'li', 'td', 'th', 'dd', 'blockquote', 'figcaption']);
1981
1988
 
1982
1989
  // Resolve a CSS font-size value to pixels by walking up the parent chain.
@@ -2416,6 +2423,7 @@ function checkQuality(opts) {
2416
2423
  return findings;
2417
2424
  }
2418
2425
 
2426
+ // --- cli/engine/rules/checks-element.mjs ---
2419
2427
  function checkElementQualityDOM(el) {
2420
2428
  const tag = el.tagName.toLowerCase();
2421
2429
  const style = getComputedStyle(el);
@@ -2661,6 +2669,7 @@ function checkElementGlow(tag, style, effectiveBg) {
2661
2669
  return checkGlow({ tag, boxShadow: style.boxShadow, effectiveBg });
2662
2670
  }
2663
2671
 
2672
+ // --- cli/engine/rules/checks-page.mjs ---
2664
2673
  // ─── Section 6: Page-Level Checks ───────────────────────────────────────────
2665
2674
 
2666
2675
  // Browser page-level checks — use document/getComputedStyle globals
@@ -3097,6 +3106,7 @@ function checkElementGptBorderShadowDOM(el) {
3097
3106
  return checkGptThinBorderWideShadow({ borderWidths: borderWidthsFromStyle(style), borderColors: borderColorsFromStyle(style), boxShadow: style.boxShadow || '' });
3098
3107
  }
3099
3108
 
3109
+ // --- cli/engine/rules/checks-overflow.mjs ---
3100
3110
  // ─── Clipped overflow container ───────────────────────────────────────────────
3101
3111
  // A clipping container (overflow hidden/clip, not a scroll region) wrapping an
3102
3112
  // absolutely/fixed-positioned descendant clips popovers/menus that must escape.
@@ -3351,6 +3361,7 @@ function checkElementTextOverflowDOM(el) {
3351
3361
  return [];
3352
3362
  }
3353
3363
 
3364
+ // --- cli/engine/rules/checks-stylesheet.mjs ---
3354
3365
  // ─── Section 7: Stylesheet-level accessibility rules ─────────────────────────
3355
3366
  // These operate on raw CSS text (concatenated <style> blocks + linked sheets),
3356
3367
  // not per-element computed style — because :hover / :focus-visible / @media
@@ -0,0 +1,60 @@
1
+ const PROVIDER_TELL_ANTIPATTERNS = [
2
+ // ── Provider tells: opt-in via --gpt / --gemini (gated off by default) ──
3
+ {
4
+ id: 'gpt-thin-border-wide-shadow',
5
+ category: 'slop',
6
+ severity: 'advisory',
7
+ gated: 'gpt',
8
+ name: 'Hairline border with wide shadow',
9
+ description:
10
+ '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.',
11
+ skillSection: 'Visual Details',
12
+ skillGuideline: 'hairline border plus wide diffuse shadow',
13
+ },
14
+ {
15
+ id: 'repeating-stripes-gradient',
16
+ category: 'slop',
17
+ severity: 'advisory',
18
+ gated: 'gpt',
19
+ name: 'Repeating-gradient stripes',
20
+ description:
21
+ 'Repeating-gradient stripes used as surface decoration are a recurring generated-UI signature. Reach for a deliberate texture or leave the surface plain.',
22
+ skillSection: 'Visual Details',
23
+ skillGuideline: 'repeating-gradient decorative stripes',
24
+ },
25
+ {
26
+ id: 'codex-grid-background',
27
+ category: 'slop',
28
+ severity: 'advisory',
29
+ gated: 'gpt',
30
+ name: 'Decorative grid-line background',
31
+ description:
32
+ '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.',
33
+ skillSection: 'Visual Details',
34
+ skillGuideline: 'two-axis grid-line gradient background',
35
+ },
36
+ {
37
+ id: 'theater-slop-phrase',
38
+ category: 'slop',
39
+ severity: 'advisory',
40
+ gated: 'gpt',
41
+ name: 'Theater framing copy',
42
+ description:
43
+ 'Dismissing something as "theater" is a recurring generated-copy tic. Say plainly what the thing does or does not do.',
44
+ skillSection: 'Copy',
45
+ skillGuideline: 'theater framing copy',
46
+ },
47
+ {
48
+ id: 'image-hover-transform',
49
+ category: 'slop',
50
+ severity: 'advisory',
51
+ gated: 'gemini',
52
+ name: 'Image hover transform',
53
+ description:
54
+ 'Scaling or rotating an image on hover is a recurring generated-UI signature. Let imagery sit still, or use a subtler, purposeful interaction.',
55
+ skillSection: 'Motion',
56
+ skillGuideline: 'image scale or rotate on hover',
57
+ },
58
+ ];
59
+
60
+ export { PROVIDER_TELL_ANTIPATTERNS };
@@ -0,0 +1,218 @@
1
+ const QUALITY_ANTIPATTERNS = [
2
+ // ── Quality: general design and accessibility issues ──
3
+ {
4
+ id: 'gray-on-color',
5
+ category: 'quality',
6
+ name: 'Gray text on colored background',
7
+ description:
8
+ 'Gray text looks washed out on colored backgrounds. Use a darker shade of the background color instead, or white/near-white for contrast.',
9
+ skillSection: 'Color & Contrast',
10
+ skillGuideline: 'gray text on colored backgrounds',
11
+ },
12
+ {
13
+ id: 'low-contrast',
14
+ category: 'quality',
15
+ name: 'Low contrast text',
16
+ description:
17
+ 'Text does not meet WCAG AA contrast requirements (4.5:1 for body, 3:1 for large text). Increase the contrast between text and background.',
18
+ },
19
+ {
20
+ id: 'layout-transition',
21
+ category: 'quality',
22
+ name: 'Layout property animation',
23
+ description:
24
+ 'Animating width, height, padding, or margin causes layout thrash and janky performance. Use transform and opacity instead, or grid-template-rows for height animations.',
25
+ skillSection: 'Motion',
26
+ skillGuideline: 'Animate layout properties',
27
+ },
28
+ {
29
+ id: 'line-length',
30
+ category: 'quality',
31
+ scopes: ['type', 'layout'],
32
+ name: 'Line length too long',
33
+ description:
34
+ 'Text lines wider than ~80 characters are hard to read. The eye loses its place tracking back to the start of the next line. Add a max-width (65ch to 75ch) to text containers.',
35
+ skillSection: 'Layout & Space',
36
+ skillGuideline: 'wrap beyond ~80 characters',
37
+ },
38
+ {
39
+ id: 'cramped-padding',
40
+ category: 'quality',
41
+ scopes: ['layout'],
42
+ name: 'Cramped padding',
43
+ description:
44
+ 'Text is too close to the edge of its container. Two shapes: (1) an element with its own text where the padding is too low for the font size, and (2) a wrapper with text-bearing children and near-zero padding against a visible boundary (border, outline, or non-transparent background) — children land flush against the boundary line. Add at least 8px (ideally 12–16px) of padding inside bordered, outlined, or colored containers.',
45
+ skillSection: 'Layout & Space',
46
+ skillGuideline: 'inside bordered or colored containers',
47
+ },
48
+ {
49
+ id: 'body-text-viewport-edge',
50
+ category: 'quality',
51
+ scopes: ['layout'],
52
+ name: 'Body text touching viewport edge',
53
+ description:
54
+ 'Body paragraphs render flush against the left or right viewport edge with no container providing horizontal padding. Wrap content in a container with at least 16px (ideally 24-32px) of horizontal padding, or apply max-width with mx-auto.',
55
+ },
56
+ {
57
+ id: 'tight-leading',
58
+ category: 'quality',
59
+ scopes: ['type'],
60
+ name: 'Tight line height',
61
+ description:
62
+ 'Line height below 1.3x the font size makes multi-line text hard to read. Use 1.5 to 1.7 for body text so lines have room to breathe.',
63
+ },
64
+ {
65
+ id: 'skipped-heading',
66
+ category: 'quality',
67
+ scopes: ['type'],
68
+ name: 'Skipped heading level',
69
+ description:
70
+ '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.',
71
+ },
72
+ {
73
+ id: 'justified-text',
74
+ category: 'quality',
75
+ scopes: ['type'],
76
+ name: 'Justified text',
77
+ description:
78
+ 'Justified text without hyphenation creates uneven word spacing ("rivers of white"). Use text-align: left for body text, or enable hyphens: auto if you must justify.',
79
+ },
80
+ {
81
+ id: 'tiny-text',
82
+ category: 'quality',
83
+ scopes: ['type'],
84
+ name: 'Tiny body text',
85
+ description:
86
+ 'Body text below 12px is hard to read, especially on high-DPI screens. Use at least 14px for body content, 16px is ideal.',
87
+ },
88
+ {
89
+ id: 'all-caps-body',
90
+ category: 'quality',
91
+ scopes: ['type'],
92
+ name: 'All-caps body text',
93
+ description:
94
+ 'Long passages in uppercase are hard to read. We recognize words by shape (ascenders and descenders), which all-caps removes. Reserve uppercase for short labels and headings.',
95
+ skillSection: 'Typography',
96
+ skillGuideline: 'long body passages in uppercase',
97
+ },
98
+ {
99
+ id: 'wide-tracking',
100
+ category: 'quality',
101
+ scopes: ['type'],
102
+ name: 'Wide letter spacing on body text',
103
+ description:
104
+ 'Letter spacing above 0.05em on body text disrupts natural character groupings and slows reading. Reserve wide tracking for short uppercase labels only.',
105
+ },
106
+ {
107
+ id: 'text-overflow',
108
+ category: 'quality',
109
+ scopes: ['layout'],
110
+ name: 'Content overflowing its container',
111
+ description:
112
+ 'Content renders wider than its container, spilling out or forcing a horizontal scrollbar. Let text wrap, constrain widths, or give the region a deliberate scroll affordance.',
113
+ skillSection: 'Layout & Space',
114
+ skillGuideline: 'content wider than its container',
115
+ },
116
+ {
117
+ id: 'clipped-overflow-container',
118
+ category: 'quality',
119
+ scopes: ['layout'],
120
+ name: 'Positioned child clipped by overflow container',
121
+ description:
122
+ 'A clipping container (overflow hidden or clip) wrapping an absolutely-positioned child cuts off tooltips, menus, and popovers that need to escape. Let the overflow be visible, or move the positioned layer out of the clip.',
123
+ skillSection: 'Layout & Space',
124
+ skillGuideline: 'overflow container clipping positioned children',
125
+ },
126
+ {
127
+ id: 'design-system-font',
128
+ category: 'quality',
129
+ scopes: ['type'],
130
+ name: 'Font outside DESIGN.md',
131
+ description:
132
+ 'A font is used that is not declared in DESIGN.md typography. Use the documented type system or update DESIGN.md if this is an intentional brand addition.',
133
+ skillSection: 'Typography',
134
+ skillGuideline: 'font family outside the project design system',
135
+ },
136
+ {
137
+ id: 'design-system-color',
138
+ category: 'quality',
139
+ severity: 'advisory',
140
+ name: 'Color outside DESIGN.md',
141
+ description:
142
+ 'A literal color is outside the DESIGN.md palette and sidecar tonal ramps. This may be legitimate, but it should be an intentional design-system addition rather than drift.',
143
+ skillSection: 'Color & Contrast',
144
+ skillGuideline: 'literal color outside the project design system',
145
+ },
146
+ {
147
+ id: 'design-system-radius',
148
+ category: 'quality',
149
+ severity: 'advisory',
150
+ name: 'Radius outside DESIGN.md',
151
+ description:
152
+ 'A border-radius value is outside the DESIGN.md rounded scale. Use a documented radius token or update the design system if the new shape is intentional.',
153
+ skillSection: 'Visual Details',
154
+ skillGuideline: 'border radius outside the project design system',
155
+ },
156
+ {
157
+ id: 'design-system-font-size',
158
+ category: 'quality',
159
+ severity: 'advisory',
160
+ scopes: ['type'],
161
+ name: 'Font size outside DESIGN.md',
162
+ description:
163
+ 'A literal font-size is off the type ramp documented in DESIGN.md typography. Use a documented size step or update the design system if the new step is intentional.',
164
+ skillSection: 'Typography',
165
+ skillGuideline: 'font size outside the project design system',
166
+ },
167
+
168
+ {
169
+ id: 'missing-focus-visible',
170
+ category: 'quality',
171
+ name: 'Suppressed focus outline with no replacement',
172
+ description:
173
+ 'An interactive element (link, button, input) removes its focus outline (outline: none / 0) but the stylesheet never provides a :focus-visible or :focus replacement. Keyboard users lose all sense of where they are. Remove the suppression, or pair it with a visible :focus-visible ring (outline, box-shadow, or border).',
174
+ skillSection: 'Interaction',
175
+ skillGuideline: 'outline removed without a focus-visible replacement',
176
+ },
177
+ {
178
+ id: 'small-touch-target',
179
+ category: 'quality',
180
+ scopes: ['layout'],
181
+ name: 'Touch target below 44px',
182
+ description:
183
+ 'A clickable control (button, link, input, [role=button]) renders smaller than 44×44px on one or both axes. Fingers miss small targets and mis-tap neighbors. Give standalone controls at least 44×44px of hit area via padding or min-width/height. Inline text links inside prose are exempt.',
184
+ skillSection: 'Layout & Space',
185
+ skillGuideline: 'touch target smaller than 44px',
186
+ },
187
+ {
188
+ id: 'hover-only-affordance',
189
+ category: 'quality',
190
+ name: 'Functionality gated behind hover only',
191
+ description:
192
+ 'An element is hidden by default and revealed only on :hover, with no :focus, :focus-within, or :active equivalent. Keyboard and touch users can never reach it. Mirror every hover reveal with a focus-within (or active) rule so the affordance is reachable without a pointer.',
193
+ skillSection: 'Interaction',
194
+ skillGuideline: 'affordance revealed on hover with no focus equivalent',
195
+ },
196
+ {
197
+ id: 'image-missing-dimensions',
198
+ category: 'quality',
199
+ scopes: ['layout'],
200
+ name: 'Image without reserved dimensions',
201
+ description:
202
+ 'An <img> ships without width and height attributes and without a CSS aspect-ratio or explicit height. The browser cannot reserve space before the image loads, so surrounding content jumps (cumulative layout shift). Set width and height attributes, or give the image a CSS aspect-ratio.',
203
+ skillSection: 'Imagery',
204
+ skillGuideline: 'image with no reserved dimensions',
205
+ },
206
+ {
207
+ id: 'dark-scheme-contrast-blindspot',
208
+ category: 'quality',
209
+ severity: 'advisory',
210
+ name: 'Dark-scheme contrast blindspot',
211
+ description:
212
+ 'The page ships dark styling (a prefers-color-scheme: dark block or a .dark / [data-theme=dark] scope), but for some selector the dark override changes the background without changing the paired text color (or the reverse). The half-updated pair often collapses to unreadable contrast in dark mode. Override text and background together, or verify the inherited half still contrasts.',
213
+ skillSection: 'Color & Contrast',
214
+ skillGuideline: 'dark scheme overrides one of a color pair but not the other',
215
+ },
216
+ ];
217
+
218
+ export { QUALITY_ANTIPATTERNS };
@@ -0,0 +1,226 @@
1
+ const AI_SLOP_ANTIPATTERNS = [
2
+ // ── AI slop: tells that something was AI-generated ──
3
+ {
4
+ id: 'side-tab',
5
+ category: 'slop',
6
+ name: 'Side-tab accent border',
7
+ description:
8
+ 'Thick colored border on one side of a card — the most recognizable tell of AI-generated UIs. Use a subtler accent or remove it entirely.',
9
+ skillSection: 'Visual Details',
10
+ skillGuideline: 'colored accent stripe',
11
+ },
12
+ {
13
+ id: 'border-accent-on-rounded',
14
+ category: 'slop',
15
+ name: 'Border accent on rounded element',
16
+ description:
17
+ 'Thick accent border on a rounded card — the border clashes with the rounded corners. Remove the border or the border-radius.',
18
+ skillSection: 'Visual Details',
19
+ skillGuideline: 'colored accent stripe',
20
+ },
21
+ {
22
+ id: 'overused-font',
23
+ category: 'slop',
24
+ scopes: ['type'],
25
+ name: 'Overused font',
26
+ description:
27
+ 'Inter, Roboto, Fraunces, Geist, Plus Jakarta Sans, and Space Grotesk are used on so many sites they no longer feel distinctive. Each new wave of AI-generated UIs converges on the same handful of faces. Choose a face that gives your interface personality.',
28
+ skillSection: 'Typography',
29
+ skillGuideline: 'overused fonts like Inter',
30
+ },
31
+ {
32
+ id: 'single-font',
33
+ category: 'slop',
34
+ scopes: ['type'],
35
+ name: 'Single font for everything',
36
+ description:
37
+ 'Only one font family is used for the entire page. Pair a distinctive display font with a refined body font to create typographic hierarchy.',
38
+ skillSection: 'Typography',
39
+ skillGuideline: 'only one font family for the entire page',
40
+ },
41
+ {
42
+ id: 'flat-type-hierarchy',
43
+ category: 'slop',
44
+ scopes: ['type'],
45
+ name: 'Flat type hierarchy',
46
+ description:
47
+ 'Font sizes are too close together — no clear visual hierarchy. Use fewer sizes with more contrast (aim for at least a 1.25 ratio between steps).',
48
+ skillSection: 'Typography',
49
+ skillGuideline: 'flat type hierarchy',
50
+ },
51
+ {
52
+ id: 'gradient-text',
53
+ category: 'slop',
54
+ name: 'Gradient text',
55
+ description:
56
+ 'Gradient text is decorative rather than meaningful — a common AI tell, especially on headings and metrics. Use solid colors for text.',
57
+ skillSection: 'Color & Contrast',
58
+ skillGuideline: 'gradient text for',
59
+ },
60
+ {
61
+ id: 'ai-color-palette',
62
+ category: 'slop',
63
+ name: 'AI color palette',
64
+ description:
65
+ 'Purple/violet gradients and cyan-on-dark are the most recognizable tells of AI-generated UIs. Choose a distinctive, intentional palette.',
66
+ skillSection: 'Color & Contrast',
67
+ skillGuideline: 'AI color palette',
68
+ },
69
+ {
70
+ id: 'cream-palette',
71
+ category: 'slop',
72
+ name: 'Cream / beige palette',
73
+ description:
74
+ 'A warm cream or beige page background has become the default "tasteful" AI surface, reached for by reflex. Choose a background that comes from a deliberate palette, not the safe warm off-white.',
75
+ skillSection: 'Color & Contrast',
76
+ skillGuideline: 'cream and beige as the default surface',
77
+ },
78
+ {
79
+ id: 'nested-cards',
80
+ category: 'slop',
81
+ scopes: ['layout'],
82
+ name: 'Nested cards',
83
+ description:
84
+ 'Cards inside cards create visual noise and excessive depth. Flatten the hierarchy — use spacing, typography, and dividers instead of nesting containers.',
85
+ skillSection: 'Layout & Space',
86
+ skillGuideline: 'Nest cards inside cards',
87
+ },
88
+ {
89
+ id: 'monotonous-spacing',
90
+ category: 'slop',
91
+ scopes: ['layout'],
92
+ name: 'Monotonous spacing',
93
+ description:
94
+ 'The same spacing value used everywhere — no rhythm, no variation. Use tight groupings for related items and generous separations between sections.',
95
+ skillSection: 'Layout & Space',
96
+ skillGuideline: 'same spacing everywhere',
97
+ },
98
+ {
99
+ id: 'bounce-easing',
100
+ category: 'slop',
101
+ name: 'Bounce or elastic easing',
102
+ description:
103
+ 'Bounce and elastic easing feel dated and tacky. Real objects decelerate smoothly — use exponential easing (ease-out-quart/quint/expo) instead.',
104
+ skillSection: 'Motion',
105
+ skillGuideline: 'bounce or elastic easing',
106
+ },
107
+ {
108
+ id: 'dark-glow',
109
+ category: 'slop',
110
+ name: 'Dark mode with glowing accents',
111
+ description:
112
+ '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.',
113
+ skillSection: 'Color & Contrast',
114
+ skillGuideline: 'dark mode with glowing accents',
115
+ },
116
+ {
117
+ id: 'icon-tile-stack',
118
+ category: 'slop',
119
+ scopes: ['layout'],
120
+ name: 'Icon tile stacked above heading',
121
+ description:
122
+ 'A small rounded-square icon container above a heading is the universal AI feature-card template — every generator outputs this exact shape. Try a side-by-side icon and heading, or let the icon sit in flow without its own container.',
123
+ skillSection: 'Typography',
124
+ skillGuideline: 'large icons with rounded corners above every heading',
125
+ },
126
+ {
127
+ id: 'italic-serif-display',
128
+ category: 'slop',
129
+ scopes: ['type'],
130
+ name: 'Italic serif display headline',
131
+ description:
132
+ 'Oversized italic serif (Fraunces, Recoleta, Playfair, Newsreader-italic) as the primary hero headline reads as taste in isolation but has become the universal AI-startup landing page hero. Set roman, or move to a non-serif display face. Editorial / magazine register may legitimately want this — judge by context.',
133
+ skillSection: 'Typography',
134
+ skillGuideline: 'oversized italic serif as the hero headline',
135
+ },
136
+ {
137
+ id: 'hero-eyebrow-chip',
138
+ category: 'slop',
139
+ scopes: ['type'],
140
+ name: 'Hero eyebrow / pill chip',
141
+ description:
142
+ 'A tiny uppercase letter-spaced label sitting immediately above an oversized hero headline — or the same shape rendered as a pill chip — is now the default AI SaaS hero. Drop the eyebrow, integrate the kicker into the headline, or run it as a navigation breadcrumb instead.',
143
+ skillSection: 'Typography',
144
+ skillGuideline: 'tiny uppercase tracked label above the hero headline',
145
+ },
146
+ {
147
+ id: 'repeated-section-kickers',
148
+ category: 'slop',
149
+ scopes: ['type'],
150
+ severity: 'advisory',
151
+ name: 'Repeated section kicker labels',
152
+ description:
153
+ '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.',
154
+ skillSection: 'Typography',
155
+ skillGuideline: 'repeated eyebrow or kicker labels as section scaffolding',
156
+ },
157
+ {
158
+ id: 'numbered-section-markers',
159
+ category: 'slop',
160
+ scopes: ['layout'],
161
+ severity: 'advisory',
162
+ name: 'Numbered section markers (01 / 02 / 03)',
163
+ description:
164
+ '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.',
165
+ skillSection: 'Layout & Space',
166
+ skillGuideline: 'numbered section markers',
167
+ },
168
+ {
169
+ id: 'em-dash-overuse',
170
+ category: 'slop',
171
+ name: 'Em-dash overuse',
172
+ description:
173
+ 'More than two em-dashes (— or --) in body copy is an AI cadence tell. Use commas, colons, periods, or parentheses instead.',
174
+ skillSection: 'Copy',
175
+ skillGuideline: 'no em dashes',
176
+ },
177
+ {
178
+ id: 'marketing-buzzword',
179
+ category: 'slop',
180
+ name: 'Marketing buzzword',
181
+ description:
182
+ 'Generic SaaS phrases (streamline / empower / supercharge / world-class / enterprise-grade / next-generation / cutting-edge / etc) are instant AI tells. Pick a specific verb and noun that says what the product literally does.',
183
+ skillSection: 'Copy',
184
+ skillGuideline: 'marketing buzzwords',
185
+ },
186
+ {
187
+ id: 'aphoristic-cadence',
188
+ category: 'slop',
189
+ name: 'Aphoristic-cadence copy',
190
+ description:
191
+ 'Three or more sections landing on a short rebuttal sentence ("X. No Y." / "X. Just Y.") or a manufactured-contrast aphorism ("Not a feature. A platform.") reads as AI cadence, not voice. Once is fine; the pattern is the tell.',
192
+ skillSection: 'Copy',
193
+ skillGuideline: 'aphoristic cadence',
194
+ },
195
+ {
196
+ id: 'oversized-h1',
197
+ category: 'slop',
198
+ scopes: ['type'],
199
+ name: 'Oversized hero headline',
200
+ description:
201
+ 'A full-sentence headline set at display size ends up dominating the viewport, leaving no room for anything else above the fold. A punchy one- or two-word headline at that size is fine — the problem is a long headline blown up too large. Set long headlines smaller, or tighten the copy.',
202
+ skillSection: 'Typography',
203
+ skillGuideline: 'long headline set at display size',
204
+ },
205
+ {
206
+ id: 'extreme-negative-tracking',
207
+ category: 'slop',
208
+ scopes: ['type'],
209
+ name: 'Crushed letter spacing',
210
+ description:
211
+ 'Letter-spacing pulled tighter than the point where characters keep their own shapes costs legibility. Tighten display type optically, not destructively.',
212
+ skillSection: 'Typography',
213
+ skillGuideline: 'letter spacing crushed past legibility',
214
+ },
215
+ {
216
+ id: 'broken-image',
217
+ category: 'quality',
218
+ name: 'Broken or placeholder image',
219
+ description:
220
+ '<img> tags with empty src, missing src, or placeholder values ship as broken-image boxes. Use real images, generated assets, or remove the tag.',
221
+ skillSection: 'Imagery',
222
+ skillGuideline: 'broken image references',
223
+ },
224
+ ];
225
+
226
+ export { AI_SLOP_ANTIPATTERNS };