@appsforgood/next-supabase-kit 0.4.2 → 0.4.4

package/examples/next-supabase-installed/.cursor/skills/testing-qa/SKILL.md

@@ -1,27 +1,68 @@
 ---
 name: testing-qa
-description: Use when adding unit, regression, or smoke tests. Visual proof of a screen always also uses browser-qa.
+description: Use when adding unit, regression, or smoke tests, or when someone says tests pass without listing commands. Visual proof of a screen always also uses browser-qa. RLS tests must fail when another user can read the row.
 ---
 
 # Testing QA
 
+This skill is **commands**. Screenshots live in `browser-qa`. Keyboard pass lives in `accessibility-wcag`. Policies live in `supabase-auth-rls`. Do not replace those.
+
 ## Use when
 
-Adding or reviewing tests, smoke checks, or regression coverage.
+Adding or reviewing tests, smoke, regression, “is this tested?”, or “tests pass.”
+
+## Do
+
+1. Name the kinds this change needs: unit, regression, smoke. Skip kinds that do not apply; do not skip RLS/auth when data is involved.
+2. Run the commands that already exist in this repo (`package.json` scripts). Do not invent a second test runner.
+3. For auth, RLS, or mutations: include a **negative** that fails when another user or anon can read or write the row.
+4. List what ran, the result, and gaps. If the harness is missing, name it; do not skip silently.
+5. User-visible work still goes to `browser-qa` (and `accessibility-wcag` for screens). Playwright `toBeVisible` is not that handoff.
+
+## Kinds
+
+| Kind | What | Not |
+| --- | --- | --- |
+| Unit | Core logic, schema validation, helpers | A screenshot |
+| Regression | Preserved behavior still holds | Rewriting the old test to match a bug |
+| Smoke | Critical path against a running app (login, primary workflow) | `browser-qa` image review |
+
+Smoke may use Playwright if the repo already has it. `toBeVisible` proves a node is in the DOM, not that the screen is correct.
+
+## Auth / RLS
+
+`supabase-auth-rls` owns the policy. This skill requires a test that would **fail** if another signed-in user can `select` / `update` / `delete` the row, or if anon can read a private row. A hidden button is not a test of access.
+
+Shape (adapt to the repo’s harness):
+
+```ts
+// Must fail the job if RLS is missing or too open
+const { data } = await asOtherUser().from("widgets").select().eq("id", ownerRowId);
+expect(data ?? []).toHaveLength(0);
+```
+
+`ENABLE ROW LEVEL SECURITY` without that negative is not coverage.
+
+If the change is App Router, Auth/RLS, or a migration, tests must cover those contracts. This skill does not replace `nextjs-app-router`, `supabase-auth-rls`, `postgres-migrations`, or `owasp-security-review`.
 
-## Checks
+## Evidence
 
-- Core logic has unit tests.
-- Preserved behavior has regression tests.
-- Critical flows have Playwright or equivalent smoke tests.
-- Auth, RLS, and mutation paths are prioritized (other-user / anon cannot pass).
-- Network failure, empty, and error behavior is covered.
-- Gaps are named when infrastructure is missing.
+```text
+commands:
+  - npx vitest run tests/rls.test.ts   # pass
+  - npm run smoke:install              # pass
+gaps: no Playwright harness yet; named
+```
 
-## Visual proof
+## Reject
 
-User-visible screens also require `browser-qa`. This skill does not replace screenshots. Passing `toBeVisible` is not image review.
+- `toBeVisible` (or “the test found the button”) as visual proof. Use `browser-qa`.
+- “Tests pass” with no command list and no results.
+- Skipping RLS/auth tests because “it’s just a table” or “we’ll add tests later.”
+- Replacing `browser-qa` or `accessibility-wcag` with this skill.
+- A green suite that would still pass if another user could read the row.
+- Adding Playwright as a required install of this kit. Use it when the repo already has it.
 
 ## Done when
 
-Commands run, results, and residual gaps are listed. RLS/auth tests fail closed when another user can read the row.
+Commands run, results, and residual gaps are listed. RLS/auth tests fail closed when another user or anon can read the row. User-visible work still has `browser-qa` evidence.

package/examples/next-supabase-installed/AGENTS.md

