@fringetools/cli 0.6.0 → 0.6.1

package/README.md

@@ -29,7 +29,7 @@ Prefer a permanent command? `npm install -D @fringetools/cli`, then `npx fringe
 | `fringe verify [--handoff file] [--json]` | **Proof it was done.** Re-checks everything the hand-off covered and reports `complete` / `partial` / `regressed`: errors fixed, remaining, introduced, and how many findings were silenced with `fringe-ignore` since. Exit `0` only when `complete` (`fringe/verify.v1`). |
 | `fringe plan [dir\|file] [--scan url] [--json] [--limit n]` | **Fix order for a repo with many findings**: P0 (errors in shared components or critical paths) → P1 (other errors, mechanical first) → P2 review → P3 polish, each cluster with its fix recipe. Never gates (exit 0). `--scan <url>` adds the live page's runtime findings to the same plan (one cluster per axe rule, with element selectors). `--json` = `fringe/plan.v1`. |
 | `fringe explain [FR-203]` | Why a rule matters, the preferred fix and the tempting fix to avoid. No id lists all 36 rules. |
-| `fringe explain pattern [form]` | Build-time best-practice checklist for a component type (`form`, `modal`, `navigation`, `data-view`); each item is marked *verified* (a rule checks it) or *judged*. |
+| `fringe explain pattern [name]` | Build-time best-practice checklist for a component type: `form`, `auth` (sign in and sign up), `checkout`, `table`, `modal`, `navigation`, `data-view`. 48 items; each is marked *verified* (a static rule, or `by scan` for a running page) or *judged*. |
 | `fringe check --json` | Full report as JSON, schema `fringe/check.v1` (stack, files, findings, counts, score). |
 | `fringe check --claude-hook` | **For Claude Code hooks.** Silent when clean; on errors prints `{"decision":"block","reason":…}` (exit 0) so the agent sees and fixes them. |
 | `fringe check --hook` | One-line `fringe/hook.v1` JSON for CI / pre-commit. Exits `1` on errors. Claude Code does **not** feed this back — use `--claude-hook` for agents. Wins over `--json`. |

package/dist/bin.js

@@ -1,7 +1,7 @@
 #!/usr/bin/env node
 import {
   runCli
-} from "./chunk-JJI65ERU.js";
+} from "./chunk-BCK7LSHQ.js";
 
 // src/bin.ts
 process.exitCode = await runCli(process.argv.slice(2));

package/dist/{chunk-JJI65ERU.js → chunk-BCK7LSHQ.js}

@@ -4,7 +4,7 @@ import { existsSync as existsSync5, readFileSync as readFileSync11, statSync } f
 import { dirname as dirname3, join as join12, resolve } from "path";
 
 // src/version.ts
-var VERSION = "0.6.0";
+var VERSION = "0.6.1";
 
 // src/check.ts
 import { readFileSync as readFileSync5 } from "fs";
@@ -2090,7 +2090,7 @@ var PATTERNS = {
     title: "Form",
     items: [
       { text: "Every field has a visible <label> bound with htmlFor/id", rules: ["FR-203"] },
-      { text: "Right input type and autocomplete (email, tel, current-password, new-password, name)", rules: ["FR-216"] },
+      { text: "Right input type and autocomplete (email, tel, current-password, new-password, name) (Fringe checks email, phone and password fields)", rules: ["FR-216"] },
       { text: "Required fields are marked in text, not by color alone" },
       { text: "Errors appear next to the field in words, linked with aria-describedby and aria-invalid; focus moves to the first error on submit" },
       { text: "The submit button shows a pending state and cannot be double-submitted" },
@@ -2118,6 +2118,48 @@ var PATTERNS = {
       { text: "Tap targets are large enough", rules: ["FR-305"] }
     ]
   },
+  auth: {
+    title: "Sign in and sign up",
+    items: [
+      { text: "Every field has a visible <label> bound with htmlFor/id (no placeholder-only fields)", rules: ["FR-203"] },
+      { text: "Right input types and autocomplete: username or email, current-password (sign in), new-password (sign up), one-time-code for codes (Fringe checks email, phone and password fields)", rules: ["FR-216"] },
+      { text: "Social and single-sign-on buttons carry text naming the provider, not just a logo", rules: ["FR-202"] },
+      { text: '"Forgot password" is a real link with descriptive text', rules: ["FR-217"] },
+      { text: "Password rules are shown before typing, not only after a failure; the user can reveal the password with a named toggle" },
+      { text: 'A failed sign-in says "email or password is incorrect" (never which one), keeps the email, and moves focus to the message' },
+      { text: "The submit button shows a pending state and cannot be double-submitted; pasting a password is allowed" },
+      { text: "The page has a title and a language (checked on full HTML pages), and keyboard focus never gets stuck (checked by scan)", rules: ["FR-218", "FR-401"] },
+      { text: "The whole flow, including the reveal toggle and any code entry, works with the keyboard alone" }
+    ]
+  },
+  checkout: {
+    title: "Checkout and payment",
+    items: [
+      { text: "Every field has a visible label", rules: ["FR-203"] },
+      { text: "Address and card fields use the standard autocomplete tokens (name, street-address, postal-code, cc-number, cc-exp, cc-csc)" },
+      { text: "The full price, including shipping, tax and any recurring cost, is visible before the pay button", rules: ["FR-214"] },
+      { text: "No pre-checked marketing or consent boxes", rules: ["FR-211"] },
+      { text: "No fake countdowns or manufactured urgency", rules: ["FR-210"] },
+      { text: "Declining an upsell or add-on is a neutral choice with neutral wording", rules: ["FR-212"] },
+      { text: "A payment failure says what failed in plain words, keeps the cart and the entered details, and offers a retry", rules: ["FR-215"] },
+      { text: 'The pay button states the action and amount ("Pay $42.00"), shows a pending state, and cannot charge twice' },
+      { text: "Order-summary changes (quantity, coupon, shipping) are announced to screen readers (aria-live)" },
+      { text: "Progress through the steps is shown, and going back never loses what was entered" },
+      { text: "Tap targets are large enough on a phone", rules: ["FR-305"] }
+    ]
+  },
+  table: {
+    title: "Data table",
+    items: [
+      { text: "A real <table> with <th> headers (scope set) and a caption or accessible name" },
+      { text: "Sortable headers are buttons, and the sorted column carries aria-sort" },
+      { text: 'Row-action icon buttons have names ("Delete invoice 1042"), and each row checkbox is labelled', rules: ["FR-202", "FR-203"] },
+      { text: "Loading, empty (with a next step) and error (with a retry) states", rules: ["FR-208", "FR-215"] },
+      { text: "Filters and the search box are labelled", rules: ["FR-203"] },
+      { text: "A wide table scrolls inside its own container instead of making the whole page scroll sideways at 320px", rules: ["FR-404"] },
+      { text: "Updated results after a filter or sort are announced (aria-live), and keyboard focus is not lost" }
+    ]
+  },
   "data-view": {
     title: "Data view (list, table, dashboard)",
     items: [
@@ -2132,7 +2174,7 @@ function renderPatterns(name) {
   if (!name) return Object.entries(PATTERNS).map(([k, p2]) => `${k.padEnd(11)} ${p2.title}`).join("\n");
   const p = PATTERNS[name.toLowerCase()];
   if (!p) return void 0;
-  const mark = (i) => i.rules ? `[verified: ${i.rules.join(", ")}]` : "[judged]";
+  const mark = (i) => i.rules ? `[verified${i.rules.every((r) => /^FR-40[0-5]$/.test(r)) ? " by scan" : ""}: ${i.rules.join(", ")}]` : "[judged]";
   return [
     `${p.title}: build it like this`,
     ...p.items.map((i) => `- ${i.text}  ${mark(i)}`),

package/dist/index.js

@@ -1,6 +1,6 @@
 import {
   runCli
-} from "./chunk-JJI65ERU.js";
+} from "./chunk-BCK7LSHQ.js";
 export {
   runCli
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fringetools/cli",
-  "version": "0.6.0",
+  "version": "0.6.1",
   "license": "MIT",
   "type": "module",
   "bin": {

package/skill/fringe/SKILL.md

@@ -9,7 +9,7 @@ Command: use `fringe` if it is on the PATH, otherwise `npx -y @fringetools/cli@0
 
 Ponytail trims your code. Fringe handles your edges. Work the ladder in order.
 
