From a4f7d6cad154c8ad5691a5132f3045f676f321b0 Mon Sep 17 00:00:00 2001 From: alexsoyes Date: Sun, 7 Jun 2026 13:54:38 +0200 Subject: [PATCH 1/8] feat(aidd-pm): add wireframe skill and renumber spec to 05 Add aidd-pm:04-wireframe, a low-fidelity wireframe skill (screen inventory, ASCII layouts, Mermaid navigation flow) that turns a PRD or feature description into a read-only artifact saved under aidd_docs/tasks/. Stays in the Knowledge layer: no executable UI code. Insert it at its logical pipeline position (prd -> wireframe -> spec), renumbering 04-spec to 05-spec across plugin.json, READMEs, routing test fixtures, the project-init asset docs and their aidd_docs mirrors, UPGRADE.md and the hand-maintained docs/CATALOG.md. Per-plugin CATALOG.md and README counts were regenerated by the pre-commit hooks. Co-Authored-By: Claude Opus 4.8 (1M context) Signed-off-by: alexsoyes --- README.md | 6 +- UPGRADE.md | 3 +- aidd_docs/CONTRIBUTING.md | 3 +- aidd_docs/README.md | 6 +- docs/CATALOG.md | 5 +- .../hooks/routing/tests/held-out-prompts.json | 10 +- .../02-project-init/assets/CONTRIBUTING.md | 3 +- .../skills/02-project-init/assets/README.md | 6 +- plugins/aidd-pm/.claude-plugin/plugin.json | 6 +- plugins/aidd-pm/CATALOG.md | 27 ++++-- plugins/aidd-pm/README.md | 5 +- plugins/aidd-pm/skills/04-wireframe/README.md | 51 ++++++++++ plugins/aidd-pm/skills/04-wireframe/SKILL.md | 39 ++++++++ .../04-wireframe/actions/01-wireframe.md | 41 +++++++++ .../04-wireframe/assets/wireframe-template.md | 92 +++++++++++++++++++ .../skills/04-wireframe/evals/scenarios.json | 15 +++ .../skills/{04-spec => 05-spec}/README.md | 6 +- .../skills/{04-spec => 05-spec}/SKILL.md | 2 +- .../{04-spec => 05-spec}/actions/01-build.md | 0 .../{04-spec => 05-spec}/actions/02-refine.md | 0 .../assets/spec-template.md | 0 .../assets/spec-validator.yml | 0 .../{04-spec => 05-spec}/evals/scenarios.json | 0 23 files changed, 293 insertions(+), 33 deletions(-) create mode 100644 plugins/aidd-pm/skills/04-wireframe/README.md create mode 100644 plugins/aidd-pm/skills/04-wireframe/SKILL.md create mode 100644 plugins/aidd-pm/skills/04-wireframe/actions/01-wireframe.md create mode 100644 plugins/aidd-pm/skills/04-wireframe/assets/wireframe-template.md create mode 100644 plugins/aidd-pm/skills/04-wireframe/evals/scenarios.json rename plugins/aidd-pm/skills/{04-spec => 05-spec}/README.md (93%) rename plugins/aidd-pm/skills/{04-spec => 05-spec}/SKILL.md (99%) rename plugins/aidd-pm/skills/{04-spec => 05-spec}/actions/01-build.md (100%) rename plugins/aidd-pm/skills/{04-spec => 05-spec}/actions/02-refine.md (100%) rename plugins/aidd-pm/skills/{04-spec => 05-spec}/assets/spec-template.md (100%) rename plugins/aidd-pm/skills/{04-spec => 05-spec}/assets/spec-validator.yml (100%) rename plugins/aidd-pm/skills/{04-spec => 05-spec}/evals/scenarios.json (100%) diff --git a/README.md b/README.md index 71353db93..0071e21bf 100644 --- a/README.md +++ b/README.md @@ -7,7 +7,7 @@ ### A community-maintained marketplace of skills, agents, and rules for Claude Code.

- 6 plugins · 31 skills · 3 agents · MIT + 6 plugins · 32 skills · 3 agents · MIT

