Initial: pi-skill — 68 skills, 43 extensions, 11 themes for Pi

skills/design/references/anti-slop-patterns.md

@@ -0,0 +1,132 @@
+# Anti-Slop Design Patterns
+
+**60 gates + pre-emit self-critique** — derived from Hallmark's slop-test methodology, adapted for design asset generation.
+
+Run this checklist before handing back any output. Every answer must be **no**.
+
+---
+
+## Pre-emit Self-Critique (6 axes)
+
+Score the planned output 1–5 on each axis. Anything **< 3 triggers a revision pass**.
+
+| # | Axis | What you're scoring |
+|---|---|---|
+| **A** | **Philosophy** | Is there a clear *why* — a position the design is taking? Or is it just decoration? |
+| **B** | **Hierarchy** | Can a viewer tell, in 2 seconds, what's primary, secondary, tertiary? |
+| **C** | **Execution** | Are the details (weights, colors, spacing, focus) all intentional? |
+| **D** | **Specificity** | Does this look like *this brief* — or does it look generic? |
+| **E** | **Restraint** | Have you removed everything that isn't earning its place? |
+| **F** | **Variety** | Does this share a structural fingerprint with a previous output? |
+
+Record the scores: `/* Design · pre-emit critique: P5 H4 E5 S4 R5 V5 */`
+
+---
+
+## Visual Gates (1–8)
+
+1. Is the display font Inter, Roboto, Open Sans, Poppins, Lato, or a system default?
+2. Is there a purple-to-blue (or cyan-to-magenta) gradient anywhere?
+3. Is there a 3-equal-column card grid with icon-above-heading tiles?
+4. Is any card nested inside another card?
+5. Is there a `background-clip: text` gradient headline? (Never allowed.)
+6. Is any card using a thick colored left/right side-stripe border?
+7. Is the hero `min-height: 100vh` with everything centered? (Allowed only for atmospheric/poster)
+8. Is pure `#000` or pure `#fff` used as a base color? (Modern-minimal allows `#fff` paper.)
+
+---
+
+## Structural Gates (9–10)
+
+9. Does the design use the *same* structure as the last output you made?
+10. Are elements separated only by equal whitespace, with no rule, no color shift?
+
+---
+
+## Color Gates (11–15)
+
+11. Do any neutral colors have `oklch(... 0 ...)` (zero chroma)? Tint toward anchor hue (min 0.005 chroma). *Exception: modern-minimal allows zero-chroma neutrals.*
+12. Does the accent color cover more than ~5% of the design area? Accent is for emphasis, not filling.
+13. Are more than 3 colors used in the system? Visual noise.
+14. Is purple gradient on white used anywhere? Immediate AI signal.
+15. Is navy + gold used? Overused corporate cliché.
+
+---
+
+## Typography Gates (16–20)
+
+16. Does the design use **more than 3** distinct font families?
+17. Is the **outlier face** used in more than 2 places? (Outlier = wordmark/stat/pull-quote only.)
+18. Is gradient text used anywhere? (Banned — use solid color instead.)
+19. Is body text smaller than 10px? (Unreadable.)
+20. Are more than 2 fonts loaded unnecessarily? Performance + cognitive load.
+
+---
+
+## Layout Gates (21–25)
+
+21. Does the design horizontally scroll at any viewport width? Fix with `overflow-x: clip`.
+22. Are interactive elements smaller than 44×44px at mobile? WCAG AA minimum.
+23. Is padding/margin/gap a value that isn't on the spacing scale? Arbitrary values are slop.
+24. Do text containers exceed 75ch or fall below 45ch? Measure must be readable.
+25. Is display type using `clamp()` that creates text too small on mobile? Test 320px minimum.
+
+---
+
+## State Gates (26–30)
+
+26. Does every interactive element have `:hover`, `:focus-visible`, `:active`, AND `:disabled` styling?
+27. Is the focus ring built from `border` instead of `outline`? Must use `outline: 2px solid`.
+28. Is the disabled state signaled by *only* `opacity: 0.5`? Needs `cursor: not-allowed` AND `aria-disabled`.
+29. Does the helper text container collapse when empty? Must reserve `min-height: 1lh`.
+30. Does any input change `border-width` between states? Must stay 1px throughout.
+
+---
+
+## Contrast Gates (31–35)
+
+31. Does any body text have contrast below **4.5:1**? (WCAG AA minimum)
+32. Does any large text (≥24px regular or ≥18px bold) have contrast below **3:1**?
+33. Does any button have `color` ≈ `background-color`? Check within 5% lightness + 0.05 chroma.
+34. When `--accent` is used as a fill, is `--accent-ink` defined AND used for text on that fill?
+35. Does any dark section carry text using the page-default color? Must swap to light text.
+
+---
+
+## Common Slop Patterns (36–45)
+
+36. **Centered-everything hero** — title, subtitle, CTA all stacked centered. Pick at most 2 centered; break alignment for others.
+37. **3-feature equal columns** — icon above heading above two-line body, gapped 24px. Use asymmetric grid instead.
+38. **AI-generated aesthetic** — drop shadows on text, gradients on white, rounded everything, purple-blue palettes.
+39. **Corporate cliché** — navy + gold, "trusted by 10,000+ teams", generic testimonials.
+40. **Fabricated metrics** — invented statistics ("+47% conversion"). Use real numbers or placeholders.
+41. **Placeholder names** — "Jane Doe / John Smith" in testimonials. Use plausible names or skip.
+42. **Icon set mixing** — Material + Heroicons + Lucide on same page. Pick one.
+43. **Uniform hover scale** — `scale(1.05)` on everything. Vary or skip.
+44. **Transition-all** — specify exact properties instead.
+45. **Bouncy easings on UI state changes** — cubic-bezier(0.34, 1.56) on buttons/modals is wrong.
+
+---
+
+## Output Stamps
+
+Add at the top of every output file:
+
+```
+/* Design · pre-emit critique: P5 H4 E5 S4 R5 V5 */
+/* Design · gates: pass (1-45) · contrast: pass (31-35) */
+```
+
+---
+
+## Quality Bar
+
+A design passes if a designer would not be embarrassed to hand it to a client.
+
+Concretely:
+- Design has a clear visual identity that is not "generic AI output"
+- Text is readable at intended viewing distance
+- Every element belongs to the same design system
+- No element bleeds off the edge or overlaps another
+- Accent color appears fewer than 8 times per page/screen average
+- No gradient text, no purple-blue palette, no centered-everything hero