diff --git a/README.md b/README.md index 71353db9..0071e21b 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 f6524cd5..3077b4ce 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 a356b89f..3c298579 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 372e1f1d..3856014c 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 6e06a072..2a0e1f42 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 30a497ab..33f25b36 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 a356b89f..3c298579 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 7db06add..8bb7adaa 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 88dc3966..c4ab10a3 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 6680201b..4f33dbba 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 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` | 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 acd14027..323f577b 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 00000000..9f955ac1 --- /dev/null +++ b/plugins/aidd-pm/skills/04-wireframe/README.md @@ -0,0 +1,53 @@ +← [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 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 + +- 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 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 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. +- 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, [`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 new file mode 100644 index 00000000..73dec4f9 --- /dev/null +++ b/plugins/aidd-pm/skills/04-wireframe/SKILL.md @@ -0,0 +1,41 @@ +--- +name: 04-wireframe +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 + +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` | Load context, clarify screens, copy template into aidd_docs, fill it, validate | feature_description, platform (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. +- 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. +- Source of truth for structure: `@assets/wireframe-template.md`. + +## References + +- None. + +## Assets + +- `@assets/wireframe-template.md`: wireframe body template. +- `@assets/wireframe-validator.yml`: checklist a reviewer uses to validate a wireframe. + +## External data + +- `aidd_docs/` (a PRD, user stories) - auto-loaded as optional context when present; never required. 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 00000000..50cde975 --- /dev/null +++ b/plugins/aidd-pm/skills/04-wireframe/actions/01-wireframe.md @@ -0,0 +1,35 @@ +# 01 - Wireframe + +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 + +```yaml +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 +``` + +## Outputs + +```yaml +wireframe_path: aidd_docs/tasks//--wireframe.md +feature_name: +``` + +## Process + +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. + +## Test + +- **File saved**: `wireframe_path` exists on disk after the action completes. +- **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**: no executable code blocks (no ```html, ```css, ```js) or component markup. 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 00000000..b3813080 --- /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/assets/wireframe-validator.yml b/plugins/aidd-pm/skills/04-wireframe/assets/wireframe-validator.yml new file mode 100644 index 00000000..bd37af37 --- /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 in-scope flow 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. 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 00000000..0fda23dd --- /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 80d2829d..9c912bf2 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 b72ce125..ac28dc71 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