chill-agent 1.2.0 → 1.3.0

package/skills/chill-slop-human/references/A11Y-PATTERNS.md

@@ -0,0 +1,249 @@
+# Accessibility Code Patterns
+
+> 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.
+
+Practical, copy-paste-ready patterns for common accessibility requirements. Each pattern is self-contained and linked from the main [SKILL.md](../SKILL.md).
+
+---
+
+## Pointer cursor base layer
+
+Set once, in the base CSS layer, so no component has to remember it (R-39). A CSS reset such as Tailwind preflight sets `button` to `cursor: default`, so this layer comes after the reset.
+
+```css
+a[href], button, summary, select, label[for],
+label:has(> input[type="checkbox"], > input[type="radio"]),
+[role="button"], [role="link"], [role="tab"], [role="menuitem"], [role="option"], [role="switch"],
+input[type="checkbox"], input[type="radio"], input[type="file"],
+input[type="submit"], input[type="button"], input[type="reset"], input[type="range"], input[type="color"] {
+  cursor: pointer;
+}
+:disabled, [aria-disabled="true"] { cursor: not-allowed; }
+```
+
+Text inputs keep `cursor: text`, and drag handles use `grab` / `grabbing`. An implicit label that wraps a checkbox or radio is included, since clicking it toggles the control.
+
+## Modal focus trap
+
+Trap keyboard focus inside a modal dialog so Tab/Shift+Tab cycle through its focusable elements and Escape closes it.
+
+```javascript
+function trapFocus(modal, onClose) {
+  const focusable = modal.querySelectorAll(
+    'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+  );
+  if (focusable.length === 0) return () => {};
+
+  const first = focusable[0];
+  const last = focusable[focusable.length - 1];
+
+  function onKeydown(e) {
+    if (e.key === 'Escape') return onClose();
+    if (e.key !== 'Tab') return;
+    if (e.shiftKey && document.activeElement === first) {
+      e.preventDefault();
+      last.focus();
+    } else if (!e.shiftKey && document.activeElement === last) {
+      e.preventDefault();
+      first.focus();
+    }
+  }
+
+  modal.addEventListener('keydown', onKeydown);
+  first.focus();
+  return () => modal.removeEventListener('keydown', onKeydown);
+}
+```
+
+Call the returned function when the dialog closes, or a second open stacks a second listener:
+
+```javascript
+const release = trapFocus(dialog, () => dialog.close());
+dialog.addEventListener('close', release, { once: true });
+```
+
+The native `<dialog>` element handles focus trapping automatically, prefer it when browser support allows.
+
+---
+
+## Skip link
+
+Allows keyboard users to bypass repetitive navigation and jump straight to main content.
+
+```html
+<body>
+  <a href="#main-content" class="skip-link">Skip to main content</a>
+  <header><!-- navigation --></header>
+  <main id="main-content" tabindex="-1">
+    <!-- main content -->
+  </main>
+</body>
+```
+
+```css
+.skip-link {
+  position: absolute;
+  top: -40px;
+  left: 0;
+  background: #000;
+  color: #fff;
+  padding: 8px 16px;
+  z-index: 100;
+}
+
+.skip-link:focus {
+  top: 0;
+}
+```
+
+---
+
+## Error handling
+
+Announce errors to screen readers and focus the first invalid field on submit.
+
+```html
+<form novalidate>
+  <div id="error-summary" tabindex="-1" hidden></div>
+  <div class="field" aria-live="polite">
+    <label for="email">Email</label>
+    <input type="email" id="email"
+           aria-invalid="true"
+           aria-describedby="email-error">
+    <p id="email-error" class="error" role="alert">
+      Please enter a valid email address (e.g., name@example.com)
+    </p>
+  </div>
+</form>
+```
+
+```javascript
+const form = document.querySelector('form');
+const summary = document.getElementById('error-summary');
+
+form.addEventListener('submit', (e) => {
+  const invalid = [...form.querySelectorAll('[aria-invalid="true"]')];
+  if (invalid.length === 0) return;
+
+  e.preventDefault();
+  summary.textContent =
+    `${invalid.length} errors found. Please fix them and try again.`;
+  summary.hidden = false;
+  invalid[0].focus();
+});
+```
+
+This handler reports what the validation already marked: set `aria-invalid="true"` and the field's error text before submit runs.
+
+---
+
+## Form labels
+
+Every input needs an associated label, either explicit (`for`/`id`) or implicit (wrapping `<label>`).
+
+```html
+<!-- ❌ No label association -->
+<input type="email" placeholder="Email">
+
+<!-- ✅ Explicit label -->
+<label for="email">Email address</label>
+<input type="email" id="email" name="email"
+       autocomplete="email" required>
+
+<!-- ✅ Implicit label -->
+<label>
+  Email address
+  <input type="email" name="email" autocomplete="email" required>
+</label>
+
+<!-- ✅ With instructions -->
+<label for="password">Password</label>
+<input type="password" id="password"
+       aria-describedby="password-requirements">
+<p id="password-requirements">
+  Must be at least 8 characters with one number.
+</p>
+```
+
+---
+
+## Dragging movements
+
+Any action triggered by dragging must offer a single-pointer alternative (WCAG 2.5.7).
+
+```html
+<!-- ❌ Drag-only reorder -->
+<ul class="sortable-list" draggable="true">
+  <li>Item 1</li>
+  <li>Item 2</li>
+</ul>
+
+<!-- ✅ Drag + button alternatives -->
+<ul class="sortable-list">
+  <li>
+    <span>Item 1</span>
+    <button aria-label="Move Item 1 up">↑</button>
+    <button aria-label="Move Item 1 down">↓</button>
+  </li>
+  <li>
+    <span>Item 2</span>
+    <button aria-label="Move Item 2 up">↑</button>
+    <button aria-label="Move Item 2 down">↓</button>
+  </li>
+</ul>
+```
+
+Also applies to sliders, map panning, colour pickers, and similar drag-based widgets, always provide an equivalent click/tap or keyboard path.
+
+---
+
+## ARIA tabs
+
+Tabs require `role="tablist"`, `role="tab"`, and `role="tabpanel"` with proper `aria-selected`, `aria-controls`, and keyboard support.
+
+```html
+<div role="tablist" aria-label="Product information">
+  <button role="tab" id="tab-1" aria-selected="true"
+          aria-controls="panel-1">Description</button>
+  <button role="tab" id="tab-2" aria-selected="false"
+          aria-controls="panel-2" tabindex="-1">Reviews</button>
+</div>
+<div role="tabpanel" id="panel-1" aria-labelledby="tab-1">
+  <!-- Panel content -->
+</div>
+<div role="tabpanel" id="panel-2" aria-labelledby="tab-2" hidden>
+  <!-- Panel content -->
+</div>
+```
+
+Arrow keys should move focus between tabs; the active tab receives `tabindex="0"` while inactive tabs use `tabindex="-1"`.
+
+---
+
+## Live regions and notifications
+
+Use `aria-live` to announce dynamic content changes to screen readers without moving focus.
+
+```html
+<!-- Status updates (polite, waits for pause in speech) -->
+<div id="polite-announcer" aria-live="polite" aria-atomic="true" class="status">
+  <!-- Content updates announced to screen readers -->
+</div>
+
+<!-- Urgent alerts (assertive, interrupts) -->
+<div id="assertive-announcer" role="alert" aria-live="assertive">
+  <!-- Interrupts current announcement -->
+</div>
+```
+
+```javascript
+function showNotification(message, type = 'polite') {
+  const container = document.getElementById(`${type}-announcer`);
+  container.textContent = '';
+  requestAnimationFrame(() => {
+    container.textContent = message;
+  });
+}
+```
+
+Clear the container before writing to ensure the same message triggers a new announcement.

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-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.