tegwick
0d688ca94a
Author the design language once in the canonical React designbook and project it
one-way onto each stack: React -> designbook/ -> ir/ -> adapters/<stack>/.
Phase 0 — contracts & governance (T01-T03):
- ir/SCHEMA.md + ir/schema/{component,tokens}.schema.json — neutral IR contract
(W3C DTCG tokens; React prop -> HTML attribute mapping; non-portable props flagged).
- adapters/ADAPTER_CONTRACT.md — inputs, drift-report + parity-result shapes,
idempotency rules, CI exit codes (0 ok / 2 usage / 3 drift / 4 parity / 5 internal).
- .claude/rules/designbook-propagation.md + DesignSystemIntroduction.md §5.1 —
one-way directionality + drift-resolution workflow.
T04 — canonical React designbook + the missing pull tool:
- The bundled /design-sync skill only PUSHES repo->cloud; it cannot populate
designbook/. Added scripts/designbook_pull.py + `make designbook-pull`, which drives
the local claude binary headless (acceptEdits) so DesignSync fetch+write runs in a
subprocess (contents never hit the orchestrator's context). Pulled 44 files;
excludes the _whynot-design-seed/ self-copy. Corrected the docs that wrongly called
/design-sync the pull.
T05 — IR extractor (scripts/ir-extract.mjs + `make ir`):
- ir/tokens.json (80 tokens, DTCG, var() -> {ref} alias resolution); ir/components/*.json
(10 contracts parsed from .jsx signatures: enum/boolean/number inference, prop->attr
map, style/callback marked non-portable); ir/exemplars/*.
T06 — Lit token adapter (adapters/lit/ + `make adapt-lit`):
- Full-gen tokens into src/styles/colors_and_type.css :root (marker-bounded, idempotent
no-op on re-run; hand-authored type CSS preserved).
NOTE: token regen synced Lit to canonical React — fonts IBM Plex -> system stacks and 8
status tokens added. This is a VISUAL change: review and run `pnpm test:visual:update`
before merge. Remaining: T07 scaffold+drift, T08 parity, T09 runbook, T10 2nd-adapter.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
45 lines
2.2 KiB
Makefile
45 lines
2.2 KiB
Makefile
# whynot-design — automation targets. Run `make` (or `make help`) for the list.
|
|
#
|
|
# The designbook (Claude Design project) mirrors into this repo at designbook/.
|
|
# It is pulled with the `/design-sync` skill in Claude Code — component by
|
|
# component, never a wholesale replace — which is an agent step, not a shell one.
|
|
# After a sync, `make designbook-sync` captures what changed into RecentChanges.md.
|
|
|
|
NODE ?= node
|
|
# Prefer the llm-connect venv (where llm_connect is installed); fall back to python3.
|
|
PYTHON ?= $(shell [ -x $(HOME)/llm-connect/.venv/bin/python ] && echo $(HOME)/llm-connect/.venv/bin/python || echo python3)
|
|
|
|
.DEFAULT_GOAL := help
|
|
.PHONY: help designbook-pull designbook-sync designbook-check ir adapt-lit recent-changes sync-styles test
|
|
|
|
help: ## Show this help.
|
|
@grep -hE '^[a-zA-Z_-]+:.*?## ' $(MAKEFILE_LIST) \
|
|
| awk 'BEGIN{FS=":.*?## "}{printf " \033[1m%-16s\033[0m %s\n", $$1, $$2}'
|
|
|
|
designbook-pull: ## Pull the React designbook from Claude Design into designbook/ (cloud -> local mirror).
|
|
$(PYTHON) scripts/designbook_pull.py $(ARGS)
|
|
|
|
designbook-sync: ## After a designbook pull, record what changed + last-sync time into RecentChanges.md.
|
|
@echo "Pull the designbook first (in Claude Code): /design-sync"
|
|
@echo " then record the pull time: node scripts/designbook-sync.mjs --mark-synced"
|
|
@echo "This reports the diff + last /design-sync time (and warns if the cloud is newer):"
|
|
$(NODE) scripts/designbook-sync.mjs
|
|
|
|
designbook-check: ## Ask Claude Design (via llm-connect) if the cloud is newer; warn if the mirror is stale.
|
|
$(PYTHON) scripts/check_designbook_staleness.py $(ARGS)
|
|
|
|
ir: ## Extract the technology-neutral IR (ir/) from the designbook mirror. One-way: React -> IR.
|
|
$(NODE) scripts/ir-extract.mjs
|
|
|
|
adapt-lit: ## Project the IR onto the Lit stack: regen tokens (full gen), scaffold + drift (T07).
|
|
$(NODE) adapters/lit/adapt.mjs
|
|
|
|
recent-changes: ## Regenerate RecentChanges.md (alias of the reporter; --range supported).
|
|
$(NODE) scripts/designbook-sync.mjs $(ARGS)
|
|
|
|
sync-styles: ## Regenerate src/elements/_styles.js from components.css.
|
|
$(NODE) scripts/sync-shared-styles.mjs
|
|
|
|
test: ## Run the Playwright visual-regression suite.
|
|
pnpm test:visual
|