メニュー
Build or extend ZAQ back-office UI using the --zaq-* design system. Read DESIGN.md first, consult Storybook, then use extract, design-migrate, or replace as appropriate. Human confirmation required before apply steps in each skill.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
Turn a plain-text description of a business workflow into a ZAQ workflow use-case module (a `Zaq.Engine.Workflows.UseCases.*` module that builds a DAG of nodes + edges). Every step is mapped to a real tool from `lib/zaq/agent/tools` (resolved through `Zaq.Agent.Tools.Registry`) or a workflow Step like `HumanInTheLoop`. When a described step has no matching tool, the generated module gets a `missing_tools/0` function describing the tools that must be built first. Use when the user pastes/says a workflow they want as code.
Migrate legacy ZAQ web UI (components, LiveViews, layouts) styling to the --zaq-* token system. Reads DESIGN.md and CSS catalog (foundations, semantics, text-styles, btn, form, modal, table, layout, styles) before proposing changes. Accepts a Figma frame URL (design-led), a file path (audit), or --audit-all (full sweep). Typical position in workflow: after extract, before replace.
Find cohesive UI slices, cross-check against existing reusable components, report candidates for human approval, copy approved slices into new (or extended) ZaqWeb.Components.DesignSystem modules (original call-site code stays intact), and add or update Storybook. Does not wire LiveViews and never invokes replace — flag replace candidates in the report for a human follow-up after design-migrate. Use before design-migrate when markup lives under lib/zaq_web/live/.
Applies human feedback to an in-progress feature by updating the PRD, then re-running ux-design and prototype. Use after the initial pm-senior → ux-design → prototype pass when the reviewer sends changes, corrections, or new scope on the PRD, UX plan, or staged BO screens.
Stages UX-plan features on real BO routes using static fixtures. May update DSM (DesignSystem.*), existing components, CSS, router, and sidebar. Never touches backend (lib/zaq/**, NodeRouter, migrations). Use after /ux-design; hand off to /design for production-ready DS patterns and data wiring.
Find inline UI that matches an existing reusable component under lib/zaq_web/components/, report replacement candidates for human approval, wire approved components into LiveViews (imports, component calls, remove dead markup), and verify with e2e or ExUnit. Use after extract and design-migrate when call sites still duplicate markup.
| name | design |
| description | Build or extend ZAQ back-office UI using the --zaq-* design system. Read DESIGN.md first, consult Storybook, then use extract, design-migrate, or replace as appropriate. Human confirmation required before apply steps in each skill. |
| trigger | when building new BO interfaces, components, or design-system patterns |
Announce at start: "Using /design — reading DESIGN.md"
If no interactive reference exists yet, confirm /ux-design and /prototype ran — review the staged feature at /bo/{slug} before building production UI. /prototype may extend DSM for staging; this skill owns production-ready patterns, Storybook, and real data wiring.
Read DESIGN.md (tokens, CSS catalog, components, Do's/Don'ts).
Check Storybook for an existing story matching the UI role (http://localhost:4000/storybook).
For BO operational rules (BOLayout, flash, icons): skim docs/bo-components.md.
| Situation | Skill |
|---|---|
| Inline markup should become a reusable component | /extract |
Styling needs --zaq-* token migration | /design-migrate |
| Component exists but LiveViews still duplicate markup | /replace |
| Run app + Storybook locally | /run |
Typical order (human confirmation at each skill gate):
extract → design-migrate → replace
DesignSystem.* (source call sites unchanged).Do not skip human validation tables in migrate/replace/extract reports.
| Allowed | Forbidden |
|---|---|
lib/zaq_web/ markup and styling | lib/zaq/ business logic |
assets/css/styles.css (per skill rules) | assets/css/app.css |
storybook/ (extract skill) | daisyUI, legacy app.css classes |
Role CSS files (btn.css, form.css, etc.) are read-only unless the design lead approves a token change.
Run mix format on touched files. Run mix q before opening a PR.