@@ -166,9 +166,9 @@ Commits, pull / merge requests, release tags, issue creation. ### 📋 [aidd-pm](plugins/aidd-pm/README.md) -`4 skills` · stable +`5 skills` · stable -Ticket info, user stories, PRD, spec drafting. +Ticket info, user stories, PRD, wireframe, spec drafting. diff --git a/UPGRADE.md b/UPGRADE.md index f6524cd5d..3077b4ce8 100644 --- a/UPGRADE.md +++ b/UPGRADE.md @@ -156,7 +156,8 @@ Invocation in v4 is `plugin:NN-action`. Where a column says "sub-flow", the old | `aidd-dev:09-for-sure` | Loops and retries a task until an explicit success condition is met. | 4.0 | | `aidd-orchestrator:00-async-dev` | Async, label/comment-driven runs from GitHub issues (setup / run / review). | 4.0 | | `aidd-pm:03-prd` | Builds a PRD from a feature description or user stories. | 4.0 | -| `aidd-pm:04-spec` | Writes a normalised tech spec (the contract planning consumes). | 4.0 | +| `aidd-pm:04-wireframe` | Produces low-fidelity wireframes (screens, layouts, navigation flow) from a PRD or feature description. | 4.5 | +| `aidd-pm:05-spec` | Writes a normalised tech spec (the contract planning consumes). | 4.0 | | `aidd-refine:03-condense` | Terse output mode with token-savings reporting. | 4.0 | | `aidd-refine:04-shadow-areas` | Scans a spec for blind spots (missing actor, edge case, dependency, ...). | 4.0 | | `aidd-refine:05-fact-check` | Verifies factual claims against sources and rewrites with citations. | 4.1 | diff --git a/aidd_docs/CONTRIBUTING.md b/aidd_docs/CONTRIBUTING.md index a356b89ff..3c2985797 100644 --- a/aidd_docs/CONTRIBUTING.md +++ b/aidd_docs/CONTRIBUTING.md @@ -23,7 +23,8 @@ All templates live alongside the skill that owns them, under `plugins//s | `aidd-context:03-context-generate/assets/agents/` | Agent file template | | `aidd-context:03-context-generate/assets/rules/` | Rule file template | | `aidd-pm:03-prd/assets/` | PRD body template | -| `aidd-pm:04-spec/assets/` | Spec template and validator | +| `aidd-pm:04-wireframe/assets/` | Wireframe body template | +| `aidd-pm:05-spec/assets/` | Spec template and validator | | `aidd-dev:01-plan/assets/` | Plan and master-plan templates | | `aidd-vcs:01-commit/assets/` | Conventional commit message template | | `aidd-vcs:02-pull-request/assets/` | Pull/merge request body template, contributing example | diff --git a/aidd_docs/README.md b/aidd_docs/README.md index 372e1f1d2..3856014c8 100644 --- a/aidd_docs/README.md +++ b/aidd_docs/README.md @@ -38,7 +38,7 @@ Skills are grouped into plugins by domain. Install only the plugins you need. | ----------------- | ---------------------------------------------------------------------------------- | ----------------------------------------------------------- | | aidd-context | Bootstrap, project init, generation of context artifacts (skills, agents, rules, commands, hooks, plugins, marketplaces), mermaid diagrams, learn, discovery | `02-project-init`, `03-context-generate`, `04-mermaid` | | aidd-refine | Meta-cognition: brainstorm, challenge prior work, condensed communication mode | `01-brainstorm`, `02-challenge`, `03-condense` | -| aidd-pm | Product management: ticket info, user stories, PRD, spec | `01-ticket-info`, `02-user-stories-create`, `03-prd`, `04-spec` | +| aidd-pm | Product management: ticket info, user stories, PRD, wireframe, spec | `01-ticket-info`, `02-user-stories-create`, `03-prd`, `04-wireframe`, `05-spec` | | aidd-dev | Code transformation: Dev SDLC orchestrator, plan, implement, assert, audit, review, test, refactor, debug, for-sure | `00-sdlc`, `01-plan`, `02-implement`, `05-review`, `06-test` | | aidd-vcs | VCS workflows: commit, pull/merge request, release tag, issue creation | `01-commit`, `02-pull-request`, `04-issue-create` | | aidd-orchestrator | Async orchestration of the SDLC on labeled issues (optional, extra) | `00-async-dev` (router with setup / run / review sub-flows) | @@ -102,7 +102,7 @@ AIDD is delivered as a plugin marketplace. Pick what you need; do not install ev | aidd-refine | 01-brainstorm, 02-challenge, 03-condense, 04-shadow-areas, 05-fact-check | | aidd-dev | 00-sdlc, 01-plan, 02-implement, 03-assert, 04-audit, 05-review, 06-test, 07-refactor, 08-debug, 09-for-sure | | aidd-vcs | 01-commit, 02-pull-request, 03-release-tag, 04-issue-create | -| aidd-pm | 01-ticket-info, 02-user-stories-create, 03-prd, 04-spec | +| aidd-pm | 01-ticket-info, 02-user-stories-create, 03-prd, 04-wireframe, 05-spec | Each plugin is independently installable; install incrementally. Smaller surface, fewer triggers competing. @@ -112,7 +112,7 @@ A typical change cycles through skills from several plugins. The order below is 1. **Bootstrap** (only for a brand-new project): `aidd-context:01-bootstrap` imagines the stack and architecture, comparing candidate stacks and writing an `INSTALL.md`. Skip this step on an existing project. 2. **Project init** (once per project, re-runnable to refresh): `aidd-context:02-project-init` scaffolds `aidd_docs/`, the memory bank, and the AI context files for the tools you use. Re-running later refreshes the scaffold without overwriting your customizations. -3. **Frame the request**: `aidd-refine:01-brainstorm` to clarify, `aidd-pm:01-ticket-info` to pull tracker data, `aidd-pm:02-user-stories-create` and `aidd-pm:03-prd` or `aidd-pm:04-spec` to formalize scope. +3. **Frame the request**: `aidd-refine:01-brainstorm` to clarify, `aidd-pm:01-ticket-info` to pull tracker data, `aidd-pm:02-user-stories-create` and `aidd-pm:03-prd` or `aidd-pm:05-spec` to formalize scope. 4. **Plan**: `aidd-dev:01-plan` produces the technical plan, component behavior model, or design-image extraction. 5. **Implement and assert**: `aidd-dev:02-implement` writes code against the plan; `aidd-dev:03-assert` verifies the result. 6. **Review**: `aidd-dev:05-review` for code and functional review; `aidd-refine:02-challenge` to stress-test the result. diff --git a/docs/CATALOG.md b/docs/CATALOG.md index 6e06a072c..2a0e1f427 100644 --- a/docs/CATALOG.md +++ b/docs/CATALOG.md @@ -44,14 +44,15 @@ The development SDLC: plan, implement, assert, audit, review, test, refactor, de ## aidd-pm -Product management: ticket retrieval, user stories, PRD, spec. +Product management: ticket retrieval, user stories, PRD, wireframe, spec. | Skill | Role | Actions | | ------------------------- | ---------------------------------------------------------- | -------------------------------- | | `01-ticket-info` | Retrieve and display ticket information | `01-ticket-info` | | `02-user-stories-create` | Generate INVEST-compliant user stories | `01-create-user-stories` | | `03-prd` | Generate a structured Product Requirements Document | `01-prd` | -| `04-spec` | Generate or refine a normalized project spec | `01-build`, `02-refine` | +| `04-wireframe` | Produce low-fidelity wireframes from a PRD or description | `01-wireframe` | +| `05-spec` | Generate or refine a normalized project spec | `01-build`, `02-refine` | ## aidd-refine diff --git a/plugins/aidd-context/hooks/routing/tests/held-out-prompts.json b/plugins/aidd-context/hooks/routing/tests/held-out-prompts.json index 30a497aba..33f25b363 100644 --- a/plugins/aidd-context/hooks/routing/tests/held-out-prompts.json +++ b/plugins/aidd-context/hooks/routing/tests/held-out-prompts.json @@ -38,9 +38,13 @@ { "prompt": "write product requirements", "expect": "aidd-pm:03-prd", "category": "prd-en" }, { "prompt": "génère un PRD", "expect": "aidd-pm:03-prd", "category": "prd-fr" }, - { "prompt": "build spec from PRD", "expect": "aidd-pm:04-spec", "category": "spec-en", "also_accept": ["aidd-pm:03-prd"] }, - { "prompt": "refine spec with reviewer notes", "expect": "aidd-pm:04-spec", "category": "spec-en" }, - { "prompt": "rédige la spec", "expect": "aidd-pm:04-spec", "category": "spec-fr" }, + { "prompt": "wireframe the checkout screens", "expect": "aidd-pm:04-wireframe", "category": "wireframe-en" }, + { "prompt": "create wireframes for the onboarding flow", "expect": "aidd-pm:04-wireframe", "category": "wireframe-en" }, + { "prompt": "fais les wireframes de la feature login", "expect": "aidd-pm:04-wireframe", "category": "wireframe-fr" }, + + { "prompt": "build spec from PRD", "expect": "aidd-pm:05-spec", "category": "spec-en", "also_accept": ["aidd-pm:03-prd"] }, + { "prompt": "refine spec with reviewer notes", "expect": "aidd-pm:05-spec", "category": "spec-en" }, + { "prompt": "rédige la spec", "expect": "aidd-pm:05-spec", "category": "spec-fr" }, { "prompt": "create implementation plan for auth", "expect": "aidd-dev:01-plan", "category": "plan-en" }, { "prompt": "rédige un plan technique", "expect": "aidd-dev:01-plan", "category": "plan-fr" }, diff --git a/plugins/aidd-context/skills/02-project-init/assets/CONTRIBUTING.md b/plugins/aidd-context/skills/02-project-init/assets/CONTRIBUTING.md index a356b89ff..3c2985797 100644 --- a/plugins/aidd-context/skills/02-project-init/assets/CONTRIBUTING.md +++ b/plugins/aidd-context/skills/02-project-init/assets/CONTRIBUTING.md @@ -23,7 +23,8 @@ All templates live alongside the skill that owns them, under `plugins//s | `aidd-context:03-context-generate/assets/agents/` | Agent file template | | `aidd-context:03-context-generate/assets/rules/` | Rule file template | | `aidd-pm:03-prd/assets/` | PRD body template | -| `aidd-pm:04-spec/assets/` | Spec template and validator | +| `aidd-pm:04-wireframe/assets/` | Wireframe body template | +| `aidd-pm:05-spec/assets/` | Spec template and validator | | `aidd-dev:01-plan/assets/` | Plan and master-plan templates | | `aidd-vcs:01-commit/assets/` | Conventional commit message template | | `aidd-vcs:02-pull-request/assets/` | Pull/merge request body template, contributing example | diff --git a/plugins/aidd-context/skills/02-project-init/assets/README.md b/plugins/aidd-context/skills/02-project-init/assets/README.md index 7db06adde..8bb7adaa7 100644 --- a/plugins/aidd-context/skills/02-project-init/assets/README.md +++ b/plugins/aidd-context/skills/02-project-init/assets/README.md @@ -38,7 +38,7 @@ Skills are grouped into plugins by domain. Install only the plugins you need. | ----------------- | ---------------------------------------------------------------------------------- | ----------------------------------------------------------- | | aidd-context | Bootstrap, project init, generation of context artifacts (skills, agents, rules, commands, hooks, plugins, marketplaces), mermaid diagrams, learn, discovery | `02-project-init`, `03-context-generate`, `04-mermaid` | | aidd-refine | Meta-cognition: brainstorm, challenge prior work, condensed communication mode | `01-brainstorm`, `02-challenge`, `03-condense` | -| aidd-pm | Product management: ticket info, user stories, PRD, spec | `01-ticket-info`, `02-user-stories-create`, `03-prd`, `04-spec` | +| aidd-pm | Product management: ticket info, user stories, PRD, wireframe, spec | `01-ticket-info`, `02-user-stories-create`, `03-prd`, `04-wireframe`, `05-spec` | | aidd-dev | Code transformation: Dev SDLC orchestrator, plan, implement, assert, audit, review, test, refactor, debug, for-sure | `00-sdlc`, `01-plan`, `02-implement`, `05-review`, `06-test` | | aidd-vcs | VCS workflows: commit, pull/merge request, release tag, issue creation | `01-commit`, `02-pull-request`, `04-issue-create` | | aidd-orchestrator | Async orchestration of the SDLC on labeled issues (optional, extra) | `00-async-dev` (router with setup / run / review sub-flows) | @@ -102,7 +102,7 @@ AIDD is delivered as a plugin marketplace. Pick what you need; do not install ev | aidd-refine | 01-brainstorm, 02-challenge, 03-condense, 04-shadow-areas, 05-fact-check | | aidd-dev | 00-sdlc, 01-plan, 02-implement, 03-assert, 04-audit, 05-review, 06-test, 07-refactor, 08-debug, 09-for-sure | | aidd-vcs | 01-commit, 02-pull-request, 03-release-tag, 04-issue-create | -| aidd-pm | 01-ticket-info, 02-user-stories-create, 03-prd, 04-spec | +| aidd-pm | 01-ticket-info, 02-user-stories-create, 03-prd, 04-wireframe, 05-spec | Each plugin is independently installable; install incrementally. Smaller surface, fewer triggers competing. @@ -112,7 +112,7 @@ A typical change cycles through skills from several plugins. The order below is 1. **Bootstrap** (only for a brand-new project): `aidd-context:01-bootstrap` imagines the stack and architecture, comparing candidate stacks and writing an `INSTALL.md`. Skip this step on an existing project. 2. **Project init** (once per project, re-runnable to refresh): `aidd-context:02-project-init` scaffolds `aidd_docs/`, the memory bank, and the AI context files for the tools you use. Re-running later refreshes the scaffold without overwriting your customizations. -3. **Frame the request**: `aidd-refine:01-brainstorm` to clarify, `aidd-pm:01-ticket-info` to pull tracker data, `aidd-pm:02-user-stories-create` and `aidd-pm:03-prd` or `aidd-pm:04-spec` to formalize scope. +3. **Frame the request**: `aidd-refine:01-brainstorm` to clarify, `aidd-pm:01-ticket-info` to pull tracker data, `aidd-pm:02-user-stories-create` and `aidd-pm:03-prd` or `aidd-pm:05-spec` to formalize scope. 4. **Plan**: `aidd-dev:01-plan` produces the technical plan, component behavior model, or design-image extraction. 5. **Implement and assert**: `aidd-dev:02-implement` writes code against the plan; `aidd-dev:03-assert` verifies the result. 6. **Review**: `aidd-dev:05-review` for code and functional review; `aidd-refine:02-challenge` to stress-test the result. diff --git a/plugins/aidd-pm/.claude-plugin/plugin.json b/plugins/aidd-pm/.claude-plugin/plugin.json index 88dc39660..c4ab10a32 100644 --- a/plugins/aidd-pm/.claude-plugin/plugin.json +++ b/plugins/aidd-pm/.claude-plugin/plugin.json @@ -2,7 +2,7 @@ "$schema": "https://json.schemastore.org/claude-code-plugin-manifest.json", "name": "aidd-pm", "version": "1.0.2", - "description": "Product management: ticket-info, user-stories-create, prd, spec", + "description": "Product management: ticket-info, user-stories-create, prd, wireframe, spec", "author": { "name": "AI-Driven Dev", "url": "https://github.com/ai-driven-dev" @@ -11,12 +11,14 @@ "./skills/01-ticket-info", "./skills/02-user-stories-create", "./skills/03-prd", - "./skills/04-spec" + "./skills/04-wireframe", + "./skills/05-spec" ], "keywords": [ "product-management", "user-stories", "prd", + "wireframe", "specification", "tickets" ], diff --git a/plugins/aidd-pm/CATALOG.md b/plugins/aidd-pm/CATALOG.md index 6680201b6..77378eb98 100644 --- a/plugins/aidd-pm/CATALOG.md +++ b/plugins/aidd-pm/CATALOG.md @@ -11,7 +11,8 @@ Auto-generated index of skills, agents, references and assets shipped by the `ai - [`skills/01-ticket-info`](#skills01-ticket-info) - [`skills/02-user-stories-create`](#skills02-user-stories-create) - [`skills/03-prd`](#skills03-prd) - - [`skills/04-spec`](#skills04-spec) + - [`skills/04-wireframe`](#skills04-wireframe) + - [`skills/05-spec`](#skills05-spec) --- @@ -53,14 +54,24 @@ Auto-generated index of skills, agents, references and assets shipped by the `ai | `-` | [README.md](skills/03-prd/README.md) | - | - | | `-` | [SKILL.md](skills/03-prd/SKILL.md) | `Generate a structured Product Requirements Document from a feature description or user stories, validated with the user before save. Use when the user says "prd", "draft prd", "write prd", "product requirements for X", "generate a prd", or invokes `/prd`. Do NOT use for writing user stories, drafting a technical implementation plan, or writing source code.` | - | -#### `skills/04-spec` +#### `skills/04-wireframe` + +| Group | File | Description | Argument Hint | +|-------|------|---|---| +| `actions` | [01-wireframe.md](skills/04-wireframe/actions/01-wireframe.md) | - | - | +| `assets` | [wireframe-template.md](skills/04-wireframe/assets/wireframe-template.md) | `Low-fidelity wireframe template (screens, layouts, navigation flow)` | - | +| `evals` | [scenarios.json](skills/04-wireframe/evals/scenarios.json) | - | - | +| `-` | [README.md](skills/04-wireframe/README.md) | - | - | +| `-` | [SKILL.md](skills/04-wireframe/SKILL.md) | `Produce low-fidelity wireframes from a PRD or feature description, validated with the user before save. Use when the user says "wireframe", "wireframes", "wireframe the feature", "screen layout", "low-fi mockup", "maquette fil de fer", or asks for the screens and navigation flow of a feature. Do NOT use for high-fidelity visual design, generating UI code, drafting a PRD, or writing a spec.` | - | + +#### `skills/05-spec` | Group | File | Description | |-------|------|---| -| `actions` | [01-build.md](skills/04-spec/actions/01-build.md) | - | -| `actions` | [02-refine.md](skills/04-spec/actions/02-refine.md) | - | -| `assets` | [spec-template.md](skills/04-spec/assets/spec-template.md) | - | -| `evals` | [scenarios.json](skills/04-spec/evals/scenarios.json) | - | -| `-` | [README.md](skills/04-spec/README.md) | - | -| `-` | [SKILL.md](skills/04-spec/SKILL.md) | `Generate or refine a project spec from a free-form human request, an existing PRD, or reviewer findings. Use when the user says "draft spec", "spec for X", "refine the spec", "generate spec from prd", "/spec", or when an orchestrator needs a normalized contract before planning. Do NOT use for writing source code, drafting a full PRD, or modifying a validated and locked spec.` | +| `actions` | [01-build.md](skills/05-spec/actions/01-build.md) | - | +| `actions` | [02-refine.md](skills/05-spec/actions/02-refine.md) | - | +| `assets` | [spec-template.md](skills/05-spec/assets/spec-template.md) | - | +| `evals` | [scenarios.json](skills/05-spec/evals/scenarios.json) | - | +| `-` | [README.md](skills/05-spec/README.md) | - | +| `-` | [SKILL.md](skills/05-spec/SKILL.md) | `Generate or refine a project spec from a free-form human request, an existing PRD, or reviewer findings. Use when the user says "draft spec", "spec for X", "refine the spec", "generate spec from prd", "/spec", or when an orchestrator needs a normalized contract before planning. Do NOT use for writing source code, drafting a full PRD, or modifying a validated and locked spec.` | diff --git a/plugins/aidd-pm/README.md b/plugins/aidd-pm/README.md index acd140270..323f577b5 100644 --- a/plugins/aidd-pm/README.md +++ b/plugins/aidd-pm/README.md @@ -8,7 +8,7 @@ Product management plugin for the AI-Driven Development framework. First time? Install with `/plugin install aidd-pm@aidd-framework`, then run `aidd-pm:01-ticket-info`. -Covers ticket information retrieval, user story creation, product requirement documents, and spec generation for downstream agents. +Covers ticket information retrieval, user story creation, product requirement documents, low-fidelity wireframes, and spec generation for downstream agents. ## Skills @@ -17,4 +17,5 @@ Covers ticket information retrieval, user story creation, product requirement do | [4.1] | [ticket-info](skills/01-ticket-info/README.md) | Retrieve and display ticket information from the configured ticketing tool. | | [4.2] | [user-stories-create](skills/02-user-stories-create/README.md) | Generate INVEST-compliant user stories from a feature description. | | [4.3] | [prd](skills/03-prd/README.md) | Generate a structured Product Requirements Document. | -| [4.4] | [spec](skills/04-spec/README.md) | Generate and refine a project spec from a free-form human request. The spec is the immutable target a planner consumes. | +| [4.4] | [wireframe](skills/04-wireframe/README.md) | Produce low-fidelity wireframes (screens, layouts, navigation flow) from a PRD or feature description. | +| [4.5] | [spec](skills/05-spec/README.md) | Generate and refine a project spec from a free-form human request. The spec is the immutable target a planner consumes. | diff --git a/plugins/aidd-pm/skills/04-wireframe/README.md b/plugins/aidd-pm/skills/04-wireframe/README.md new file mode 100644 index 000000000..2ec7c4bc0 --- /dev/null +++ b/plugins/aidd-pm/skills/04-wireframe/README.md @@ -0,0 +1,51 @@ +← [aidd-framework](../../../../README.md) / [aidd-pm](../../README.md) + +# 04 - Wireframe + +Turns product requirements into low-fidelity wireframes: a screen inventory, +ASCII layouts with component hierarchies, and a Mermaid navigation flow. +Stays at the structure level; never visual design and never code. + +## When to use + +- "wireframe", "wireframes", "wireframe the feature". +- "screen layout", "low-fi mockup", "maquette fil de fer". +- When a PRD is ready and you need to lay out the screens and navigation + before writing the spec. + +## When NOT to use + +- For high-fidelity visual design (colors, typography, polished mockups). +- To generate UI code (HTML, CSS, components) - that belongs to your dev + capability. +- To draft a PRD → use `03-prd`. +- To write a spec → use `05-spec`. + +## How to invoke + +``` +Use skill aidd-pm:04-wireframe for +``` + +The skill parses the input, drafts each screen per template, shows the +draft, and waits for explicit validation before saving. + +## Outputs + +- A wireframe file saved at + `aidd_docs/tasks//--wireframe.md`. +- Sections: screen inventory, layouts, component hierarchy, navigation + flow (Mermaid), states and annotations, responsive notes, open questions. +- No executable code and no tracker mutations. + +## Prerequisites + +- A PRD path, a feature description, or both. +- Write access to `aidd_docs/tasks/` in the current repo. + +## Technical details + +See [`SKILL.md`](SKILL.md) for the action contract, +[`actions/01-wireframe.md`](actions/01-wireframe.md) for the single atomic +action, and [`assets/wireframe-template.md`](assets/wireframe-template.md) +for the wireframe structure. diff --git a/plugins/aidd-pm/skills/04-wireframe/SKILL.md b/plugins/aidd-pm/skills/04-wireframe/SKILL.md new file mode 100644 index 000000000..0fdfff285 --- /dev/null +++ b/plugins/aidd-pm/skills/04-wireframe/SKILL.md @@ -0,0 +1,39 @@ +--- +name: 04-wireframe +description: Produce low-fidelity wireframes from a PRD or feature description, validated with the user before save. Use when the user says "wireframe", "wireframes", "wireframe the feature", "screen layout", "low-fi mockup", "maquette fil de fer", or asks for the screens and navigation flow of a feature. Do NOT use for high-fidelity visual design, generating UI code, drafting a PRD, or writing a spec. +--- + +# Wireframe + +Turns product requirements into low-fidelity wireframes: a screen inventory, ASCII layouts, and a navigation flow. Stays at the structure level; never visual design and never code. + +## Available actions + +| # | Action | Role | Input | +| --- | ----------- | ---------------------------------------------------------------- | ------------------------------------------------ | +| 01 | `wireframe` | Parse PRD or description, draft wireframes per template, validate, save | prd_path or feature_description, user_flows (optional) | + +## Default flow + +Single action skill. The router dispatches to `wireframe` whenever a wireframe-generation phrase appears. + +## Transversal rules + +- Low fidelity only. Describe layout and structure, never visual design (colors, typography, spacing). +- Never produce executable code. No HTML, CSS, JS, or component snippets; wireframes are read, not run. +- Derive screens from the PRD user flows, information architecture, and acceptance criteria. Never invent intent; mark every gap as `TBD: `. +- Always wait for explicit user validation before saving. +- Save path: `aidd_docs/tasks//--wireframe.md`. +- Source of truth for structure: `@assets/wireframe-template.md`. + +## References + +- None. + +## Assets + +- `@assets/wireframe-template.md`: wireframe body template. + +## External data + +- None. diff --git a/plugins/aidd-pm/skills/04-wireframe/actions/01-wireframe.md b/plugins/aidd-pm/skills/04-wireframe/actions/01-wireframe.md new file mode 100644 index 000000000..f86ad5425 --- /dev/null +++ b/plugins/aidd-pm/skills/04-wireframe/actions/01-wireframe.md @@ -0,0 +1,41 @@ +# 01 - Wireframe + +Parse the product input, draft low-fidelity wireframes per the template, validate with the user, then save the file under `aidd_docs/tasks/`. + +## Inputs + +```yaml +prd_path: aidd_docs/tasks/<...>-prd.md # optional; preferred source when available +feature_description: # required when no prd_path is given +user_flows: [] # optional; flows to anchor the screens +``` + +## Outputs + +```yaml +wireframe_path: aidd_docs/tasks//--wireframe.md +feature_name: +sections_present: + - screen-inventory + - layouts + - component-hierarchy + - navigation-flow + - states-and-annotations + - responsive-notes + - open-questions +``` + +## Process + +1. **Parse input**. Read the PRD when `prd_path` is given; otherwise work from `feature_description`. Extract the screens from user flows, information architecture, and acceptance criteria. +2. **Draft**. Fill `assets/wireframe-template.md`: list every screen, draw an ASCII layout and component hierarchy per screen, express the navigation flow as a Mermaid `flowchart`, annotate empty, loading, and error states, and note responsive behavior. Mark unknowns as `TBD: `. +3. **Validate**. Show the full draft to the user. Wait for explicit approval. Apply revisions and re-show on each iteration. +4. **Save**. Write the approved wireframe to `aidd_docs/tasks//--wireframe.md`. Create the month directory when missing. +5. **Return** the structured Outputs block. + +## Test + +- **File saved**: `wireframe_path` exists on disk after the action completes. +- **All sections**: the file contains every heading listed in `sections_present`. +- **Navigation flow**: the file contains at least one Mermaid `flowchart` block. +- **No code**: the file has no executable code blocks (no ```html, ```css, ```js) and no component markup describing how to build the UI. diff --git a/plugins/aidd-pm/skills/04-wireframe/assets/wireframe-template.md b/plugins/aidd-pm/skills/04-wireframe/assets/wireframe-template.md new file mode 100644 index 000000000..b38130809 --- /dev/null +++ b/plugins/aidd-pm/skills/04-wireframe/assets/wireframe-template.md @@ -0,0 +1,92 @@ +--- +name: wireframe +description: Low-fidelity wireframe template (screens, layouts, navigation flow) +argument-hint: N/A +--- + +# [Feature name] - Wireframes + +[One-paragraph summary of the feature and the screens it introduces or changes.] + +## 1. Screen Inventory + +| ID | Screen | Purpose | Source (user flow / criterion) | +| --- | ------------- | -------------------------------- | ------------------------------ | +| S1 | [Screen name] | [What the user does here] | [Flow or acceptance criterion] | +| S2 | [Screen name] | [What the user does here] | [Flow or acceptance criterion] | + +## 2. Layouts + +Low-fidelity, structure only. No colors, typography, or spacing. + +### S1 - [Screen name] + +```text ++--------------------------------------------------+ +| [Logo] [Nav] [Account] | ++--------------------------------------------------+ +| [Page title] | +| | +| +-------------------+ +---------------------+ | +| | [Primary content] | | [Secondary panel] | | +| | | | | | +| +-------------------+ +---------------------+ | +| | +| [ Primary action ] [ Secondary action ] | ++--------------------------------------------------+ +``` + +#### Component hierarchy + +- Header + - Logo + - Nav + - Account menu +- Main + - Page title + - Primary content + - Secondary panel +- Actions + - Primary action + - Secondary action + +### S2 - [Screen name] + +```text +[ASCII layout for the next screen] +``` + +#### Component hierarchy + +- [Region] + - [Element] + +## 3. Navigation Flow + +```mermaid +flowchart LR + S1["S1: [Screen name]"] -->|primary action| S2["S2: [Screen name]"] + S2 -->|back| S1 +``` + +## 4. States and Annotations + +Per screen, describe the non-default states. + +### S1 - [Screen name] + +- **Empty**: [What the user sees with no data.] +- **Loading**: [Placeholder or skeleton behavior.] +- **Error**: [Message and recovery path.] +- **Notes**: [Edge cases, permissions, validation rules worth flagging.] + +## 5. Responsive Notes + +- **Breakpoints**: [Mobile, tablet, desktop expectations.] +- **Mobile-first?**: [Yes/No and what collapses or reflows.] +- **Priority content**: [What stays visible on small screens.] + +## 6. Open Questions + +- [ ] TBD: [Question that blocks finalizing a screen.] +- [ ] TBD: [Decision still needed from product or design.] diff --git a/plugins/aidd-pm/skills/04-wireframe/evals/scenarios.json b/plugins/aidd-pm/skills/04-wireframe/evals/scenarios.json new file mode 100644 index 000000000..0fda23ddf --- /dev/null +++ b/plugins/aidd-pm/skills/04-wireframe/evals/scenarios.json @@ -0,0 +1,15 @@ +[ + { "prompt": "Wireframe the checkout feature", "expect_action": "wireframe" }, + { "prompt": "Create wireframes for the onboarding flow", "expect_action": "wireframe" }, + { "prompt": "Draw the screen layout for the dashboard", "expect_action": "wireframe" }, + { "prompt": "Low-fi mockup of the search results page", "expect_action": "wireframe" }, + { "prompt": "Wireframe the screens for billing from the PRD", "expect_action": "wireframe" }, + { "prompt": "Lay out the screens and navigation for the settings area", "expect_action": "wireframe" }, + { "prompt": "Fais les wireframes de la feature login", "expect_action": "wireframe" }, + { "prompt": "Maquette fil de fer pour le panier", "expect_action": "wireframe" }, + { "prompt": "Dessine les écrans du tableau de bord", "expect_action": "wireframe" }, + { "prompt": "Draft a PRD for billing", "expect_action": null }, + { "prompt": "Draft a spec from the PRD", "expect_action": null }, + { "prompt": "Build the login page in React", "expect_action": null }, + { "prompt": "Design a high-fidelity mockup with our brand colors", "expect_action": null } +] diff --git a/plugins/aidd-pm/skills/04-spec/README.md b/plugins/aidd-pm/skills/05-spec/README.md similarity index 93% rename from plugins/aidd-pm/skills/04-spec/README.md rename to plugins/aidd-pm/skills/05-spec/README.md index 80d2829d6..9c912bf26 100644 --- a/plugins/aidd-pm/skills/04-spec/README.md +++ b/plugins/aidd-pm/skills/05-spec/README.md @@ -1,6 +1,6 @@ ← [aidd-framework](../../../../README.md) / [aidd-pm](../../README.md) -# 04 - Spec +# 05 - Spec Generates or refines the immutable contract between human intent and the downstream agents that will plan, implement, and review the work. The spec @@ -26,13 +26,13 @@ locked once validated. Build a fresh spec from a request or an existing PRD: ``` -Use skill aidd-pm:04-spec build for +Use skill aidd-pm:05-spec build for ``` Refine an existing spec from reviewer findings: ``` -Use skill aidd-pm:04-spec refine on with +Use skill aidd-pm:05-spec refine on with ``` The router picks the action from the inputs: presence of `existing_spec` diff --git a/plugins/aidd-pm/skills/04-spec/SKILL.md b/plugins/aidd-pm/skills/05-spec/SKILL.md similarity index 99% rename from plugins/aidd-pm/skills/04-spec/SKILL.md rename to plugins/aidd-pm/skills/05-spec/SKILL.md index b72ce1252..ac28dc715 100644 --- a/plugins/aidd-pm/skills/04-spec/SKILL.md +++ b/plugins/aidd-pm/skills/05-spec/SKILL.md @@ -1,5 +1,5 @@ --- -name: 04-spec +name: 05-spec description: Generate or refine a project spec from a free-form human request, an existing PRD, or reviewer findings. Use when the user says "draft spec", "spec for X", "refine the spec", "generate spec from prd", "/spec", or when an orchestrator needs a normalized contract before planning. Do NOT use for writing source code, drafting a full PRD, or modifying a validated and locked spec. --- diff --git a/plugins/aidd-pm/skills/04-spec/actions/01-build.md b/plugins/aidd-pm/skills/05-spec/actions/01-build.md similarity index 100% rename from plugins/aidd-pm/skills/04-spec/actions/01-build.md rename to plugins/aidd-pm/skills/05-spec/actions/01-build.md diff --git a/plugins/aidd-pm/skills/04-spec/actions/02-refine.md b/plugins/aidd-pm/skills/05-spec/actions/02-refine.md similarity index 100% rename from plugins/aidd-pm/skills/04-spec/actions/02-refine.md rename to plugins/aidd-pm/skills/05-spec/actions/02-refine.md diff --git a/plugins/aidd-pm/skills/04-spec/assets/spec-template.md b/plugins/aidd-pm/skills/05-spec/assets/spec-template.md similarity index 100% rename from plugins/aidd-pm/skills/04-spec/assets/spec-template.md rename to plugins/aidd-pm/skills/05-spec/assets/spec-template.md diff --git a/plugins/aidd-pm/skills/04-spec/assets/spec-validator.yml b/plugins/aidd-pm/skills/05-spec/assets/spec-validator.yml similarity index 100% rename from plugins/aidd-pm/skills/04-spec/assets/spec-validator.yml rename to plugins/aidd-pm/skills/05-spec/assets/spec-validator.yml diff --git a/plugins/aidd-pm/skills/04-spec/evals/scenarios.json b/plugins/aidd-pm/skills/05-spec/evals/scenarios.json similarity index 100% rename from plugins/aidd-pm/skills/04-spec/evals/scenarios.json rename to plugins/aidd-pm/skills/05-spec/evals/scenarios.json From 2e507934f2cb8dd8cdb84a750ffef898bddc7f7c Mon Sep 17 00:00:00 2001 From: alexsoyes Date: Sun, 7 Jun 2026 14:12:49 +0200 Subject: [PATCH 2/8] feat(aidd-pm): add clarify step and reviewer checklist to wireframe Promote PRD reading to a first-class step and reuse the PRD feature_name so the wireframe sits next to it. Add a Clarify step that proposes a screen inventory and screen types for the user to confirm or challenge before any layout is drawn, plus optional platform and screen_types inputs. Add assets/wireframe-validator.yml mirroring the spec-validator pattern: the skill does not self-validate; a caller spawns a reviewer with the checklist. This gives a dedicated critique without coupling aidd-pm to another plugin's agents (orthogonality rule). Co-Authored-By: Claude Opus 4.8 (1M context) Signed-off-by: alexsoyes --- plugins/aidd-pm/skills/04-wireframe/README.md | 9 ++-- plugins/aidd-pm/skills/04-wireframe/SKILL.md | 5 +- .../04-wireframe/actions/01-wireframe.md | 17 +++++-- .../assets/wireframe-validator.yml | 51 +++++++++++++++++++ 4 files changed, 73 insertions(+), 9 deletions(-) create mode 100644 plugins/aidd-pm/skills/04-wireframe/assets/wireframe-validator.yml diff --git a/plugins/aidd-pm/skills/04-wireframe/README.md b/plugins/aidd-pm/skills/04-wireframe/README.md index 2ec7c4bc0..fad6017c4 100644 --- a/plugins/aidd-pm/skills/04-wireframe/README.md +++ b/plugins/aidd-pm/skills/04-wireframe/README.md @@ -27,7 +27,8 @@ Stays at the structure level; never visual design and never code. Use skill aidd-pm:04-wireframe for ``` -The skill parses the input, drafts each screen per template, shows the +The skill reads the PRD, proposes a screen inventory and screen types for +you to confirm or challenge, then drafts each screen per template, shows the draft, and waits for explicit validation before saving. ## Outputs @@ -47,5 +48,7 @@ draft, and waits for explicit validation before saving. See [`SKILL.md`](SKILL.md) for the action contract, [`actions/01-wireframe.md`](actions/01-wireframe.md) for the single atomic -action, and [`assets/wireframe-template.md`](assets/wireframe-template.md) -for the wireframe structure. +action, [`assets/wireframe-template.md`](assets/wireframe-template.md) for +the wireframe structure, and +[`assets/wireframe-validator.yml`](assets/wireframe-validator.yml) for the +checklist a caller's reviewer uses to validate the result. diff --git a/plugins/aidd-pm/skills/04-wireframe/SKILL.md b/plugins/aidd-pm/skills/04-wireframe/SKILL.md index 0fdfff285..7159b6bff 100644 --- a/plugins/aidd-pm/skills/04-wireframe/SKILL.md +++ b/plugins/aidd-pm/skills/04-wireframe/SKILL.md @@ -21,8 +21,10 @@ Single action skill. The router dispatches to `wireframe` whenever a wireframe-g - Low fidelity only. Describe layout and structure, never visual design (colors, typography, spacing). - Never produce executable code. No HTML, CSS, JS, or component snippets; wireframes are read, not run. -- Derive screens from the PRD user flows, information architecture, and acceptance criteria. Never invent intent; mark every gap as `TBD: `. +- Read the PRD when a path is given and reuse its `feature_name` so the wireframe sits next to it. Derive screens from its user flows, information architecture, and acceptance criteria. Never invent intent; mark every gap as `TBD: `. +- Confirm the screen inventory and screen types with the user before drawing any layout. - Always wait for explicit user validation before saving. +- Do not self-validate. The caller spawns a reviewer with `@assets/wireframe-validator.yml`; findings come back for the next revision. - Save path: `aidd_docs/tasks//--wireframe.md`. - Source of truth for structure: `@assets/wireframe-template.md`. @@ -33,6 +35,7 @@ Single action skill. The router dispatches to `wireframe` whenever a wireframe-g ## Assets - `@assets/wireframe-template.md`: wireframe body template. +- `@assets/wireframe-validator.yml`: checklist a reviewer uses to validate a wireframe. ## External data diff --git a/plugins/aidd-pm/skills/04-wireframe/actions/01-wireframe.md b/plugins/aidd-pm/skills/04-wireframe/actions/01-wireframe.md index f86ad5425..e197be3ca 100644 --- a/plugins/aidd-pm/skills/04-wireframe/actions/01-wireframe.md +++ b/plugins/aidd-pm/skills/04-wireframe/actions/01-wireframe.md @@ -8,6 +8,8 @@ Parse the product input, draft low-fidelity wireframes per the template, validat prd_path: aidd_docs/tasks/<...>-prd.md # optional; preferred source when available feature_description: # required when no prd_path is given user_flows: [] # optional; flows to anchor the screens +platform: web | mobile | responsive # optional; asked during clarify when omitted +screen_types: [] # optional; asked during clarify when omitted ``` ## Outputs @@ -27,15 +29,20 @@ sections_present: ## Process -1. **Parse input**. Read the PRD when `prd_path` is given; otherwise work from `feature_description`. Extract the screens from user flows, information architecture, and acceptance criteria. -2. **Draft**. Fill `assets/wireframe-template.md`: list every screen, draw an ASCII layout and component hierarchy per screen, express the navigation flow as a Mermaid `flowchart`, annotate empty, loading, and error states, and note responsive behavior. Mark unknowns as `TBD: `. -3. **Validate**. Show the full draft to the user. Wait for explicit approval. Apply revisions and re-show on each iteration. -4. **Save**. Write the approved wireframe to `aidd_docs/tasks//--wireframe.md`. Create the month directory when missing. -5. **Return** the structured Outputs block. +1. **Read the source**. When `prd_path` is given, read the PRD and extract the screens from its user flows, information architecture, and acceptance criteria; reuse its `feature_name` so the wireframe sits next to the PRD. Otherwise work from `feature_description`. If neither is usable, ask the user to point to a PRD or describe the feature before continuing. +2. **Clarify before drawing**. Propose a screen inventory derived from the source and, for each screen, the screen type (form, list, detail, dashboard, ...). Confirm `platform` (web / mobile / responsive) and the user flows in scope. Surface assumptions and ask the user to confirm or adjust. Iterate until the inventory and screen types are agreed; never start layouts on an unconfirmed inventory. +3. **Draft**. Fill `assets/wireframe-template.md`: list every agreed screen, draw an ASCII layout and component hierarchy per screen, express the navigation flow as a Mermaid `flowchart`, annotate empty, loading, and error states, and note responsive behavior. Mark unknowns as `TBD: `. +4. **Validate**. Show the full draft to the user. Wait for explicit approval. Apply revisions and re-show on each iteration. +5. **Save**. Write the approved wireframe to `aidd_docs/tasks//--wireframe.md`. Create the month directory when missing. +6. **Return** the structured Outputs block. + +Do not self-validate. When a caller needs a quality gate, it spawns a reviewer with `@assets/wireframe-validator.yml`; findings come back for the next revision. ## Test - **File saved**: `wireframe_path` exists on disk after the action completes. +- **No orphan screens**: every screen in the file traces to a user flow, information-architecture entry, or acceptance criterion in the source. +- **Traceable to source**: when `prd_path` was given, `feature_name` matches the PRD's and every user flow in scope maps to at least one screen. - **All sections**: the file contains every heading listed in `sections_present`. - **Navigation flow**: the file contains at least one Mermaid `flowchart` block. - **No code**: the file has no executable code blocks (no ```html, ```css, ```js) and no component markup describing how to build the UI. diff --git a/plugins/aidd-pm/skills/04-wireframe/assets/wireframe-validator.yml b/plugins/aidd-pm/skills/04-wireframe/assets/wireframe-validator.yml new file mode 100644 index 000000000..d7d17a9f9 --- /dev/null +++ b/plugins/aidd-pm/skills/04-wireframe/assets/wireframe-validator.yml @@ -0,0 +1,51 @@ +# Checklist used by the reviewer agent to validate a wireframe. +# Each criterion is independently scored. Required criteria must be `fulfilled` for the wireframe to pass. + +criteria: + - id: flows_covered + description: Every user flow in scope maps to at least one screen. No flow from the source is left without a screen. + required: true + weight: 25 + + - id: screens_complete + description: Each screen has a layout and a component hierarchy. No screen is named without being drawn. + required: true + weight: 20 + + - id: navigation_flow + description: A navigation flow is present as a Mermaid flowchart and every screen is reachable in it. + required: true + weight: 15 + + - id: states_annotated + description: Empty, loading, and error states are addressed for screens where they apply. + required: true + weight: 15 + + - id: responsive_addressed + description: Responsive behavior is stated (breakpoints, what reflows or collapses), or explicitly marked not applicable. + required: true + weight: 10 + + - id: low_fidelity + description: Structure only. No visual design (colors, typography, spacing) and no executable UI code. + required: true + weight: 10 + + - id: open_questions + description: Unknowns captured as TBD with a precise question rather than guessed. + required: false + weight: 5 + +hard_thresholds: + any_required_unfulfilled: invalid + contains_executable_code: invalid + flow_without_screen: invalid + contains_visual_design: invalid + +scoring: + pass_threshold: 90 + notes: | + A wireframe is valid when every required criterion is fulfilled AND the weighted score + is at or above the pass_threshold. Hard thresholds force `invalid` regardless of score. + Visual design (colors, typography) and UI code belong to downstream design and dev, not the wireframe. From ff202c4731ac6316dfb5a984718f35d1da3b8185 Mon Sep 17 00:00:00 2001 From: alexsoyes Date: Sun, 7 Jun 2026 14:27:30 +0200 Subject: [PATCH 3/8] fix(aidd-pm): make wireframe work without a PRD Drop prd_path as an input. The action auto-loads a related PRD or user stories from aidd_docs/ when they exist, but a document is never a precondition: with nothing found, screens are derived from the feature description and the clarify dialogue. Updates SKILL, action contract, validator, and README accordingly. Co-Authored-By: Claude Opus 4.8 (1M context) Signed-off-by: alexsoyes --- plugins/aidd-pm/CATALOG.md | 2 +- plugins/aidd-pm/skills/04-wireframe/README.md | 16 +++++++++------- plugins/aidd-pm/skills/04-wireframe/SKILL.md | 6 +++--- .../skills/04-wireframe/actions/01-wireframe.md | 14 +++++++------- .../04-wireframe/assets/wireframe-validator.yml | 2 +- 5 files changed, 21 insertions(+), 19 deletions(-) diff --git a/plugins/aidd-pm/CATALOG.md b/plugins/aidd-pm/CATALOG.md index 77378eb98..4f33dbbaa 100644 --- a/plugins/aidd-pm/CATALOG.md +++ b/plugins/aidd-pm/CATALOG.md @@ -62,7 +62,7 @@ Auto-generated index of skills, agents, references and assets shipped by the `ai | `assets` | [wireframe-template.md](skills/04-wireframe/assets/wireframe-template.md) | `Low-fidelity wireframe template (screens, layouts, navigation flow)` | - | | `evals` | [scenarios.json](skills/04-wireframe/evals/scenarios.json) | - | - | | `-` | [README.md](skills/04-wireframe/README.md) | - | - | -| `-` | [SKILL.md](skills/04-wireframe/SKILL.md) | `Produce low-fidelity wireframes from a PRD or feature description, validated with the user before save. Use when the user says "wireframe", "wireframes", "wireframe the feature", "screen layout", "low-fi mockup", "maquette fil de fer", or asks for the screens and navigation flow of a feature. Do NOT use for high-fidelity visual design, generating UI code, drafting a PRD, or writing a spec.` | - | +| `-` | [SKILL.md](skills/04-wireframe/SKILL.md) | `Produce low-fidelity wireframes from a feature description, auto-loading a PRD from aidd_docs when one exists, validated with the user before save. Use when the user says "wireframe", "wireframes", "wireframe the feature", "screen layout", "low-fi mockup", "maquette fil de fer", or asks for the screens and navigation flow of a feature. Do NOT use for high-fidelity visual design, generating UI code, drafting a PRD, or writing a spec.` | - | #### `skills/05-spec` diff --git a/plugins/aidd-pm/skills/04-wireframe/README.md b/plugins/aidd-pm/skills/04-wireframe/README.md index fad6017c4..af25c12e7 100644 --- a/plugins/aidd-pm/skills/04-wireframe/README.md +++ b/plugins/aidd-pm/skills/04-wireframe/README.md @@ -10,8 +10,8 @@ Stays at the structure level; never visual design and never code. - "wireframe", "wireframes", "wireframe the feature". - "screen layout", "low-fi mockup", "maquette fil de fer". -- When a PRD is ready and you need to lay out the screens and navigation - before writing the spec. +- When you need to lay out the screens and navigation of a feature, with or + without an existing PRD. ## When NOT to use @@ -24,12 +24,13 @@ Stays at the structure level; never visual design and never code. ## How to invoke ``` -Use skill aidd-pm:04-wireframe for +Use skill aidd-pm:04-wireframe for ``` -The skill reads the PRD, proposes a screen inventory and screen types for -you to confirm or challenge, then drafts each screen per template, shows the -draft, and waits for explicit validation before saving. +The skill auto-loads a related PRD from `aidd_docs/` when one exists, proposes +a screen inventory and screen types for you to confirm or challenge, then +drafts each screen per template, shows the draft, and waits for explicit +validation before saving. No document is required to start. ## Outputs @@ -41,7 +42,8 @@ draft, and waits for explicit validation before saving. ## Prerequisites -- A PRD path, a feature description, or both. +- A feature to wireframe. A PRD is optional; it is auto-loaded from + `aidd_docs/` when present. - Write access to `aidd_docs/tasks/` in the current repo. ## Technical details diff --git a/plugins/aidd-pm/skills/04-wireframe/SKILL.md b/plugins/aidd-pm/skills/04-wireframe/SKILL.md index 7159b6bff..4b3fac9e6 100644 --- a/plugins/aidd-pm/skills/04-wireframe/SKILL.md +++ b/plugins/aidd-pm/skills/04-wireframe/SKILL.md @@ -1,6 +1,6 @@ --- name: 04-wireframe -description: Produce low-fidelity wireframes from a PRD or feature description, validated with the user before save. Use when the user says "wireframe", "wireframes", "wireframe the feature", "screen layout", "low-fi mockup", "maquette fil de fer", or asks for the screens and navigation flow of a feature. Do NOT use for high-fidelity visual design, generating UI code, drafting a PRD, or writing a spec. +description: Produce low-fidelity wireframes from a feature description, auto-loading a PRD from aidd_docs when one exists, validated with the user before save. Use when the user says "wireframe", "wireframes", "wireframe the feature", "screen layout", "low-fi mockup", "maquette fil de fer", or asks for the screens and navigation flow of a feature. Do NOT use for high-fidelity visual design, generating UI code, drafting a PRD, or writing a spec. --- # Wireframe @@ -11,7 +11,7 @@ Turns product requirements into low-fidelity wireframes: a screen inventory, ASC | # | Action | Role | Input | | --- | ----------- | ---------------------------------------------------------------- | ------------------------------------------------ | -| 01 | `wireframe` | Parse PRD or description, draft wireframes per template, validate, save | prd_path or feature_description, user_flows (optional) | +| 01 | `wireframe` | Load context from aidd_docs, clarify screens, draft per template, validate, save | feature_description, platform (optional) | ## Default flow @@ -21,7 +21,7 @@ Single action skill. The router dispatches to `wireframe` whenever a wireframe-g - Low fidelity only. Describe layout and structure, never visual design (colors, typography, spacing). - Never produce executable code. No HTML, CSS, JS, or component snippets; wireframes are read, not run. -- Read the PRD when a path is given and reuse its `feature_name` so the wireframe sits next to it. Derive screens from its user flows, information architecture, and acceptance criteria. Never invent intent; mark every gap as `TBD: `. +- Auto-load related documents (PRD, user stories) from `aidd_docs/` when they exist and reuse the PRD `feature_name` so the wireframe sits next to it. A PRD is never required; a wireframe can be produced from the feature description alone. Never invent intent; mark every gap as `TBD: `. - Confirm the screen inventory and screen types with the user before drawing any layout. - Always wait for explicit user validation before saving. - Do not self-validate. The caller spawns a reviewer with `@assets/wireframe-validator.yml`; findings come back for the next revision. diff --git a/plugins/aidd-pm/skills/04-wireframe/actions/01-wireframe.md b/plugins/aidd-pm/skills/04-wireframe/actions/01-wireframe.md index e197be3ca..4a891f45b 100644 --- a/plugins/aidd-pm/skills/04-wireframe/actions/01-wireframe.md +++ b/plugins/aidd-pm/skills/04-wireframe/actions/01-wireframe.md @@ -5,13 +5,13 @@ Parse the product input, draft low-fidelity wireframes per the template, validat ## Inputs ```yaml -prd_path: aidd_docs/tasks/<...>-prd.md # optional; preferred source when available -feature_description: # required when no prd_path is given -user_flows: [] # optional; flows to anchor the screens +feature_description: # required; the feature to wireframe platform: web | mobile | responsive # optional; asked during clarify when omitted screen_types: [] # optional; asked during clarify when omitted ``` +No document is required. The action auto-loads related context from `aidd_docs/` when it exists; a PRD is never a precondition. + ## Outputs ```yaml @@ -29,8 +29,8 @@ sections_present: ## Process -1. **Read the source**. When `prd_path` is given, read the PRD and extract the screens from its user flows, information architecture, and acceptance criteria; reuse its `feature_name` so the wireframe sits next to the PRD. Otherwise work from `feature_description`. If neither is usable, ask the user to point to a PRD or describe the feature before continuing. -2. **Clarify before drawing**. Propose a screen inventory derived from the source and, for each screen, the screen type (form, list, detail, dashboard, ...). Confirm `platform` (web / mobile / responsive) and the user flows in scope. Surface assumptions and ask the user to confirm or adjust. Iterate until the inventory and screen types are agreed; never start layouts on an unconfirmed inventory. +1. **Gather context from `aidd_docs/`**. Search `aidd_docs/` for documents related to `feature_description` (a PRD, user stories) and load any that exist; they seed the screen inventory and `feature_name`. Treat them as optional context, never a precondition: when nothing is found, derive everything from `feature_description` and the clarify dialogue. +2. **Clarify before drawing**. Propose a screen inventory and, for each screen, the screen type (form, list, detail, dashboard, ...). Confirm `platform` (web / mobile / responsive) and the user flows in scope. Surface assumptions and ask the user to confirm or adjust. Iterate until the inventory and screen types are agreed; never start layouts on an unconfirmed inventory. 3. **Draft**. Fill `assets/wireframe-template.md`: list every agreed screen, draw an ASCII layout and component hierarchy per screen, express the navigation flow as a Mermaid `flowchart`, annotate empty, loading, and error states, and note responsive behavior. Mark unknowns as `TBD: `. 4. **Validate**. Show the full draft to the user. Wait for explicit approval. Apply revisions and re-show on each iteration. 5. **Save**. Write the approved wireframe to `aidd_docs/tasks//--wireframe.md`. Create the month directory when missing. @@ -41,8 +41,8 @@ Do not self-validate. When a caller needs a quality gate, it spawns a reviewer w ## Test - **File saved**: `wireframe_path` exists on disk after the action completes. -- **No orphan screens**: every screen in the file traces to a user flow, information-architecture entry, or acceptance criterion in the source. -- **Traceable to source**: when `prd_path` was given, `feature_name` matches the PRD's and every user flow in scope maps to at least one screen. +- **No orphan screens**: every screen in the file traces to a user flow or a screen the user agreed during clarify. +- **Aligned with loaded context**: when a related document was found in `aidd_docs/`, `feature_name` matches it and every user flow it describes maps to at least one screen. - **All sections**: the file contains every heading listed in `sections_present`. - **Navigation flow**: the file contains at least one Mermaid `flowchart` block. - **No code**: the file has no executable code blocks (no ```html, ```css, ```js) and no component markup describing how to build the UI. diff --git a/plugins/aidd-pm/skills/04-wireframe/assets/wireframe-validator.yml b/plugins/aidd-pm/skills/04-wireframe/assets/wireframe-validator.yml index d7d17a9f9..bd37af370 100644 --- a/plugins/aidd-pm/skills/04-wireframe/assets/wireframe-validator.yml +++ b/plugins/aidd-pm/skills/04-wireframe/assets/wireframe-validator.yml @@ -3,7 +3,7 @@ criteria: - id: flows_covered - description: Every user flow in scope maps to at least one screen. No flow from the source is left without a screen. + description: Every user flow in scope maps to at least one screen. No in-scope flow is left without a screen. required: true weight: 25 From 7d58ad3a14dbe17554d1248a1ce4d825eeb01f95 Mon Sep 17 00:00:00 2001 From: alexsoyes Date: Sun, 7 Jun 2026 14:30:09 +0200 Subject: [PATCH 4/8] docs(aidd-pm): make wireframe explicitly stage-agnostic and legacy-friendly Broaden the context-gathering step beyond aidd_docs lookup: the skill is callable at any stage and, on a legacy project with no product docs, takes cues from the existing screens the user points to. Clarify this in SKILL, action, and README. Co-Authored-By: Claude Opus 4.8 (1M context) Signed-off-by: alexsoyes --- plugins/aidd-pm/skills/04-wireframe/README.md | 2 ++ plugins/aidd-pm/skills/04-wireframe/SKILL.md | 2 +- plugins/aidd-pm/skills/04-wireframe/actions/01-wireframe.md | 2 +- 3 files changed, 4 insertions(+), 2 deletions(-) diff --git a/plugins/aidd-pm/skills/04-wireframe/README.md b/plugins/aidd-pm/skills/04-wireframe/README.md index af25c12e7..e0d8fefc6 100644 --- a/plugins/aidd-pm/skills/04-wireframe/README.md +++ b/plugins/aidd-pm/skills/04-wireframe/README.md @@ -12,6 +12,8 @@ Stays at the structure level; never visual design and never code. - "screen layout", "low-fi mockup", "maquette fil de fer". - When you need to lay out the screens and navigation of a feature, with or without an existing PRD. +- At any stage, including a legacy project with no product docs, to capture + or redesign existing screens. ## When NOT to use diff --git a/plugins/aidd-pm/skills/04-wireframe/SKILL.md b/plugins/aidd-pm/skills/04-wireframe/SKILL.md index 4b3fac9e6..9f0d4fb77 100644 --- a/plugins/aidd-pm/skills/04-wireframe/SKILL.md +++ b/plugins/aidd-pm/skills/04-wireframe/SKILL.md @@ -21,7 +21,7 @@ Single action skill. The router dispatches to `wireframe` whenever a wireframe-g - Low fidelity only. Describe layout and structure, never visual design (colors, typography, spacing). - Never produce executable code. No HTML, CSS, JS, or component snippets; wireframes are read, not run. -- Auto-load related documents (PRD, user stories) from `aidd_docs/` when they exist and reuse the PRD `feature_name` so the wireframe sits next to it. A PRD is never required; a wireframe can be produced from the feature description alone. Never invent intent; mark every gap as `TBD: `. +- Auto-load related documents (PRD, user stories) from `aidd_docs/` when they exist and reuse the PRD `feature_name` so the wireframe sits next to it. A PRD is never required and the skill is callable at any stage, including legacy projects with no product docs; a wireframe can be produced from the feature description alone. Never invent intent; mark every gap as `TBD: `. - Confirm the screen inventory and screen types with the user before drawing any layout. - Always wait for explicit user validation before saving. - Do not self-validate. The caller spawns a reviewer with `@assets/wireframe-validator.yml`; findings come back for the next revision. diff --git a/plugins/aidd-pm/skills/04-wireframe/actions/01-wireframe.md b/plugins/aidd-pm/skills/04-wireframe/actions/01-wireframe.md index 4a891f45b..3ecf1ecf3 100644 --- a/plugins/aidd-pm/skills/04-wireframe/actions/01-wireframe.md +++ b/plugins/aidd-pm/skills/04-wireframe/actions/01-wireframe.md @@ -29,7 +29,7 @@ sections_present: ## Process -1. **Gather context from `aidd_docs/`**. Search `aidd_docs/` for documents related to `feature_description` (a PRD, user stories) and load any that exist; they seed the screen inventory and `feature_name`. Treat them as optional context, never a precondition: when nothing is found, derive everything from `feature_description` and the clarify dialogue. +1. **Gather any available context**. The skill is callable at any stage. Load related documents from `aidd_docs/` (a PRD, user stories) when they exist, and on an existing or legacy project take cues from the current screens or behavior the user points to. Treat all of it as optional context, never a precondition: with nothing available, derive everything from `feature_description` and the clarify dialogue. 2. **Clarify before drawing**. Propose a screen inventory and, for each screen, the screen type (form, list, detail, dashboard, ...). Confirm `platform` (web / mobile / responsive) and the user flows in scope. Surface assumptions and ask the user to confirm or adjust. Iterate until the inventory and screen types are agreed; never start layouts on an unconfirmed inventory. 3. **Draft**. Fill `assets/wireframe-template.md`: list every agreed screen, draw an ASCII layout and component hierarchy per screen, express the navigation flow as a Mermaid `flowchart`, annotate empty, loading, and error states, and note responsive behavior. Mark unknowns as `TBD: `. 4. **Validate**. Show the full draft to the user. Wait for explicit approval. Apply revisions and re-show on each iteration. From b1df7b0fab354a8657aced0bbf47572171725533 Mon Sep 17 00:00:00 2001 From: Alex <8973343+alexsoyes@users.noreply.github.com> Date: Sun, 7 Jun 2026 14:38:16 +0200 Subject: [PATCH 5/8] Apply suggestion from @alexsoyes --- plugins/aidd-pm/skills/04-wireframe/actions/01-wireframe.md | 1 - 1 file changed, 1 deletion(-) diff --git a/plugins/aidd-pm/skills/04-wireframe/actions/01-wireframe.md b/plugins/aidd-pm/skills/04-wireframe/actions/01-wireframe.md index 3ecf1ecf3..70707c805 100644 --- a/plugins/aidd-pm/skills/04-wireframe/actions/01-wireframe.md +++ b/plugins/aidd-pm/skills/04-wireframe/actions/01-wireframe.md @@ -10,7 +10,6 @@ platform: web | mobile | responsive # optional; asked during clarify when o screen_types: [] # optional; asked during clarify when omitted ``` -No document is required. The action auto-loads related context from `aidd_docs/` when it exists; a PRD is never a precondition. ## Outputs From fc18a425bd42d4f31cc045912f17acfceb569f1b Mon Sep 17 00:00:00 2001 From: alexsoyes Date: Sun, 7 Jun 2026 14:43:00 +0200 Subject: [PATCH 6/8] refactor(aidd-pm): split wireframe scaffold from fill Copy the template into aidd_docs/tasks/ as its own step, then fill that copy in place, instead of drafting then saving. Keeps scaffold and fill distinct. Updates the action process and tests, SKILL rules, and README. Co-Authored-By: Claude Opus 4.8 (1M context) Signed-off-by: alexsoyes --- plugins/aidd-pm/skills/04-wireframe/README.md | 6 +++--- plugins/aidd-pm/skills/04-wireframe/SKILL.md | 5 +++-- .../skills/04-wireframe/actions/01-wireframe.md | 11 ++++++----- 3 files changed, 12 insertions(+), 10 deletions(-) diff --git a/plugins/aidd-pm/skills/04-wireframe/README.md b/plugins/aidd-pm/skills/04-wireframe/README.md index e0d8fefc6..65e816192 100644 --- a/plugins/aidd-pm/skills/04-wireframe/README.md +++ b/plugins/aidd-pm/skills/04-wireframe/README.md @@ -30,9 +30,9 @@ Use skill aidd-pm:04-wireframe for ``` The skill auto-loads a related PRD from `aidd_docs/` when one exists, proposes -a screen inventory and screen types for you to confirm or challenge, then -drafts each screen per template, shows the draft, and waits for explicit -validation before saving. No document is required to start. +a screen inventory and screen types for you to confirm or challenge, copies the +template into `aidd_docs/tasks/`, then fills that copy in place and waits for +explicit validation. No document is required to start. ## Outputs diff --git a/plugins/aidd-pm/skills/04-wireframe/SKILL.md b/plugins/aidd-pm/skills/04-wireframe/SKILL.md index 9f0d4fb77..c42a404fd 100644 --- a/plugins/aidd-pm/skills/04-wireframe/SKILL.md +++ b/plugins/aidd-pm/skills/04-wireframe/SKILL.md @@ -11,7 +11,7 @@ Turns product requirements into low-fidelity wireframes: a screen inventory, ASC | # | Action | Role | Input | | --- | ----------- | ---------------------------------------------------------------- | ------------------------------------------------ | -| 01 | `wireframe` | Load context from aidd_docs, clarify screens, draft per template, validate, save | feature_description, platform (optional) | +| 01 | `wireframe` | Load context, clarify screens, copy template into aidd_docs, fill it, validate | feature_description, platform (optional) | ## Default flow @@ -23,7 +23,8 @@ Single action skill. The router dispatches to `wireframe` whenever a wireframe-g - Never produce executable code. No HTML, CSS, JS, or component snippets; wireframes are read, not run. - Auto-load related documents (PRD, user stories) from `aidd_docs/` when they exist and reuse the PRD `feature_name` so the wireframe sits next to it. A PRD is never required and the skill is callable at any stage, including legacy projects with no product docs; a wireframe can be produced from the feature description alone. Never invent intent; mark every gap as `TBD: `. - Confirm the screen inventory and screen types with the user before drawing any layout. -- Always wait for explicit user validation before saving. +- Copy the template into the save path first, then fill that copy in place; keep scaffold and fill as distinct steps. +- Always wait for explicit user validation before treating the wireframe as final. - Do not self-validate. The caller spawns a reviewer with `@assets/wireframe-validator.yml`; findings come back for the next revision. - Save path: `aidd_docs/tasks//--wireframe.md`. - Source of truth for structure: `@assets/wireframe-template.md`. diff --git a/plugins/aidd-pm/skills/04-wireframe/actions/01-wireframe.md b/plugins/aidd-pm/skills/04-wireframe/actions/01-wireframe.md index 70707c805..777c351fd 100644 --- a/plugins/aidd-pm/skills/04-wireframe/actions/01-wireframe.md +++ b/plugins/aidd-pm/skills/04-wireframe/actions/01-wireframe.md @@ -1,6 +1,6 @@ # 01 - Wireframe -Parse the product input, draft low-fidelity wireframes per the template, validate with the user, then save the file under `aidd_docs/tasks/`. +Gather context, clarify the screens, copy the template into `aidd_docs/tasks/`, then fill that copy in place and validate it with the user. ## Inputs @@ -10,7 +10,6 @@ platform: web | mobile | responsive # optional; asked during clarify when o screen_types: [] # optional; asked during clarify when omitted ``` - ## Outputs ```yaml @@ -30,9 +29,9 @@ sections_present: 1. **Gather any available context**. The skill is callable at any stage. Load related documents from `aidd_docs/` (a PRD, user stories) when they exist, and on an existing or legacy project take cues from the current screens or behavior the user points to. Treat all of it as optional context, never a precondition: with nothing available, derive everything from `feature_description` and the clarify dialogue. 2. **Clarify before drawing**. Propose a screen inventory and, for each screen, the screen type (form, list, detail, dashboard, ...). Confirm `platform` (web / mobile / responsive) and the user flows in scope. Surface assumptions and ask the user to confirm or adjust. Iterate until the inventory and screen types are agreed; never start layouts on an unconfirmed inventory. -3. **Draft**. Fill `assets/wireframe-template.md`: list every agreed screen, draw an ASCII layout and component hierarchy per screen, express the navigation flow as a Mermaid `flowchart`, annotate empty, loading, and error states, and note responsive behavior. Mark unknowns as `TBD: `. -4. **Validate**. Show the full draft to the user. Wait for explicit approval. Apply revisions and re-show on each iteration. -5. **Save**. Write the approved wireframe to `aidd_docs/tasks//--wireframe.md`. Create the month directory when missing. +3. **Scaffold the file**. Copy `assets/wireframe-template.md` verbatim to `aidd_docs/tasks//--wireframe.md`, creating the month directory when missing. This is the only copy step; from here on, edit that file in place. +4. **Fill the copy**. Edit the copied file: replace each placeholder with the agreed screens (an ASCII layout and component hierarchy per screen), the navigation flow as a Mermaid `flowchart`, the empty / loading / error states, and the responsive notes. Mark unknowns as `TBD: `. +5. **Validate**. Show the filled file to the user. Apply revisions directly in the file and re-show on each iteration until explicit approval. 6. **Return** the structured Outputs block. Do not self-validate. When a caller needs a quality gate, it spawns a reviewer with `@assets/wireframe-validator.yml`; findings come back for the next revision. @@ -40,6 +39,8 @@ Do not self-validate. When a caller needs a quality gate, it spawns a reviewer w ## Test - **File saved**: `wireframe_path` exists on disk after the action completes. +- **Scaffolded from template**: the file carries the section headings of `assets/wireframe-template.md`. +- **Filled, not just copied**: no template placeholder text (for example `[Screen name]`, `[Region]`) remains for the in-scope screens. - **No orphan screens**: every screen in the file traces to a user flow or a screen the user agreed during clarify. - **Aligned with loaded context**: when a related document was found in `aidd_docs/`, `feature_name` matches it and every user flow it describes maps to at least one screen. - **All sections**: the file contains every heading listed in `sections_present`. From 3b71974ac7f2e119c534bc1138436751bf5861b2 Mon Sep 17 00:00:00 2001 From: alexsoyes Date: Sun, 7 Jun 2026 14:47:14 +0200 Subject: [PATCH 7/8] docs(aidd-pm): declare aidd_docs as wireframe external data The action auto-loads a PRD or user stories from aidd_docs/ at runtime, so 'External data' must list it instead of None. Co-Authored-By: Claude Opus 4.8 (1M context) Signed-off-by: alexsoyes --- plugins/aidd-pm/skills/04-wireframe/SKILL.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/plugins/aidd-pm/skills/04-wireframe/SKILL.md b/plugins/aidd-pm/skills/04-wireframe/SKILL.md index c42a404fd..b53b281c2 100644 --- a/plugins/aidd-pm/skills/04-wireframe/SKILL.md +++ b/plugins/aidd-pm/skills/04-wireframe/SKILL.md @@ -40,4 +40,4 @@ Single action skill. The router dispatches to `wireframe` whenever a wireframe-g ## External data -- None. +- `aidd_docs/` (a PRD, user stories) - auto-loaded as optional context when present; never required. From ccb3b0cbcfede9fe54028c068d9f4066fc2937db Mon Sep 17 00:00:00 2001 From: alexsoyes Date: Sun, 7 Jun 2026 14:53:10 +0200 Subject: [PATCH 8/8] docs(aidd-pm): de-duplicate wireframe skill docs Each fact now has one canonical home: the template owns the section list (action Outputs and README stop re-enumerating it), the SKILL owns the rules (action drops the repeated self-validate note), and the validator owns the quality criteria (Test drops the bullets that restated them). Trims the PRD-optional and scaffold-vs-fill wording that was repeated across SKILL, action, and README. Co-Authored-By: Claude Opus 4.8 (1M context) Signed-off-by: alexsoyes --- plugins/aidd-pm/skills/04-wireframe/README.md | 15 ++++------ plugins/aidd-pm/skills/04-wireframe/SKILL.md | 8 ++--- .../04-wireframe/actions/01-wireframe.md | 29 +++++-------------- 3 files changed, 16 insertions(+), 36 deletions(-) diff --git a/plugins/aidd-pm/skills/04-wireframe/README.md b/plugins/aidd-pm/skills/04-wireframe/README.md index 65e816192..9f955ac15 100644 --- a/plugins/aidd-pm/skills/04-wireframe/README.md +++ b/plugins/aidd-pm/skills/04-wireframe/README.md @@ -29,23 +29,18 @@ Stays at the structure level; never visual design and never code. Use skill aidd-pm:04-wireframe for ``` -The skill auto-loads a related PRD from `aidd_docs/` when one exists, proposes -a screen inventory and screen types for you to confirm or challenge, copies the -template into `aidd_docs/tasks/`, then fills that copy in place and waits for -explicit validation. No document is required to start. +The skill proposes a screen inventory for you to confirm or challenge, then +drafts and saves the wireframe. See [`SKILL.md`](SKILL.md) for the contract. ## Outputs -- A wireframe file saved at - `aidd_docs/tasks//--wireframe.md`. -- Sections: screen inventory, layouts, component hierarchy, navigation - flow (Mermaid), states and annotations, responsive notes, open questions. +- A wireframe file under `aidd_docs/tasks/`, built from + [`assets/wireframe-template.md`](assets/wireframe-template.md). - No executable code and no tracker mutations. ## Prerequisites -- A feature to wireframe. A PRD is optional; it is auto-loaded from - `aidd_docs/` when present. +- A feature to wireframe. - Write access to `aidd_docs/tasks/` in the current repo. ## Technical details diff --git a/plugins/aidd-pm/skills/04-wireframe/SKILL.md b/plugins/aidd-pm/skills/04-wireframe/SKILL.md index b53b281c2..73dec4f99 100644 --- a/plugins/aidd-pm/skills/04-wireframe/SKILL.md +++ b/plugins/aidd-pm/skills/04-wireframe/SKILL.md @@ -21,12 +21,10 @@ Single action skill. The router dispatches to `wireframe` whenever a wireframe-g - Low fidelity only. Describe layout and structure, never visual design (colors, typography, spacing). - Never produce executable code. No HTML, CSS, JS, or component snippets; wireframes are read, not run. -- Auto-load related documents (PRD, user stories) from `aidd_docs/` when they exist and reuse the PRD `feature_name` so the wireframe sits next to it. A PRD is never required and the skill is callable at any stage, including legacy projects with no product docs; a wireframe can be produced from the feature description alone. Never invent intent; mark every gap as `TBD: `. -- Confirm the screen inventory and screen types with the user before drawing any layout. -- Copy the template into the save path first, then fill that copy in place; keep scaffold and fill as distinct steps. -- Always wait for explicit user validation before treating the wireframe as final. +- Auto-load a PRD or user stories from `aidd_docs/` when present and reuse the PRD `feature_name`; a PRD is never required. Never invent intent; mark gaps as `TBD: `. +- Confirm the screen inventory with the user before drawing any layout. +- Wait for explicit user validation before treating the wireframe as final. - Do not self-validate. The caller spawns a reviewer with `@assets/wireframe-validator.yml`; findings come back for the next revision. -- Save path: `aidd_docs/tasks//--wireframe.md`. - Source of truth for structure: `@assets/wireframe-template.md`. ## References diff --git a/plugins/aidd-pm/skills/04-wireframe/actions/01-wireframe.md b/plugins/aidd-pm/skills/04-wireframe/actions/01-wireframe.md index 777c351fd..50cde975a 100644 --- a/plugins/aidd-pm/skills/04-wireframe/actions/01-wireframe.md +++ b/plugins/aidd-pm/skills/04-wireframe/actions/01-wireframe.md @@ -15,34 +15,21 @@ screen_types: [] # optional; asked during clarify when o ```yaml wireframe_path: aidd_docs/tasks//--wireframe.md feature_name: -sections_present: - - screen-inventory - - layouts - - component-hierarchy - - navigation-flow - - states-and-annotations - - responsive-notes - - open-questions ``` ## Process -1. **Gather any available context**. The skill is callable at any stage. Load related documents from `aidd_docs/` (a PRD, user stories) when they exist, and on an existing or legacy project take cues from the current screens or behavior the user points to. Treat all of it as optional context, never a precondition: with nothing available, derive everything from `feature_description` and the clarify dialogue. -2. **Clarify before drawing**. Propose a screen inventory and, for each screen, the screen type (form, list, detail, dashboard, ...). Confirm `platform` (web / mobile / responsive) and the user flows in scope. Surface assumptions and ask the user to confirm or adjust. Iterate until the inventory and screen types are agreed; never start layouts on an unconfirmed inventory. -3. **Scaffold the file**. Copy `assets/wireframe-template.md` verbatim to `aidd_docs/tasks//--wireframe.md`, creating the month directory when missing. This is the only copy step; from here on, edit that file in place. -4. **Fill the copy**. Edit the copied file: replace each placeholder with the agreed screens (an ASCII layout and component hierarchy per screen), the navigation flow as a Mermaid `flowchart`, the empty / loading / error states, and the responsive notes. Mark unknowns as `TBD: `. -5. **Validate**. Show the filled file to the user. Apply revisions directly in the file and re-show on each iteration until explicit approval. +1. **Gather context**. Load a related PRD or user stories from `aidd_docs/` when present; otherwise work from `feature_description`. Optional, never a precondition. +2. **Clarify**. Propose the screen inventory and each screen's type, confirm `platform` and the flows in scope, and iterate until the user agrees. Do not draw before the inventory is confirmed. +3. **Scaffold**. Copy `assets/wireframe-template.md` to `aidd_docs/tasks//--wireframe.md`, creating the month directory when missing. +4. **Fill**. Edit that copy in place: one screen per agreed entry, the Mermaid flow, the states, and the responsive notes. Mark gaps as `TBD: `. +5. **Validate**. Show the file, apply revisions in place, and iterate until explicit approval. 6. **Return** the structured Outputs block. -Do not self-validate. When a caller needs a quality gate, it spawns a reviewer with `@assets/wireframe-validator.yml`; findings come back for the next revision. - ## Test - **File saved**: `wireframe_path` exists on disk after the action completes. -- **Scaffolded from template**: the file carries the section headings of `assets/wireframe-template.md`. -- **Filled, not just copied**: no template placeholder text (for example `[Screen name]`, `[Region]`) remains for the in-scope screens. -- **No orphan screens**: every screen in the file traces to a user flow or a screen the user agreed during clarify. -- **Aligned with loaded context**: when a related document was found in `aidd_docs/`, `feature_name` matches it and every user flow it describes maps to at least one screen. -- **All sections**: the file contains every heading listed in `sections_present`. +- **All sections**: the file contains every section of `assets/wireframe-template.md`. +- **Filled, not just copied**: no template placeholder text (for example `[Screen name]`) remains for the in-scope screens. - **Navigation flow**: the file contains at least one Mermaid `flowchart` block. -- **No code**: the file has no executable code blocks (no ```html, ```css, ```js) and no component markup describing how to build the UI. +- **No code**: no executable code blocks (no ```html, ```css, ```js) or component markup.