Skip to content
GitHub
Sections

Reference · Things to avoid

Self-check before finishing

This is a spec: descriptive guidance, not a checkable rule. It carries no forbidden and instead pair, and no jig check detector applies to it directly.

The spec

Run this against what you produced. Any "no" is a defect to fix, not a note to mention.

Answer every item — yes, no, or n/a with the reason. A number you skip reads exactly like a pass. A yes cites where: pricing.css:41, not "✓". A live run answered this list from memory and reported interactive states and a reduced-motion path as present; neither existed anywhere in the stylesheet, and only a reviewer that had never seen the build found that out.

  1. 1.

    The generic-AI tells, named rather than gestured at. This used to read "would this look different from a generic template if the accent colour were removed?", which an agent that has just produced a generic template answers yes to — and its A-01 → A-10 range silently excluded A-58, A-59, A-60 and A-67. Check each:

    • Was the accent colour chosen, or did it appear because none was specified? (A-01)
    • Any gradient text, decorative blobs, glassmorphism or neumorphism? (A-02, A-03, A-04)
    • Emoji standing in for icons — including ones marked aria-hidden? (A-05)
    • Three things in a three-column icon-and-heading grid because there were three of them? (A-06)
    • One radius on every element regardless of its size; shadow doing all the depth work? (A-07, A-08)
    • Marketing voice in an application, or placeholder content still in place? (A-09, A-10)
    • Decoration that mimics a functional signal — colour picked for variety, an icon that looks pressable and is not? (A-58)
    • Every list item restating the context they share? (A-59)
    • Icons at equal weight competing with the text they support? (A-60)
    • A border, card or panel around every group on the page? (A-67)
  2. 2.
    Is every run of prose measure-capped and left-aligned? (B-11, B-12)
  3. 3.
    Does any text or placeholder fall below 4.5:1? (C-19)
  4. 4.
    Is every spacing value a --spacing-* token, and does --spacing-heading-before exceed --spacing-heading-after? (D-23, D-24)
  5. 5.
    Does every interactive element have hover, focus-visible, active and disabled? (E-28)
  6. 5b.
    Are links underlined, headings uncoloured, and icon-only controls labelled? (C-49, C-50, E-51)
  7. 5c.
    Do control borders use --color-stroke-strong and clear 3:1? (02-tokens.md)
  8. 5d.
    Has the copy been checked against 05-copy.md? (sentence case, front-loaded, plain, descriptive links, actionable errors)
  9. 5e.
    Can a user tell what each control is, which item is selected, and what to do next? (E-63)
  10. 5f.
    Does spacing grow from the innermost rectangle outward, and does the component use one alignment? (D-69, D-71)
  11. 5g.
    Does the layout survive the longest realistic content, and does nothing non-interactive look interactive? (E-73, C-68)
  12. 5i.
    Do button weights differ in structure rather than colour, is there one primary, is the tertiary underlined, and are destructive actions low-prominence? (E-91, P-02, E-94)
  13. 5h.
    Is long-form text 18px+ at 1.5+, start-aligned, 40–80 characters per line, in one typeface and two weights? (B-75, B-12, B-76, B-77)
  14. 5j.
    Single column, labels above and close, both required and optional marked, hints above the input, widths matched, borders at 3:1? (P-04, F-98, F-97, P-03, F-99)
  15. 6.
    Does outline-none appear anywhere without a replacement indicator? (E-29)
  16. 7.
    Does every data view have a loading, empty and error state? (E-28, E-30)
  17. 8.
    Does every form field have a persistent label, correct type/inputmode/autocomplete, and value echo on error? (F-36, F-39, F-40)
  18. 9.
    Does the primary action still work with JavaScript disabled? (F-41)
  19. 10.
    Is there a prefers-reduced-motion path? (G-43)
  20. 11.
    Did you reuse existing components and tokens rather than adding new ones? (H-45, H-47)
  21. 12.

    Has anything judged the rules this list does not name? Items 1–11 are a hand-picked sample of the corpus, chosen because they are the failures most worth catching early. They are not the corpus, and finishing them is not coverage.

    Run jig check and read its attestation. If it says judgment=not-run — and on its own it always does, because the CLI can only decide what a detector decides — then the majority of the rules that apply to what you just built have been judged by nothing.

    That is not a screen you may call done. Either run critique, which walks the index and returns a verdict per rule, or say plainly in your final message that the judgment pass did not run and the work is unverified against it. Saying nothing is the failure this item exists to stop: a report that lists what was checked and stays silent about what was not reads as a clean result, and a reader cannot tell the two apart.

  22. 13.
    Was it looked at on a phone? At 360px: does the composition change rather than shrink, is the navigation a control designed for that width rather than the desktop row squeezed, and does the page stay inside the screen — no sideways scroll? "The CSS has a media query" is not an answer; what the page does at that width is.
Kind
Spec
Section
Things to avoid

Read as plain text