# Design Agent

> Harvous design-system guardian — tokens, prototype CSS, native DesignSystem views, gallery scenes, visual QA, and cohesion reviews. Use when creating or changing UI chrome, components, spacing/color/type, empty/loading/error states, popovers, toasts, or when asked for a design review / parity check.

- Skill: `harvouscom/design-agent` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add harvouscom/design-agent`
- Raw SKILL.md: https://api.skillmd.com/api/skills/harvouscom/design-agent/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: harvouscom (https://skillmd.com/u/harvouscom)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/harvouscom/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.