@@ -16,6 +16,7 @@ A user-visible change is not done until someone opened the running UI, captured
 | Implement Next.js or Supabase | `@app-engineer` |
 | Auth, RLS, secrets, OWASP | `@security` |
 | UI looks wrong / generic | `@design` |
+| Style guide / first UI / no DESIGN.md | `@design` (setup) |
 | Is this done? | `@qa` |
 | Headlines, CTAs, empty states | `@copy` |
 
@@ -23,7 +24,7 @@ Do not ask one chat to be all six.
 
 ## Handoff
 
-Planner names the owner. Security joins auth/data/secret work. Design joins user-facing screens. QA joins any behavior or UI change and **must use the browser**. Copy joins public/conversion copy. Stop there.
+Planner names the owner. Security joins auth/data/secret work. Design joins user-facing screens and first-run style-guide setup. QA joins any behavior or UI change and **must use the browser**. Copy joins public/conversion copy. Stop there.
 
 ## Skills
 

package/examples/next-supabase-installed/USER_GUIDE.html

@@ -220,12 +220,15 @@
       }
 
       .rule {
-        border-left: 4px solid var(--safelight);
         padding: 0.7rem 0.9rem;
-        background: #1a1814;
+        background: #23160f;
         margin: 0 0 1.4rem;
       }
 
