spectastic Examples
Worked example · knowledge corpus · grounding

I know kung fu.

In the Matrix, they upload kung fu straight into Neo's head; he opens his eyes, says “I know kung fu,” and Morpheus answers, “Show me.” A spectastic knowledge corpus is the unglamorous, auditable version: commit the domain facts your specs need, and a decision that used to be a guess becomes a cited, edition-pinned fact. The tell is one attribute in a design — ASSUMED flips to grounded. Below, you can flip it yourself.

Knowledge corpus WCAG 2.2 ● Grounded Edition-pinned
▷  Show me View the corpus →
The gap

Spectastic already demands that every design-bearing fact in a design cite a source. But before the corpus, every source it could name lived in the repo — so a domain fact (a regulation, a standard, a settlement window) had nothing external to point at, and could only ever be graded assumed. The corpus supplies the missing thing to cite: committed, greppable markdown under knowledge/, each document carrying a stable KB-NNN id. Cite one, and the fact can finally be verified.

Before grounding

A real, small feature: a mobile action bar — a row of icon buttons. The design needs one domain fact: the minimum interactive target size. Ask a model cold and you'll usually get 44×44 CSS px, stated with confidence. It's the wrong criterion — that's Apple's Human Interface Guidelines figure and WCAG 2.1's AAA bar. The AA floor, introduced in WCAG 2.2, is 24×24. The model doesn't know what it doesn't know.

1

The ungrounded design

The design decides a target size with nothing external to cite. It renders ASSUMED — spectastic's loud, visible-failure affordance for a design-bearing fact resting on a guess. The build isn't blocked, but the badge is impossible to miss in review.

2

Load the pack — “I know kung fu”

spectastic init scaffolds a knowledge/<pack>/ folder; if you already keep a markdown KB, spectastic corpus adapt frontmatters it. Here the pack is web-a11y/, and its one document distils the WCAG target-size rule — the exact fact the model lacked.

3

Cite it — the fact gets corrected

/spectastic.design grounds the decision by citing KB-0001@2023-10-05 — the id pinned to the exact edition read. The grounding flips to verified, and the number is corrected from 44 to 24. Grounding didn't just add a badge; it fixed a confident error. Flip it below.

4

The gates hold the line

Pinning is load-bearing. spectastic validate fails the build on a citation that resolves to nothing (corpus-provenance) and warns when a pin points at a superseded edition (corpus-staleness). A cited fact can't rot into a dead reference, and a stale one can't hide.

Show me

This is the real design decision, rendered by spectastic's own grounding CSS. The toggle flips one attribute — grounding — exactly as citing KB-0001 does. Watch the badge, the number, and the source line.

D-001 · Minimum interactive target size

Status
Accepted
Grounding
Context
The action bar's icon buttons need a minimum hit target. The reflexive answer — 44×44 CSS px — is Apple's Human Interface Guidelines figure and WCAG 2.1's AAA criterion. There's no committed source to cite, so this rests on the model's memory. The action bar's icon buttons need a minimum hit target. WCAG 2.2 introduced SC 2.5.8 Target Size (Minimum) at Level AA: 24×24 CSS px, with spacing, inline, and essential exceptions. 44×44 is the separate AAA bar (SC 2.5.5). Grounded against KB-0001@2023-10-05.
Decision
Set the minimum interactive target to 44×4424×24 CSS px. Baseline taken from the reflexive 44×44 figure. Meets WCAG 2.2 SC 2.5.8 (Level AA); treat 44×44 (AAA) as an enhanced target for primary actions, not the baseline.
Source
— none; no corpus to cite. KB-0001@2023-10-05 — WCAG 2.2 SC 2.5.8, Target Size (Minimum), Level AA.
24
24×24
AA min
44
44×44
AAA
The guess reaches for the bigger box — the AAA / HIG figure — and calls it the requirement. The corpus pins the AA floor: 24×24. The 44 is real too — just a higher, opt-in bar.

The card above uses spectastic's real spec-decision[grounding] rendering; the toggle only flips the grounding attribute. In a project you don't flip it by hand — citing KB-0001@2023-10-05 in the design is what earns the green.

Read the corpus

