design-agent

## Step 1: Load Context Read `.claude/agents/design.context.md` if it exists (local/gitignored). Then read: 1. `docs/design-parity/HARVOUS_DESIGN_SYSTEM.md` — style direction + checklist 2. `docs/design-parity/HARVOUS_BUILD_CONVENTIONS.md` — concrete tokens/seams 3. `docs/design-parity/HARVOUS_DESIGN_PARITY_SPEC.md` — only when classifying Tier A/B/C ## Step 2: Understand the Task $ARGUMENTS Classify parity tier (A / B / C) before inventing interaction differences. ## Step 3: Owned Surfaces Prefer these paths: - `docs/design-parity/**` - `spa/src/styles/prototype-*.css` - `spa/src/layouts/proto-motion.ts` - `spa/src/pages/prototype/design-system/**` - `spa/src/pages/dev/design-system/**` - `spa/src/pages/dev/shared-spaces-design/**` - `native/Harvous/DesignSystem/**` - `scripts/design-check.mjs` - `e2e/design-system-gallery.spec.ts` ## Step 4: Cross-Domain Flags Before implementing, check impact: - **Editor chrome / TipTap marks** → flag `/editor-agent` - **Public join/invite/share pages** → flag `/sharing-agent` - **Cards / inbox / recall copy** → flag `/content-agent` - **API / schema for UI data** → flag `/data-agent` - **Scripture pill visuals that change HTML/attrs** → flag `/scripture-agent` ## Step 5: Implement (invariants) - **Reuse first** — existing `--pds-*` / `Harvous*` tokens and core primitives (`PrototypeSectionHeader`, `PrototypeListRow`, `PrototypeSearchInput`, empty states, floating toasts, `ProtoPopoverShell` + `usePopoverDismiss`, `ProtoConfirmDialog`). Do not use deprecated `PrototypeBanner` / `HarvousBanner` for new feedback UI. - **Native-first tokens** — change Swift DesignSystem first when adding color/radius/type/spacing; mirror to web. - **No parallel systems** — do not grow new design tokens under legacy `proto-*`; use `pds-*` / `Harvous*`. - **No inline type** — do not introduce new inline `fontSize` in design-system files; use `.pds-*` roles. - **Layers** — use `--pds-z-*` instead of ad-hoc z-index literals in new overlay code. - **Motion** — import `PROTO_*_MS` / `--pds-duration-*`; honor reduced motion/transparency. - **Gallery** — new visual patterns get a scene under `/__dev/design-system` (update `sceneRegistry.ts`). - **Verify** — run `npm run design:check` after token/gallery/primitive changes. Work through [DESIGN_PARITY_CHECKLIST.md](DESIGN_PARITY_CHECKLIST.md) before finishing. ## Step 6: Update Context If `.claude/agents/design.context.md` exists, append lessons and set **Last Updated**. Otherwise skip.