@litfamily/lithermes 1.0.0

package/assets/lithermes-plugin/skills/frontend-ui-ux/references/_canonical-corpus/corpus/designpowers/vendor/skills/usability-testing/reference.md

@@ -0,0 +1,78 @@
+---
+name: usability-testing
+description: "Use when planning or conducting usability tests — writing test scripts, defining tasks, selecting participants, analysing findings, and turning observations into design actions"
+---
+
+# Usability Testing
+
+Testing with real people is how you find out if the design works — not by looking at it, but by watching someone use it.
+
+## When to Use
+
+- After design-builder produces a working prototype
+- Before declaring a design complete
+- When the design-critic flags persona coverage gaps
+- When assumptions about user behaviour need evidence
+
+## Process
+
+### Step 1: Define What You're Testing
+
+Write 3-5 task scenarios that map to the core jobs in the brief. Each task:
+- **Starts with a realistic trigger** — "You just bought a new plant and want to add it to the app"
+- **Has a clear success condition** — "The plant appears in your list with a watering schedule"
+- **Does not tell the user how** — never say "tap the + button"
+
+### Step 2: Select Participants
+
+Recruit 5-8 participants. At minimum include:
+- 1 person who uses a screen reader
+- 1 person over 60
+- 1 person who is not a native speaker of the interface language
+- 1 person with low tech confidence
+
+Reference `inclusive-personas` for the ability spectrum.
+
+### Step 3: Choose Method
+
+| Method | When to use | Minimum participants |
+|--------|-----------|---------------------|
+| Moderated think-aloud | New flows, complex interactions | 5 |
+| Unmoderated remote | Simple tasks, large sample | 8-12 |
+| Guerrilla (hallway) | POC validation, time-constrained | 3-5 |
+| Accessibility audit with AT users | After build, before ship | 2-3 |
+
+### Step 4: Write the Test Script
+
+1. **Welcome** — explain what you're testing (the design, not them)
+2. **Background** — 2-3 questions about their relationship to the problem
+3. **Tasks** — present each scenario one at a time, observe silently
+4. **Debrief** — "What was hardest?" "What would you change?"
+
+Never help during a task. Silence is data.
+
+### Step 5: Analyse Findings
+
+Classify outcomes per task:
+- **Completed easily** — no hesitation, no errors
+- **Completed with difficulty** — hesitation or errors but recovered
+- **Failed** — could not complete
+- **Completed wrong** — thought they succeeded but didn't
+
+Severity: Critical (blocks 2+ participants), Major (significant difficulty), Minor (noticed but not impeding).
+
+### Step 6: Turn Findings Into Actions
+
+Every finding becomes a design action: "[Severity] [What happened] → [Design action] → [Which agent handles it]"
+
+## What You Deliver
+
+- Task success rates table
+- Ranked findings by severity
+- Design actions with agent assignments
+- Recommendation: iterate / ship / rethink
+
+## Integration
+
+- **Informed by:** `inclusive-personas`, `design-discovery`
+- **Feeds into:** `design-lead`, `design-builder`, `design-strategist`

package/assets/lithermes-plugin/skills/frontend-ui-ux/references/_canonical-corpus/corpus/designpowers/vendor/skills/verification-before-shipping/reference.md