+      .rule strong {
+        color: var(--safelight);
+      }
+
       .steps {
         display: grid;
         gap: 0.85rem;
@@ -506,6 +509,14 @@
                 <button class="copy" type="button" data-copy-from="plan-prompt">Copy Planner prompt</button>
               </div>
             </article>
+            <article class="ticket">
+              <header><span>New repo — paste this to Design so it asks what you need</span></header>
+              <pre id="design-setup-prompt">
+Act as design. This is a new repo. Scan what is already here, then ask me what we need to set up: who it is for, what they must get done, and what you should produce. Recommend from my answers. Write the style guide and principles with me before any CSS.</pre>
+              <div class="copy-row">
+                <button class="copy" type="button" data-copy-from="design-setup-prompt">Copy Design setup prompt</button>
+              </div>
+            </article>
           </div>
           <p>
             You should get a named owner (<code>app-engineer</code>, <code>security</code>, <code>design</code>, <code>qa</code>, or <code>copy</code>) and, if
@@ -541,6 +552,10 @@
               <td>It looks wrong</td>
               <td>Design</td>
             </tr>
+            <tr>
+              <td>Style guide / first UI / no DESIGN.md</td>
+              <td>Design (<code>setup</code>)</td>
+            </tr>
             <tr>
               <td>Is this done?</td>
               <td>QA</td>
@@ -583,11 +598,11 @@
             </tr>
             <tr>
               <td><code>frontend-design</code></td>
-              <td>Layout, simple palette, anti-generic UI</td>
+              <td>Setup, build, review, or detect UI. Tokens first. Anti-generic</td>
             </tr>
             <tr>
               <td><code>accessibility-wcag</code></td>
-              <td>Keyboard, contrast, labels</td>
+              <td>Keyboard pass in the running browser. Contrast, labels. Not a screenshot guess</td>
             </tr>
             <tr>
               <td><code>browser-qa</code></td>
@@ -595,7 +610,7 @@
             </tr>
             <tr>
               <td><code>testing-qa</code></td>
-              <td>Unit / regression / smoke only</td>
+              <td>Unit / regression / smoke. List commands run. Not screenshots</td>
             </tr>
             <tr>
               <td><code>product-copy</code></td>
@@ -612,8 +627,9 @@
           </tbody>
         </table>
         <p>
-          QA of a screen always uses <code>browser-qa</code>, not <code>testing-qa</code> alone. Each agent file names the skills it must run, then points at
-          <code>catalog.json</code> for the rest.
+          QA of a screen always uses <code>browser-qa</code>, not <code>testing-qa</code> alone. User-facing screens also run
+          <code>accessibility-wcag</code> (keyboard in the browser, not a contrast guess from the screenshot). Each agent file names the skills it must run,
+          then points at <code>catalog.json</code> for the rest.
         </p>
       </section>
 
@@ -677,17 +693,45 @@ Act as the QA agent. Use the browser-qa skill. Do not review code alone. Open th
           <li>Planner — paste the prompt on ticket 03.</li>
           <li>App engineer — <code>Implement the plan. Smoke the changed route in the browser before you hand off.</code></li>
           <li>Security if data, auth, or secrets changed.</li>
-          <li>Design if the UI changed — <code>Review the running UI from screenshots first. Desktop and mobile. Reject generic AI-looking layout.</code></li>
-          <li>QA — paste the good prompt below.</li>
+          <li>
+            Design if the UI changed —
+            <code
+              >Act as design. Name the mode (setup, build, review, or detect). Review the running UI from screenshots first. Desktop and mobile. Reject generic
+              AI-looking layout.</code
+            >
+            If <code>DESIGN.md</code> is missing, run setup first.
+          </li>
+          <li>QA — paste the good prompt below. For screens, also run <code>accessibility-wcag</code>.</li>
         </ol>
-        <p>Done when QA attaches both frames plus a verdict.</p>
+        <p>Done when QA attaches both frames plus a verdict, and the changed flow passed a keyboard-only check.</p>
         <h3>Auth / RLS</h3>
         <p>
           Planner → App engineer → Security → QA. QA must open login, logout, and denied in the browser. Screenshots still required when the finding is
           user-visible.
         </p>
+        <h3>New repo design setup</h3>
+        <p>After <code>init</code>, before the first product CSS, paste to Design:</p>
+        <pre id="design-setup-flow">
+Act as design. This is a new repo. Scan what is already here, then ask me what we need to set up: who it is for, what they must get done, and what you should produce. Recommend from my answers. Write the style guide and principles with me before any CSS.</pre>
+        <div class="copy-row">
+          <button class="copy" type="button" data-copy-from="design-setup-flow">Copy Design setup prompt</button>
+        </div>
+        <p>
+          Design scans the stack, then asks what you need. Recommendations come from those answers. It writes a short product <code>DESIGN.md</code> and
+          frontend <code>STYLE_GUIDE.md</code> rules only after that. It does not paste this kit’s charcoal desk onto the app. Screenshots wait until there is a
+          screen to capture.
+        </p>
         <h3>UI polish</h3>
-        <p>Design + <code>frontend-design</code> + <code>browser-qa</code>. Desktop and mobile. One happy-path shot is a fail.</p>
+        <p>
+          Design + <code>frontend-design</code> + <code>accessibility-wcag</code> + <code>browser-qa</code>. Name setup, build, review, or detect. Desktop and
+          mobile once a screen exists. One happy-path shot is a fail. A contrast guess from the screenshot is a fail.
+        </p>
+        <h3>Accessibility pass</h3>
+        <p>On any user-facing screen, paste to Design or QA:</p>
+        <pre id="a11y-prompt">Run accessibility-wcag. Open the changed flow. Keyboard-only pass. Do not accept contrast from the screenshot alone.</pre>
+        <div class="copy-row">
+          <button class="copy" type="button" data-copy-from="a11y-prompt">Copy accessibility prompt</button>
+        </div>
         <h3>Copy pass</h3>
         <p>Copy reviews the <em>rendered</em> words in screenshots, not strings in TSX. Run <code>product-copy</code>, then <code>deslop</code> last.</p>
       </section>
@@ -713,8 +757,9 @@ Do not review code alone. Open the app, capture desktop and mobile screenshots,
           <li>Open the changed route with the real auth, role, and data.</li>
           <li>Capture desktop (~1280) and mobile (~390) into <code>qa-evidence/&lt;yyyy-mm-dd&gt;-&lt;slug&gt;/</code>.</li>
           <li><strong>Read the images.</strong> List blockers from what is on screen.</li>
-          <li>Run applicable tests. <code>toBeVisible</code> is not a screenshot.</li>
-          <li>Write <code>notes.md</code> with route, viewports, auth state, verdict.</li>
+          <li>Keyboard-only the changed flow (<code>accessibility-wcag</code>). Do not accept contrast from the screenshot alone.</li>
+          <li>Run applicable tests (<code>testing-qa</code>). List the commands. <code>toBeVisible</code> is not a screenshot.</li>
+          <li>Write <code>notes.md</code> with route, viewports, auth state, keyboard result, commands run, verdict.</li>
         </ol>
         <p>Cursor: built-in browser first. Claude, Codex, Copilot, Antigravity: host browser if present, otherwise:</p>
         <pre id="pw-cmd">
@@ -763,6 +808,10 @@ npx agent-kit update</pre>
               <td>QA finished from the diff</td>
               <td>Reject it. Re-run with the good QA prompt.</td>
             </tr>
+            <tr>
+              <td>GitHub shows this page as code</td>
+              <td>Open <code>USER_GUIDE.html</code> in a browser, or run <code>npx agent-kit guide</code>. GitHub does not render the layout.</td>
+            </tr>
             <tr>
               <td><code>doctor</code> fails the guide</td>
               <td>The screenshot fail-closed sentence must stay in <code>USER_GUIDE.md</code> and this page.</td>

package/examples/next-supabase-installed/USER_GUIDE.md

@@ -23,6 +23,12 @@ Plan this change. Name the owning agent, extra reviewers, and which screenshots
 
 You should get a named owner (`app-engineer`, `security`, `design`, `qa`, or `copy`) and, if the work is user-visible, a desktop + mobile screenshot list.
 
+If this repo has no product `DESIGN.md` yet, also paste to Design:
+
+```text
+Act as design. This is a new repo. Scan what is already here, then ask me what we need to set up: who it is for, what they must get done, and what you should produce. Recommend from my answers. Write the style guide and principles with me before any CSS.
+```
+
 ## How to invoke in each IDE
 
 ### Cursor
@@ -73,6 +79,7 @@ Files: `.antigravity/agent-kit/commands/*.toml`, `.antigravity/runtime-skills/*/
 | Implementation | App engineer |
 | Auth / RLS / secrets | Security |
 | It looks wrong | Design |
+| Style guide / first UI / no DESIGN.md | Design (`setup`) |
 | Is this done? | QA |
 | Landing / CTA words | Copy |
 
@@ -87,15 +94,15 @@ Do not ask one chat to be all six. Planner names the next specialist. It does no
 | `supabase-auth-rls` | Auth, RLS, service role, Storage |
 | `postgres-migrations` | Schema, constraints, RLS in the same change |
 | `owasp-security-review` | Mutations, uploads, SSRF, secrets |
-| `frontend-design` | Layout, simple palette, anti-generic UI |
-| `accessibility-wcag` | Keyboard, contrast, labels |
+| `frontend-design` | Setup, build, review, or detect UI. Tokens first. Anti-generic |
+| `accessibility-wcag` | Keyboard pass in the running browser. Contrast, labels. Not a screenshot guess |
 | `browser-qa` | Any screen. Required for QA of UI |
-| `testing-qa` | Unit / regression / smoke only |
+| `testing-qa` | Unit / regression / smoke. List commands run. Not screenshots |
 | `product-copy` | Headlines and CTAs |
 | `deslop` | Last copy pass. Copy always runs this |
 | `ship` | Release, env, rollback |
 
-QA of a screen always uses `browser-qa`, not `testing-qa` alone. Each agent file names the skills it must run, then points at `catalog.json` for the rest.
+QA of a screen always uses `browser-qa`, not `testing-qa` alone. User-facing screens also run `accessibility-wcag` (keyboard in the browser, not a contrast guess from the screenshot). Each agent file names the skills it must run, then points at `catalog.json` for the rest.
 
 ## Standard workflows
 
@@ -104,18 +111,36 @@ QA of a screen always uses `browser-qa`, not `testing-qa` alone. Each agent file
 1. **Planner** — paste: `Plan this change. Name the owning agent, extra reviewers, and which screenshots QA must capture. Do not write code.`
 2. **App engineer** — paste: `Implement the plan. Smoke the changed route in the browser before you hand off.`
 3. **Security** if data/auth/secrets changed.
-4. **Design** if the UI changed — paste: `Review the running UI from screenshots first. Desktop and mobile. Reject generic AI-looking layout.`
-5. **QA** — paste: `Do not review code alone. Open the app, capture desktop and mobile screenshots, read the images, then give accept / accept-with-nits / reject.`
+4. **Design** if the UI changed — paste: `Act as design. Name the mode (setup, build, review, or detect). Review the running UI from screenshots first. Desktop and mobile. Reject generic AI-looking layout.` If `DESIGN.md` is missing, run setup first.
+5. **QA** — paste: `Do not review code alone. Open the app, capture desktop and mobile screenshots, read the images, then give accept / accept-with-nits / reject.` For screens, also run `accessibility-wcag`.
 
-Done when QA attaches `qa-evidence/<date>-<slug>/desktop.png` and `mobile.png` plus a verdict.
+Done when QA attaches `qa-evidence/<date>-<slug>/desktop.png` and `mobile.png` plus a verdict, and the changed flow passed a keyboard-only check.
 
 ### Auth / RLS change
 
 Planner → App engineer → Security → QA. QA must open login/logout/denied in the browser and still run tests. Screenshots required when the finding is user-visible.
 
+### New repo design setup
+
+After `init`, before the first product CSS, paste to Design:
+
+```text
+Act as design. This is a new repo. Scan what is already here, then ask me what we need to set up: who it is for, what they must get done, and what you should produce. Recommend from my answers. Write the style guide and principles with me before any CSS.
+```
+
+Design scans the stack, then asks what you need. Recommendations come from those answers. It writes a short product `DESIGN.md` and frontend `STYLE_GUIDE.md` rules only after that. It does not paste this kit’s charcoal desk onto the app. Screenshots wait until there is a screen to capture.
+
 ### UI polish
 
-Design + `frontend-design` + `browser-qa`. Desktop and mobile required. One happy-path shot is a fail.
+Design + `frontend-design` + `accessibility-wcag` + `browser-qa`. Name setup, build, review, or detect. Desktop and mobile required once a screen exists. One happy-path shot is a fail. A contrast guess from the screenshot is a fail.
+
+### Accessibility pass
+
+On any user-facing screen, paste to Design or QA:
+
+```text
+Run accessibility-wcag. Open the changed flow. Keyboard-only pass. Do not accept contrast from the screenshot alone.
+```
 
 ### Copy pass
 
@@ -141,8 +166,9 @@ Steps the QA agent must follow:
 2. Open the changed route with the real auth/role/data state.
 3. Capture desktop (~1280) and mobile (~390) into `qa-evidence/<yyyy-mm-dd>-<slug>/`.
 4. **Read the images.** List blockers from what is on screen.
-5. Run applicable tests.
-6. Write `notes.md` with route, viewports, auth state, verdict.
+5. Keyboard-only the changed flow (`accessibility-wcag`). Do not accept contrast from the screenshot alone.
+6. Run applicable tests (`testing-qa`). List the commands. `toBeVisible` is not a screenshot.
+7. Write `notes.md` with route, viewports, auth state, keyboard result, commands run, verdict.
 
 Cursor: use the built-in browser first. Claude / Codex / Copilot / Antigravity: use the host browser if present, otherwise Playwright:
 
@@ -179,5 +205,6 @@ Pristine files refresh. Local edits win or land in `.agent-kit/conflicts/`. Do n
 | Skill not triggering | Mention the skill name (`browser-qa`) or `@` it in Cursor. |
 | No browser in Copilot / Codex | Use the Playwright commands in `browser-qa`. |
 | QA finished from the diff | Reject it. Re-run with the good QA prompt above. |
+| GitHub shows `USER_GUIDE.html` as code | Open the file in a browser. Run `npx agent-kit guide` to print the path. GitHub does not render the layout. |
 | `doctor` fails USER_GUIDE | The screenshot fail-closed sentence must stay in this file. |
 | Still have `QUALITY_GATES.md` / `COUNCIL.md` | Expected. `update` does not delete them. `doctor` lists leftovers. |

package/examples/next-supabase-installed/skills/accessibility-wcag/SKILL.md

@@ -1,26 +1,83 @@
 ---
 name: accessibility-wcag
-description: Use for keyboard, focus, labels, contrast, semantics, and WCAG 2.1 AA checks on user-facing screens.
+description: Use when the user can't tab, a screen reader misses a control, contrast fails, a modal traps focus, or you need a WCAG 2.1 AA pass. Keyboard in the running browser, not a screenshot guess.
 ---
 
 # Accessibility (WCAG 2.1 AA)
 
+Scan 2026-09-12 (structure only, no bodies copied): W3C WCAG 2.1 AA; GitHub packs that split keyboard / contrast / forms into specialist swarms. This pack keeps **one** skill. Do not install axe, Pa11y, an a11y MCP, or an 11-agent accessibility roster. Visual proof stays in `browser-qa`. Access control stays in `supabase-auth-rls` — hiding a control is not an accessibility pass and not authorization.
+
 ## Use when
 
-Interactive UI, forms, navigation, or any screen a keyboard or screen-reader user will use.
+Interactive UI, forms, navigation, dialogs, menus, tables, or any screen a keyboard or screen-reader user will use. Also when someone says “can't tab”, “contrast looks fine”, “add aria”, “WCAG”, or “is this accessible?”
+
+Not a substitute for `frontend-design` (look and tokens) or `owasp-security-review` (auth). Run those as their owners; this skill is the keyboard-and-semantics pass.
+
+## Do
+
+1. Open the **running** changed flow. Name the route, auth state, and what the user must finish.
+2. Keyboard-only: Tab, Shift+Tab, Enter, Space, and Escape. Record traps, missing focus, and controls you cannot reach.
+3. Check the mapping table. Skip rows that do not apply; do not skip keyboard because “it's a mouse app.”
+4. Capture desktop (~1280) and mobile (~390) for `browser-qa`. Screenshots help for contrast and target size; they do not replace step 2.
+5. Return a findings table (P0 / P1 / P2) with where it showed up and whether it is **code-certain** or **inferred**.
 
 ## Checks
 
-- Semantic headings, landmarks, and labels.
-- Keyboard order matches visual order; focus is visible.
-- Contrast meets 4.5:1 for text.
-- Tap targets are usable on mobile.
-- Errors are announced; motion is not the only signal.
+Map the change to a concrete control. Skip rows that do not apply.
+
+| Area | In this pack |
+| --- | --- |
+| Semantics (1.3.1) | Real headings, landmarks, lists, and buttons. One `h1`. ARIA only when native HTML cannot. |
+| Keyboard (2.1.1, 2.1.2, 2.4.3, 2.4.7) | Tab order matches visual order. Focus is visible. No trap except a real dialog. Escape closes overlays. |
+| Contrast (1.4.3, 1.4.11) | 4.5:1 normal text, 3:1 large text and UI chrome. Do not sign off from the screenshot alone. |
+| Color (1.4.1) | Color or a left-edge rail is not the only selected / error / success signal. |
+| Forms (3.3.1–3.3.3) | Visible `<label htmlFor>`. Errors associated (`aria-describedby` / `aria-invalid`) and announced. |
+| Name, Role, Value (4.1.2) | Custom controls expose name, role, and state. A `div` with an onClick is a finding. |
+| Status (4.1.3) | Save, error, and loading results are announced (live region or a focus move). |
+| Non-text (1.1.1) | `next/image` (and other images) have meaningful `alt`. Decorative images use empty `alt`. |
+| Bypass (2.4.1) | Skip link or landmarks so repeating chrome is skippable. Kit HTML already has a skip link. |
+| Motion | Honor `prefers-reduced-motion`. Motion is not the only signal. |
+| Targets | Taps are usable on mobile. WCAG 2.1 AA does not require 2.2’s 24×24 rule; this pack still rejects unusable hits. |
+| Auth vs a11y | A hidden button is not an a11y fix for unauthorized users. Enforce access in RLS / the server. |
+
+## App Router mapping
+
+- **Server Action forms:** every field has a label. Validation errors render in the UI, bound to the field, not only a thrown Error. Disabled submit is explained; `disabled` removes the control from the tab order — do not use it as the only “you cannot do this” hint if the user still needs to reach help text.
+- **Dialogs / sheets:** labelled (`aria-labelledby` or visible title), focus moves in, Tab cycles inside, Escape closes, focus returns to the opener.
+- **Menus / disclosure:** keyboard opens and closes; collapsed content is not in the tab order.
+- **`next/image`:** `alt` describes the image’s job, not the filename.
+- **Kit HTML (`USER_GUIDE.html`):** keep the skip link and safelight `:focus-visible` outline. Do not add `border-left` selection rails. Do not drop `lang` on `<html>`.
+
+Field checklist: `checklists/accessibility.md`.
 
 ## Tools
 
-Confirm in the running browser. Screenshots help for contrast and target size; keyboard must still be exercised.
+Confirm in the running browser. Preferred: host IDE browser. Playwright is backup for capture, not a substitute for Tab.
+
+Screenshots are evidence for contrast, clipping, and target size. **Keyboard must still be exercised.** Optional automated scanners (axe, Pa11y) may run *after* the keyboard pass; they are not the pass.
+
+Visual proof: `browser-qa` (`qa-evidence/<date>-<slug>/` plus `notes.md`). Record keyboard results in `notes.md`:
+
+```text
+keyboard: tab-order pass|fail; focus-visible pass|fail; trap none|expected-modal|unexpected
+contrast: measured|inferred-from-screenshot
+```
+
+`inferred-from-screenshot` is not enough to accept.
+
+## Reject
+
+- “Contrast looks fine in the screenshot” without a keyboard pass.
+- Approving from TSX, ARIA comments, or a Storybook file without opening the running UI.
+- Color or a left-edge rail as the only selected / error / success signal.
+- Installing axe, Pa11y, or an accessibility MCP as the required tool.
+- Copying a third-party accessibility skill body or standing up an a11y-agent swarm.
+- Treating a hidden control as the accessibility fix for a user who is not allowed to act (that is `supabase-auth-rls`).
+- A modal that does not restore focus, or that traps the page with no Escape.
+- `aria-label` that contradicts visible text.
+- Skipping keyboard because the flow is “mouse-only” or “admin-only.”
+- Kit HTML: dropping the skip link or the `:focus-visible` outline.
 
 ## Done when
 
-A keyboard-only pass works on the changed flow and remaining gaps are named.
+A **keyboard-only pass works on the changed flow in the running UI**. Tab order matches visual order. Focus is visible. Remaining gaps are named with severity and code-certain vs inferred. Visual proof is in `browser-qa` evidence. Contrast was not signed off from the screenshot alone.

package/examples/next-supabase-installed/skills/browser-qa/SKILL.md

@@ -54,6 +54,7 @@ Use the host browser when it exists. Playwright is required text for Claude, Cod
 - Playwright `toBeVisible` with no image.
 - Updating screenshot baselines without saying what changed in the picture.
 - Skipping mobile, or skipping auth/empty/error when those states exist.
+- “Contrast looks fine in the screenshot” with no keyboard-only pass (`accessibility-wcag`).
 
 ## Screenshot critique
 

package/examples/next-supabase-installed/skills/deslop/SKILL.md

@@ -38,7 +38,7 @@ Second pass: re-read the rewrite. If the same tell remains, rewrite the paragrap
 
 ## Visual P0s — fail if still on screen
 
-These are the 2026 convergence cluster. One is a smell. Two or more is a reject.
+These are the 2026 flat AI/SaaS chrome cluster (same family as accent-border cards, glow rails, and card soup). One is a smell. Two or more is a reject. A pick-list row or status well with a left stroke is already a fail.
 
 - Purple-to-blue (or indigo) gradient hero, or gradient-clipped headline type
 - Inter / Roboto / default shadcn zinc as the whole identity
@@ -48,6 +48,12 @@ These are the 2026 convergence cluster. One is a smell. Two or more is a reject.
 - Acid green or neon vermilion on near-black used as decoration, not meaning
 - Lucide Sparkles / Zap as the product metaphor
 - Fake dashboard metrics or DiceBear avatars
+- Left accent bars / left-hand borderlines on selected rows, list items, cards, or success/error/warn wells (the “colored stroke on the left edge” pattern)
+- Thick one-sided colored borders, glow rails, neon strokes, or gradient borders used as the main state cue
+
+Selection must use radio/checkbox + light row tint (or weight/space) only. Status wells may use a flat tint fill. No `border-left` accent, no inset bar, no vertical rail as decoration. Keep one accent for the primary CTA, not as a row edge.
+
+**Acceptance fixture:** a pick-list row and a “verified” well must pass with **zero** left border accents. If screenshots show a blue/green/amber left stroke, deslop fails.
 
 Copy does not restyle the page. It lists the P0s from the screenshot and sends them to Design.