chill-agent 1.1.0 → 1.3.0

package/skills/chill-slop-human/references/WCAG.md

@@ -0,0 +1,127 @@
+# WCAG 2.2 Quick Reference
+
+> Reference for antislop. Adapted from the MIT-licensed web-quality-skills by Addy Osmani (https://github.com/addyosmani/web-quality-skills); see LICENSE-web-quality-skills in the skill folder.
+
+## Success criteria by level
+
+### Level A (minimum)
+
+| Criterion | Description |
+|-----------|-------------|
+| **1.1.1** Non-text Content | All images, icons have text alternatives |
+| **1.2.1** Audio-only/Video-only | Provide transcript or audio description |
+| **1.2.2** Captions | Video with audio has captions |
+| **1.2.3** Audio Description | Video has audio description |
+| **1.3.1** Info and Relationships | Information conveyed through presentation is available programmatically |
+| **1.3.2** Meaningful Sequence | Reading order is logical |
+| **1.3.3** Sensory Characteristics | Instructions don't rely solely on shape, color, size, location, orientation, or sound |
+| **1.4.1** Use of Color | Color is not the only visual means of conveying information |
+| **1.4.2** Audio Control | Audio playing automatically can be paused/stopped |
+| **2.1.1** Keyboard | All functionality available via keyboard |
+| **2.1.2** No Keyboard Trap | Keyboard focus can be moved away from any component |
+| **2.1.4** Character Key Shortcuts | Single-key shortcuts can be turned off or remapped |
+| **2.2.1** Timing Adjustable | Time limits can be extended |
+| **2.2.2** Pause, Stop, Hide | Moving/blinking content can be paused |
+| **2.3.1** Three Flashes | Nothing flashes more than 3 times per second |
+| **2.4.1** Bypass Blocks | Skip link or landmark navigation available |
+| **2.4.2** Page Titled | Pages have descriptive titles |
+| **2.4.3** Focus Order | Focus order preserves meaning |
+| **2.4.4** Link Purpose | Link purpose clear from link text or context |
+| **2.5.1** Pointer Gestures | Multi-point gestures have single-pointer alternatives |
+| **2.5.2** Pointer Cancellation | Down-event doesn't trigger action (use up-event or click) |
+| **2.5.3** Label in Name | Accessible name contains visible label text |
+| **2.5.4** Motion Actuation | Motion-triggered functions have alternatives |
+| **3.1.1** Language of Page | Default language specified in HTML |
+| **3.2.1** On Focus | Focus doesn't trigger unexpected changes |
+| **3.2.2** On Input | Input doesn't trigger unexpected changes |
+| **3.2.6** Consistent Help | Help mechanisms appear in the same relative order across pages |
+| **3.3.1** Error Identification | Input errors clearly described |
+| **3.3.2** Labels or Instructions | Form inputs have labels or instructions |
+| **3.3.7** Redundant Entry | Information previously entered is auto-populated or available to select |
+| **4.1.2** Name, Role, Value | UI components have accessible names and correct roles |
+
+### Level AA (standard)
+
+| Criterion | Description |
+|-----------|-------------|
+| **1.2.4** Captions (Live) | Live audio has captions |
+| **1.2.5** Audio Description | Pre-recorded video has audio description |
+| **1.3.4** Orientation | Content doesn't restrict orientation |
+| **1.3.5** Identify Input Purpose | Input purpose can be programmatically determined |
+| **1.4.3** Contrast (Minimum) | 4.5:1 for normal text, 3:1 for large text |
+| **1.4.4** Resize Text | Text can be resized to 200% without loss of functionality |
+| **1.4.5** Images of Text | Text used instead of images of text |
+| **1.4.10** Reflow | Content reflows at 320px width without horizontal scroll |
+| **1.4.11** Non-text Contrast | UI components have 3:1 contrast |
+| **1.4.12** Text Spacing | Content adapts to text spacing changes |
+| **1.4.13** Content on Hover/Focus | Additional content is dismissible, hoverable, persistent |
+| **2.4.5** Multiple Ways | Multiple ways to find pages |
+| **2.4.6** Headings and Labels | Headings and labels are descriptive |
+| **2.4.7** Focus Visible | Focus indicator is visible |
+| **2.4.11** Focus Not Obscured (Minimum) | Focused element is not entirely hidden by author-created content |
+| **2.5.7** Dragging Movements | Dragging actions have single-pointer alternatives |
+| **2.5.8** Target Size (Minimum) | Interactive targets are at least 24×24 CSS pixels (with exceptions) |
+| **3.1.2** Language of Parts | Language changes are marked |
+| **3.2.3** Consistent Navigation | Navigation is consistent across pages |
+| **3.2.4** Consistent Identification | Same functionality uses same labels |
+| **3.3.3** Error Suggestion | Error corrections suggested when known |
+| **3.3.4** Error Prevention (Legal) | Actions can be reversed or confirmed |
+| **3.3.8** Accessible Authentication (Minimum) | No cognitive function test for login unless an alternative or assistance is provided |
+| **4.1.3** Status Messages | Status messages announced to screen readers |
+
+### Level AAA (enhanced)
+
+| Criterion | Description |
+|-----------|-------------|
+| **1.2.6** Sign Language (Prerecorded) | Pre-recorded video has a sign language interpretation |
+| **1.2.7** Extended Audio Description (Prerecorded) | Video pauses long enough for audio description to convey the visuals |
+| **1.2.8** Media Alternative (Prerecorded) | A text alternative covers everything the pre-recorded media shows |
+| **1.2.9** Audio-only (Live) | Live audio-only content has a text alternative |
+| **1.3.6** Identify Purpose | Icons and regions have a programmatically determined purpose |
+| **1.4.6** Contrast (Enhanced) | 7:1 for normal text, 4.5:1 for large text |
+| **1.4.7** Low or No Background Audio | Speech stays understandable over background sound |
+| **1.4.8** Visual Presentation | Foreground/background colors can be selected |
+| **1.4.9** Images of Text (No Exception) | No images of text |
+| **2.1.3** Keyboard (No Exception) | All functionality keyboard accessible |
+| **2.2.3** No Timing | No time limits |
+| **2.2.4** Interruptions | Interruptions can be postponed |
+| **2.2.5** Re-authenticating | Data preserved on re-authentication |
+| **2.2.6** Timeouts | Users warned about data loss from inactivity |
+| **2.3.2** Three Flashes | No content flashes more than 3 times |
+| **2.3.3** Animation from Interactions | Motion animation can be disabled |
+| **2.4.8** Location | User location within site is available |
+| **2.4.9** Link Purpose (Link Only) | Link purpose clear from link text alone |
+| **2.4.10** Section Headings | Sections have headings |
+| **2.4.12** Focus Not Obscured (Enhanced) | No part of the focused element is hidden by author-created content |
+| **2.4.13** Focus Appearance | Focus indicator has sufficient area, contrast, and is not obscured |
+| **2.5.5** Target Size (Enhanced) | Interactive targets are at least 44×44 CSS pixels |
+| **2.5.6** Concurrent Input Mechanisms | Content does not restrict which input modality a person uses |
+| **3.1.3** Unusual Words | Definitions available for unusual words |
+| **3.1.4** Abbreviations | Abbreviations expanded |
+| **3.1.5** Reading Level | Alternative content for complex text |
+| **3.1.6** Pronunciation | Pronunciation available where needed |
+| **3.2.5** Change on Request | Changes initiated only by user |
+| **3.3.5** Help | Context-sensitive help available |
+| **3.3.6** Error Prevention (All) | All form submissions can be reviewed |
+| **3.3.9** Accessible Authentication (Enhanced) | No cognitive function test for login (no object or personal content recognition exceptions) |
+
+## What changed from 2.1 to 2.2
+
+| Change | Criterion | Level |
+|--------|-----------|-------|
+| **Removed** | 4.1.1 Parsing | A |
+| **Added** | 2.4.11 Focus Not Obscured (Minimum) | AA |
+| **Added** | 2.4.12 Focus Not Obscured (Enhanced) | AAA |
+| **Added** | 2.4.13 Focus Appearance | AAA |
+| **Added** | 2.5.7 Dragging Movements | AA |
+| **Added** | 2.5.8 Target Size (Minimum) | AA |
+| **Added** | 3.2.6 Consistent Help | A |
+| **Added** | 3.3.7 Redundant Entry | A |
+| **Added** | 3.3.8 Accessible Authentication (Minimum) | AA |
+| **Added** | 3.3.9 Accessible Authentication (Enhanced) | AAA |
+
+## Sources
+
+- [WCAG 2.2 W3C Recommendation](https://www.w3.org/TR/WCAG22/)
+- [WCAG 2.2 Quick Reference](https://www.w3.org/WAI/WCAG22/quickref/)
+- [What's New in WCAG 2.2](https://www.w3.org/WAI/standards-guidelines/wcag/new-in-22/)

package/skills/chill-slop-mobile/SKILL.md

@@ -1,28 +1,95 @@
 ---
 name: chill-slop-mobile
-description: "Mobile & Responsive Engineering Standard. Fluid CSS clamp typography, zero horizontal blowout, and comfortable thumb-reach zone actions without complex layout bloat."
+description: "Comprehensive Mobile & Responsive Engineering Standard. Zero horizontal viewport overflow, fluid CSS clamp typography, thumb-zone ergonomics, and cleanly scrollable data views without bloated media queries."
 license: MIT
 ---
 
-# ChillSlop Mobile: Responsive Engineering
+# ChillSlop Mobile: Comprehensive Responsive Engineering Standard
 
-> *"A responsive design works everywhere by default, not through 50 media query overrides."*
+> *"A responsive design works everywhere by default, not through 50 brittle media query overrides."*
 
-## 1. Zero Horizontal Overflow
-- The viewport must never produce accidental horizontal scrollbars. Eliminate protruding widths and rigid pixel bounds.
-- Tables and wide code views must sit inside cleanly scrollable wrappers:
-  `overflow-x: auto; -webkit-overflow-scrolling: touch;`
+---
+
+## 1. Zero Horizontal Overflow Mandate
+
+- **The Rule:** The viewport must NEVER produce horizontal scrollbars (`overflow-x: hidden` on `<body>` is a lazy band-aid that hides layout defects; you must eliminate the protruding elements directly).
+- **Causes & Fixes:**
+  - *Fixed Pixel Widths:* Never write `width: 600px`. Use `width: 100%; max-width: 600px;`.
+  - *Large Images / SVGs:* Ensure all images declare `max-width: 100%; height: auto;`.
+  - *Code Blocks & Data Tables:* Wrap tables and code views inside an explicit horizontal scrolling container:
+    ```css
+    .table-wrapper {
+      width: 100%;
+      overflow-x: auto;
+      -webkit-overflow-scrolling: touch;
+      border: 1px solid #26262E;
+      border-radius: 6px;
+    }
+    ```
+
+---
+
+## 2. Fluid Typography & The Modular Scale
+
+Avoid massive static header font sizes that blow out mobile viewports. Use mathematical CSS `clamp()`:
+
+### Fluid Header Formulas
+```css
+/* Responsive H1: 32px on 320px mobile up to 54px on 1280px desktop */
+h1 {
+  font-size: clamp(2rem, 1.5rem + 2.5vw, 3.375rem);
+  line-height: 1.1;
+  letter-spacing: -0.025em;
+}
+
+/* Responsive H2: 24px on mobile up to 36px on desktop */
+h2 {
+  font-size: clamp(1.5rem, 1.25rem + 1.25vw, 2.25rem);
+  line-height: 1.2;
+}
 
-## 2. Fluid Typography & Modular Scale
-- Avoid massive static header sizes on mobile (`font-size: 72px` breaking mobile screens).
-- Use CSS `clamp()` for fluid scaling:
-  ```css
-  h1 {
-    font-size: clamp(2rem, 5vw + 1rem, 3.75rem);
-    line-height: 1.1;
+/* Responsive Body */
+p, body {
+  font-size: 14px;
+  line-height: 1.6;
+}
+@media (min-width: 768px) {
+  p, body {
+    font-size: 15px;
   }
-  ```
+}
+```
+
+---
+
+## 3. Thumb-Zone Architecture & Safe Areas
+
+### Ergonomic Zones
+On mobile devices, user thumbs naturally rest on the bottom third of the screen:
+- **Bottom Navigation & Actions:** Place high-frequency buttons (Submit, Filter, Fork, Run) in a sticky bottom action bar or within easy thumb reach.
+- **Top Bar:** Reserve the top navigation bar for secondary navigation links, search, and settings.
+
+### Hardware Safe Areas
+Sticky bottom action bars and mobile drawers must respect mobile home indicators:
+```css
+.bottom-action-bar {
+  position: sticky;
+  bottom: 0;
+  padding-bottom: max(12px, env(safe-area-inset-bottom));
+  background: rgba(16, 16, 20, 0.95);
+  backdrop-filter: blur(8px);
+  border-top: 1px solid #26262E;
+}
+```
+
+---
+
+## 4. Mobile Breakpoints Architecture
+
+Keep responsive logic lean. Do not declare 10 different media queries. Stick to 3 standard anchors:
 
-## 3. Thumb-Zone Optimization
-- Primary navigation and destructive or frequent actions on mobile should sit within the comfortable bottom thumb-reach zone.
-- Sticky bottom action bars on mobile must respect `env(safe-area-inset-bottom)` to prevent clipping against home indicators.
+| Breakpoint | Width | Target Layout |
+|---|---|---|
+| **Mobile** | `< 768px` | Single-column stacked layouts, bottom sheets, scrollable table containers. |
+| **Tablet** | `768px - 1024px` | 2-column layouts, collapsible sidebars. |
+| **Desktop**| `> 1024px` | Full multi-column workspaces, split diff inspectors, fixed navigation rails. |

package/skills/chill-slop-ui/SKILL.md

@@ -1,41 +1,114 @@
 ---
 name: chill-slop-ui
-description: "High-Craft Visual Engineering & Minimalist UI Standard. Enforces Linear/Geist/Raycast monochrome discipline, purposeful typography, and clean semantic states while eliminating AI slop gradients and pill cards."
+description: "Comprehensive Visual Engineering Standard. Deep carbon monochrome palettes, 1px hairline borders, tabular monospace data, asymmetric layout density, and zero generic AI gradients or pill cards."
 license: MIT
 ---
 
-# ChillSlop UI: High-Craft Visual Engineering
+# ChillSlop UI: Comprehensive Visual Engineering Standard
 
 > *"Good design is as little design as possible. Less, but better — because it concentrates on the essential aspects."*
 
-## 1. Palette & Surface Architecture
-- **Reject the Purple/Cyan Default:** Saturated violet-to-cyan mesh gradients are banned.
-- **Surface Elevation Hierarchy:** Build visual depth via distinct background shades and hairline borders, not muddy shadows:
-  - Base Canvas: `#09090B` (Deep Carbon)
-  - Secondary Panel: `#101014`
-  - Interactive Elevated: `#16161C`
-  - Hover Surface: `#1E1E26`
-  - Hairline Border: `1px solid #26262E`
-- **Monochrome Foundation:** Build 90% of the UI in monochrome (carbon, zinc, white). Limit color strictly to semantic roles:
-  - Emerald (`#10B981`): Success, verified cache hits, live connectivity.
-  - Amber (`#F59E0B`): Pruned content, warnings, pending state.
-  - Rose (`#F43F5E`): Circuit breakers, errors, destructive actions.
-  - Indigo (`#818CF8`): Branched sessions, active tabs, navigation anchors.
-
-## 2. Geometry & Spacing
-- **Border Radius Discipline:**
-  - Micro badges, tags, code chips: `4px`
-  - Buttons, inputs, dropdown items: `6px`
-  - Modals, panels, code containers: `8px`
-  - Maximum outer containers: `12px`
-  - **Ban:** Universal `rounded-2xl` and `rounded-3xl` cards.
-- **Rhythm Over Magic Numbers:** Use strict modular spacing: `4px`, `8px`, `12px`, `16px`, `24px`, `32px`, `48px`, `64px`.
-
-## 3. Component Architecture & Density
-- **Asymmetric Density:** Avoid the cliché 3 identical feature cards with centered icons and 2 lines of lorem ipsum. Use real data tables, inline previews, and asymmetric layouts.
-- **Tabular Monospace Metrics:** All numbers, counters, latencies, timestamps, and hashes must use `ui-monospace`, `JetBrains Mono`, or `font-variant-numeric: tabular-nums` to eliminate layout jitter.
-- **Affordance Clarity:** Interactive elements must have visible hover states, clear pressed states, and distinct disabled opacity (`0.45` with `cursor: not-allowed`).
-
-## 4. Animation & Motion
-- Fast, purposeful, non-distracting motion: `duration: 120ms` to `180ms`, easing `cubic-bezier(0.16, 1, 0.3, 1)`.
-- Motion is strictly spatial (drawers sliding in from anchor, dropdown expansion). Never animate elements just to show off CSS transitions.
+---
+
+## 1. Color Architecture & Surface Hierarchy
+
+### The Monochromatic Foundation
+Build 90% of the interface in crisp monochromatic shades. This grounds the interface and lets content stand out:
+
+| Layer | Hex Value | Purpose |
+|---|---|---|
+| **Canvas Background** | `#09090B` | Base canvas. Deep obsidian carbon, non-reflective. |
+| **Panel Surface** | `#111114` | Sidebars, section containers, grouped blocks. |
+| **Interactive Surface** | `#16161C` | Cards, table headers, text inputs, inactive buttons. |
+| **Active / Hover Surface**| `#1E1E26` | Interactive hover targets, selected tabs. |
+| **Hairline Border** | `#26262E` | 1px crisp separation lines. Never use blurry shadows for borders. |
+| **Focus / Active Border** | `#3F3F4E` | Focus indicators, active cards, highlighted inputs. |
+
+### Semantic Accent Discipline
+Bright colors are strictly functional signals, never background wallpaper:
+- **Emerald (`#10B981`):** Cache hits, active streams, verified statuses, low latencies.
+- **Amber (`#F59E0B`):** Pruned content, warnings, pending transactions, rate-limits.
+- **Rose (`#F43F5E`):** Circuit breakers, fatal errors, destructive actions, high drop-off.
+- **Indigo (`#818CF8`):** Branched DAG sessions, active tabs, navigation anchors.
+
+> **Dose Cap Rule:** No single screen may use more than 1 semantic accent color as a dominant highlight. A page painted with emerald borders, indigo buttons, and amber cards is rejected as AI Slop.
+
+---
+
+## 2. Geometry, Elevation & Spacing
+
+### Border Radius Hierarchy
+Never make every element on the screen a pill bubble (`rounded-3xl` / `rounded-full`). Follow a strict radius scale:
+- **Tags, Micro-Badges, Code Chips:** `4px`
+- **Buttons, Text Inputs, Dropdown Items:** `6px`
+- **Cards, Panels, Modals, Code Blocks:** `8px`
+- **Outer Shell / Max Container:** `12px` (Never exceed `12px` for desktop utility interfaces).
+
+### Depth Through Hairline Borders (No Muddy Shadows)
+- Replace 20px-30px blurred ambient shadows with:
+  `border: 1px solid #26262E;`
+- For elevated modal popups or floating dropdowns, use tight micro-ambient elevation:
+  `box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6), 0 0 0 1px #26262E;`
+
+### Modular Spacing Scale
+Never use arbitrary padding or margins (e.g. `margin-top: 19px`). Follow the 4px/8px modular rhythm:
+`4px` → `8px` → `12px` → `16px` → `24px` → `32px` → `48px` → `64px` → `96px`.
+
+---
+
+## 3. Typography & Numerals
+
+### Font Pairing Rules
+- **Sans Display & Body:** Inter, Geist Sans, -apple-system, BlinkMacSystemFont, Roboto.
+- **Data, Metrics, Code & Hashes:** JetBrains Mono, Fira Code, SF Mono, ui-monospace.
+- **Letter Spacing:**
+  - Large Section Headers (>= 28px): `letter-spacing: -0.025em;`
+  - Body Text: `letter-spacing: normal;`
+  - Uppercase Metadata Badges (<= 11px): `letter-spacing: +0.05em; text-transform: uppercase;`
+
+### The Tabular Monospace Mandate
+Every timestamp, latency number, hash string, currency value, token counter, and percentage **MUST** use a monospace font or:
+`font-variant-numeric: tabular-nums;`
+*Why:* Proportional fonts cause layout shifting and jitter when real-time numbers update.
+
+---
+
+## 4. Component Engineering Patterns
+
+### Feature Sections (Breaking the 3-Card Cliche)
+- **FORBIDDEN:** 3 identical feature cards with a centered circle icon, bold title, and 2 lines of lorem ipsum.
+- **REQUIRED:** Asymmetric density:
+  - Card 1: Interactive live code preview or syntax block.
+  - Card 2: High-density tabular telemetry feed.
+  - Card 3: Split-screen flow diagram with step connectors.
+
+### Buttons & Controls
+- **Minimum Tap Target:** Mobile tap targets must measure at least `44x44px` (desktop compact controls may be `32px` to `36px` height with generous click padding).
+- **Cursor Affordance:**
+  - Enabled: `cursor: pointer;`
+  - Disabled: `cursor: not-allowed; opacity: 0.45;`
+- **Focus Rings:**
+  `outline: 2px solid #818CF8; outline-offset: 2px;`
+  Never ship `outline: none` without providing this high-visibility ring.
+
+### Data Tables
+- Always use zebra-striping or 1px hairline dividers: `border-bottom: 1px solid #26262E`.
+- Numeric columns must align **Right**. Text columns align **Left**. Status badges align **Center**.
+
+---
+
+## 5. Motion & Kinetic Physics
+
+- **Timing Range:** `120ms` to `180ms` for micro-interactions (hovers, clicks); `220ms` to `280ms` for spatial transitions (drawers, dialogs).
+- **Easing Curve:** `cubic-bezier(0.16, 1, 0.3, 1)` (Deceleration curve for crisp, tactile snap).
+- **Reduced Motion Support:**
+  ```css
+  @media (prefers-reduced-motion: reduce) {
+    *, ::before, ::after {
+      animation-duration: 0.01ms !important;
+      animation-iteration-count: 1 !important;
+      transition-duration: 0.01ms !important;
+      scroll-behavior: auto !important;
+    }
+  }
+  ```

package/skills/chill-slop-ui/references/CORE-WEB-VITALS.md

@@ -0,0 +1,181 @@
+# Core Web Vitals (LCP, INP, CLS)
+
+> Reference for antislop. Adapted from the MIT-licensed web-quality-skills by Addy Osmani (https://github.com/addyosmani/web-quality-skills); see LICENSE-web-quality-skills in the skill folder.
+
+Targeted optimization for the three Core Web Vitals using field data to identify user impact and browser traces to diagnose causes.
+
+## Measure before optimizing
+
+When a runnable URL is available, prefer this sequence:
+
+1. Check page-level CrUX p75 data, with a clearly labeled origin fallback when page data is unavailable.
+2. Record a browser performance trace under stated conditions. With Chrome DevTools MCP, trace summaries can include CrUX alongside the observed lab metrics.
+3. Analyze only the insights associated with the failing metric, then inspect the implicated code and resources.
+4. Re-run equivalent lab measurements after the fix. Do not claim an immediate field improvement; CrUX and first-party RUM need new user visits.
+
+If only source code is available, identify likely causes but do not claim that LCP, INP, or CLS is failing without runtime evidence.
+
+## The three metrics
+
+| Metric | Measures | Good | Needs work | Poor |
+|--------|----------|------|------------|------|
+| **LCP** | Loading | ≤ 2.5s | 2.5s to 4s | > 4s |
+| **INP** | Interactivity | ≤ 200ms | 200ms to 500ms | > 500ms |
+| **CLS** | Visual Stability | ≤ 0.1 | 0.1 to 0.25 | > 0.25 |
+
+Google measures at the **75th percentile**: 75% of page visits must meet "Good" thresholds.
+
+These are the numbers R-40 keeps out of the Hard Gate. They describe real visits, so compare a page against them only with a real measurement in hand, and report "not measured" otherwise (R-36).
+
+---
+
+## LCP: Largest Contentful Paint
+
+LCP measures when the largest visible content element renders. Usually this is:
+- Hero image or video
+- Large text block
+- Background image
+- `<svg>` element
+
+### Common LCP issues
+
+**1. Slow server response (TTFB > 800ms)**
+```
+Fix: CDN, caching, optimized backend, edge rendering
+```
+
+**2. Render-blocking resources**
+```html
+<!-- ❌ Blocks rendering -->
+<link rel="stylesheet" href="/all-styles.css">
+
+<!-- ✅ Critical CSS inlined, rest deferred -->
+<style>/* Critical above-fold CSS */</style>
+<link rel="preload" href="/styles.css" as="style" 
+      onload="this.onload=null;this.rel='stylesheet'">
+```
+
+**3. Slow resource load times**
+```html
+<!-- ❌ LCP image is discovered only after a stylesheet loads -->
+<div class="hero"></div>
+
+<!-- ✅ Discoverable in initial HTML and prioritized -->
+<link rel="preload" href="/hero.webp" as="image" fetchpriority="high">
+<img src="/hero.webp" alt="Hero" fetchpriority="high">
+```
+
+Prefer a discoverable `<img>` with `fetchpriority="high"`. Add the preload only when the trace shows that the resource would otherwise be discovered late; duplicate or speculative preloads can compete for bandwidth.
+
+**4. Client-side rendering delays**
+```javascript
+// ❌ Content loads after JavaScript
+useEffect(() => {
+  fetch('/api/hero-text').then(r => r.json()).then(setHeroText);
+}, []);
+
+// ✅ Server-side or static rendering
+// Use SSR, SSG, or streaming to send HTML with content
+export async function getServerSideProps() {
+  const heroText = await fetchHeroText();
+  return { props: { heroText } };
+}
+```
+
+**5. Make navigations instant with the Speculation Rules API**
+
+For sites with predictable same-origin journeys, prerendering a likely next page can make a successful subsequent navigation much faster. Treat this as a measured navigation optimization, not a substitute for fixing the current page's LCP.
+
+```html
+<script type="speculationrules">
+{
+  "prerender": [{
+    "where": { "href_matches": "/*" },
+    "eagerness": "moderate"
+  }]
+}
+</script>
+```
+
+Current Chrome behavior is specific enough to guide the choice:
+
+| `eagerness` | Trigger |
+|-------------|---------|
+| `conservative` | Pointer or touch down |
+| `moderate` | Desktop: 200ms hover, or earlier pointer down; mobile: viewport heuristics |
+| `eager` | Chrome 143+: desktop 10ms hover; mobile 50ms after the anchor enters the viewport |
+| `immediate` | As soon as the rules are observed |
+
+Start conservatively and measure prediction hit rate, transferred bytes, server load, and navigation improvement before expanding the rules. Recheck [Chrome's maintained eagerness documentation](https://developer.chrome.com/docs/web-platform/prerender-pages#eagerness) before hardcoding timing-sensitive behavior.
+
+Caveats:
+- **Bandwidth/CPU cost.** Each prerender is roughly a full page load. Scope `where` carefully (`href_matches` patterns, exclude logout/checkout) and avoid `immediate` outside small sites.
+- **Side effects fire early.** Analytics, ads, and any code that runs on load will fire when the prerender starts, not when the user navigates. Gate side effects on the [`prerenderingchange` event](https://developer.chrome.com/docs/web-platform/prerender-pages#detect_when_a_page_is_prerendered_or_used_for_a_full_navigation) or `document.prerendering`.
+- **Chromium-only.** Safari and Firefox ignore the script, it's a progressive enhancement, never a regression.
+
+### LCP optimization checklist
+
+```markdown
+- [ ] TTFB < 800ms (use CDN, edge caching)
+- [ ] LCP resource is discoverable in initial HTML and prioritized; preload only if the trace shows late discovery
+- [ ] LCP image optimized (WebP/AVIF, correct size)
+- [ ] Critical CSS inlined (< 14KB)
+- [ ] No render-blocking JavaScript in <head>
+- [ ] Fonts don't block text rendering (font-display: swap)
+- [ ] LCP element in initial HTML (not JS-rendered)
+- [ ] Speculation Rules added for likely-next navigations (moderate eagerness)
+```
+
+### LCP element identification
+
+This snippet diagnoses the current page session. It is not field data.
+
+```javascript
+// Find your LCP element
+new PerformanceObserver((list) => {
+  const entries = list.getEntries();
+  const lastEntry = entries[entries.length - 1];
+  console.log('LCP element:', lastEntry.element);
+  console.log('LCP time:', lastEntry.startTime);
+}).observe({ type: 'largest-contentful-paint', buffered: true });
+```
+
+---
+
+## INP: Interaction to Next Paint
+
+INP measures responsiveness across clicks, taps, and key presses during a visit. Diagnose its input delay, processing time, and presentation delay separately; a slow interaction may involve main-thread contention before the handler, expensive application work, or delayed rendering after it.
+
+When field INP is poor or a trace identifies a slow interaction, read [web.dev on optimizing INP](https://web.dev/articles/optimize-inp) for trace interpretation, yielding patterns, and third-party and rendering causes.
+
+---
+
+## CLS: Cumulative Layout Shift
+
+CLS measures unexpected layout shifts across a page visit. Use field attribution or a trace to identify the shifted node and the trigger; do not assume the visible victim caused the shift.
+
+When field CLS is poor or a trace reports shifts, read [web.dev on optimizing CLS](https://web.dev/articles/optimize-cls) for reserved-space patterns, dynamic content, and font and animation fixes.
+
+---
+
+## Measurement sources
+
+| Source | Use |
+|--------|-----|
+| Browser performance trace (Chrome DevTools MCP: `performance_start_trace`) | Observe one load or interaction and diagnose focused insights; use included CrUX context when available |
+| CrUX or Search Console | Prioritize aggregated real-user outcomes at p75 |
+| Lighthouse CLI or PageSpeed Insights | Controlled lab fallback when DevTools tools are unavailable |
+| First-party RUM | Segment current production experience by route, device, release, and attribution |
+| Raw `PerformanceObserver` | Inspect one page session during debugging |
+
+Do not route performance through Chrome DevTools MCP's `lighthouse_audit`; that capability intentionally covers non-performance Lighthouse categories. Do not compare a single lab value directly with a field p75 as if they were equivalent samples.
+
+When adding or reviewing production collection, read [the `web-vitals` library documentation](https://github.com/GoogleChrome/web-vitals). Prefer the `web-vitals` library because raw browser APIs do not by themselves implement every Core Web Vital's lifecycle and reporting rules.
+
+---
+
+## References
+
+- [web.dev LCP](https://web.dev/articles/lcp) and [optimizing LCP](https://web.dev/articles/optimize-lcp)
+- [web.dev INP](https://web.dev/articles/inp)
+- [web.dev CLS](https://web.dev/articles/cls)

package/skills/chill-slop-ui/references/WEB-BASELINE.md

@@ -0,0 +1,28 @@
+# Web Baseline
+
+> Reference for antislop. Adapted from the MIT-licensed web-quality-skills by Addy Osmani (https://github.com/addyosmani/web-quality-skills); see LICENSE-web-quality-skills in the skill folder.
+
+Page basics and security defaults. This is an optional checklist, not a Hard Gate rule: run it when the task asks for a production-ready page or a web-quality review. None of it shows in a screenshot, which is why it is easy to skip.
+
+## Document basics
+
+- `<!doctype html>` first, so the page never renders in quirks mode.
+- `<meta charset="utf-8">` first in `<head>`.
+- `<meta name="viewport" content="width=device-width, initial-scale=1">` (zoom stays allowed, R-39).
+- Valid, semantic HTML with no duplicate `id`.
+
+## Runtime
+
+Console errors are already R-35.
+
+- No deprecated APIs: `document.write`, synchronous XHR, `unload` listeners.
+- Scroll and touch listeners are `{ passive: true }` where they do not call `preventDefault`.
+
+## Security defaults
+
+- HTTPS for every resource, with no mixed `http://` content.
+- External links opened in a new tab carry `rel="noopener noreferrer"`.
+- No secrets, API keys, or tokens in client code; they stay on the server.
+- `textContent` or a sanitizer instead of `innerHTML` or `eval` with untrusted input.
+- Third-party scripts and styles from a CDN you do not control are pinned with Subresource Integrity.
+- Permissions (location, notifications, camera) are requested after a user action, never on page load.

package/src/auditor.js

@@ -29,6 +29,14 @@ const SLOP_PATTERNS = [
     name: 'Excessive Glassmorphic Blur',
     fix: 'Ensure backdrop-blur is not stacked across cards, modals, and navbars simultaneously.'
   },
+  {
+    id: 'VISUAL-04',
+    category: 'Visual Slop',
+    severity: 'MEDIUM',
+    regex: /body\s*\{[^}]*overflow-x\s*:\s*hidden/i,
+    name: 'Lazy Body Overflow Masking',
+    fix: 'Do not use overflow-x: hidden on body to mask layout bugs. Eliminate the protruding element width directly.'
+  },
 
   // 2. Over-Engineering & Bloat (Ponytail Minimalism)
   {
@@ -73,6 +81,14 @@ const SLOP_PATTERNS = [
     name: 'Hallucinated Social Proof',
     fix: 'Cite verified customer metrics or remove synthetic testimonials entirely.'
   },
+  {
+    id: 'COPY-04',
+    category: 'Copywriting Slop',
+    severity: 'MEDIUM',
+    regex: /—/u,
+    name: 'Em Dash (—) AI Writing Tic',
+    fix: 'R-02 rule: replace em dash with comma, period, colon, or parentheses.'
+  },
 
   // 4. Code Hygiene Slop
   {