@@ -0,0 +1,125 @@
+---
+name: verification-before-shipping
+description: "Use before declaring any design work complete, fixed, or ready — requires running verification and confirming output before making any success claims. Evidence before assertions, always"
+---
+
+# Verification Before Shipping
+
+Do not say it is done until you have proof. This skill prevents the most common failure mode in design work — declaring completion based on intent rather than evidence.
+
+## The Rule
+
+NEVER claim work is complete, fixed, passing, or ready without running verification and confirming the output. "I believe this works" is not verification. "I ran these checks and here are the results" is.
+
+## When to Use
+
+- Before declaring a design task complete
+- Before moving from one phase to the next
+- Before handoff to engineering
+- Before creating a PR or committing design artefacts
+- Any time you are about to say "done"
+
+## Process
+
+### Step 1: Check Against the Plan
+
+If a design plan exists:
+- [ ] Every task in the plan is marked complete
+- [ ] Every verification criterion in the plan has been met
+- [ ] No tasks were skipped or deferred without explicit user approval
+
+### Step 2: Check Against the Brief
+
+Reference the design brief:
+- [ ] The stated problem is addressed
+- [ ] All identified personas are served
+- [ ] Success criteria are met or measurable
+- [ ] Nothing in "out of scope" crept into scope (and vice versa)
+
+### Step 3: Accessibility Verification
+
+Run — do not guess:
+
+**If code exists:**
+- [ ] Automated accessibility scan (axe-core, Lighthouse, or equivalent) — report results
+- [ ] Keyboard navigation test — report results
+- [ ] Screen reader test (at minimum, check heading structure and form labels)
+- [ ] Zoom to 200% — report results
+- [ ] Check prefers-reduced-motion behaviour — report results
+
+**If design artefacts only:**
+- [ ] Contrast ratios verified with a tool (not by eye)
+- [ ] Touch targets measured (not estimated)
+- [ ] Heading hierarchy documented
+- [ ] All states designed (not just the happy path)
+
+### Step 4: Content Verification
+
+- [ ] All placeholder text has been replaced with real content
+- [ ] Error messages are written (not "TODO")
+- [ ] Alt text is present for all images
+- [ ] Labels are specific and descriptive
+
+### Step 5: Cross-Reference Personas
+
+For each persona from the inclusive-personas phase:
+- [ ] Could [Persona 1] complete the primary task? How?
+- [ ] Could [Persona 2] complete the primary task? How?
+- [ ] Could [Edge Case Persona] complete the primary task? What barriers remain?
+
+### Step 6: Check Design Debt
+
+Before declaring the project shippable, review the Design Debt Register in `design-state.md`:
+
+- [ ] All Critical and Major items are Resolved (not just Open or Escalated)
+- [ ] Any Escalated items have been addressed or consciously Accepted by the user
+- [ ] Open Minor items have been reviewed — the user knows what debt ships with this release
+- [ ] Accessibility debt items have explicit user acknowledgement if Accepted
+
+### Step 7: Report
+
+Present verification results to the user:
+
+```markdown
+## Verification Report: [Feature/Task]
+
+**Date:** [YYYY-MM-DD]
+
+### Plan Completion
+[All tasks complete / X tasks remaining]
+
+### Brief Alignment
+[Aligned / Gaps identified]
+
+### Accessibility Results
+- Automated scan: [Pass/Fail — specific issues]
+- Keyboard: [Pass/Fail — specific issues]
+- Screen reader: [Pass/Fail — specific issues]
+- Zoom: [Pass/Fail — specific issues]
+- Motion: [Pass/Fail — specific issues]
+
+### Content Status
+[Complete / Gaps identified]
+
+### Persona Walkthrough
+[Summary of persona-by-persona evaluation]
+
+### Design Debt Status
+- Open items shipping with this release: [count]
+- Escalated items: [count] — [resolved/accepted]
+- Accessibility debt accepted: [count] — [summary]
+- Oldest unresolved: [DD-XXX] from [date]
+
+### Verdict
+[Ready to ship / Issues to resolve first]
+```
+
+## Integration
+
+- **Called by:** Before any completion claim
+- **Follows:** `designpowers-critique`, `design-handoff`
+- **Blocks:** Completion claims, PR creation, merge decisions
+
+## The Iron Law
+
+If you cannot produce evidence that the design works for the identified personas — including those at the margins of the ability spectrum — it is not done. Go back and verify.

package/assets/lithermes-plugin/skills/frontend-ui-ux/references/_canonical-corpus/corpus/designpowers/vendor/skills/voice-and-tone/reference.md

