# Methods: the five design resources

None of the five repos were installed on this machine. Each was cloned (shallow, read-only) into the session scratch folder on 2 November 2026; nothing was installed globally and no repo code was copied into this project except the outputs noted below. All prototypes, photos and lint runs stayed local. No Apify, Vercel, Cloudflare or production credentials were used.

| Resource | Commit used | Ran a tool, or read guidance? |
|---|---|---|
| Graphify-Labs/graphify | 32e5efe | **Ran** the Python library (installed from the checkout into a scratch venv) |
| VoltAgent/awesome-design-md | fcc7028 | **Read** five DESIGN.md files |
| Nutlope/hallmark | 4f6a46c | **Ran** `sloplint.mjs --render`; **read** SKILL.md, gates.md, patterns.md, review-hero.md |
| alchaincyf/huashu-design | 9b01ee8 | **Ran** `design_lint.py check` and `compare`; **read** SKILL.md, references/directions.md |
| Owl-Listener/designer-skills | 9a6930c | **Read** five skills from the catalogue (INDEX.md) |

## 1. Graphify (ran)

- **What:** followed `graphify/skill.md` steps 2 to 5: `graphify.detect` on a five-file text-only corpus (events.json, migration.csv, image-list.csv, START-HERE.md, REVIEW-NOTES.md; no photos or media), then `build_from_json`, `cluster`, `report.generate` and the `graphify explain` / `graphify path` CLI. The skill's semantic pass normally dispatches subagents; because the inputs are structured manifests I wrote that extraction deterministically in the same JSON schema (`references/extraction-spec.md`). Script and outputs: `process/graphify/run_graphify.py`, `GRAPH_REPORT.md`, `graph.json` (131 nodes, 172 edges).
- **Decision it informed:** `graphify path "Photo IMG_3266.jpeg" ...` reached **both** 24 October listings (Compassvale bicycle repair and Ayer Rajah electrical/air-con) through the shared date node. So every photo is captioned by **collection** ("Sengkang workshop, 24 October 2026"), never by listing, and the 24 October partner line is kept separate from the Compassvale listing row. `graphify explain "Activity Air-conditioning"` showed three listings and zero photos, so air-conditioning is a text-only tile in every concept. The January collection had no listing at all and two possible dates, so it is captioned "January 2026" (true for both).

## 2. awesome-design-md (read)

- **Files read:** `design-md/airbnb`, `ibm`, `wise`, `wired`, `nike` DESIGN.md (chosen to contrast: marketplace, enterprise, fintech, magazine, sportswear).
- **Lessons taken:**
  - **Wise:** an interactive card in the hero (their converter) became **01's alert form in the hero**.
  - **Airbnb:** reservation card becomes a sticky bottom bar on mobile; became **05's sticky alert bar**.
  - **IBM:** one blue accent for every link and primary action, sentence-case labels, dark footer only; adopted as the **shared token rule** (one `--c-blue`, one primary button style).
  - **Wired:** hairline-ruled dated rows; used for the **past listings** component.
  - **Nike:** "same chrome, only photography and copy change"; the reason all five share tokens, so reviewers compare structure, not styling.
- Hands On Tech keeps its own identity: blue and white, Archivo and Atkinson Hyperlegible Next (chosen for phone legibility), with no borrowed brand colours or fonts.

## 3. Hallmark (ran and read)

- **Read:** the Floor in `SKILL.md`, `references/gates.md`, `patterns.md` ("A form that posts nowhere yet", reused for every demo form) and `review-hero.md` (hero review questions).
- **Ran:** rendered each opening screen before building the rest, as Hallmark's flow requires, then `node sloplint.mjs <page> <css> --genre editorial --render` on all five (`process/lint/hallmark-sloplint.txt`). The fresh-context hero review is meant for a subagent; I applied the `review-hero.md` questions myself to the 1440 and 390 captures instead.
- **Fixes it caused:**
  - Early hero review: 01's phone screen showed no photo above the fold, so the photo moved between headline and form.
  - Early hero review: 05's headline sat under the sticky bar at 1280×800 (Floor 12), so the photo height was reduced.
  - Floor 9: small "For learners" labels above headings in 02 were removed and the audience moved into the headings.
  - sloplint 26a: the skip-link focus ring was 1.3:1, so it is now dark blue.
  - sloplint 39a: the invalid-field border width changed and caused layout shift, so the state moved to an inset ring.
  - sloplint Reflex 3: side stripes on lists became hairlines.
  - Added `text-wrap: balance` to headings and tabular figures to the status line.
- **Still open (Floor):**
  - **49a:** the required label "Email me when the next workshop opens" wraps to two lines at 320–390 px.
  - **58:** About/Contact screens exceed ~80 words, mostly because of reviewer notes that will not ship.
  - Three Reflex gates are waived on the record in 05 (photo coverage is the concept itself).

## 4. huashu-design (ran and read)

- **Read:** `SKILL.md` (three-direction gate, honest content, legibility floor) and `references/directions.md` (three logics × two candidates, thumbnail sheet, pick the strongest and least alike).
- **Adapted:**
  - The default of 6 candidates became **16 candidates** (`process/directions.md`, `process/thumbs.html` / `thumbs.png`), shortlisted to ten, then cut to five when Edward reduced the scope.
  - The "stop and wait for a choice" gate is recorded as waived in `process/direction-approved.md`.
- **Ran:** `design_lint.py check --brand` (no red findings; one yellow for relative image paths, which is deliberate because the mock-ups use the existing photo store) and `design_lint.py compare --brand` (pairwise skeleton correlation 0.08–0.42, verdict "sufficiently distinct"). Outputs: `process/lint/huashu-check.txt`, `huashu-compare.txt`.
- **Decision it informed:** candidates K (family copy on A's layout), L (two-door split) and P (wizard) were dropped as skeleton duplicates of A or B, following huashu's rule that two versions differing only in skin count as one. M (noticeboard) was dropped under its over-metaphor limit.

## 5. designer-skills (read)

Skills chosen from `INDEX.md` and applied to the rendered mock-ups:

| Skill | What changed |
|---|---|
| `interaction-design/form-design` | Single-column forms, persistent top labels, errors below each field with how to fix them, "(optional)" marked instead of required, phone made optional (the old form required it; flagged for the team). |
| `interaction-design/feedback-patterns` | Every demo form gives inline, persistent confirmation that says plainly nothing was sent, then clears the fields and moves focus to the message. |
| `interaction-design/navigation-patterns` | All eight sections have a place in every nav; active page marked by underline as well as colour. 02 and 05 keep the menu behind a button at every width (recorded as their trade-off). |
| `design-systems/accessibility-audit` | WCAG 2.2 AA pass with axe-core 4.14 at both widths: 0 violations. Tap targets ≥24 px everywhere (≥44 px on controls), visible focus on the first eight tab stops, no horizontal overflow (`process/test-report.md`). |
| `visual-critique/critique-visual-hierarchy` | Used on each hero capture (entry point, eye flow, weight, emphasis). 01's phone entry point showed text and a form but no activity, so the photo moved above the form. 03's phone diptych pushed the primary action to the fold, so the pair was shortened to 15rem. Findings it could not fix inside a concept became the trade-offs in the gallery. |

**A bug the testing caught:** after a visitor corrected the email field and clicked the consent box, the email error disappeared on blur and the layout jumped, so the click missed. Errors now reserve their space and clear as the visitor types (`shared/demo.js`, `.error-text`).