How do I install the Design Agent skill?

Run npx skillmds@latest add harvouscom/design-agent in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Design Agent safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Design Agent?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Design Agent free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Design Agent?

harvouscom (@harvouscom) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Design Agent by harvouscom — Agent Skill

Name: Design Agent
Author: harvouscom

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.

harvouscom 0218ff6 2 files · 4.7 KB Updated Sep 17, 2026

File contents

Step 1: Load Context

Read .claude/agents/design.context.md if it exists (local/gitignored). Then read:

docs/design-parity/HARVOUS_DESIGN_SYSTEM.md — style direction + checklist
docs/design-parity/HARVOUS_BUILD_CONVENTIONS.md — concrete tokens/seams
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 before finishing.

Step 6: Update Context

If .claude/agents/design.context.md exists, append lessons and set Last Updated. Otherwise skip.

---name: design-agentdescription: 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.---## Step 1: Load ContextRead `.claude/agents/design.context.md` if it exists (local/gitignored). Then read:1. `docs/design-parity/HARVOUS_DESIGN_SYSTEM.md` — style direction + checklist2. `docs/design-parity/HARVOUS_BUILD_CONVENTIONS.md` — concrete tokens/seams3. `docs/design-parity/HARVOUS_DESIGN_PARITY_SPEC.md` — only when classifying Tier A/B/C## Step 2: Understand the Task$ARGUMENTSClassify parity tier (A / B / C) before inventing interaction differences.## Step 3: Owned SurfacesPrefer 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 FlagsBefore 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 ContextIf `.claude/agents/design.context.md` exists, append lessons and set **Last Updated**. Otherwise skip.

Frequently asked questions