@@ -0,0 +1,79 @@
+---
+name: voice-and-tone
+description: "Use when establishing or applying brand voice — defining voice attributes, tone adaptation across contexts, vocabulary lists, writing examples, and ensuring consistent personality across the interface"
+---
+
+# Voice and Tone
+
+Voice is who you are. Tone is how you say it right now. Voice stays constant. Tone adapts to context. This skill defines both so every word sounds like the same person wrote it.
+
+## When to Use
+
+- At the start of a project, during or after `design-strategy`
+- When the content-writer agent needs voice guardrails
+- When interface copy sounds inconsistent across screens
+
+## Step 1: Define Voice Attributes
+
+Choose 3-5. For each, define "this, not that":
+
+| Attribute | This | Not that |
+|-----------|------|----------|
+| Warm | Friendly, approachable | Sycophantic, emoji-heavy |
+| Knowledgeable | Confident, precise | Academic, condescending |
+| Direct | Clear, action-oriented | Blunt, cold, robotic |
+| Encouraging | Celebrates effort | Patronising, fake-cheerful |
+
+The "not that" column prevents drift.
+
+## Step 2: Define Tone by Context
+
+| Context | Feel | Example |
+|---------|------|---------|
+| Success | Celebration, warmth | "Your monstera is happy. Next water Thursday." |
+| Error | Calm, helpful, no blame | "We couldn't save that. Check your connection and try again." |
+| Onboarding | Welcoming, confidence-building | "Let's get to know your plants. About 30 seconds." |
+| Empty state | Inviting, action-oriented | "Your windowsill is empty. Add your first plant." |
+| Loading | Reassuring, brief | "Checking your plants..." |
+| Destructive | Clear, calm, reversible | "Remove this plant? You can undo this." |
+
+## Step 3: Build the Vocabulary
+
+| Always use | Never use |
+|-----------|----------|
+| water | irrigate |
+| happy | optimal |
+| check it out | investigate |
+| you | the user |
+
+The content-writer agent uses this as a constraint.
+
+## Step 4: Set Reading Level
+
+| Audience | Target |
+|----------|--------|
+| General consumer | Grade 6-8 |
+| Professional tool | Grade 8-10 |
+| Technical docs | Grade 10-12 |
+
+## Voice Audit Checklist
+
+- [ ] Every screen sounds like the same person wrote it
+- [ ] Voice attributes are present in the copy
+- [ ] Tone matches the context
+- [ ] Vocabulary list words used consistently
+- [ ] Reading level at or below target
+- [ ] Copy works read aloud by a screen reader
+
+## What You Deliver
+
+- Voice attributes table (3-5, with "this not that")
+- Tone guide by context with examples
+- Vocabulary list
+- Reading level target
+- 3-5 before/after examples
+
+## Integration
+
+- **Informed by:** `design-strategy`, `design-discovery`
+- **Feeds into:** `content-writer` agent, `accessible-content`, `design-critic`

package/assets/lithermes-plugin/skills/frontend-ui-ux/references/_canonical-corpus/corpus/designpowers/vendor/skills/writing-design-plans/reference.md

@@ -0,0 +1,119 @@
+---
+name: writing-design-plans
+description: "Use when you have a design brief or strategy and need to break implementation into reviewable chunks — creates step-by-step plans with verification criteria for each task"
+---
+
+# Writing Design Plans
+
+A design plan breaks an approved design direction into discrete, reviewable tasks. Each task is small enough to evaluate clearly and specific enough that the result is predictable.
+
+## When to Use
+
+- After design-discovery and/or design-strategy have produced an approved direction
+- Before any implementation work begins
+- When a design task is too large to complete and review in one step
+
+## Process
+
+### Step 1: Review Inputs
+
+Gather:
+- Design brief (from design-discovery)
+- Strategy document (from design-strategy, if applicable)
+- Personas (from inclusive-personas)
+- Existing design system inventory
+
+### Step 2: Identify Design Tasks
+
+Break the work into categories:
+
+1. **Structure tasks** — information architecture, page hierarchy, navigation
+2. **Component tasks** — individual UI components that need designing
+3. **Layout tasks** — how components compose into screens
+4. **Interaction tasks** — states, transitions, feedback patterns
+5. **Content tasks** — copy, labels, error messages, help text
+6. **Accessibility tasks** — specific inclusive design requirements per component
+
+### Step 3: Order the Work
+
+Design work has natural dependencies:
+
+```
+Structure → Layout → Components → Interactions → Content → Review
+     ↑ accessibility woven through each step, not a final phase ↑
+```
+
+Order tasks so that:
+- Foundation work (structure, layout) comes before detail work (interactions, content)
+- Each task can be reviewed independently
+- Accessibility is addressed within each task, not deferred
+
+### Step 4: Write the Plan
+
+```markdown
+# Design Plan: [Feature/Project Name]
+
+> **For agentic workers:** REQUIRED: Use designpowers:designpowers-critique to review completed work against this plan.
+
+**Goal:** [One sentence — what this plan delivers]
+
+**Design Direction:** [Reference to the design brief or strategy]
+
+**Personas:** [Reference to personas this plan serves]
+
+---
+
+## Task 1: [Task Name]
+
+**Files:** [Which files will be created or modified]
+
+- [ ] Step 1: [Specific action]
+- [ ] Step 2: [Specific action]
+- [ ] Step 3: [Specific action]
+
+**Accessibility check:** [What inclusive design criteria this task must meet]
+
+**Verification:** [How to confirm this task is complete and correct]
+
+---
+
+## Task 2: [Task Name]
+...
+```
+
+### Step 5: Task Sizing
+
+Each task should be:
+- **2-5 minutes of focused work** — small enough to hold in your head
+- **Independently reviewable** — someone can evaluate it without seeing everything else
+- **Specifically described** — exact files, exact components, exact acceptance criteria
+- **Accessibility-inclusive** — each task addresses its own inclusive design requirements
+
+If a task takes longer than 5 minutes, break it down further.
+
+### Step 6: Save and Review
+
+Save to: `docs/designpowers/plans/YYYY-MM-DD-<feature>-plan.md`
+
+Present the plan to the user. Walk through:
+- Does the task order make sense?
+- Are any tasks missing?
+- Are the accessibility checks appropriate for each task?
+- Is the scope right, or should anything be deferred?
+
+User must approve the plan before execution begins.
+
+## Integration
+
+- **Called by:** `design-discovery`, `design-strategy`
+- **Calls:** Implementation begins via the relevant design skills (`ui-composition`, `interaction-design`, etc.)
+- **Pairs with:** `designpowers-critique` (reviews work against the plan)
+
+## Anti-Patterns
+
+| Pattern | Problem |
+|---------|---------|
+| Tasks without accessibility checks | Every task affects the user experience. Every task has accessibility implications |
+| Tasks that say "make it look good" | Vague tasks produce vague results. Be specific about what "good" means |
+| Accessibility as the final task | By then it is too late. Accessibility is in every task |
+| Plan without persona references | If you do not know who you are designing for, you cannot verify the design works |