-0. **Building a form, modal, navigation or data view?** Run `fringe explain pattern <form|modal|navigation|data-view>` first: a short best-practice checklist, each item marked verified (Fringe checks it) or judged (you decide and say why).
+0. **Building a form, sign-in, checkout, table, modal, navigation or data view?** Run `fringe explain pattern <form|auth|checkout|table|modal|navigation|data-view>` first: a short best-practice checklist, each item marked verified (Fringe checks it) or judged (you decide and say why).
 1. **Flow (judged).** Before building, ask what the user can skip. Cut steps, screens or options nobody needs. Write each decision with its evidence to `.fringe/manifest.json`: `{"flows":[{"action":"cut"|"kept","what":"...","evidence":"..."}]}`. No evidence, no cut.
 2. **Edges (verified, gates).** After every edit the hook runs `fringe check --claude-hook` and feeds errors back to you. Fix every listed finding. If there is no hook, run `fringe check --hook` yourself from the project root and do not finish while `block` is `true`.
    On a repo with many existing findings, run `fringe plan` and work it batch by batch (shared components first, since one fix clears many uses), re-running `fringe check` after each batch. `fringe explain <rule>` gives the recipe and what to avoid.

package/skill/fringe-help/SKILL.md

@@ -31,6 +31,7 @@ Fringe checks agent-written frontends for accessibility, state, dark-pattern and
 | `handoff` / `verify` | Work order for another agent or CI, and proof it was done (complete / partial / regressed) |
 | `rules` | Per rule: open / baselined / silenced, to spot rules that do not suit this repo |
 | `init --for <agents>` / `--git` | Rules file for Codex, Cursor, Copilot, Gemini…; commit gate for any agent |
+| `explain pattern <name>` | Checklist for form, auth, checkout, table, modal, navigation, data-view |
 | `explain [FR-203]` | Why a rule matters and how to fix it well |
 | `check --record [--manifest f]` | Append the run to `.fringe/ledger.jsonl` |
 | `init` | Add the hook and install the skills |