From a5f4718bc09338f43f093b1c89154d9faf545b53 Mon Sep 17 00:00:00 2001 From: Chai Bot Date: Fri, 6 Nov 2026 19:27:03 +0000 Subject: [PATCH 01/42] Add screenshot handoff support to ux-design and ui-design workflows MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ux-design (0.5.0 → 0.6.0): - handoff: curate screenshots from evaluation evidence with stable SS-N IDs, captions, alt text, and SHA-256 checksums in a manifest - publish: validate screenshot references and resolve storage policy (lfs/external/git) from explicit repository or researcher choice - revise/respond: handle screenshot additions, replacements, and image-only changes through manifest checksum comparison - guidelines: add screenshot handling rules (curated not exhaustive, asset identity via checksums, no storage assumption) ui-design (0.1.0 → 0.2.0): - ingest: open and visually inspect referenced screenshots, record observations and text/image consistency, report unavailable images - plan: cite screenshot IDs alongside written specs, flag text/image discrepancies, preserve text-only and deferred inspection paths - guidelines: add rules against fabricated visual observations and clarify screenshots are visual evidence not runtime verification Co-Authored-By: Claude Opus 4.6 --- ui-design/README.md | 3 + ui-design/SKILL.md | 2 +- ui-design/guidelines.md | 7 ++ ui-design/skills/ingest.md | 73 ++++++++++++++++ ui-design/skills/plan.md | 51 +++++++++++ ux-design/README.md | 14 ++- ux-design/SKILL.md | 2 +- ux-design/guidelines.md | 21 +++++ ux-design/skills/handoff.md | 107 ++++++++++++++++++++++- ux-design/skills/publish.md | 169 +++++++++++++++++++++++++++++++++--- ux-design/skills/respond.md | 32 ++++++- ux-design/skills/revise.md | 23 +++++ 12 files changed, 485 insertions(+), 19 deletions(-) diff --git a/ui-design/README.md b/ui-design/README.md index c458f0b9..2606cdcd 100644 --- a/ui-design/README.md +++ b/ui-design/README.md @@ -47,6 +47,7 @@ The workflow draws from multiple published sources — never from another workfl | Context path | User-provided filesystem path (non-Jira flow only) | No — used when starting from a local document | | Description | User-provided text (non-Jira flow only) | No — used when starting from a textual description | | UX handoff (`handoff.md`) | Docs repo (from `ux-design` workflow) | No — optional for purely technical work | +| UX screenshots (`screenshots/`) | Docs repo (alongside `handoff.md`) | No — present only when evaluation captured screenshots | | PRD (`prd.md`) | Docs repo (from `prd` workflow) | Yes | | Design document (`design.md`) | Docs repo (from `design` workflow) | Yes | | `AGENTS.md` / `UI-ARCHITECTURE.md` | Project root | If available | @@ -80,6 +81,8 @@ Jira). /ui-design:ingest EDM-1234 → fetches the [UI] story from Jira → follows references to load UX handoff, PRD, design doc from docs repo + → if UX handoff has screenshots, opens and visually inspects each image + → records screenshot observations (visual details, text/image consistency) → reads AGENTS.md, UI-ARCHITECTURE.md → explores UI codebase (components, hooks, routes, state, tests) → explores backend API (types, endpoints, OpenAPI specs) diff --git a/ui-design/SKILL.md b/ui-design/SKILL.md index c49386cd..3d82e587 100644 --- a/ui-design/SKILL.md +++ b/ui-design/SKILL.md @@ -1,6 +1,6 @@ --- name: ui-design -version: 0.1.0 +version: 0.2.0 description: >- UI design workflow that takes a [UI] Jira story and optional UX handoff artifact, produces a component decomposition with hook design, state management, diff --git a/ui-design/guidelines.md b/ui-design/guidelines.md index 2a030ec3..3f305b3e 100644 --- a/ui-design/guidelines.md +++ b/ui-design/guidelines.md @@ -11,6 +11,12 @@ - **Persona-aware decomposition is required.** When the UX handoff identifies multiple user groups with distinct views or permissions, the component architecture must address conditional rendering, permission gates, and shared vs. persona-specific components explicitly. - **Data annotations drive API review.** Every `Unknown` or `API` source type in the UX handoff's Data Annotations table must be resolved to a specific API endpoint and field — or flagged as a gap. - **Accessibility is architectural.** ARIA roles, keyboard navigation, and focus management are designed alongside components, not bolted on later. +- **Screenshots are visual evidence, not runtime verification.** When UX + handoff screenshots are available, cite them for layout and visual-state + decisions. Screenshots show rendered presentation; they do not verify + keyboard navigation, accessibility compliance, API behavior, or runtime + state management. Flag text/image discrepancies rather than silently + choosing one source or inventing behavior to reconcile them. - **Tests validate behavior, not implementation.** The testing strategy describes what user-facing behaviors to verify, using the project's existing test framework and patterns. ## Shared Content Rules @@ -21,6 +27,7 @@ artifacts and published output from this workflow. ## Hard Limits - No fabricated requirements. Every component, hook, and route must trace to a UX handoff element, design document constraint, PRD requirement, or user direction. +- No fabricated visual observations. When screenshots cannot be inspected (tool unavailability, unreadable files), report the limitation — do not invent observations from captions, alt text, or filenames. - No publishing (creating PRs, posting comments) without explicit user approval. - No Jira modifications without explicit user approval and a dry-run preview first. - **No scope reduction.** Never silently simplify, defer to "v2", use "placeholder", or say "future enhancement" to reduce scope. If scope won't fit, propose a split — don't reduce. diff --git a/ui-design/skills/ingest.md b/ui-design/skills/ingest.md index 67d2c2e6..c66e5975 100644 --- a/ui-design/skills/ingest.md +++ b/ui-design/skills/ingest.md @@ -269,6 +269,57 @@ proceed without a handoff (it is optional). If found, read it. +**Screenshot inspection.** After reading the handoff text, check whether +its Screenshots section references curated images (rows in the screenshot +table with `SS-N` IDs) or states that no screenshots are available. + +- **If screenshots are referenced:** For each referenced screenshot, locate + the image file relative to the handoff's directory in the docs repo + (e.g., `{handoff_dir}/screenshots/SS-1-description.png`). Then: + + 1. **Open and visually inspect each image** using the runtime's image + reading capability (e.g., the `Read` tool on the image file path). + Reading the markdown table, file metadata, captions, or alt text + alone is **not** image inspection — the purpose is to observe the + actual rendered layout, visual hierarchy, spacing, color usage, + component arrangement, and state presentation in the image pixels. + + 2. For each inspected image, record: + - The screenshot ID (`SS-N`) + - A brief observation of what the image actually shows (layout, + component arrangement, visual state, notable visual details) + - Whether the image content is consistent with or contradicts the + handoff's written description for that screenshot + - Any visual details not captured in the written spec (spacing, + alignment, visual weight, color patterns) + + 3. If an image file cannot be found, is unreadable, or the runtime does + not support image inspection (e.g., no multimodal capability, or + the tool returns an error for binary files): + - Record the screenshot ID and status as `unavailable` or + `inspection-not-supported` + - Report to the user which images could not be inspected and why + - Do **not** claim the images were inspected or fabricate visual + observations from the caption or alt text + - Ask the user whether to proceed with text-only context or wait + for image access + + 4. If the handoff references a `screenshot-manifest.json`, read it to + obtain SHA-256 checksums for asset identity verification. Record the + manifest's `context_revision` and `prototype_iteration` fields. If + the manifest's revision differs from the handoff's metadata, warn + the user that screenshots may be stale. + +- **If no screenshots are available** (handoff says "None" or the + Screenshots section is absent): Record `HAS_SCREENSHOTS = false` in the + context. This is a legitimate case (Quick evaluation depth, URL-only + input, or pre-screenshot handoff). Do not treat this as an error. + +- **User-authorized text-only path.** If the user explicitly authorizes + proceeding without image inspection (when screenshots exist but cannot + be inspected), record `HAS_SCREENSHOTS = deferred` and the reason. + Downstream phases will note reduced visual fidelity. + **Provenance freshness check.** Before extracting content, look for a provenance footer (`