package/assets/lithermes-plugin/skills/frontend-ui-ux/references/_canonical-corpus/corpus/perfection/README.md

@@ -0,0 +1,160 @@
+
+# Frontend Perfectionist
+
+You are a senior frontend engineer with one binding standard: **every page hits 100 in EVERY Lighthouse category, measured on a REAL browser, without sacrificing a single drop of UX quality.**
+
+## TENETS. NON-NEGOTIABLE.
+
+### 1. AUDIT THROUGH A REAL BROWSER. NEVER THROUGH THE CLI.
+
+The `lighthouse` CLI runs `chrome-headless-shell` with default settings. That is **NOT** what your users see, and the number it produces will lie to you. **REJECT** any report based on the CLI, even if the CI shows green.
+
+The correct path:
+
+1. Build the app in production mode (`next build && next start`, `vite build && vite preview`, `astro build && astro preview`, `bun run build && bun run start`). **NEVER** measure a dev server.
+2. Launch Playwright with `channel: "chrome"` (real Chrome stable, not the headless-shell binary).
+3. Run Lighthouse against the Playwright-controlled page via `playwright-lighthouse` OR via `chrome-launcher` + the `lighthouse` Node API, attaching to the Playwright CDP endpoint so cookies, auth state, and warmed caches mirror what a real returning user sees.
+4. Use the **mobile** preset (4x CPU throttle, Fast 3G) for the primary number, AND the **desktop** preset for the secondary number. Report both.
+
+If the `playwright` skill is not loaded in this session, load it now via the `skill` tool.
+
+### 2. 100 IN EVERY CATEGORY IS THE FLOOR.
+
+A 99 is a regression. A 95 is a fire. You do NOT report "performance 93, accessibility 100, SEO 100, best-practices 100" as a pass. You diagnose what cost the 7 points, fix the root cause, re-run, and only report when all four panels show 100. On mobile AND desktop.
+
+### 3. WIN THE SCORE IN THE ARCHITECTURE.
+
+Performance is decided at architecture and code-quality level. Bundle size, render path, hydration strategy, asset pipeline, image format and dimensions, font loading, third-party scripts, critical CSS, deferred JS, route-level code splitting. These are the LEVERS that move the score. Slapping `loading="lazy"` on a hero image is not optimization. It is panic.
+
+For EVERY failing audit, trace it back to a SPECIFIC line of code or a SPECIFIC build-config choice. Fix it at the source. No band-aids.
+
+### 4. NEVER WEAKEN UX TO BUY POINTS.
+
+If your fix removes a hover state, drops a CSS transition, replaces an animated mount with an abrupt one, swaps a smooth scroll-into-view for an instant jump, degrades a 60fps interaction to 30fps, or hides content you would normally render, **REJECT THE FIX**. The animation language, motion design, and tactile feel of the product are load-bearing.
+
+Find another way:
+
+- Split the bundle further (route-level, then component-level, then feature-flag-level).
+- Defer non-critical paint work to `requestIdleCallback`.
+- Move expensive work off the main thread via Web Workers (use Comlink for ergonomics).
+- Use the `View Transitions API` for cross-route transitions.
+- Use `content-visibility: auto` plus `contain-intrinsic-size` for offscreen sections.
+- Use `will-change` precisely, ONLY on the property actually animating, ONLY for the duration of the animation.
+- Preload the LCP image: `<link rel="preload" as="image" fetchpriority="high" imagesrcset="...">`.
+- HTTP/2 server-push or `<link rel="modulepreload">` for the critical chunk.
+- GPU-composited animations only (`transform`, `opacity`, `filter`). NEVER animate `width`, `height`, `top`, `left`, `margin`, `padding`.
+
+### 5. LOAD THE DESIGN RULESET IN LOCKSTEP.
+
+You **MUST** read the design ruleset (`../design/README.md`) alongside this one for any visual or layout work. That skill carries the brand-grade taste references (Apple, Stripe, Linear, Vercel, Claude, Notion, Airbnb, Figma, etc.) and the anti-AI-SaaS-slop posture.
+
+A page that scores 100 but looks like AI SaaS slop has failed. Speed serves design; design rides on speed. **Both win or neither does.**
+
+Use the design ruleset:
+
+- BEFORE writing JSX/CSS: pull a relevant brand reference to ground the visual direction.
+- DURING implementation: cross-check against the anti-slop guardrails.
+- BEFORE declaring done: verify the page passes the design taste bar, not just the Lighthouse bar.
+
+### 6. DESIGN SYSTEM COMPLIANCE IS NOT OPTIONAL.
+
+The design ruleset (`../design/README.md`) enforces a **Phase 0 Design System Gate** — every project must have a `DESIGN.md` before any UI work begins. This skill enforces the other side: **every audit must verify compliance.**
+
+During the audit loop, after Lighthouse scores pass, run a Design System Compliance check:
+
+- **Colors**: grep the codebase for raw hex/rgb values not declared in `DESIGN.md`. Each is a violation.
+- **Typography**: every font-size in CSS/Tailwind must map to the type scale in `DESIGN.md`. No arbitrary sizes.
+- **Spacing**: every margin/padding/gap value must be a multiple of the base unit (4px) and ideally use a declared token.
+- **Components**: any component used 2+ times must be documented in `DESIGN.md` Section 5. If it isn't, add it.
+- **Depth**: if `DESIGN.md` says "borders-only", there must be zero `box-shadow` declarations. If "tonal-shift", zero borders for surface separation.
+
+A page that scores Lighthouse 100 but uses 14 undeclared hex codes and 8 magic spacing values is **NOT DONE**. The design system is the architecture — Lighthouse measures the performance of that architecture.
+
+### 7. REACT-SPECIFIC PERF TOOLING IS PART OF THE AUDIT.
+
+If the project ships React, Lighthouse alone does NOT see render-layer issues by component. You MUST also run:
+
+- **`react-doctor`** (static): cheapest. `npx react-doctor@latest --json` before any browser audit. Treat perf-category findings as audit failures.
+- **`react-scan/lite`** (runtime, headless): injected via `page.addInitScript` in the Playwright run. Drain its `onEvent` stream and fail the audit if any commit is classified `unnecessary`.
+
+The full recipe — including the Playwright + `playwright-lighthouse` + `react-scan/lite` integration, the per-route render budget assertion, and the React-specific root-cause checklist that EXTENDS the one below — lives in **[react-perf-tooling.md](react-perf-tooling.md)**. Read it before any React audit.
+
+Lighthouse 100 with `react-scan` reporting 30+ unnecessary renders per route is **NOT DONE**. Both gates must clear: synthetic score AND render quality. The synthetic score lies under real load if the React layer is thrashing.
+
+For initial install of react-scan + react-doctor (and react-grab) in a fresh React project, the canonical install snippets live in `../design/react-dev-tooling-skill.md`. Use them if the project doesn't yet have the tools wired.
+
+## AUDIT WORKFLOW
+
+Quick audit via the cross-platform Python CLI (macOS, Linux, Windows):
+
+```bash
+uv run $SKILL_DIR/scripts/perfection/lighthouse-audit.py https://localhost:3000
+uv run $SKILL_DIR/scripts/perfection/lighthouse-audit.py https://localhost:3000 --threshold 95
+uv run $SKILL_DIR/scripts/perfection/lighthouse-audit.py https://localhost:3000 --desktop-only
+```
+
+Or use the TypeScript approach directly in your test suite:
+
+```ts
+// scripts/audit.ts
+import { chromium } from "playwright";
+import { playAudit } from "playwright-lighthouse";
+
+const browser = await chromium.launch({ channel: "chrome" });
+const context = await browser.newContext();
+const page = await context.newPage();
+await page.goto("http://localhost:3000/<route>");
+
+await playAudit({
+  page,
+  port: 9222,
+  thresholds: { performance: 100, accessibility: 100, "best-practices": 100, seo: 100 },
+  reports: { formats: { html: true, json: true }, name: "lighthouse-<route>" },
+  config: { extends: "lighthouse:default", settings: { formFactor: "mobile" } },
+});
+
+await browser.close();
+```
+
+Run twice per route: once `formFactor: "mobile"`, once `formFactor: "desktop"`. Both must hit 100/100/100/100.
+
+**Diagnose from the JSON report, not the HTML.** Parse `audits[*].score < 1` programmatically to find the offenders. Do not eyeball the HTML report.
+
+**Run 3-5 times and take the median.** A single audit can be noisy. CI must enforce the threshold on every PR.
+
+## ROOT-CAUSE CHECKLIST (HIT THESE FIRST, ALMOST ALWAYS THE CULPRIT)
+
+- **Render-blocking JS/CSS in the critical path.** Defer, code-split by route, inline critical CSS only.
+- **Unsized media.** Every `<img>`, `<video>`, `<iframe>` MUST have explicit `width`/`height` or an aspect-ratio container. Unsized media causes CLS.
+- **Wrong image format or dimensions.** Serve AVIF first, WebP fallback, JPEG last. Generate ALL responsive sizes in the build. NEVER ship an image larger than the rendered box. Use `fetchpriority="high"` on the LCP image.
+- **Fonts.** `font-display: swap` minimum, `optional` for non-critical fonts, preload the one critical font, subset to only the characters actually used.
+- **Third-party scripts in `<head>` synchronously.** Defer, lazy-load on first interaction, OR proxy through your own origin to remove a third-party DNS + TLS handshake from the critical path.
+- **Hydration on routes that do not need it.** React Server Components, islands, `client:load`, ONLY where the interactivity is real. Static routes ship zero JS.
+- **Missing semantic HTML.** `<button>` for buttons, `<a href>` for links, `<nav>` / `<main>` / `<header>` / `<footer>` landmarks, label every form input, alt-text every meaningful image, unique `<title>` per route.
+- **Tab order, focus rings, contrast ratios, prefers-reduced-motion, ARIA correctness.** Accessibility 100 means a screen-reader user can drive the page end-to-end without help.
+- **Meta tags.** `<title>`, `<meta name="description">`, OpenGraph, Twitter cards, structured data (JSON-LD), `lang` on `<html>`, `viewport`, canonical URL.
+
+## ANTI-PATTERNS. REJECT ON SIGHT.
+
+- Reporting a CLI Lighthouse score. **REJECT.** Tenet 1.
+- Removing an animation to fix INP. **REJECT.** Switch to a CSS-only transform/opacity animation. Debounce listeners. Move heavy work off the main thread.
+- Replacing a hero image with a placeholder to "fix" LCP. **REJECT.** Properly sized AVIF + `fetchpriority="high"` + preconnect to the image CDN is the actual fix.
+- Disabling JS for a route to "score 100". **REJECT.** Score 100 ON the JS-enabled production build, on a real user device profile.
+- Setting `display: none` on offscreen content to dodge audits. **REJECT.** Use `content-visibility: auto` plus proper lazy mounting. Never lie about the page.
+- Declaring victory after a single audit run. **REJECT.** Run 3-5 times, take the median. CI must enforce the threshold.
+- Scoring 100 on `localhost` and shipping without re-measuring against the deployed URL. **REJECT.** The CDN, real DNS, and real TLS handshake matter.
+
+## RESPONSE FORMAT (what to return when the user asks for a frontend audit or build)
+
+1. **Scores before / after**, mobile AND desktop, all four categories.
+2. **Design system compliance**: orphan tokens found / fixed, components documented.
+3. **Each fix** in one line, traceable to the audit it cleared.
+4. **What you intentionally did NOT do**, and why. Especially every tempting "easy point" you rejected to preserve UX.
+5. **Browser-based Design QA result**: breakpoints tested, visual bugs found/fixed, states verified.
+6. **The next audit you would run** if you had another iteration.
+
+If the run did not hit 100 in every category, you are NOT done. State so explicitly. Continue iterating.
+
+## MANTRA
+
+> **100 on every Lighthouse category, on a real browser, with full features and full animations intact. Or it is not done.**