No vector database, no runtime index — a corpus is committed markdown, shaped as an Agent Skills folder so it's portable across agents. The one document here carries provenance frontmatter and a stable id.

ReadThe KB document — provenance, then the fact
knowledge/web-a11y/references/001-target-size.md
--- slug: 001-target-size origin: W3C — Web Content Accessibility Guidelines (WCAG) 2.2, Success Criterion 2.5.8 Target Size (Minimum) origin-url: https://www.w3.org/TR/WCAG22/#target-size-minimum edition: 2023-10-05 license: CC0-1.0 converter: hand-authored content-hash: sha256:1f599bd1416783702977ab18b4e21435141d14d3f6919205425430060c7d5568 status: authoritative --- # WCAG 2.2 target size: the AA minimum vs. the AAA enhanced target This is a hand-authored distillation for grounding UI specs — **not** a verbatim copy of the WCAG text. Read the normative wording at the `origin-url` before quoting it. ## SC 2.5.8 Target Size (Minimum) — Level AA, new in WCAG 2.2 WCAG 2.2 became a W3C Recommendation on **5 October 2023**. It introduced **SC 2.5.8 Target Size (Minimum)** at **Level AA**, requiring that the target for a pointer input be at least **24×24 CSS pixels** … ## Common confusion **44×44 is not the AA minimum.** 44×44 CSS px is the figure in Apple's Human Interface Guidelines and is the WCAG **AAA / Enhanced** target (SC 2.5.5) … Cite as `KB-0001@2023-10-05`.
→ the content-hash is real (sha256 of the body), not a placeholder — so a later re-ingest can detect drift. provenance frontmatter, 051 · FR-003
The design decision that cites it — specs/001-mobile-action-bar/design.html
<spec-decision id="D-001" grounding="verified"> <h4>D-001 · Minimum interactive target size</h4> <dl> <dt>Context</dt> <dd>… WCAG 2.2 introduced SC 2.5.8 Target Size (Minimum) at Level AA: <strong>24×24 CSS px</strong>, with spacing, inline, and essential exceptions. Grounded against <code>KB-0001@2023-10-05</code>.</dd> <dt>Decision</dt> <dd>Set the minimum interactive target to <strong>24×24 CSS px</strong> … treat 44×44 (SC 2.5.5, AAA) as an enhanced target, not the baseline.</dd> </dl> </spec-decision>
grounding="verified" plus a resolvable KB-0001@2023-10-05 is what renders the green row — no bespoke element, just the existing decision card. 052 · citation contract

The gates hold

The toggle above illustrates. This is the real check. With the corpus present, spectastic validate resolves the citation and runs the grounding gates — and it's green.

$ cd examples/kung-fu
$ spectastic validate 'specs/**/*.html'  # knowledge/ present → the corpus gates run
✓ no findings
 
  corpus-provenance · corpus-staleness · corpus-citation-form · corpus-well-formed · corpus-license — all clear;
  the pinned citation KB-0001@2023-10-05 resolved to the committed document.
corpus-provenance · error

Typo the pin to an edition that doesn't exist and the build fails — a citation can't rot into a dead reference.

$ spectastic validate design.html  # KB-0001@2020-01-01
error Corpus citation "KB-0001@2020-01-01" resolves to no
  committed document at that id/edition — a dead reference.
  corpus-provenance
1 error, 0 warnings
corpus-staleness · warning

Pin to the superseded 2018 edition and it warns — loud, like an assumed decision, but never blocking.

$ spectastic validate design.html  # KB-0001@2018-06-05
warning Corpus citation "KB-0001@2018-06-05" is pinned to a
  superseded edition — the current edition is 2023-10-05.
  corpus-staleness
0 errors, 1 warning

The artifacts

A self-contained bundle: the web-a11y corpus pack and the mobile-action-bar spec & design that cites it. Every file is real and passes spectastic validate.

KB-0001 · target size
The corpus document — provenance frontmatter + the distilled fact
001 · mobile action bar
The spec & design — D-001 grounds the target size against KB-0001
▷ spectastic validateCorpus present, citation resolved, gates green — the run shown above

These are the real, rendered artifacts — the same files spectastic validate checks; the excerpts above are drawn from them verbatim.

▷  Show me Read the docs → ← All examples