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/harvous
- ソースの最終更新活動
- 2026年7月10日 15:31
- 検出された SKILL.md の言語
- 英語
- スター
- 17
- フォーク
- 1
インストール方法
デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。
ソースファイルを確認
インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。
ファイルエクスプローラー
2 ファイルSKILL.md を表示中
SKILL.md
ソースの指示 · 読み取り専用プレビュー- name
- design-agent
- description
- 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.
- allowed-tools
- Read, Write, Edit, Glob, Grep, Bash
- argument-hint
- <UI / design task>
## 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.
GitHubで見る