diff --git a/ARCHITECTURE.md b/ARCHITECTURE.md index 79bfda7..db55ee3 100644 --- a/ARCHITECTURE.md +++ b/ARCHITECTURE.md @@ -202,9 +202,9 @@ Templates contain the workflows, tips, and examples that require human judgment. | `{{BROWSE_SETUP}}` | `gen-skill-docs.ts` | Binary discovery + setup instructions | | `{{BASE_BRANCH_DETECT}}` | `gen-skill-docs.ts` | Dynamic base branch detection for PR-targeting skills (ship, review, qa, plan-ceo-review) | | `{{QA_METHODOLOGY}}` | `gen-skill-docs.ts` | Shared QA methodology block for /qa and /qa-only | -| `{{DESIGN_METHODOLOGY}}` | `gen-skill-docs.ts` | Shared design audit methodology for /plan-design-review and /qa-design-review | +| `{{DESIGN_METHODOLOGY}}` | `gen-skill-docs.ts` | Shared design audit methodology for /plan-design-review and /design-review | | `{{REVIEW_DASHBOARD}}` | `gen-skill-docs.ts` | Review Readiness Dashboard for /ship pre-flight | -| `{{TEST_BOOTSTRAP}}` | `gen-skill-docs.ts` | Test framework detection, bootstrap, CI/CD setup for /qa, /ship, /qa-design-review | +| `{{TEST_BOOTSTRAP}}` | `gen-skill-docs.ts` | Test framework detection, bootstrap, CI/CD setup for /qa, /ship, /design-review | This is structurally sound — if a command exists in code, it appears in docs. If it doesn't exist, it can't appear. diff --git a/CHANGELOG.md b/CHANGELOG.md index 04f690a..49d9183 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,18 @@ # Changelog +## [0.6.4.0] - 2026-03-17 + +### Added + +- **`/plan-design-review` is now interactive — rates 0-10, fixes the plan.** Instead of producing a report with letter grades, the designer now works like CEO and Eng review: rates each design dimension 0-10, explains what a 10 looks like, then edits the plan to get there. One AskUserQuestion per design choice. The output is a better plan, not a document about the plan. +- **CEO review now calls in the designer.** When `/plan-ceo-review` detects UI scope in a plan, it activates a Design & UX section (Section 11) covering information architecture, interaction state coverage, AI slop risk, and responsive intention. For deep design work, it recommends `/plan-design-review`. +- **14 of 15 skills now have full test coverage (E2E + LLM-judge + validation).** Added LLM-judge quality evals for 10 skills that were missing them: ship, retro, qa-only, plan-ceo-review, plan-eng-review, plan-design-review, design-review, design-consultation, document-release, gstack-upgrade. Added real E2E test for gstack-upgrade (was a `.todo`). Added design-consultation to command validation. +- **Bisect commit style.** CLAUDE.md now requires every commit to be a single logical change — renames separate from rewrites, test infrastructure separate from test implementations. + +### Changed + +- `/qa-design-review` renamed to `/design-review` — the "qa-" prefix was confusing now that `/plan-design-review` is plan-mode. Updated across all 22 files. + ## [0.6.3.0] - 2026-03-17 ### Added diff --git a/CLAUDE.md b/CLAUDE.md index 213be49..0979c95 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -53,7 +53,7 @@ gstack/ │ └── skill-e2e.test.ts # Tier 2: E2E via claude -p (~$3.85/run) ├── qa-only/ # /qa-only skill (report-only QA, no fixes) ├── plan-design-review/ # /plan-design-review skill (report-only design audit) -├── qa-design-review/ # /qa-design-review skill (design audit + fix loop) +├── design-review/ # /design-review skill (design audit + fix loop) ├── ship/ # Ship workflow skill ├── review/ # PR review skill ├── plan-ceo-review/ # /plan-ceo-review skill @@ -119,6 +119,22 @@ symlink or a real copy. If it's a symlink to your working directory, be aware th gen-skill-docs pipeline, consider whether the changes should be tested in isolation before going live (especially if the user is actively using gstack in other windows). +## Commit style + +**Always bisect commits.** Every commit should be a single logical change. When +you've made multiple changes (e.g., a rename + a rewrite + new tests), split them +into separate commits before pushing. Each commit should be independently +understandable and revertable. + +Examples of good bisection: +- Rename/move separate from behavior changes +- Test infrastructure (touchfiles, helpers) separate from test implementations +- Template changes separate from generated file regeneration +- Mechanical refactors separate from new features + +When the user says "bisect commit" or "bisect and push," split staged/unstaged +changes into logical commits and push. + ## CHANGELOG style CHANGELOG.md is **for users**, not contributors. Write it like product release notes: diff --git a/README.md b/README.md index 1533928..5e39658 100644 --- a/README.md +++ b/README.md @@ -120,7 +120,7 @@ One feature. Seven commands. The agent reframed the product, ran an 80-item desi | `/browse` | **QA Engineer** | Give the agent eyes. Real Chromium browser, real clicks, real screenshots. ~100ms per command. | | `/qa` | **QA Lead** | Test your app, find bugs, fix them with atomic commits, re-verify. Auto-generates regression tests for every fix. | | `/qa-only` | **QA Reporter** | Same methodology as /qa but report only. Use when you want a pure bug report without code changes. | -| `/qa-design-review` | **Designer Who Codes** | Same audit as /plan-design-review, then fixes what it finds. Atomic commits, before/after screenshots. | +| `/design-review` | **Designer Who Codes** | Same audit as /plan-design-review, then fixes what it finds. Atomic commits, before/after screenshots. | | `/setup-browser-cookies` | **Session Manager** | Import cookies from your real browser (Chrome, Arc, Brave, Edge) into the headless session. Test authenticated pages. | | `/retro` | **Eng Manager** | Team-aware weekly retro. Per-person breakdowns, shipping streaks, test health trends, growth opportunities. | | `/document-release` | **Technical Writer** | Update all project docs to match what you just shipped. Catches stale READMEs automatically. | @@ -129,7 +129,7 @@ One feature. Seven commands. The agent reframed the product, ran an 80-item desi ## What's new and why it matters -**Design is at the heart.** `/design-consultation` doesn't just pick fonts. It researches what's out there in your space, proposes safe choices AND creative risks, generates realistic mockups of your actual product, and writes `DESIGN.md` — and then `/qa-design-review` and `/plan-eng-review` read what you chose. Design decisions flow through the whole system. +**Design is at the heart.** `/design-consultation` doesn't just pick fonts. It researches what's out there in your space, proposes safe choices AND creative risks, generates realistic mockups of your actual product, and writes `DESIGN.md` — and then `/design-review` and `/plan-eng-review` read what you chose. Design decisions flow through the whole system. **`/qa` was a massive unlock.** It let me go from 6 to 12 parallel workers. Claude Code saying *"I SEE THE ISSUE"* and then actually fixing it, generating a regression test, and verifying the fix — that changed how I work. The agent has eyes now. diff --git a/VERSION b/VERSION index 1e40a50..31d34d2 100644 --- a/VERSION +++ b/VERSION @@ -1 +1 @@ -0.6.3.0 +0.6.4.0 diff --git a/qa-design-review/SKILL.md b/design-review/SKILL.md similarity index 99% rename from qa-design-review/SKILL.md rename to design-review/SKILL.md index 1d6200c..b06e082 100644 --- a/qa-design-review/SKILL.md +++ b/design-review/SKILL.md @@ -1,11 +1,11 @@ --- -name: qa-design-review -version: 1.0.0 +name: design-review +version: 2.0.0 description: | Designer's eye QA: finds visual inconsistency, spacing issues, hierarchy problems, AI slop patterns, and slow interactions — then fixes them. Iteratively fixes issues in source code, committing each fix atomically and re-verifying with before/after - screenshots. For report-only mode, use /plan-design-review instead. + screenshots. For plan-mode design review (before implementation), use /plan-design-review. allowed-tools: - Bash - Read @@ -123,7 +123,7 @@ Hey gstack team — ran into this while using /{skill-name}: Slug: lowercase, hyphens, max 60 chars (e.g. `browse-js-no-await`). Skip if file already exists. Max 3 reports per session. File inline and continue — don't stop the workflow. Tell user: "Filed gstack field report: {title}" -# /qa-design-review: Design Audit → Fix → Verify +# /design-review: Design Audit → Fix → Verify You are a senior product designer AND a frontend engineer. Review live sites with exacting visual standards — then fix what you find. You have strong opinions about typography, spacing, and visual hierarchy, and zero tolerance for generic or AI-generated-looking interfaces. @@ -150,7 +150,7 @@ Look for `DESIGN.md`, `design-system.md`, or similar in the repo root. If found, ```bash if [ -n "$(git status --porcelain)" ]; then - echo "ERROR: Working tree is dirty. Commit or stash changes before running /qa-design-review." + echo "ERROR: Working tree is dirty. Commit or stash changes before running /design-review." exit 1 fi ``` @@ -766,7 +766,7 @@ Design fixes are typically CSS-only. Only generate regression tests for fixes in JavaScript behavior changes — broken dropdowns, animation failures, conditional rendering, interactive state issues. -For CSS-only fixes: skip entirely. CSS regressions are caught by re-running /qa-design-review. +For CSS-only fixes: skip entirely. CSS regressions are caught by re-running /design-review. If the fix involved JS behavior: follow the same procedure as /qa Phase 8e.5 (study existing test patterns, write a regression test encoding the exact bug condition, run it, commit if @@ -838,11 +838,11 @@ Write to `~/.gstack/projects/{slug}/{user}-{branch}-design-audit-{datetime}.md` If the repo has a `TODOS.md`: 1. **New deferred design findings** → add as TODOs with impact level, category, and description -2. **Fixed findings that were in TODOS.md** → annotate with "Fixed by /qa-design-review on {branch}, {date}" +2. **Fixed findings that were in TODOS.md** → annotate with "Fixed by /design-review on {branch}, {date}" --- -## Additional Rules (qa-design-review specific) +## Additional Rules (design-review specific) 11. **Clean working tree required.** Refuse to start if `git status --porcelain` is non-empty. 12. **One commit per fix.** Never bundle multiple design fixes into one commit. diff --git a/qa-design-review/SKILL.md.tmpl b/design-review/SKILL.md.tmpl similarity index 96% rename from qa-design-review/SKILL.md.tmpl rename to design-review/SKILL.md.tmpl index 5969fb5..eb8dd6b 100644 --- a/qa-design-review/SKILL.md.tmpl +++ b/design-review/SKILL.md.tmpl @@ -1,11 +1,11 @@ --- -name: qa-design-review -version: 1.0.0 +name: design-review +version: 2.0.0 description: | Designer's eye QA: finds visual inconsistency, spacing issues, hierarchy problems, AI slop patterns, and slow interactions — then fixes them. Iteratively fixes issues in source code, committing each fix atomically and re-verifying with before/after - screenshots. For report-only mode, use /plan-design-review instead. + screenshots. For plan-mode design review (before implementation), use /plan-design-review. allowed-tools: - Bash - Read @@ -19,7 +19,7 @@ allowed-tools: {{PREAMBLE}} -# /qa-design-review: Design Audit → Fix → Verify +# /design-review: Design Audit → Fix → Verify You are a senior product designer AND a frontend engineer. Review live sites with exacting visual standards — then fix what you find. You have strong opinions about typography, spacing, and visual hierarchy, and zero tolerance for generic or AI-generated-looking interfaces. @@ -46,7 +46,7 @@ Look for `DESIGN.md`, `design-system.md`, or similar in the repo root. If found, ```bash if [ -n "$(git status --porcelain)" ]; then - echo "ERROR: Working tree is dirty. Commit or stash changes before running /qa-design-review." + echo "ERROR: Working tree is dirty. Commit or stash changes before running /design-review." exit 1 fi ``` @@ -164,7 +164,7 @@ Design fixes are typically CSS-only. Only generate regression tests for fixes in JavaScript behavior changes — broken dropdowns, animation failures, conditional rendering, interactive state issues. -For CSS-only fixes: skip entirely. CSS regressions are caught by re-running /qa-design-review. +For CSS-only fixes: skip entirely. CSS regressions are caught by re-running /design-review. If the fix involved JS behavior: follow the same procedure as /qa Phase 8e.5 (study existing test patterns, write a regression test encoding the exact bug condition, run it, commit if @@ -236,11 +236,11 @@ Write to `~/.gstack/projects/{slug}/{user}-{branch}-design-audit-{datetime}.md` If the repo has a `TODOS.md`: 1. **New deferred design findings** → add as TODOs with impact level, category, and description -2. **Fixed findings that were in TODOS.md** → annotate with "Fixed by /qa-design-review on {branch}, {date}" +2. **Fixed findings that were in TODOS.md** → annotate with "Fixed by /design-review on {branch}, {date}" --- -## Additional Rules (qa-design-review specific) +## Additional Rules (design-review specific) 11. **Clean working tree required.** Refuse to start if `git status --porcelain` is non-empty. 12. **One commit per fix.** Never bundle multiple design fixes into one commit. diff --git a/docs/skills.md b/docs/skills.md index 1604586..6ddf9f6 100644 --- a/docs/skills.md +++ b/docs/skills.md @@ -6,14 +6,14 @@ Detailed guides for every gstack skill — philosophy, workflow, and examples. |-------|----------------|--------------| | [`/plan-ceo-review`](#plan-ceo-review) | **CEO / Founder** | Rethink the problem. Find the 10-star product hiding inside the request. Four modes: Expansion, Selective Expansion, Hold Scope, Reduction. | | [`/plan-eng-review`](#plan-eng-review) | **Eng Manager** | Lock in architecture, data flow, diagrams, edge cases, and tests. Forces hidden assumptions into the open. | -| [`/plan-design-review`](#plan-design-review) | **Senior Designer** | 80-item design audit with letter grades. AI Slop detection. Infers your design system. Report only — never touches code. | +| [`/plan-design-review`](#plan-design-review) | **Senior Designer** | Interactive plan-mode design review. Rates each dimension 0-10, explains what a 10 looks like, fixes the plan. Works in plan mode. | | [`/design-consultation`](#design-consultation) | **Design Partner** | Build a complete design system from scratch. Knows the landscape, proposes creative risks, generates realistic product mockups. Design at the heart of all other phases. | | [`/review`](#review) | **Staff Engineer** | Find the bugs that pass CI but blow up in production. Auto-fixes the obvious ones. Flags completeness gaps. | | [`/ship`](#ship) | **Release Engineer** | Sync main, run tests, audit coverage, push, open PR. Bootstraps test frameworks if you don't have one. One command. | | [`/browse`](#browse) | **QA Engineer** | Give the agent eyes. Real Chromium browser, real clicks, real screenshots. ~100ms per command. | | [`/qa`](#qa) | **QA Lead** | Test your app, find bugs, fix them with atomic commits, re-verify. Auto-generates regression tests for every fix. | | [`/qa-only`](#qa) | **QA Reporter** | Same methodology as /qa but report only. Use when you want a pure bug report without code changes. | -| [`/qa-design-review`](#qa-design-review) | **Designer Who Codes** | Same audit as /plan-design-review, then fixes what it finds. Atomic commits, before/after screenshots. | +| [`/design-review`](#design-review) | **Designer Who Codes** | Live-site visual audit + fix loop. 80-item audit, then fixes what it finds. Atomic commits, before/after screenshots. | | [`/setup-browser-cookies`](#setup-browser-cookies) | **Session Manager** | Import cookies from your real browser (Chrome, Arc, Brave, Edge) into the headless session. Test authenticated pages. | | [`/retro`](#retro) | **Eng Manager** | Team-aware weekly retro. Per-person breakdowns, shipping streaks, test health trends, growth opportunities. | | [`/document-release`](#document-release) | **Technical Writer** | Update all project docs to match what you just shipped. Catches stale READMEs automatically. | @@ -155,54 +155,50 @@ When `/plan-eng-review` finishes the test review section, it writes a test plan ## `/plan-design-review` -This is my **senior designer mode**. +This is my **senior designer reviewing your plan** — before you write a single line of code. -Most developers cannot tell whether their site looks AI-generated. I could not, until I started paying attention. There is a growing class of sites that are functional but soulless — they work fine but scream "an AI built this and nobody with taste looked at it." Purple gradients, 3-column icon grids, uniform bubbly border-radius on everything, centered text on every section, decorative blobs floating in the background. The ChatGPT aesthetic. +Most plans describe what the backend does but never specify what the user actually sees. Empty states? Error states? Loading states? Mobile layout? AI slop risk? These decisions get deferred to "figure it out during implementation" — and then an engineer ships "No items found." as the empty state because nobody specified anything better. -`/plan-design-review` gives the agent a designer's eye. +`/plan-design-review` catches all of this during planning, when it's cheap to fix. -It opens your site and reacts to it the way a Stripe or Linear designer would — immediately, viscerally, with opinions. The first output is a structured gut reaction: what the site communicates at a glance, what the eye is drawn to, and a one-word verdict. That is the most valuable part. Everything after is supporting evidence. +It works like `/plan-ceo-review` and `/plan-eng-review` — interactive, one issue at a time, with the **STOP + AskUserQuestion** pattern. It rates each design dimension 0-10, explains what a 10 looks like, then edits the plan to get there. The rating drives the work: rate low = lots of fixes, rate high = quick pass. -Then it extracts your actual design system by reading the CSS: how many fonts are you really using? What is your heading scale? How many colors? Is your spacing on a grid or arbitrary? It structures this as an **Inferred Design System** and offers to save it as a `DESIGN.md` — so now you have a design system you never had before, derived from what you actually shipped. - -The audit covers 80 items across 10 categories. Typography, spacing, hierarchy, color, responsive design, interaction states, motion, content quality, performance feel, and — the headline feature — **AI Slop Detection**. Ten specific anti-patterns that mark a site as machine-generated. - -Every finding gets a letter grade (A through F) per category. The report opens with two headline scores: **Design Score** and **AI Slop Score**. "Your site got a B on design but a D on AI Slop" tells you exactly where to focus. +Seven passes over the plan: information architecture, interaction state coverage, user journey, AI slop risk, design system alignment, responsive/accessibility, and unresolved design decisions. For each pass, it finds gaps and either fixes them directly (obvious ones) or asks you to make a design choice (genuine tradeoffs). ### Example ``` -You: /plan-design-review https://myapp.com - -Claude: Design Score: C | AI Slop Score: D - - "The site communicates generic SaaS energy." - "I notice the hero section uses a blue-to-purple gradient - with a 3-column feature grid below it — the single most - recognizable AI-generated layout pattern." - "The first 3 things my eye goes to are: the gradient, the - symmetrical icon grid, and a 'Get Started' button that - looks like every other 'Get Started' button." - "If I had to describe this in one word: template." - - Inferred Design System: - - Fonts: Inter (body), Inter (headings) — 1 font family - - Colors: 14 unique non-gray colors (flag: >12) - - Heading scale: 36/24/18/16 — flat, no drama between sizes - - Spacing: mostly 16px and 24px — no rhythm - - Top 5 Design Improvements: - 1. Break the 3-column icon grid (High, AI Slop) - 2. Add heading scale contrast — at least 2:1 ratio (High, Typography) - 3. Replace uniform border-radius with intentional hierarchy (Medium, Spacing) - 4. Kill the gradient hero — use a real image or bold typography (High, AI Slop) - 5. Add a second font for headings — Inter-only reads as generic (Medium, Typography) - - [Full report saved to .gstack/design-reports/] - Want me to save this inferred design system as your DESIGN.md? +You: /plan-design-review + +Claude: Initial Design Rating: 4/10 + + "This plan describes a user dashboard but never specifies + what the user sees first. It says 'cards with icons' — + which looks like every SaaS template. It mentions zero + loading states, zero empty states, and no mobile behavior." + + Pass 1 (Info Architecture): 3/10 + "A 10 would define primary/secondary/tertiary content + hierarchy for every screen." + → Added information hierarchy section to plan + + Pass 2 (Interaction States): 2/10 + "The plan has 4 UI features but specifies 0 out of 20 + interaction states (4 features × 5 states each)." + → Added interaction state table to plan + + Pass 4 (AI Slop): 4/10 + "The plan says 'clean, modern UI with cards and icons' + and 'hero section with gradient'. These are the top 2 + AI-generated-looking patterns." + → Rewrote UI descriptions with specific, intentional alternatives + + Overall: 4/10 → 8/10 after fixes + "Plan is design-complete. Run /design-review after + implementation for visual QA." ``` -This is report only — it never touches your code. Use `/qa-design-review` when you want it to fix what it finds. +When you re-run it, sections already at 8+ get a quick pass. Sections below 8 get full treatment. For live-site visual audits post-implementation, use `/design-review`. --- @@ -222,7 +218,7 @@ If you want, the agent will research what's already out there in your space — After you agree on the system, it generates an interactive HTML preview page — not just swatches and font samples, but realistic product pages. If you are building a dashboard, you see a dashboard with a sidebar, data tables, and stat cards. If you are building a marketing site, you see a hero section with real copy and a CTA. Everything rendered in your design system, with your product name, in light and dark mode. You see what your product could feel like before a single line of production code is written. -Then it writes `DESIGN.md` to your repo root — your project's design source of truth — and updates `CLAUDE.md` so every future Claude Code session respects the system. From that point on, `/qa-design-review` can audit against it, and any agent working on your frontend knows the rules. +Then it writes `DESIGN.md` to your repo root — your project's design source of truth — and updates `CLAUDE.md` so every future Claude Code session respects the system. From that point on, `/design-review` can audit against it, and any agent working on your frontend knows the rules. ### Example @@ -291,22 +287,22 @@ Claude: Wrote DESIGN.md (typography, color, spacing, layout, motion). --- -## `/qa-design-review` +## `/design-review` This is my **designer who codes mode**. -`/plan-design-review` tells you what is wrong. `/qa-design-review` fixes it. +`/plan-design-review` reviews your plan before implementation. `/design-review` audits and fixes the live site after. -It runs the same 80-item audit, then enters a fix loop: for each design finding, it locates the source file, makes the minimal CSS/styling change, commits with `style(design): FINDING-NNN`, re-navigates to verify, and takes before/after screenshots. One commit per fix, fully bisectable. +It runs an 80-item visual audit on your live site, then enters a fix loop: for each design finding, it locates the source file, makes the minimal CSS/styling change, commits with `style(design): FINDING-NNN`, re-navigates to verify, and takes before/after screenshots. One commit per fix, fully bisectable. The self-regulation heuristic is tuned for design work — CSS-only changes get a free pass (they are inherently safe and reversible), but changes to component JSX/TSX files count against the risk budget. Hard cap at 30 fixes. If the risk score exceeds 20%, it stops and asks. ### Example ``` -You: /qa-design-review https://myapp.com +You: /design-review https://myapp.com -Claude: [Runs full design audit — same output as /plan-design-review] +Claude: [Runs full 80-item visual audit on the live site] Design Score: C | AI Slop Score: D 12 findings (4 high, 5 medium, 3 polish) diff --git a/plan-ceo-review/SKILL.md b/plan-ceo-review/SKILL.md index 55238e3..ce799fe 100644 --- a/plan-ceo-review/SKILL.md +++ b/plan-ceo-review/SKILL.md @@ -194,8 +194,12 @@ These are not checklist items. They are thinking instincts — the cognitive mov 12. **Courage accumulation** — Confidence comes *from* making hard decisions, not before them. "The struggle IS the job." 13. **Willfulness as strategy** — Be intentionally willful. The world yields to people who push hard enough in one direction for long enough. Most people give up too early (Altman). 14. **Leverage obsession** — Find the inputs where small effort creates massive output. Technology is the ultimate leverage — one person with the right tool can outperform a team of 100 without it (Altman). +15. **Hierarchy as service** — Every interface decision answers "what should the user see first, second, third?" Respecting their time, not prettifying pixels. +16. **Edge case paranoia (design)** — What if the name is 47 chars? Zero results? Network fails mid-action? First-time user vs power user? Empty states are features, not afterthoughts. +17. **Subtraction default** — "As little design as possible" (Rams). If a UI element doesn't earn its pixels, cut it. Feature bloat kills products faster than missing features. +18. **Design for trust** — Every interface decision either builds or erodes user trust. Pixel-level intentionality about safety, identity, and belonging. -When you evaluate architecture, think through the inversion reflex. When you challenge scope, apply focus as subtraction. When you assess timeline, use speed calibration. When you probe whether the plan solves a real problem, activate proxy skepticism. +When you evaluate architecture, think through the inversion reflex. When you challenge scope, apply focus as subtraction. When you assess timeline, use speed calibration. When you probe whether the plan solves a real problem, activate proxy skepticism. When you evaluate UI flows, apply hierarchy as service and subtraction default. When you review user-facing features, activate design for trust and edge case paranoia. ## Priority Hierarchy Under Context Pressure Step 0 > System audit > Error/rescue map > Test diagram > Failure modes > Opinionated recommendations > Everything else. @@ -226,6 +230,9 @@ Map: ### Retrospective Check Check the git log for this branch. If there are prior commits suggesting a previous review cycle (review-driven refactors, reverted changes), note what was changed and whether the current plan re-touches those areas. Be MORE aggressive reviewing areas that were previously problematic. Recurring problem areas are architectural smells — surface them as architectural concerns. +### Frontend/UI Scope Detection +Analyze the plan. If it involves ANY of: new UI screens/pages, changes to existing UI components, user-facing interaction flows, frontend framework changes, user-visible state changes, mobile/responsive behavior, or design system changes — note DESIGN_SCOPE for Section 11. + ### Taste Calibration (EXPANSION and SELECTIVE EXPANSION modes) Identify 2-3 files or patterns in the existing codebase that are particularly well-designed. Note them as style references for the review. Also note 1-2 patterns that are frustrating or poorly designed — these are anti-patterns to avoid repeating. Report findings before proceeding to Step 0. @@ -574,6 +581,31 @@ Evaluate: * (SELECTIVE EXPANSION only) Retrospective: Were the right cherry-picks accepted? Did any rejected expansions turn out to be load-bearing for the accepted ones? **STOP.** AskUserQuestion once per issue. Do NOT batch. Recommend + WHY. If no issues or fix is obvious, state what you'll do and move on — don't waste a question. Do NOT proceed until user responds. +### Section 11: Design & UX Review (skip if no UI scope detected) +The CEO calling in the designer. Not a pixel-level audit — that's /plan-design-review and /design-review. This is ensuring the plan has design intentionality. + +Evaluate: +* Information architecture — what does the user see first, second, third? +* Interaction state coverage map: + FEATURE | LOADING | EMPTY | ERROR | SUCCESS | PARTIAL +* User journey coherence — storyboard the emotional arc +* AI slop risk — does the plan describe generic UI patterns? +* DESIGN.md alignment — does the plan match the stated design system? +* Responsive intention — is mobile mentioned or afterthought? +* Accessibility basics — keyboard nav, screen readers, contrast, touch targets + +**EXPANSION and SELECTIVE EXPANSION additions:** +* What would make this UI feel *inevitable*? +* What 30-minute UI touches would make users think "oh nice, they thought of that"? + +Required ASCII diagram: user flow showing screens/states and transitions. + +If this plan has significant UI scope, recommend: "Consider running /plan-design-review for a deep design review of this plan before implementation." +**STOP.** AskUserQuestion once per issue. Do NOT batch. Recommend + WHY. If no issues or fix is obvious, state what you'll do and move on — don't waste a question. Do NOT proceed until user responds. + +## Post-Implementation Design Audit (if UI scope detected) +After implementation, run `/design-review` on the live site to catch visual issues that can only be evaluated with rendered output. + ## CRITICAL RULE — How to ask questions Follow the AskUserQuestion format from the Preamble above. Additional rules for plan reviews: * **One issue = one AskUserQuestion call.** Never combine multiple issues into one question. @@ -655,6 +687,7 @@ List every ASCII diagram in files this plan touches. Still accurate? | Section 8 (Observ) | ___ gaps found | | Section 9 (Deploy) | ___ risks flagged | | Section 10 (Future) | Reversibility: _/5, debt items: ___ | + | Section 11 (Design) | ___ issues / SKIPPED (no UI scope) | +--------------------------------------------------------------------+ | NOT in scope | written (___ items) | | What already exists | written | @@ -781,5 +814,7 @@ If promoted, copy the CEO plan content to `docs/designs/{FEATURE}.md` (create th │ CEO plan │ Written │ Written │ Skipped │ Skipped │ │ Phase 2/3 │ Map accepted │ Map accepted │ Note it │ Skip │ │ planning │ │ cherry-picks │ │ │ + │ Design │ "Inevitable" │ If UI scope │ If UI scope │ Skip │ + │ (Sec 11) │ UI review │ detected │ detected │ │ └─────────────┴──────────────┴──────────────┴──────────────┴────────────────────┘ ``` diff --git a/plan-ceo-review/SKILL.md.tmpl b/plan-ceo-review/SKILL.md.tmpl index 0616a4c..1a8b065 100644 --- a/plan-ceo-review/SKILL.md.tmpl +++ b/plan-ceo-review/SKILL.md.tmpl @@ -73,8 +73,12 @@ These are not checklist items. They are thinking instincts — the cognitive mov 12. **Courage accumulation** — Confidence comes *from* making hard decisions, not before them. "The struggle IS the job." 13. **Willfulness as strategy** — Be intentionally willful. The world yields to people who push hard enough in one direction for long enough. Most people give up too early (Altman). 14. **Leverage obsession** — Find the inputs where small effort creates massive output. Technology is the ultimate leverage — one person with the right tool can outperform a team of 100 without it (Altman). +15. **Hierarchy as service** — Every interface decision answers "what should the user see first, second, third?" Respecting their time, not prettifying pixels. +16. **Edge case paranoia (design)** — What if the name is 47 chars? Zero results? Network fails mid-action? First-time user vs power user? Empty states are features, not afterthoughts. +17. **Subtraction default** — "As little design as possible" (Rams). If a UI element doesn't earn its pixels, cut it. Feature bloat kills products faster than missing features. +18. **Design for trust** — Every interface decision either builds or erodes user trust. Pixel-level intentionality about safety, identity, and belonging. -When you evaluate architecture, think through the inversion reflex. When you challenge scope, apply focus as subtraction. When you assess timeline, use speed calibration. When you probe whether the plan solves a real problem, activate proxy skepticism. +When you evaluate architecture, think through the inversion reflex. When you challenge scope, apply focus as subtraction. When you assess timeline, use speed calibration. When you probe whether the plan solves a real problem, activate proxy skepticism. When you evaluate UI flows, apply hierarchy as service and subtraction default. When you review user-facing features, activate design for trust and edge case paranoia. ## Priority Hierarchy Under Context Pressure Step 0 > System audit > Error/rescue map > Test diagram > Failure modes > Opinionated recommendations > Everything else. @@ -105,6 +109,9 @@ Map: ### Retrospective Check Check the git log for this branch. If there are prior commits suggesting a previous review cycle (review-driven refactors, reverted changes), note what was changed and whether the current plan re-touches those areas. Be MORE aggressive reviewing areas that were previously problematic. Recurring problem areas are architectural smells — surface them as architectural concerns. +### Frontend/UI Scope Detection +Analyze the plan. If it involves ANY of: new UI screens/pages, changes to existing UI components, user-facing interaction flows, frontend framework changes, user-visible state changes, mobile/responsive behavior, or design system changes — note DESIGN_SCOPE for Section 11. + ### Taste Calibration (EXPANSION and SELECTIVE EXPANSION modes) Identify 2-3 files or patterns in the existing codebase that are particularly well-designed. Note them as style references for the review. Also note 1-2 patterns that are frustrating or poorly designed — these are anti-patterns to avoid repeating. Report findings before proceeding to Step 0. @@ -453,6 +460,31 @@ Evaluate: * (SELECTIVE EXPANSION only) Retrospective: Were the right cherry-picks accepted? Did any rejected expansions turn out to be load-bearing for the accepted ones? **STOP.** AskUserQuestion once per issue. Do NOT batch. Recommend + WHY. If no issues or fix is obvious, state what you'll do and move on — don't waste a question. Do NOT proceed until user responds. +### Section 11: Design & UX Review (skip if no UI scope detected) +The CEO calling in the designer. Not a pixel-level audit — that's /plan-design-review and /design-review. This is ensuring the plan has design intentionality. + +Evaluate: +* Information architecture — what does the user see first, second, third? +* Interaction state coverage map: + FEATURE | LOADING | EMPTY | ERROR | SUCCESS | PARTIAL +* User journey coherence — storyboard the emotional arc +* AI slop risk — does the plan describe generic UI patterns? +* DESIGN.md alignment — does the plan match the stated design system? +* Responsive intention — is mobile mentioned or afterthought? +* Accessibility basics — keyboard nav, screen readers, contrast, touch targets + +**EXPANSION and SELECTIVE EXPANSION additions:** +* What would make this UI feel *inevitable*? +* What 30-minute UI touches would make users think "oh nice, they thought of that"? + +Required ASCII diagram: user flow showing screens/states and transitions. + +If this plan has significant UI scope, recommend: "Consider running /plan-design-review for a deep design review of this plan before implementation." +**STOP.** AskUserQuestion once per issue. Do NOT batch. Recommend + WHY. If no issues or fix is obvious, state what you'll do and move on — don't waste a question. Do NOT proceed until user responds. + +## Post-Implementation Design Audit (if UI scope detected) +After implementation, run `/design-review` on the live site to catch visual issues that can only be evaluated with rendered output. + ## CRITICAL RULE — How to ask questions Follow the AskUserQuestion format from the Preamble above. Additional rules for plan reviews: * **One issue = one AskUserQuestion call.** Never combine multiple issues into one question. @@ -534,6 +566,7 @@ List every ASCII diagram in files this plan touches. Still accurate? | Section 8 (Observ) | ___ gaps found | | Section 9 (Deploy) | ___ risks flagged | | Section 10 (Future) | Reversibility: _/5, debt items: ___ | + | Section 11 (Design) | ___ issues / SKIPPED (no UI scope) | +--------------------------------------------------------------------+ | NOT in scope | written (___ items) | | What already exists | written | @@ -624,5 +657,7 @@ If promoted, copy the CEO plan content to `docs/designs/{FEATURE}.md` (create th │ CEO plan │ Written │ Written │ Skipped │ Skipped │ │ Phase 2/3 │ Map accepted │ Map accepted │ Note it │ Skip │ │ planning │ │ cherry-picks │ │ │ + │ Design │ "Inevitable" │ If UI scope │ If UI scope │ Skip │ + │ (Sec 11) │ UI review │ detected │ detected │ │ └─────────────┴──────────────┴──────────────┴──────────────┴────────────────────┘ ``` diff --git a/plan-design-review/SKILL.md b/plan-design-review/SKILL.md index 1d821bf..507952c 100644 --- a/plan-design-review/SKILL.md +++ b/plan-design-review/SKILL.md @@ -1,17 +1,17 @@ --- name: plan-design-review -version: 1.0.0 +version: 2.0.0 description: | - Designer's eye review of a live site. Finds visual inconsistency, spacing issues, - hierarchy problems, interaction feel, AI slop patterns, typography issues, missed - states, and slow-feeling interactions. Produces a prioritized design audit with - annotated screenshots and letter grades. Infers your design system and offers to - export as DESIGN.md. Report-only — never modifies code. For the fix loop, use - /qa-design-review instead. + Designer's eye plan review — interactive, like CEO and Eng review. + Rates each design dimension 0-10, explains what would make it a 10, + then fixes the plan to get there. Works in plan mode. For live site + visual audits, use /design-review. allowed-tools: - - Bash - Read - - Write + - Edit + - Grep + - Glob + - Bash - AskUserQuestion --- @@ -121,13 +121,58 @@ Hey gstack team — ran into this while using /{skill-name}: Slug: lowercase, hyphens, max 60 chars (e.g. `browse-js-no-await`). Skip if file already exists. Max 3 reports per session. File inline and continue — don't stop the workflow. Tell user: "Filed gstack field report: {title}" -# /plan-design-review: Designer's Eye Audit +## Step 0: Detect base branch + +Determine which branch this PR targets. Use the result as "the base branch" in all subsequent steps. + +1. Check if a PR already exists for this branch: + `gh pr view --json baseRefName -q .baseRefName` + If this succeeds, use the printed branch name as the base branch. + +2. If no PR exists (command fails), detect the repo's default branch: + `gh repo view --json defaultBranchRef -q .defaultBranchRef.name` + +3. If both commands fail, fall back to `main`. + +Print the detected base branch name. In every subsequent `git diff`, `git log`, +`git fetch`, `git merge`, and `gh pr create` command, substitute the detected +branch name wherever the instructions say "the base branch." + +--- + +# /plan-design-review: Designer's Eye Plan Review + +You are a senior product designer reviewing a PLAN — not a live site. Your job is +to find missing design decisions and ADD THEM TO THE PLAN before implementation. + +The output of this skill is a better plan, not a document about the plan. + +## Design Philosophy -You are a senior product designer reviewing a live site. You have exacting visual standards, strong opinions about typography and spacing, and zero tolerance for generic or AI-generated-looking interfaces. You do NOT care whether things "work." You care whether they feel right, look intentional, and respect the user. +You are not here to rubber-stamp this plan's UI. You are here to ensure that when +this ships, users feel the design is intentional — not generated, not accidental, +not "we'll polish it later." Your posture is opinionated but collaborative: find +every gap, explain why it matters, fix the obvious ones, and ask about the genuine +choices. + +Do NOT make any code changes. Do NOT start implementation. Your only job right now +is to review and improve the plan's design decisions with maximum rigor. + +## Design Principles + +1. Empty states are features. "No items found." is not a design. Every empty state needs warmth, a primary action, and context. +2. Every screen has a hierarchy. What does the user see first, second, third? If everything competes, nothing wins. +3. Specificity over vibes. "Clean, modern UI" is not a design decision. Name the font, the spacing scale, the interaction pattern. +4. Edge cases are user experiences. 47-char names, zero results, error states, first-time vs power user — these are features, not afterthoughts. +5. AI slop is the enemy. Generic card grids, hero sections, 3-column features — if it looks like every other AI-generated site, it fails. +6. Responsive is not "stacked on mobile." Each viewport gets intentional design. +7. Accessibility is not optional. Keyboard nav, screen readers, contrast, touch targets — specify them in the plan or they won't exist. +8. Subtraction default. If a UI element doesn't earn its pixels, cut it. Feature bloat kills products faster than missing features. +9. Trust is earned at the pixel level. Every interface decision either builds or erodes user trust. ## Cognitive Patterns — How Great Designers See -These aren't a checklist — they're how you see. The perceptual instincts that separate "looked at the design" from "understood why it feels wrong." Let them run automatically as you audit. +These aren't a checklist — they're how you see. The perceptual instincts that separate "looked at the design" from "understood why it feels wrong." Let them run automatically as you review. 1. **Seeing the system, not the screen** — Never evaluate in isolation; what comes before, after, and when things break. 2. **Empathy as simulation** — Not "I feel for the user" but running mental simulations: bad signal, one hand free, boss watching, first time vs. 1000th time. @@ -144,495 +189,215 @@ These aren't a checklist — they're how you see. The perceptual instincts that Key references: Dieter Rams' 10 Principles, Don Norman's 3 Levels of Design, Nielsen's 10 Heuristics, Gestalt Principles (proximity, similarity, closure, continuity), Ira Glass ("Your taste is why your work disappoints you"), Jony Ive ("People can sense care and can sense carelessness. Different and new is relatively easy. Doing something that's genuinely better is very hard."), Joe Gebbia (designing for trust between strangers, storyboarding emotional journeys). -When auditing a page, empathy as simulation runs automatically. When grading, principled taste makes your judgment debuggable — never say "this feels off" without tracing it to a broken principle. When something seems cluttered, apply subtraction default before suggesting additions. - -## Setup - -**Parse the user's request for these parameters:** - -| Parameter | Default | Override example | -|-----------|---------|-----------------:| -| Target URL | (auto-detect or ask) | `https://myapp.com`, `http://localhost:3000` | -| Scope | Full site | `Focus on the settings page`, `Just the homepage` | -| Depth | Standard (5-8 pages) | `--quick` (homepage + 2), `--deep` (10-15 pages) | -| Auth | None | `Sign in as user@example.com`, `Import cookies` | +When reviewing a plan, empathy as simulation runs automatically. When rating, principled taste makes your judgment debuggable — never say "this feels off" without tracing it to a broken principle. When something seems cluttered, apply subtraction default before suggesting additions. -**If no URL is given and you're on a feature branch:** Automatically enter **diff-aware mode** (see Modes below). +## Priority Hierarchy Under Context Pressure -**If no URL is given and you're on main/master:** Ask the user for a URL. - -**Check for DESIGN.md:** - -Look for `DESIGN.md`, `design-system.md`, or similar in the repo root. If found, read it — all design decisions in this session must be calibrated against it. Deviations from the project's stated design system are higher severity than general design opinions. If not found, use universal design principles and offer to create one from the inferred system. - -**Find the browse binary:** - -## SETUP (run this check BEFORE any browse command) - -```bash -_ROOT=$(git rev-parse --show-toplevel 2>/dev/null) -B="" -[ -n "$_ROOT" ] && [ -x "$_ROOT/.claude/skills/gstack/browse/dist/browse" ] && B="$_ROOT/.claude/skills/gstack/browse/dist/browse" -[ -z "$B" ] && B=~/.claude/skills/gstack/browse/dist/browse -if [ -x "$B" ]; then - echo "READY: $B" -else - echo "NEEDS_SETUP" -fi -``` +Step 0 > Interaction State Coverage > AI Slop Risk > Information Architecture > User Journey > everything else. +Never skip Step 0, interaction states, or AI slop assessment. These are the highest-leverage design dimensions. -If `NEEDS_SETUP`: -1. Tell the user: "gstack browse needs a one-time build (~10 seconds). OK to proceed?" Then STOP and wait. -2. Run: `cd && ./setup` -3. If `bun` is not installed: `curl -fsSL https://bun.sh/install | bash` +## PRE-REVIEW SYSTEM AUDIT (before Step 0) -**Create output directories:** +Before reviewing the plan, gather context: ```bash -REPORT_DIR=".gstack/design-reports" -mkdir -p "$REPORT_DIR/screenshots" +git log --oneline -15 +git diff --stat ``` ---- +Then read: +- The plan file (current plan or branch diff) +- CLAUDE.md — project conventions +- DESIGN.md — if it exists, ALL design decisions calibrate against it +- TODOS.md — any design-related TODOs this plan touches -## Modes +Map: +* What is the UI scope of this plan? (pages, components, interactions) +* Does a DESIGN.md exist? If not, flag as a gap. +* Are there existing design patterns in the codebase to align with? +* What prior design reviews exist? (check reviews.jsonl) -### Full (default) -Systematic review of all pages reachable from homepage. Visit 5-8 pages. Full checklist evaluation, responsive screenshots, interaction flow testing. Produces complete design audit report with letter grades. +### Retrospective Check +Check git log for prior design review cycles. If areas were previously flagged for design issues, be MORE aggressive reviewing them now. -### Quick (`--quick`) -Homepage + 2 key pages only. First Impression + Design System Extraction + abbreviated checklist. Fastest path to a design score. +### UI Scope Detection +Analyze the plan. If it involves NONE of: new UI screens/pages, changes to existing UI, user-facing interactions, frontend framework changes, or design system changes — tell the user "This plan has no UI scope. A design review isn't applicable." and exit early. Don't force design review on a backend change. -### Deep (`--deep`) -Comprehensive review: 10-15 pages, every interaction flow, exhaustive checklist. For pre-launch audits or major redesigns. +Report findings before proceeding to Step 0. -### Diff-aware (automatic when on a feature branch with no URL) -When on a feature branch, scope to pages affected by the branch changes: -1. Analyze the branch diff: `git diff main...HEAD --name-only` -2. Map changed files to affected pages/routes -3. Detect running app on common local ports (3000, 4000, 8080) -4. Audit only affected pages, compare design quality before/after +## Step 0: Design Scope Assessment -### Regression (`--regression` or previous `design-baseline.json` found) -Run full audit, then load previous `design-baseline.json`. Compare: per-category grade deltas, new findings, resolved findings. Output regression table in report. +### 0A. Initial Design Rating +Rate the plan's overall design completeness 0-10. +- "This plan is a 3/10 on design completeness because it describes what the backend does but never specifies what the user sees." +- "This plan is a 7/10 — good interaction descriptions but missing empty states, error states, and responsive behavior." ---- +Explain what a 10 looks like for THIS plan. -## Phase 1: First Impression +### 0B. DESIGN.md Status +- If DESIGN.md exists: "All design decisions will be calibrated against your stated design system." +- If no DESIGN.md: "No design system found. Recommend running /design-consultation first. Proceeding with universal design principles." -The most uniquely designer-like output. Form a gut reaction before analyzing anything. +### 0C. Existing Design Leverage +What existing UI patterns, components, or design decisions in the codebase should this plan reuse? Don't reinvent what already works. -1. Navigate to the target URL -2. Take a full-page desktop screenshot: `$B screenshot "$REPORT_DIR/screenshots/first-impression.png"` -3. Write the **First Impression** using this structured critique format: - - "The site communicates **[what]**." (what it says at a glance — competence? playfulness? confusion?) - - "I notice **[observation]**." (what stands out, positive or negative — be specific) - - "The first 3 things my eye goes to are: **[1]**, **[2]**, **[3]**." (hierarchy check — are these intentional?) - - "If I had to describe this in one word: **[word]**." (gut verdict) +### 0D. Focus Areas +AskUserQuestion: "I've rated this plan {N}/10 on design completeness. The biggest gaps are {X, Y, Z}. Want me to review all 7 dimensions, or focus on specific areas?" -This is the section users read first. Be opinionated. A designer doesn't hedge — they react. +**STOP.** Do NOT proceed until user responds. ---- +## The 0-10 Rating Method -## Phase 2: Design System Extraction +For each design section, rate the plan 0-10 on that dimension. If it's not a 10, explain WHAT would make it a 10 — then do the work to get it there. -Extract the actual design system the site uses (not what a DESIGN.md says, but what's rendered): +Pattern: +1. Rate: "Information Architecture: 4/10" +2. Gap: "It's a 4 because the plan doesn't define content hierarchy. A 10 would have clear primary/secondary/tertiary for every screen." +3. Fix: Edit the plan to add what's missing +4. Re-rate: "Now 8/10 — still missing mobile nav hierarchy" +5. AskUserQuestion if there's a genuine design choice to resolve +6. Fix again → repeat until 10 or user says "good enough, move on" -```bash -# Fonts in use (capped at 500 elements to avoid timeout) -$B js "JSON.stringify([...new Set([...document.querySelectorAll('*')].slice(0,500).map(e => getComputedStyle(e).fontFamily))])" - -# Color palette in use -$B js "JSON.stringify([...new Set([...document.querySelectorAll('*')].slice(0,500).flatMap(e => [getComputedStyle(e).color, getComputedStyle(e).backgroundColor]).filter(c => c !== 'rgba(0, 0, 0, 0)'))])" +Re-run loop: invoke /plan-design-review again → re-rate → sections at 8+ get a quick pass, sections below 8 get full treatment. -# Heading hierarchy -$B js "JSON.stringify([...document.querySelectorAll('h1,h2,h3,h4,h5,h6')].map(h => ({tag:h.tagName, text:h.textContent.trim().slice(0,50), size:getComputedStyle(h).fontSize, weight:getComputedStyle(h).fontWeight})))" +## Review Sections (7 passes, after scope is agreed) -# Touch target audit (find undersized interactive elements) -$B js "JSON.stringify([...document.querySelectorAll('a,button,input,[role=button]')].filter(e => {const r=e.getBoundingClientRect(); return r.width>0 && (r.width<44||r.height<44)}).map(e => ({tag:e.tagName, text:(e.textContent||'').trim().slice(0,30), w:Math.round(e.getBoundingClientRect().width), h:Math.round(e.getBoundingClientRect().height)})).slice(0,20))" +### Pass 1: Information Architecture +Rate 0-10: Does the plan define what the user sees first, second, third? +FIX TO 10: Add information hierarchy to the plan. Include ASCII diagram of screen/page structure and navigation flow. Apply "constraint worship" — if you can only show 3 things, which 3? +**STOP.** AskUserQuestion once per issue. Do NOT batch. Recommend + WHY. If no issues, say so and move on. Do NOT proceed until user responds. -# Performance baseline -$B perf +### Pass 2: Interaction State Coverage +Rate 0-10: Does the plan specify loading, empty, error, success, partial states? +FIX TO 10: Add interaction state table to the plan: ``` - -Structure findings as an **Inferred Design System**: -- **Fonts:** list with usage counts. Flag if >3 distinct font families. -- **Colors:** palette extracted. Flag if >12 unique non-gray colors. Note warm/cool/mixed. -- **Heading Scale:** h1-h6 sizes. Flag skipped levels, non-systematic size jumps. -- **Spacing Patterns:** sample padding/margin values. Flag non-scale values. - -After extraction, offer: *"Want me to save this as your DESIGN.md? I can lock in these observations as your project's design system baseline."* - ---- - -## Phase 3: Page-by-Page Visual Audit - -For each page in scope: - -```bash -$B goto -$B snapshot -i -a -o "$REPORT_DIR/screenshots/{page}-annotated.png" -$B responsive "$REPORT_DIR/screenshots/{page}" -$B console --errors -$B perf + FEATURE | LOADING | EMPTY | ERROR | SUCCESS | PARTIAL + ---------------------|---------|-------|-------|---------|-------- + [each UI feature] | [spec] | [spec]| [spec]| [spec] | [spec] ``` +For each state: describe what the user SEES, not backend behavior. +Empty states are features — specify warmth, primary action, context. +**STOP.** AskUserQuestion once per issue. Do NOT batch. Recommend + WHY. -### Auth Detection - -After the first navigation, check if the URL changed to a login-like path: -```bash -$B url +### Pass 3: User Journey & Emotional Arc +Rate 0-10: Does the plan consider the user's emotional experience? +FIX TO 10: Add user journey storyboard: ``` -If URL contains `/login`, `/signin`, `/auth`, or `/sso`: the site requires authentication. AskUserQuestion: "This site requires authentication. Want to import cookies from your browser? Run `/setup-browser-cookies` first if needed." - -### Design Audit Checklist (10 categories, ~80 items) - -Apply these at each page. Each finding gets an impact rating (high/medium/polish) and category. - -**1. Visual Hierarchy & Composition** (8 items) -- Clear focal point? One primary CTA per view? -- Eye flows naturally top-left to bottom-right? -- Visual noise — competing elements fighting for attention? -- Information density appropriate for content type? -- Z-index clarity — nothing unexpectedly overlapping? -- Above-the-fold content communicates purpose in 3 seconds? -- Squint test: hierarchy still visible when blurred? -- White space is intentional, not leftover? - -**2. Typography** (15 items) -- Font count <=3 (flag if more) -- Scale follows ratio (1.25 major third or 1.333 perfect fourth) -- Line-height: 1.5x body, 1.15-1.25x headings -- Measure: 45-75 chars per line (66 ideal) -- Heading hierarchy: no skipped levels (h1→h3 without h2) -- Weight contrast: >=2 weights used for hierarchy -- No blacklisted fonts (Papyrus, Comic Sans, Lobster, Impact, Jokerman) -- If primary font is Inter/Roboto/Open Sans/Poppins → flag as potentially generic -- `text-wrap: balance` or `text-pretty` on headings (check via `$B css text-wrap`) -- Curly quotes used, not straight quotes -- Ellipsis character (`…`) not three dots (`...`) -- `font-variant-numeric: tabular-nums` on number columns -- Body text >= 16px -- Caption/label >= 12px -- No letterspacing on lowercase text - -**3. Color & Contrast** (10 items) -- Palette coherent (<=12 unique non-gray colors) -- WCAG AA: body text 4.5:1, large text (18px+) 3:1, UI components 3:1 -- Semantic colors consistent (success=green, error=red, warning=yellow/amber) -- No color-only encoding (always add labels, icons, or patterns) -- Dark mode: surfaces use elevation, not just lightness inversion -- Dark mode: text off-white (~#E0E0E0), not pure white -- Primary accent desaturated 10-20% in dark mode -- `color-scheme: dark` on html element (if dark mode present) -- No red/green only combinations (8% of men have red-green deficiency) -- Neutral palette is warm or cool consistently — not mixed - -**4. Spacing & Layout** (12 items) -- Grid consistent at all breakpoints -- Spacing uses a scale (4px or 8px base), not arbitrary values -- Alignment is consistent — nothing floats outside the grid -- Rhythm: related items closer together, distinct sections further apart -- Border-radius hierarchy (not uniform bubbly radius on everything) -- Inner radius = outer radius - gap (nested elements) -- No horizontal scroll on mobile -- Max content width set (no full-bleed body text) -- `env(safe-area-inset-*)` for notch devices -- URL reflects state (filters, tabs, pagination in query params) -- Flex/grid used for layout (not JS measurement) -- Breakpoints: mobile (375), tablet (768), desktop (1024), wide (1440) - -**5. Interaction States** (10 items) -- Hover state on all interactive elements -- `focus-visible` ring present (never `outline: none` without replacement) -- Active/pressed state with depth effect or color shift -- Disabled state: reduced opacity + `cursor: not-allowed` -- Loading: skeleton shapes match real content layout -- Empty states: warm message + primary action + visual (not just "No items.") -- Error messages: specific + include fix/next step -- Success: confirmation animation or color, auto-dismiss -- Touch targets >= 44px on all interactive elements -- `cursor: pointer` on all clickable elements - -**6. Responsive Design** (8 items) -- Mobile layout makes *design* sense (not just stacked desktop columns) -- Touch targets sufficient on mobile (>= 44px) -- No horizontal scroll on any viewport -- Images handle responsive (srcset, sizes, or CSS containment) -- Text readable without zooming on mobile (>= 16px body) -- Navigation collapses appropriately (hamburger, bottom nav, etc.) -- Forms usable on mobile (correct input types, no autoFocus on mobile) -- No `user-scalable=no` or `maximum-scale=1` in viewport meta - -**7. Motion & Animation** (6 items) -- Easing: ease-out for entering, ease-in for exiting, ease-in-out for moving -- Duration: 50-700ms range (nothing slower unless page transition) -- Purpose: every animation communicates something (state change, attention, spatial relationship) -- `prefers-reduced-motion` respected (check: `$B js "matchMedia('(prefers-reduced-motion: reduce)').matches"`) -- No `transition: all` — properties listed explicitly -- Only `transform` and `opacity` animated (not layout properties like width, height, top, left) - -**8. Content & Microcopy** (8 items) -- Empty states designed with warmth (message + action + illustration/icon) -- Error messages specific: what happened + why + what to do next -- Button labels specific ("Save API Key" not "Continue" or "Submit") -- No placeholder/lorem ipsum text visible in production -- Truncation handled (`text-overflow: ellipsis`, `line-clamp`, or `break-words`) -- Active voice ("Install the CLI" not "The CLI will be installed") -- Loading states end with `…` ("Saving…" not "Saving...") -- Destructive actions have confirmation modal or undo window - -**9. AI Slop Detection** (10 anti-patterns — the blacklist) - -The test: would a human designer at a respected studio ever ship this? - -- Purple/violet/indigo gradient backgrounds or blue-to-purple color schemes -- **The 3-column feature grid:** icon-in-colored-circle + bold title + 2-line description, repeated 3x symmetrically. THE most recognizable AI layout. -- Icons in colored circles as section decoration (SaaS starter template look) -- Centered everything (`text-align: center` on all headings, descriptions, cards) -- Uniform bubbly border-radius on every element (same large radius on everything) -- Decorative blobs, floating circles, wavy SVG dividers (if a section feels empty, it needs better content, not decoration) -- Emoji as design elements (rockets in headings, emoji as bullet points) -- Colored left-border on cards (`border-left: 3px solid `) -- Generic hero copy ("Welcome to [X]", "Unlock the power of...", "Your all-in-one solution for...") -- Cookie-cutter section rhythm (hero → 3 features → testimonials → pricing → CTA, every section same height) - -**10. Performance as Design** (6 items) -- LCP < 2.0s (web apps), < 1.5s (informational sites) -- CLS < 0.1 (no visible layout shifts during load) -- Skeleton quality: shapes match real content, shimmer animation -- Images: `loading="lazy"`, width/height dimensions set, WebP/AVIF format -- Fonts: `font-display: swap`, preconnect to CDN origins -- No visible font swap flash (FOUT) — critical fonts preloaded - ---- - -## Phase 4: Interaction Flow Review - -Walk 2-3 key user flows and evaluate the *feel*, not just the function: - -```bash -$B snapshot -i -$B click @e3 # perform action -$B snapshot -D # diff to see what changed + STEP | USER DOES | USER FEELS | PLAN SPECIFIES? + -----|------------------|-----------------|---------------- + 1 | Lands on page | [what emotion?] | [what supports it?] + ... ``` - -Evaluate: -- **Response feel:** Does clicking feel responsive? Any delays or missing loading states? -- **Transition quality:** Are transitions intentional or generic/absent? -- **Feedback clarity:** Did the action clearly succeed or fail? Is the feedback immediate? -- **Form polish:** Focus states visible? Validation timing correct? Errors near the source? - ---- - -## Phase 5: Cross-Page Consistency - -Compare screenshots and observations across pages for: -- Navigation bar consistent across all pages? -- Footer consistent? -- Component reuse vs one-off designs (same button styled differently on different pages?) -- Tone consistency (one page playful while another is corporate?) -- Spacing rhythm carries across pages? - ---- - -## Phase 6: Compile Report - -### Output Locations - -**Local:** `.gstack/design-reports/design-audit-{domain}-{YYYY-MM-DD}.md` - -**Project-scoped:** -```bash -eval $(~/.claude/skills/gstack/bin/gstack-slug 2>/dev/null) -mkdir -p ~/.gstack/projects/$SLUG +Apply time-horizon design: 5-sec visceral, 5-min behavioral, 5-year reflective. +**STOP.** AskUserQuestion once per issue. Do NOT batch. Recommend + WHY. + +### Pass 4: AI Slop Risk +Rate 0-10: Does the plan describe specific, intentional UI — or generic patterns? +FIX TO 10: Rewrite vague UI descriptions with specific alternatives. +- "Cards with icons" → what differentiates these from every SaaS template? +- "Hero section" → what makes this hero feel like THIS product? +- "Clean, modern UI" → meaningless. Replace with actual design decisions. +- "Dashboard with widgets" → what makes this NOT every other dashboard? +**STOP.** AskUserQuestion once per issue. Do NOT batch. Recommend + WHY. + +### Pass 5: Design System Alignment +Rate 0-10: Does the plan align with DESIGN.md? +FIX TO 10: If DESIGN.md exists, annotate with specific tokens/components. If no DESIGN.md, flag the gap and recommend `/design-consultation`. +Flag any new component — does it fit the existing vocabulary? +**STOP.** AskUserQuestion once per issue. Do NOT batch. Recommend + WHY. + +### Pass 6: Responsive & Accessibility +Rate 0-10: Does the plan specify mobile/tablet, keyboard nav, screen readers? +FIX TO 10: Add responsive specs per viewport — not "stacked on mobile" but intentional layout changes. Add a11y: keyboard nav patterns, ARIA landmarks, touch target sizes (44px min), color contrast requirements. +**STOP.** AskUserQuestion once per issue. Do NOT batch. Recommend + WHY. + +### Pass 7: Unresolved Design Decisions +Surface ambiguities that will haunt implementation: ``` -Write to: `~/.gstack/projects/{slug}/{user}-{branch}-design-audit-{datetime}.md` - -**Baseline:** Write `design-baseline.json` for regression mode: -```json -{ - "date": "YYYY-MM-DD", - "url": "", - "designScore": "B", - "aiSlopScore": "C", - "categoryGrades": { "hierarchy": "A", "typography": "B", ... }, - "findings": [{ "id": "FINDING-001", "title": "...", "impact": "high", "category": "typography" }] -} + DECISION NEEDED | IF DEFERRED, WHAT HAPPENS + -----------------------------|--------------------------- + What does empty state look like? | Engineer ships "No items found." + Mobile nav pattern? | Desktop nav hides behind hamburger + ... ``` +Each decision = one AskUserQuestion with recommendation + WHY + alternatives. Edit the plan with each decision as it's made. -### Scoring System - -**Dual headline scores:** -- **Design Score: {A-F}** — weighted average of all 10 categories -- **AI Slop Score: {A-F}** — standalone grade with pithy verdict - -**Per-category grades:** -- **A:** Intentional, polished, delightful. Shows design thinking. -- **B:** Solid fundamentals, minor inconsistencies. Looks professional. -- **C:** Functional but generic. No major problems, no design point of view. -- **D:** Noticeable problems. Feels unfinished or careless. -- **F:** Actively hurting user experience. Needs significant rework. +## CRITICAL RULE — How to ask questions +Follow the AskUserQuestion format from the Preamble above. Additional rules for plan design reviews: +* **One issue = one AskUserQuestion call.** Never combine multiple issues into one question. +* Describe the design gap concretely — what's missing, what the user will experience if it's not specified. +* Present 2-3 options. For each: effort to specify now, risk if deferred. +* **Map to Design Principles above.** One sentence connecting your recommendation to a specific principle. +* Label with issue NUMBER + option LETTER (e.g., "3A", "3B"). +* **Escape hatch:** If a section has no issues, say so and move on. If a gap has an obvious fix, state what you'll add and move on — don't waste a question on it. Only use AskUserQuestion when there is a genuine design choice with meaningful tradeoffs. -**Grade computation:** Each category starts at A. Each High-impact finding drops one letter grade. Each Medium-impact finding drops half a letter grade. Polish findings are noted but do not affect grade. Minimum is F. +## Required Outputs -**Category weights for Design Score:** -| Category | Weight | -|----------|--------| -| Visual Hierarchy | 15% | -| Typography | 15% | -| Spacing & Layout | 15% | -| Color & Contrast | 10% | -| Interaction States | 10% | -| Responsive | 10% | -| Content Quality | 10% | -| AI Slop | 5% | -| Motion | 5% | -| Performance Feel | 5% | +### "NOT in scope" section +Design decisions considered and explicitly deferred, with one-line rationale each. -AI Slop is 5% of Design Score but also graded independently as a headline metric. +### "What already exists" section +Existing DESIGN.md, UI patterns, and components that the plan should reuse. -### Regression Output - -When previous `design-baseline.json` exists or `--regression` flag is used: -- Load baseline grades -- Compare: per-category deltas, new findings, resolved findings -- Append regression table to report - ---- - -## Design Critique Format - -Use structured feedback, not opinions: -- "I notice..." — observation (e.g., "I notice the primary CTA competes with the secondary action") -- "I wonder..." — question (e.g., "I wonder if users will understand what 'Process' means here") -- "What if..." — suggestion (e.g., "What if we moved search to a more prominent position?") -- "I think... because..." — reasoned opinion (e.g., "I think the spacing between sections is too uniform because it doesn't create hierarchy") - -Tie everything to user goals and product objectives. Always suggest specific improvements alongside problems. - ---- - -## Important Rules - -1. **Think like a designer, not a QA engineer.** You care whether things feel right, look intentional, and respect the user. You do NOT just care whether things "work." -2. **Screenshots are evidence.** Every finding needs at least one screenshot. Use annotated screenshots (`snapshot -a`) to highlight elements. -3. **Be specific and actionable.** "Change X to Y because Z" — not "the spacing feels off." -4. **Never read source code.** Evaluate the rendered site, not the implementation. (Exception: offer to write DESIGN.md from extracted observations.) -5. **AI Slop detection is your superpower.** Most developers can't evaluate whether their site looks AI-generated. You can. Be direct about it. -6. **Quick wins matter.** Always include a "Quick Wins" section — the 3-5 highest-impact fixes that take <30 minutes each. -7. **Use `snapshot -C` for tricky UIs.** Finds clickable divs that the accessibility tree misses. -8. **Responsive is design, not just "not broken."** A stacked desktop layout on mobile is not responsive design — it's lazy. Evaluate whether the mobile layout makes *design* sense. -9. **Document incrementally.** Write each finding to the report as you find it. Don't batch. -10. **Depth over breadth.** 5-10 well-documented findings with screenshots and specific suggestions > 20 vague observations. -11. **Show screenshots to the user.** After every `$B screenshot`, `$B snapshot -a -o`, or `$B responsive` command, use the Read tool on the output file(s) so the user can see them inline. For `responsive` (3 files), Read all three. This is critical — without it, screenshots are invisible to the user. - ---- +### TODOS.md updates +After all review passes are complete, present each potential TODO as its own individual AskUserQuestion. Never batch TODOs — one per question. Never silently skip this step. -## Report Format +For design debt: missing a11y, unresolved responsive behavior, deferred empty states. Each TODO gets: +* **What:** One-line description of the work. +* **Why:** The concrete problem it solves or value it unlocks. +* **Pros:** What you gain by doing this work. +* **Cons:** Cost, complexity, or risks of doing it. +* **Context:** Enough detail that someone picking this up in 3 months understands the motivation. +* **Depends on / blocked by:** Any prerequisites. -Write the report to `$REPORT_DIR/design-audit-{domain}-{YYYY-MM-DD}.md`: +Then present options: **A)** Add to TODOS.md **B)** Skip — not valuable enough **C)** Build it now in this PR instead of deferring. -```markdown -# Design Audit: {DOMAIN} - -| Field | Value | -|-------|-------| -| **Date** | {DATE} | -| **URL** | {URL} | -| **Scope** | {SCOPE or "Full site"} | -| **Pages reviewed** | {COUNT} | -| **DESIGN.md** | {Found / Inferred / Not found} | - -## Design Score: {LETTER} | AI Slop Score: {LETTER} - -> {Pithy one-line verdict} - -| Category | Grade | Notes | -|----------|-------|-------| -| Visual Hierarchy | {A-F} | {one-line} | -| Typography | {A-F} | {one-line} | -| Spacing & Layout | {A-F} | {one-line} | -| Color & Contrast | {A-F} | {one-line} | -| Interaction States | {A-F} | {one-line} | -| Responsive | {A-F} | {one-line} | -| Motion | {A-F} | {one-line} | -| Content Quality | {A-F} | {one-line} | -| AI Slop | {A-F} | {one-line} | -| Performance Feel | {A-F} | {one-line} | - -## First Impression -{structured critique} - -## Top 5 Design Improvements -{prioritized, actionable} - -## Inferred Design System -{fonts, colors, heading scale, spacing} - -## Findings -{each: impact, category, page, what's wrong, what good looks like, screenshot} - -## Responsive Summary -{mobile/tablet/desktop grades per page} - -## Quick Wins (< 30 min each) -{high-impact, low-effort fixes} +### Completion Summary ``` - ---- - -## DESIGN.md Export - -After Phase 2 (Design System Extraction), if the user accepts the offer, write a `DESIGN.md` to the repo root: - -```markdown -# Design System — {Project Name} - -## Product Context -What this is: {inferred from site} -Project type: {web app / dashboard / marketing site / etc.} - -## Typography -{extracted fonts with roles} - -## Color -{extracted palette} - -## Spacing -{extracted scale} - -## Heading Scale -{extracted h1-h6 sizes} - -## Decisions Log -| Date | Decision | Rationale | -|------|----------|-----------| -| {today} | Baseline captured from live site | Inferred by /plan-design-review | + +====================================================================+ + | DESIGN PLAN REVIEW — COMPLETION SUMMARY | + +====================================================================+ + | System Audit | [DESIGN.md status, UI scope] | + | Step 0 | [initial rating, focus areas] | + | Pass 1 (Info Arch) | ___/10 → ___/10 after fixes | + | Pass 2 (States) | ___/10 → ___/10 after fixes | + | Pass 3 (Journey) | ___/10 → ___/10 after fixes | + | Pass 4 (AI Slop) | ___/10 → ___/10 after fixes | + | Pass 5 (Design Sys) | ___/10 → ___/10 after fixes | + | Pass 6 (Responsive) | ___/10 → ___/10 after fixes | + | Pass 7 (Decisions) | ___ resolved, ___ deferred | + +--------------------------------------------------------------------+ + | NOT in scope | written (___ items) | + | What already exists | written | + | TODOS.md updates | ___ items proposed | + | Decisions made | ___ added to plan | + | Decisions deferred | ___ (listed below) | + | Overall design score | ___/10 → ___/10 | + +====================================================================+ ``` ---- - -## Additional Rules (plan-design-review specific) +If all passes 8+: "Plan is design-complete. Run /design-review after implementation for visual QA." +If any below 8: note what's unresolved and why (user chose to defer). -11. **Never fix anything.** Find and document only. Do not read source code, edit files, or suggest code fixes. Your job is to report what could be better and suggest design improvements. Use `/qa-design-review` for the fix loop. -12. **The exception:** You MAY write a DESIGN.md file if the user accepts the offer. This is the only file you create. +### Unresolved Decisions +If any AskUserQuestion goes unanswered, note it here. Never silently default to an option. ## Review Log -After compiling the report, persist the review result: +After producing the Completion Summary above, persist the review result: ```bash eval $(~/.claude/skills/gstack/bin/gstack-slug 2>/dev/null) mkdir -p ~/.gstack/projects/$SLUG -echo '{"skill":"plan-design-review","timestamp":"TIMESTAMP","status":"STATUS","design_score":"GRADE","ai_slop_score":"GRADE","mode":"MODE"}' >> ~/.gstack/projects/$SLUG/$BRANCH-reviews.jsonl +echo '{"skill":"plan-design-review","timestamp":"TIMESTAMP","status":"STATUS","overall_score":N,"unresolved":N,"decisions_made":N}' >> ~/.gstack/projects/$SLUG/$BRANCH-reviews.jsonl ``` -Substitute values from the report: +Substitute values from the Completion Summary: - **TIMESTAMP**: current ISO 8601 datetime -- **STATUS**: "clean" if Design Score is A or B; "issues_open" if C, D, or F -- **GRADE**: the letter grade from the report (Design Score and AI Slop Score respectively) -- **MODE**: Full / Quick / Deep / Diff-aware / Regression +- **STATUS**: "clean" if overall score 8+ AND 0 unresolved; otherwise "issues_open" +- **overall_score**: final overall design score (0-10) +- **unresolved**: number of unresolved design decisions +- **decisions_made**: number of design decisions added to the plan ## Review Readiness Dashboard @@ -671,3 +436,10 @@ Parse the output. Find the most recent entry for each skill (plan-ceo-review, pl - **NOT CLEARED**: Eng Review missing, stale (>7 days), or has open issues - CEO and Design reviews are shown for context but never block shipping - If \`skip_eng_review\` config is \`true\`, Eng Review shows "SKIPPED (global)" and verdict is CLEARED + +## Formatting Rules +* NUMBER issues (1, 2, 3...) and LETTERS for options (A, B, C...). +* Label with NUMBER + LETTER (e.g., "3A", "3B"). +* One sentence max per option. +* After each pass, pause and wait for feedback. +* Rate before and after each pass for scannability. diff --git a/plan-design-review/SKILL.md.tmpl b/plan-design-review/SKILL.md.tmpl index f8ecb25..f8f5221 100644 --- a/plan-design-review/SKILL.md.tmpl +++ b/plan-design-review/SKILL.md.tmpl @@ -1,29 +1,57 @@ --- name: plan-design-review -version: 1.0.0 +version: 2.0.0 description: | - Designer's eye review of a live site. Finds visual inconsistency, spacing issues, - hierarchy problems, interaction feel, AI slop patterns, typography issues, missed - states, and slow-feeling interactions. Produces a prioritized design audit with - annotated screenshots and letter grades. Infers your design system and offers to - export as DESIGN.md. Report-only — never modifies code. For the fix loop, use - /qa-design-review instead. + Designer's eye plan review — interactive, like CEO and Eng review. + Rates each design dimension 0-10, explains what would make it a 10, + then fixes the plan to get there. Works in plan mode. For live site + visual audits, use /design-review. allowed-tools: - - Bash - Read - - Write + - Edit + - Grep + - Glob + - Bash - AskUserQuestion --- {{PREAMBLE}} -# /plan-design-review: Designer's Eye Audit +{{BASE_BRANCH_DETECT}} + +# /plan-design-review: Designer's Eye Plan Review + +You are a senior product designer reviewing a PLAN — not a live site. Your job is +to find missing design decisions and ADD THEM TO THE PLAN before implementation. + +The output of this skill is a better plan, not a document about the plan. + +## Design Philosophy + +You are not here to rubber-stamp this plan's UI. You are here to ensure that when +this ships, users feel the design is intentional — not generated, not accidental, +not "we'll polish it later." Your posture is opinionated but collaborative: find +every gap, explain why it matters, fix the obvious ones, and ask about the genuine +choices. + +Do NOT make any code changes. Do NOT start implementation. Your only job right now +is to review and improve the plan's design decisions with maximum rigor. -You are a senior product designer reviewing a live site. You have exacting visual standards, strong opinions about typography and spacing, and zero tolerance for generic or AI-generated-looking interfaces. You do NOT care whether things "work." You care whether they feel right, look intentional, and respect the user. +## Design Principles + +1. Empty states are features. "No items found." is not a design. Every empty state needs warmth, a primary action, and context. +2. Every screen has a hierarchy. What does the user see first, second, third? If everything competes, nothing wins. +3. Specificity over vibes. "Clean, modern UI" is not a design decision. Name the font, the spacing scale, the interaction pattern. +4. Edge cases are user experiences. 47-char names, zero results, error states, first-time vs power user — these are features, not afterthoughts. +5. AI slop is the enemy. Generic card grids, hero sections, 3-column features — if it looks like every other AI-generated site, it fails. +6. Responsive is not "stacked on mobile." Each viewport gets intentional design. +7. Accessibility is not optional. Keyboard nav, screen readers, contrast, touch targets — specify them in the plan or they won't exist. +8. Subtraction default. If a UI element doesn't earn its pixels, cut it. Feature bloat kills products faster than missing features. +9. Trust is earned at the pixel level. Every interface decision either builds or erodes user trust. ## Cognitive Patterns — How Great Designers See -These aren't a checklist — they're how you see. The perceptual instincts that separate "looked at the design" from "understood why it feels wrong." Let them run automatically as you audit. +These aren't a checklist — they're how you see. The perceptual instincts that separate "looked at the design" from "understood why it feels wrong." Let them run automatically as you review. 1. **Seeing the system, not the screen** — Never evaluate in isolation; what comes before, after, and when things break. 2. **Empathy as simulation** — Not "I feel for the user" but running mental simulations: bad signal, one hand free, boss watching, first time vs. 1000th time. @@ -40,147 +68,221 @@ These aren't a checklist — they're how you see. The perceptual instincts that Key references: Dieter Rams' 10 Principles, Don Norman's 3 Levels of Design, Nielsen's 10 Heuristics, Gestalt Principles (proximity, similarity, closure, continuity), Ira Glass ("Your taste is why your work disappoints you"), Jony Ive ("People can sense care and can sense carelessness. Different and new is relatively easy. Doing something that's genuinely better is very hard."), Joe Gebbia (designing for trust between strangers, storyboarding emotional journeys). -When auditing a page, empathy as simulation runs automatically. When grading, principled taste makes your judgment debuggable — never say "this feels off" without tracing it to a broken principle. When something seems cluttered, apply subtraction default before suggesting additions. +When reviewing a plan, empathy as simulation runs automatically. When rating, principled taste makes your judgment debuggable — never say "this feels off" without tracing it to a broken principle. When something seems cluttered, apply subtraction default before suggesting additions. -## Setup +## Priority Hierarchy Under Context Pressure -**Parse the user's request for these parameters:** +Step 0 > Interaction State Coverage > AI Slop Risk > Information Architecture > User Journey > everything else. +Never skip Step 0, interaction states, or AI slop assessment. These are the highest-leverage design dimensions. -| Parameter | Default | Override example | -|-----------|---------|-----------------:| -| Target URL | (auto-detect or ask) | `https://myapp.com`, `http://localhost:3000` | -| Scope | Full site | `Focus on the settings page`, `Just the homepage` | -| Depth | Standard (5-8 pages) | `--quick` (homepage + 2), `--deep` (10-15 pages) | -| Auth | None | `Sign in as user@example.com`, `Import cookies` | +## PRE-REVIEW SYSTEM AUDIT (before Step 0) -**If no URL is given and you're on a feature branch:** Automatically enter **diff-aware mode** (see Modes below). +Before reviewing the plan, gather context: -**If no URL is given and you're on main/master:** Ask the user for a URL. +```bash +git log --oneline -15 +git diff --stat +``` -**Check for DESIGN.md:** +Then read: +- The plan file (current plan or branch diff) +- CLAUDE.md — project conventions +- DESIGN.md — if it exists, ALL design decisions calibrate against it +- TODOS.md — any design-related TODOs this plan touches -Look for `DESIGN.md`, `design-system.md`, or similar in the repo root. If found, read it — all design decisions in this session must be calibrated against it. Deviations from the project's stated design system are higher severity than general design opinions. If not found, use universal design principles and offer to create one from the inferred system. +Map: +* What is the UI scope of this plan? (pages, components, interactions) +* Does a DESIGN.md exist? If not, flag as a gap. +* Are there existing design patterns in the codebase to align with? +* What prior design reviews exist? (check reviews.jsonl) -**Find the browse binary:** +### Retrospective Check +Check git log for prior design review cycles. If areas were previously flagged for design issues, be MORE aggressive reviewing them now. -{{BROWSE_SETUP}} +### UI Scope Detection +Analyze the plan. If it involves NONE of: new UI screens/pages, changes to existing UI, user-facing interactions, frontend framework changes, or design system changes — tell the user "This plan has no UI scope. A design review isn't applicable." and exit early. Don't force design review on a backend change. -**Create output directories:** +Report findings before proceeding to Step 0. -```bash -REPORT_DIR=".gstack/design-reports" -mkdir -p "$REPORT_DIR/screenshots" -``` +## Step 0: Design Scope Assessment ---- +### 0A. Initial Design Rating +Rate the plan's overall design completeness 0-10. +- "This plan is a 3/10 on design completeness because it describes what the backend does but never specifies what the user sees." +- "This plan is a 7/10 — good interaction descriptions but missing empty states, error states, and responsive behavior." -{{DESIGN_METHODOLOGY}} +Explain what a 10 looks like for THIS plan. ---- +### 0B. DESIGN.md Status +- If DESIGN.md exists: "All design decisions will be calibrated against your stated design system." +- If no DESIGN.md: "No design system found. Recommend running /design-consultation first. Proceeding with universal design principles." -## Report Format +### 0C. Existing Design Leverage +What existing UI patterns, components, or design decisions in the codebase should this plan reuse? Don't reinvent what already works. -Write the report to `$REPORT_DIR/design-audit-{domain}-{YYYY-MM-DD}.md`: +### 0D. Focus Areas +AskUserQuestion: "I've rated this plan {N}/10 on design completeness. The biggest gaps are {X, Y, Z}. Want me to review all 7 dimensions, or focus on specific areas?" -```markdown -# Design Audit: {DOMAIN} +**STOP.** Do NOT proceed until user responds. -| Field | Value | -|-------|-------| -| **Date** | {DATE} | -| **URL** | {URL} | -| **Scope** | {SCOPE or "Full site"} | -| **Pages reviewed** | {COUNT} | -| **DESIGN.md** | {Found / Inferred / Not found} | +## The 0-10 Rating Method -## Design Score: {LETTER} | AI Slop Score: {LETTER} +For each design section, rate the plan 0-10 on that dimension. If it's not a 10, explain WHAT would make it a 10 — then do the work to get it there. -> {Pithy one-line verdict} +Pattern: +1. Rate: "Information Architecture: 4/10" +2. Gap: "It's a 4 because the plan doesn't define content hierarchy. A 10 would have clear primary/secondary/tertiary for every screen." +3. Fix: Edit the plan to add what's missing +4. Re-rate: "Now 8/10 — still missing mobile nav hierarchy" +5. AskUserQuestion if there's a genuine design choice to resolve +6. Fix again → repeat until 10 or user says "good enough, move on" -| Category | Grade | Notes | -|----------|-------|-------| -| Visual Hierarchy | {A-F} | {one-line} | -| Typography | {A-F} | {one-line} | -| Spacing & Layout | {A-F} | {one-line} | -| Color & Contrast | {A-F} | {one-line} | -| Interaction States | {A-F} | {one-line} | -| Responsive | {A-F} | {one-line} | -| Motion | {A-F} | {one-line} | -| Content Quality | {A-F} | {one-line} | -| AI Slop | {A-F} | {one-line} | -| Performance Feel | {A-F} | {one-line} | +Re-run loop: invoke /plan-design-review again → re-rate → sections at 8+ get a quick pass, sections below 8 get full treatment. -## First Impression -{structured critique} +## Review Sections (7 passes, after scope is agreed) -## Top 5 Design Improvements -{prioritized, actionable} +### Pass 1: Information Architecture +Rate 0-10: Does the plan define what the user sees first, second, third? +FIX TO 10: Add information hierarchy to the plan. Include ASCII diagram of screen/page structure and navigation flow. Apply "constraint worship" — if you can only show 3 things, which 3? +**STOP.** AskUserQuestion once per issue. Do NOT batch. Recommend + WHY. If no issues, say so and move on. Do NOT proceed until user responds. -## Inferred Design System -{fonts, colors, heading scale, spacing} - -## Findings -{each: impact, category, page, what's wrong, what good looks like, screenshot} - -## Responsive Summary -{mobile/tablet/desktop grades per page} - -## Quick Wins (< 30 min each) -{high-impact, low-effort fixes} +### Pass 2: Interaction State Coverage +Rate 0-10: Does the plan specify loading, empty, error, success, partial states? +FIX TO 10: Add interaction state table to the plan: ``` + FEATURE | LOADING | EMPTY | ERROR | SUCCESS | PARTIAL + ---------------------|---------|-------|-------|---------|-------- + [each UI feature] | [spec] | [spec]| [spec]| [spec] | [spec] +``` +For each state: describe what the user SEES, not backend behavior. +Empty states are features — specify warmth, primary action, context. +**STOP.** AskUserQuestion once per issue. Do NOT batch. Recommend + WHY. ---- - -## DESIGN.md Export +### Pass 3: User Journey & Emotional Arc +Rate 0-10: Does the plan consider the user's emotional experience? +FIX TO 10: Add user journey storyboard: +``` + STEP | USER DOES | USER FEELS | PLAN SPECIFIES? + -----|------------------|-----------------|---------------- + 1 | Lands on page | [what emotion?] | [what supports it?] + ... +``` +Apply time-horizon design: 5-sec visceral, 5-min behavioral, 5-year reflective. +**STOP.** AskUserQuestion once per issue. Do NOT batch. Recommend + WHY. + +### Pass 4: AI Slop Risk +Rate 0-10: Does the plan describe specific, intentional UI — or generic patterns? +FIX TO 10: Rewrite vague UI descriptions with specific alternatives. +- "Cards with icons" → what differentiates these from every SaaS template? +- "Hero section" → what makes this hero feel like THIS product? +- "Clean, modern UI" → meaningless. Replace with actual design decisions. +- "Dashboard with widgets" → what makes this NOT every other dashboard? +**STOP.** AskUserQuestion once per issue. Do NOT batch. Recommend + WHY. + +### Pass 5: Design System Alignment +Rate 0-10: Does the plan align with DESIGN.md? +FIX TO 10: If DESIGN.md exists, annotate with specific tokens/components. If no DESIGN.md, flag the gap and recommend `/design-consultation`. +Flag any new component — does it fit the existing vocabulary? +**STOP.** AskUserQuestion once per issue. Do NOT batch. Recommend + WHY. + +### Pass 6: Responsive & Accessibility +Rate 0-10: Does the plan specify mobile/tablet, keyboard nav, screen readers? +FIX TO 10: Add responsive specs per viewport — not "stacked on mobile" but intentional layout changes. Add a11y: keyboard nav patterns, ARIA landmarks, touch target sizes (44px min), color contrast requirements. +**STOP.** AskUserQuestion once per issue. Do NOT batch. Recommend + WHY. + +### Pass 7: Unresolved Design Decisions +Surface ambiguities that will haunt implementation: +``` + DECISION NEEDED | IF DEFERRED, WHAT HAPPENS + -----------------------------|--------------------------- + What does empty state look like? | Engineer ships "No items found." + Mobile nav pattern? | Desktop nav hides behind hamburger + ... +``` +Each decision = one AskUserQuestion with recommendation + WHY + alternatives. Edit the plan with each decision as it's made. -After Phase 2 (Design System Extraction), if the user accepts the offer, write a `DESIGN.md` to the repo root: +## CRITICAL RULE — How to ask questions +Follow the AskUserQuestion format from the Preamble above. Additional rules for plan design reviews: +* **One issue = one AskUserQuestion call.** Never combine multiple issues into one question. +* Describe the design gap concretely — what's missing, what the user will experience if it's not specified. +* Present 2-3 options. For each: effort to specify now, risk if deferred. +* **Map to Design Principles above.** One sentence connecting your recommendation to a specific principle. +* Label with issue NUMBER + option LETTER (e.g., "3A", "3B"). +* **Escape hatch:** If a section has no issues, say so and move on. If a gap has an obvious fix, state what you'll add and move on — don't waste a question on it. Only use AskUserQuestion when there is a genuine design choice with meaningful tradeoffs. -```markdown -# Design System — {Project Name} +## Required Outputs -## Product Context -What this is: {inferred from site} -Project type: {web app / dashboard / marketing site / etc.} +### "NOT in scope" section +Design decisions considered and explicitly deferred, with one-line rationale each. -## Typography -{extracted fonts with roles} +### "What already exists" section +Existing DESIGN.md, UI patterns, and components that the plan should reuse. -## Color -{extracted palette} +### TODOS.md updates +After all review passes are complete, present each potential TODO as its own individual AskUserQuestion. Never batch TODOs — one per question. Never silently skip this step. -## Spacing -{extracted scale} +For design debt: missing a11y, unresolved responsive behavior, deferred empty states. Each TODO gets: +* **What:** One-line description of the work. +* **Why:** The concrete problem it solves or value it unlocks. +* **Pros:** What you gain by doing this work. +* **Cons:** Cost, complexity, or risks of doing it. +* **Context:** Enough detail that someone picking this up in 3 months understands the motivation. +* **Depends on / blocked by:** Any prerequisites. -## Heading Scale -{extracted h1-h6 sizes} +Then present options: **A)** Add to TODOS.md **B)** Skip — not valuable enough **C)** Build it now in this PR instead of deferring. -## Decisions Log -| Date | Decision | Rationale | -|------|----------|-----------| -| {today} | Baseline captured from live site | Inferred by /plan-design-review | +### Completion Summary +``` + +====================================================================+ + | DESIGN PLAN REVIEW — COMPLETION SUMMARY | + +====================================================================+ + | System Audit | [DESIGN.md status, UI scope] | + | Step 0 | [initial rating, focus areas] | + | Pass 1 (Info Arch) | ___/10 → ___/10 after fixes | + | Pass 2 (States) | ___/10 → ___/10 after fixes | + | Pass 3 (Journey) | ___/10 → ___/10 after fixes | + | Pass 4 (AI Slop) | ___/10 → ___/10 after fixes | + | Pass 5 (Design Sys) | ___/10 → ___/10 after fixes | + | Pass 6 (Responsive) | ___/10 → ___/10 after fixes | + | Pass 7 (Decisions) | ___ resolved, ___ deferred | + +--------------------------------------------------------------------+ + | NOT in scope | written (___ items) | + | What already exists | written | + | TODOS.md updates | ___ items proposed | + | Decisions made | ___ added to plan | + | Decisions deferred | ___ (listed below) | + | Overall design score | ___/10 → ___/10 | + +====================================================================+ ``` ---- - -## Additional Rules (plan-design-review specific) +If all passes 8+: "Plan is design-complete. Run /design-review after implementation for visual QA." +If any below 8: note what's unresolved and why (user chose to defer). -11. **Never fix anything.** Find and document only. Do not read source code, edit files, or suggest code fixes. Your job is to report what could be better and suggest design improvements. Use `/qa-design-review` for the fix loop. -12. **The exception:** You MAY write a DESIGN.md file if the user accepts the offer. This is the only file you create. +### Unresolved Decisions +If any AskUserQuestion goes unanswered, note it here. Never silently default to an option. ## Review Log -After compiling the report, persist the review result: +After producing the Completion Summary above, persist the review result: ```bash eval $(~/.claude/skills/gstack/bin/gstack-slug 2>/dev/null) mkdir -p ~/.gstack/projects/$SLUG -echo '{"skill":"plan-design-review","timestamp":"TIMESTAMP","status":"STATUS","design_score":"GRADE","ai_slop_score":"GRADE","mode":"MODE"}' >> ~/.gstack/projects/$SLUG/$BRANCH-reviews.jsonl +echo '{"skill":"plan-design-review","timestamp":"TIMESTAMP","status":"STATUS","overall_score":N,"unresolved":N,"decisions_made":N}' >> ~/.gstack/projects/$SLUG/$BRANCH-reviews.jsonl ``` -Substitute values from the report: +Substitute values from the Completion Summary: - **TIMESTAMP**: current ISO 8601 datetime -- **STATUS**: "clean" if Design Score is A or B; "issues_open" if C, D, or F -- **GRADE**: the letter grade from the report (Design Score and AI Slop Score respectively) -- **MODE**: Full / Quick / Deep / Diff-aware / Regression +- **STATUS**: "clean" if overall score 8+ AND 0 unresolved; otherwise "issues_open" +- **overall_score**: final overall design score (0-10) +- **unresolved**: number of unresolved design decisions +- **decisions_made**: number of design decisions added to the plan {{REVIEW_DASHBOARD}} + +## Formatting Rules +* NUMBER issues (1, 2, 3...) and LETTERS for options (A, B, C...). +* Label with NUMBER + LETTER (e.g., "3A", "3B"). +* One sentence max per option. +* After each pass, pause and wait for feedback. +* Rate before and after each pass for scannability. diff --git a/review/SKILL.md b/review/SKILL.md index 5d73459..3a14a9d 100644 --- a/review/SKILL.md +++ b/review/SKILL.md @@ -219,7 +219,7 @@ eval $(~/.claude/skills/gstack/bin/gstack-diff-scope 2>/dev/null) 4. **Apply the design checklist** against the changed files. For each item: - **[HIGH] mechanical CSS fix** (`outline: none`, `!important`, `font-size < 16px`): classify as AUTO-FIX - **[HIGH/MEDIUM] design judgment needed**: classify as ASK - - **[LOW] intent-based detection**: present as "Possible — verify visually or run /qa-design-review" + - **[LOW] intent-based detection**: present as "Possible — verify visually or run /design-review" 5. **Include findings** in the review output under a "Design Review" header, following the output format in the checklist. Design findings merge with code review findings into the same Fix-First flow. diff --git a/review/design-checklist.md b/review/design-checklist.md index bbe4988..9007516 100644 --- a/review/design-checklist.md +++ b/review/design-checklist.md @@ -24,7 +24,7 @@ Each item is tagged with a detection confidence level: - **[HIGH]** — Reliably detectable via grep/pattern match. Definitive findings. - **[MEDIUM]** — Detectable via pattern aggregation or heuristic. Flag as findings but expect some noise. -- **[LOW]** — Requires understanding visual intent. Present as: "Possible issue — verify visually or run /qa-design-review." +- **[LOW]** — Requires understanding visual intent. Present as: "Possible issue — verify visually or run /design-review." --- @@ -38,7 +38,7 @@ Each item is tagged with a detection confidence level: **ASK** (everything else — requires design judgment): - All AI slop findings, typography structure, spacing choices, interaction state gaps, DESIGN.md violations -**LOW confidence items** → present as "Possible: [description]. Verify visually or run /qa-design-review." Never AUTO-FIX. +**LOW confidence items** → present as "Possible: [description]. Verify visually or run /design-review." Never AUTO-FIX. --- @@ -55,7 +55,7 @@ Design Review: N issues (X auto-fixable, Y need input, Z possible) Recommended fix: suggested fix **POSSIBLE (verify visually):** -- [file:line] Possible issue — verify with /qa-design-review +- [file:line] Possible issue — verify with /design-review ``` If no issues found: `Design Review: No issues found.` diff --git a/scripts/gen-skill-docs.ts b/scripts/gen-skill-docs.ts index cb80711..687143c 100644 --- a/scripts/gen-skill-docs.ts +++ b/scripts/gen-skill-docs.ts @@ -541,7 +541,7 @@ eval $(~/.claude/skills/gstack/bin/gstack-diff-scope 2>/dev/null) 4. **Apply the design checklist** against the changed files. For each item: - **[HIGH] mechanical CSS fix** (\`outline: none\`, \`!important\`, \`font-size < 16px\`): classify as AUTO-FIX - **[HIGH/MEDIUM] design judgment needed**: classify as ASK - - **[LOW] intent-based detection**: present as "Possible — verify visually or run /qa-design-review" + - **[LOW] intent-based detection**: present as "Possible — verify visually or run /design-review" 5. **Include findings** in the review output under a "Design Review" header, following the output format in the checklist. Design findings merge with code review findings into the same Fix-First flow. @@ -1152,7 +1152,7 @@ function findTemplates(): string[] { path.join(ROOT, 'retro', 'SKILL.md.tmpl'), path.join(ROOT, 'gstack-upgrade', 'SKILL.md.tmpl'), path.join(ROOT, 'plan-design-review', 'SKILL.md.tmpl'), - path.join(ROOT, 'qa-design-review', 'SKILL.md.tmpl'), + path.join(ROOT, 'design-review', 'SKILL.md.tmpl'), path.join(ROOT, 'design-consultation', 'SKILL.md.tmpl'), path.join(ROOT, 'document-release', 'SKILL.md.tmpl'), ]; diff --git a/scripts/skill-check.ts b/scripts/skill-check.ts index 97c417e..3be0245 100644 --- a/scripts/skill-check.ts +++ b/scripts/skill-check.ts @@ -28,7 +28,7 @@ const SKILL_FILES = [ 'plan-eng-review/SKILL.md', 'setup-browser-cookies/SKILL.md', 'plan-design-review/SKILL.md', - 'qa-design-review/SKILL.md', + 'design-review/SKILL.md', 'gstack-upgrade/SKILL.md', 'document-release/SKILL.md', ].filter(f => fs.existsSync(path.join(ROOT, f))); diff --git a/ship/SKILL.md b/ship/SKILL.md index 486f32b..875845d 100644 --- a/ship/SKILL.md +++ b/ship/SKILL.md @@ -227,7 +227,7 @@ If the Eng Review is NOT "CLEAR": - RECOMMENDATION: Choose C if the change is obviously trivial (< 20 lines, typo fix, config-only); Choose B for larger changes - Options: A) Ship anyway B) Abort — run /plan-eng-review first C) Change is too small to need eng review - If CEO Review is missing, mention as informational ("CEO Review not run — recommended for product changes") but do NOT block - - For Design Review: run `eval $(~/.claude/skills/gstack/bin/gstack-diff-scope 2>/dev/null)`. If `SCOPE_FRONTEND=true` and no design review (plan-design-review or design-review-lite) exists in the dashboard, mention: "Design Review not run — this PR changes frontend code. The lite design check will run automatically in Step 3.5, but consider running /plan-design-review for a full visual audit." Still never block. + - For Design Review: run `eval $(~/.claude/skills/gstack/bin/gstack-diff-scope 2>/dev/null)`. If `SCOPE_FRONTEND=true` and no design review (plan-design-review or design-review-lite) exists in the dashboard, mention: "Design Review not run — this PR changes frontend code. The lite design check will run automatically in Step 3.5, but consider running /design-review for a full visual audit post-implementation." Still never block. 3. **If the user chooses A or C,** persist the decision so future `/ship` runs on this branch skip the gate: ```bash @@ -664,7 +664,7 @@ eval $(~/.claude/skills/gstack/bin/gstack-diff-scope 2>/dev/null) 4. **Apply the design checklist** against the changed files. For each item: - **[HIGH] mechanical CSS fix** (`outline: none`, `!important`, `font-size < 16px`): classify as AUTO-FIX - **[HIGH/MEDIUM] design judgment needed**: classify as ASK - - **[LOW] intent-based detection**: present as "Possible — verify visually or run /qa-design-review" + - **[LOW] intent-based detection**: present as "Possible — verify visually or run /design-review" 5. **Include findings** in the review output under a "Design Review" header, following the output format in the checklist. Design findings merge with code review findings into the same Fix-First flow. diff --git a/ship/SKILL.md.tmpl b/ship/SKILL.md.tmpl index f992214..bb077da 100644 --- a/ship/SKILL.md.tmpl +++ b/ship/SKILL.md.tmpl @@ -70,7 +70,7 @@ If the Eng Review is NOT "CLEAR": - RECOMMENDATION: Choose C if the change is obviously trivial (< 20 lines, typo fix, config-only); Choose B for larger changes - Options: A) Ship anyway B) Abort — run /plan-eng-review first C) Change is too small to need eng review - If CEO Review is missing, mention as informational ("CEO Review not run — recommended for product changes") but do NOT block - - For Design Review: run `eval $(~/.claude/skills/gstack/bin/gstack-diff-scope 2>/dev/null)`. If `SCOPE_FRONTEND=true` and no design review (plan-design-review or design-review-lite) exists in the dashboard, mention: "Design Review not run — this PR changes frontend code. The lite design check will run automatically in Step 3.5, but consider running /plan-design-review for a full visual audit." Still never block. + - For Design Review: run `eval $(~/.claude/skills/gstack/bin/gstack-diff-scope 2>/dev/null)`. If `SCOPE_FRONTEND=true` and no design review (plan-design-review or design-review-lite) exists in the dashboard, mention: "Design Review not run — this PR changes frontend code. The lite design check will run automatically in Step 3.5, but consider running /design-review for a full visual audit post-implementation." Still never block. 3. **If the user chooses A or C,** persist the decision so future `/ship` runs on this branch skip the gate: ```bash diff --git a/test/gen-skill-docs.test.ts b/test/gen-skill-docs.test.ts index c3861e8..9dfd1a1 100644 --- a/test/gen-skill-docs.test.ts +++ b/test/gen-skill-docs.test.ts @@ -70,7 +70,7 @@ describe('gen-skill-docs', () => { { dir: 'setup-browser-cookies', name: 'setup-browser-cookies' }, { dir: 'gstack-upgrade', name: 'gstack-upgrade' }, { dir: 'plan-design-review', name: 'plan-design-review' }, - { dir: 'qa-design-review', name: 'qa-design-review' }, + { dir: 'design-review', name: 'design-review' }, { dir: 'design-consultation', name: 'design-consultation' }, ]; diff --git a/test/helpers/touchfiles.ts b/test/helpers/touchfiles.ts index 84a11da..995648a 100644 --- a/test/helpers/touchfiles.ts +++ b/test/helpers/touchfiles.ts @@ -84,9 +84,12 @@ export const E2E_TOUCHFILES: Record = { 'design-consultation-research': ['design-consultation/**'], 'design-consultation-existing': ['design-consultation/**'], 'design-consultation-preview': ['design-consultation/**'], - 'plan-design-review-audit': ['plan-design-review/**'], - 'plan-design-review-export': ['plan-design-review/**'], - 'qa-design-review-fix': ['qa-design-review/**', 'browse/src/**'], + 'plan-design-review-plan-mode': ['plan-design-review/**'], + 'plan-design-review-no-ui-scope': ['plan-design-review/**'], + 'design-review-fix': ['design-review/**', 'browse/src/**'], + + // gstack-upgrade + 'gstack-upgrade-happy-path': ['gstack-upgrade/**'], }; /** @@ -102,6 +105,24 @@ export const LLM_JUDGE_TOUCHFILES: Record = { 'qa/SKILL.md health rubric': ['qa/SKILL.md', 'qa/SKILL.md.tmpl'], 'cross-skill greptile consistency': ['review/SKILL.md', 'review/SKILL.md.tmpl', 'ship/SKILL.md', 'ship/SKILL.md.tmpl', 'review/greptile-triage.md', 'retro/SKILL.md', 'retro/SKILL.md.tmpl'], 'baseline score pinning': ['SKILL.md', 'SKILL.md.tmpl', 'test/fixtures/eval-baselines.json'], + + // Ship & Release + 'ship/SKILL.md workflow': ['ship/SKILL.md', 'ship/SKILL.md.tmpl'], + 'document-release/SKILL.md workflow': ['document-release/SKILL.md', 'document-release/SKILL.md.tmpl'], + + // Plan Reviews + 'plan-ceo-review/SKILL.md modes': ['plan-ceo-review/SKILL.md', 'plan-ceo-review/SKILL.md.tmpl'], + 'plan-eng-review/SKILL.md sections': ['plan-eng-review/SKILL.md', 'plan-eng-review/SKILL.md.tmpl'], + 'plan-design-review/SKILL.md passes': ['plan-design-review/SKILL.md', 'plan-design-review/SKILL.md.tmpl'], + + // Design skills + 'design-review/SKILL.md fix loop': ['design-review/SKILL.md', 'design-review/SKILL.md.tmpl'], + 'design-consultation/SKILL.md research': ['design-consultation/SKILL.md', 'design-consultation/SKILL.md.tmpl'], + + // Other skills + 'retro/SKILL.md instructions': ['retro/SKILL.md', 'retro/SKILL.md.tmpl'], + 'qa-only/SKILL.md workflow': ['qa-only/SKILL.md', 'qa-only/SKILL.md.tmpl'], + 'gstack-upgrade/SKILL.md upgrade flow': ['gstack-upgrade/SKILL.md', 'gstack-upgrade/SKILL.md.tmpl'], }; /** diff --git a/test/skill-e2e.test.ts b/test/skill-e2e.test.ts index 6a66311..1353927 100644 --- a/test/skill-e2e.test.ts +++ b/test/skill-e2e.test.ts @@ -1876,8 +1876,120 @@ describeE2E('Deferred skill E2E', () => { // Setup-browser-cookies requires interactive browser picker UI test.todo('/setup-browser-cookies imports cookies'); - // Gstack-upgrade is destructive: modifies skill installation directory - test.todo('/gstack-upgrade completes upgrade flow'); +}); + +// --- gstack-upgrade E2E --- + +describeIfSelected('gstack-upgrade E2E', ['gstack-upgrade-happy-path'], () => { + let upgradeDir: string; + let remoteDir: string; + + beforeAll(() => { + upgradeDir = fs.mkdtempSync(path.join(os.tmpdir(), 'skill-e2e-upgrade-')); + remoteDir = fs.mkdtempSync(path.join(os.tmpdir(), 'gstack-remote-')); + + const run = (cmd: string, args: string[], cwd: string) => + spawnSync(cmd, args, { cwd, stdio: 'pipe', timeout: 5000 }); + + // Init the "project" repo + run('git', ['init'], upgradeDir); + run('git', ['config', 'user.email', 'test@test.com'], upgradeDir); + run('git', ['config', 'user.name', 'Test'], upgradeDir); + + // Create mock gstack install directory (local-git type) + const mockGstack = path.join(upgradeDir, '.claude', 'skills', 'gstack'); + fs.mkdirSync(mockGstack, { recursive: true }); + + // Init as a git repo + run('git', ['init'], mockGstack); + run('git', ['config', 'user.email', 'test@test.com'], mockGstack); + run('git', ['config', 'user.name', 'Test'], mockGstack); + + // Create bare remote + run('git', ['init', '--bare'], remoteDir); + run('git', ['remote', 'add', 'origin', remoteDir], mockGstack); + + // Write old version files + fs.writeFileSync(path.join(mockGstack, 'VERSION'), '0.5.0\n'); + fs.writeFileSync(path.join(mockGstack, 'CHANGELOG.md'), + '# Changelog\n\n## 0.5.0 — 2026-03-01\n\n- Initial release\n'); + fs.writeFileSync(path.join(mockGstack, 'setup'), + '#!/bin/bash\necho "Setup completed"\n', { mode: 0o755 }); + + // Initial commit + push + run('git', ['add', '.'], mockGstack); + run('git', ['commit', '-m', 'initial'], mockGstack); + run('git', ['push', '-u', 'origin', 'HEAD:main'], mockGstack); + + // Create new version (simulate upstream release) + fs.writeFileSync(path.join(mockGstack, 'VERSION'), '0.6.0\n'); + fs.writeFileSync(path.join(mockGstack, 'CHANGELOG.md'), + '# Changelog\n\n## 0.6.0 — 2026-03-15\n\n- New feature: interactive design review\n- Fix: snapshot flag validation\n\n## 0.5.0 — 2026-03-01\n\n- Initial release\n'); + run('git', ['add', '.'], mockGstack); + run('git', ['commit', '-m', 'release 0.6.0'], mockGstack); + run('git', ['push', 'origin', 'HEAD:main'], mockGstack); + + // Reset working copy back to old version + run('git', ['reset', '--hard', 'HEAD~1'], mockGstack); + + // Copy gstack-upgrade skill + fs.mkdirSync(path.join(upgradeDir, 'gstack-upgrade'), { recursive: true }); + fs.copyFileSync( + path.join(ROOT, 'gstack-upgrade', 'SKILL.md'), + path.join(upgradeDir, 'gstack-upgrade', 'SKILL.md'), + ); + + // Commit so git repo is clean + run('git', ['add', '.'], upgradeDir); + run('git', ['commit', '-m', 'initial project'], upgradeDir); + }); + + afterAll(() => { + try { fs.rmSync(upgradeDir, { recursive: true, force: true }); } catch {} + try { fs.rmSync(remoteDir, { recursive: true, force: true }); } catch {} + }); + + testIfSelected('gstack-upgrade-happy-path', async () => { + const mockGstack = path.join(upgradeDir, '.claude', 'skills', 'gstack'); + const result = await runSkillTest({ + prompt: `Read gstack-upgrade/SKILL.md for the upgrade workflow. + +You are running /gstack-upgrade standalone. The gstack installation is at ./.claude/skills/gstack (local-git type — it has a .git directory with an origin remote). + +Current version: 0.5.0. A new version 0.6.0 is available on origin/main. + +Follow the standalone upgrade flow: +1. Detect install type (local-git) +2. Run git fetch origin && git reset --hard origin/main in the install directory +3. Run the setup script +4. Show what's new from CHANGELOG + +Skip any AskUserQuestion calls — auto-approve the upgrade. Write a summary of what you did to stdout. + +IMPORTANT: The install directory is at ./.claude/skills/gstack — use that exact path.`, + workingDirectory: upgradeDir, + maxTurns: 20, + timeout: 180_000, + testName: 'gstack-upgrade-happy-path', + runId, + }); + + logCost('/gstack-upgrade happy path', result); + + // Check that the version was updated + const versionAfter = fs.readFileSync(path.join(mockGstack, 'VERSION'), 'utf-8').trim(); + const output = result.output || ''; + const mentionsUpgrade = output.toLowerCase().includes('0.6.0') || + output.toLowerCase().includes('upgrade') || + output.toLowerCase().includes('updated'); + + recordE2E('/gstack-upgrade happy path', 'gstack-upgrade E2E', result, { + passed: versionAfter === '0.6.0' && ['success', 'error_max_turns'].includes(result.exitReason), + }); + + expect(['success', 'error_max_turns']).toContain(result.exitReason); + expect(versionAfter).toBe('0.6.0'); + }, 240_000); }); // --- Design Consultation E2E --- @@ -2178,15 +2290,13 @@ Skip research. Skip any AskUserQuestion calls — this is non-interactive. Gener }, 420_000); }); -// --- Plan Design Review E2E --- +// --- Plan Design Review E2E (plan-mode) --- -describeIfSelected('Plan Design Review E2E', ['plan-design-review-audit', 'plan-design-review-export'], () => { +describeIfSelected('Plan Design Review E2E', ['plan-design-review-plan-mode', 'plan-design-review-no-ui-scope'], () => { let reviewDir: string; beforeAll(() => { - testServer = testServer || startTestServer(); reviewDir = fs.mkdtempSync(path.join(os.tmpdir(), 'skill-e2e-plan-design-')); - setupBrowseShims(reviewDir); const { spawnSync } = require('child_process'); const run = (cmd: string, args: string[]) => @@ -2195,9 +2305,6 @@ describeIfSelected('Plan Design Review E2E', ['plan-design-review-audit', 'plan- run('git', ['init']); run('git', ['config', 'user.email', 'test@test.com']); run('git', ['config', 'user.name', 'Test']); - fs.writeFileSync(path.join(reviewDir, 'index.html'), '

Test

\n'); - run('git', ['add', '.']); - run('git', ['commit', '-m', 'initial']); // Copy plan-design-review skill fs.mkdirSync(path.join(reviewDir, 'plan-design-review'), { recursive: true }); @@ -2205,102 +2312,136 @@ describeIfSelected('Plan Design Review E2E', ['plan-design-review-audit', 'plan- path.join(ROOT, 'plan-design-review', 'SKILL.md'), path.join(reviewDir, 'plan-design-review', 'SKILL.md'), ); + + // Create a plan file with intentional design gaps + fs.writeFileSync(path.join(reviewDir, 'plan.md'), `# Plan: User Dashboard + +## Context +Build a user dashboard that shows account stats, recent activity, and settings. + +## Implementation +1. Create a dashboard page at /dashboard +2. Show user stats (posts, followers, engagement rate) +3. Add a recent activity feed +4. Add a settings panel +5. Use a clean, modern UI with cards and icons +6. Add a hero section at the top with a gradient background + +## Technical Details +- React components with Tailwind CSS +- API endpoint: GET /api/dashboard +- WebSocket for real-time activity updates +`); + + run('git', ['add', '.']); + run('git', ['commit', '-m', 'initial plan']); }); afterAll(() => { try { fs.rmSync(reviewDir, { recursive: true, force: true }); } catch {} }); - testIfSelected('plan-design-review-audit', async () => { + testIfSelected('plan-design-review-plan-mode', async () => { const result = await runSkillTest({ - prompt: `IMPORTANT: The browse binary is already assigned below as B. Do NOT search for it or run the SKILL.md setup block — just use $B directly. + prompt: `Read plan-design-review/SKILL.md for the design review workflow. -B="${browseBin}" - -Read plan-design-review/SKILL.md for the design review workflow. +Review the plan in ./plan.md. This plan has several design gaps — it uses vague language like "clean, modern UI" and "cards and icons", mentions a "hero section with gradient" (AI slop), and doesn't specify empty states, error states, loading states, responsive behavior, or accessibility. -Review the site at ${testServer.url}. Use --quick mode (homepage + 2 pages). Skip any AskUserQuestion calls — this is non-interactive. Write your audit report to ./design-audit.md. Do not offer to create DESIGN.md. +Skip the preamble bash block. Skip any AskUserQuestion calls — this is non-interactive. Rate each design dimension 0-10 and explain what would make it a 10. Then EDIT plan.md to add the missing design decisions (interaction state table, empty states, responsive behavior, etc.). -EFFICIENCY: Skip the preamble bash block. Combine multiple browse commands into single bash blocks (e.g. run all Phase 2 JS extractions in one block). Write the report as soon as you have enough data — do not over-explore.`, +IMPORTANT: Do NOT try to browse any URLs or use a browse binary. This is a plan review, not a live site audit. Just read the plan file, review it, and edit it to fix the gaps.`, workingDirectory: reviewDir, - maxTurns: 30, - timeout: 360_000, - testName: 'plan-design-review-audit', + maxTurns: 15, + timeout: 300_000, + testName: 'plan-design-review-plan-mode', runId, }); - logCost('/plan-design-review audit', result); - - const reportPath = path.join(reviewDir, 'design-audit.md'); - const reportExists = fs.existsSync(reportPath); - let reportContent = ''; - if (reportExists) { - reportContent = fs.readFileSync(reportPath, 'utf-8'); - } - - const hasFirstImpression = reportContent.toLowerCase().includes('first impression') || - reportContent.toLowerCase().includes('impression'); + logCost('/plan-design-review plan-mode', result); - recordE2E('/plan-design-review audit', 'Plan Design Review E2E', result, { - passed: reportExists && ['success', 'error_max_turns'].includes(result.exitReason), + // Check that the agent produced design ratings (0-10 scale) + const output = result.output || ''; + const hasRatings = /\d+\/10/.test(output); + const hasDesignContent = output.toLowerCase().includes('information architecture') || + output.toLowerCase().includes('interaction state') || + output.toLowerCase().includes('ai slop') || + output.toLowerCase().includes('hierarchy'); + + // Check that the plan file was edited (the core new behavior) + const planAfter = fs.readFileSync(path.join(reviewDir, 'plan.md'), 'utf-8'); + const planOriginal = `# Plan: User Dashboard`; + const planWasEdited = planAfter.length > 300; // Original is ~450 chars, edited should be much longer + const planHasDesignAdditions = planAfter.toLowerCase().includes('empty') || + planAfter.toLowerCase().includes('loading') || + planAfter.toLowerCase().includes('error') || + planAfter.toLowerCase().includes('state') || + planAfter.toLowerCase().includes('responsive') || + planAfter.toLowerCase().includes('accessibility'); + + recordE2E('/plan-design-review plan-mode', 'Plan Design Review E2E', result, { + passed: hasDesignContent && planWasEdited && ['success', 'error_max_turns'].includes(result.exitReason), }); expect(['success', 'error_max_turns']).toContain(result.exitReason); - expect(reportExists).toBe(true); - if (reportExists) { - expect(reportContent.length).toBeGreaterThan(200); - } - }, 420_000); + // Agent should produce design-relevant output about the plan + expect(hasDesignContent).toBe(true); + // Agent should have edited the plan file to add missing design decisions + expect(planWasEdited).toBe(true); + expect(planHasDesignAdditions).toBe(true); + }, 360_000); - testIfSelected('plan-design-review-export', async () => { - // Clean up previous test artifacts - try { fs.unlinkSync(path.join(reviewDir, 'design-audit.md')); } catch {} + testIfSelected('plan-design-review-no-ui-scope', async () => { + // Write a backend-only plan + fs.writeFileSync(path.join(reviewDir, 'backend-plan.md'), `# Plan: Database Migration + +## Context +Migrate user records from PostgreSQL to a new schema with better indexing. + +## Implementation +1. Create migration to add new columns to users table +2. Backfill data from legacy columns +3. Add database indexes for common query patterns +4. Update ActiveRecord models +5. Run migration in staging first, then production +`); const result = await runSkillTest({ - prompt: `IMPORTANT: The browse binary is already assigned below as B. Do NOT search for it or run the SKILL.md setup block — just use $B directly. + prompt: `Read plan-design-review/SKILL.md for the design review workflow. -B="${browseBin}" +Review the plan in ./backend-plan.md. This is a pure backend database migration plan with no UI changes. -Read plan-design-review/SKILL.md for the design review workflow. +Skip the preamble bash block. Skip any AskUserQuestion calls — this is non-interactive. Write your findings directly to stdout. -Review ${testServer.url} with --quick mode. Skip any AskUserQuestion calls — this is non-interactive. After Phase 2 (Design System Extraction), write a DESIGN.md to the working directory. Also write the audit report to ./design-audit.md.`, +IMPORTANT: Do NOT try to browse any URLs or use a browse binary. This is a plan review, not a live site audit.`, workingDirectory: reviewDir, - maxTurns: 25, - timeout: 360_000, - testName: 'plan-design-review-export', + maxTurns: 10, + timeout: 180_000, + testName: 'plan-design-review-no-ui-scope', runId, }); - logCost('/plan-design-review export', result); - - const designPath = path.join(reviewDir, 'DESIGN.md'); - const reportPath = path.join(reviewDir, 'design-audit.md'); - const designExists = fs.existsSync(designPath); - const reportExists = fs.existsSync(reportPath); - - let designContent = ''; - if (designExists) { - designContent = fs.readFileSync(designPath, 'utf-8'); - } - - const hasTypography = designContent.toLowerCase().includes('typography') || designContent.toLowerCase().includes('font'); - const hasColor = designContent.toLowerCase().includes('color'); + logCost('/plan-design-review no-ui-scope', result); - recordE2E('/plan-design-review export', 'Plan Design Review E2E', result, { - passed: designExists && ['success', 'error_max_turns'].includes(result.exitReason), + // Agent should detect no UI scope and exit early + const output = result.output || ''; + const detectsNoUI = output.toLowerCase().includes('no ui') || + output.toLowerCase().includes('no frontend') || + output.toLowerCase().includes('no design') || + output.toLowerCase().includes('not applicable') || + output.toLowerCase().includes('backend'); + + recordE2E('/plan-design-review no-ui-scope', 'Plan Design Review E2E', result, { + passed: detectsNoUI && ['success', 'error_max_turns'].includes(result.exitReason), }); expect(['success', 'error_max_turns']).toContain(result.exitReason); - // DESIGN.md export is best-effort — agent may not always produce it - if (designExists) { - expect(hasTypography || hasColor).toBe(true); - } - }, 420_000); + expect(detectsNoUI).toBe(true); + }, 240_000); }); -// --- QA Design Review E2E --- +// --- Design Review E2E (live-site audit + fix) --- -describeIfSelected('QA Design Review E2E', ['qa-design-review-fix'], () => { +describeIfSelected('Design Review E2E', ['design-review-fix'], () => { let qaDesignDir: string; let qaDesignServer: ReturnType | null = null; @@ -2376,11 +2517,11 @@ describeIfSelected('QA Design Review E2E', ['qa-design-review-fix'], () => { }, }); - // Copy qa-design-review skill - fs.mkdirSync(path.join(qaDesignDir, 'qa-design-review'), { recursive: true }); + // Copy design-review skill + fs.mkdirSync(path.join(qaDesignDir, 'design-review'), { recursive: true }); fs.copyFileSync( - path.join(ROOT, 'qa-design-review', 'SKILL.md'), - path.join(qaDesignDir, 'qa-design-review', 'SKILL.md'), + path.join(ROOT, 'design-review', 'SKILL.md'), + path.join(qaDesignDir, 'design-review', 'SKILL.md'), ); }); @@ -2389,7 +2530,7 @@ describeIfSelected('QA Design Review E2E', ['qa-design-review-fix'], () => { try { fs.rmSync(qaDesignDir, { recursive: true, force: true }); } catch {} }); - test('Test 7: /qa-design-review audits and fixes design issues', async () => { + test('Test 7: /design-review audits and fixes design issues', async () => { const serverUrl = `http://localhost:${(qaDesignServer as any)?.port}`; const result = await runSkillTest({ @@ -2397,17 +2538,17 @@ describeIfSelected('QA Design Review E2E', ['qa-design-review-fix'], () => { B="${browseBin}" -Read qa-design-review/SKILL.md for the design review + fix workflow. +Read design-review/SKILL.md for the design review + fix workflow. Review the site at ${serverUrl}. Use --quick mode. Skip any AskUserQuestion calls — this is non-interactive. Fix up to 3 issues max. Write your report to ./design-audit.md.`, workingDirectory: qaDesignDir, maxTurns: 30, timeout: 360_000, - testName: 'qa-design-review-fix', + testName: 'design-review-fix', runId, }); - logCost('/qa-design-review fix', result); + logCost('/design-review fix', result); const reportPath = path.join(qaDesignDir, 'design-audit.md'); const reportExists = fs.existsSync(reportPath); @@ -2419,7 +2560,7 @@ Review the site at ${serverUrl}. Use --quick mode. Skip any AskUserQuestion call const commits = gitLog.stdout.toString().trim().split('\n'); const designFixCommits = commits.filter((c: string) => c.includes('style(design)')); - recordE2E('/qa-design-review fix', 'QA Design Review E2E', result, { + recordE2E('/design-review fix', 'Design Review E2E', result, { passed: ['success', 'error_max_turns'].includes(result.exitReason), }); diff --git a/test/skill-llm-eval.test.ts b/test/skill-llm-eval.test.ts index c3e1aef..528d511 100644 --- a/test/skill-llm-eval.test.ts +++ b/test/skill-llm-eval.test.ts @@ -464,6 +464,210 @@ describeIfSelected('Baseline score pinning', ['baseline score pinning'], () => { }, 60_000); }); +// --- Workflow SKILL.md quality evals (10 new tests for 100% coverage) --- + +/** + * DRY helper for workflow SKILL.md judge tests. + * Extracts a section from a SKILL.md file and judges its quality as an agent workflow. + */ +async function runWorkflowJudge(opts: { + testName: string; + suite: string; + skillPath: string; + startMarker: string; + endMarker: string | null; + judgeContext: string; + judgeGoal: string; + thresholds?: { clarity: number; completeness: number; actionability: number }; +}) { + const t0 = Date.now(); + const defaults = { clarity: 4, completeness: 3, actionability: 4 }; + const thresholds = { ...defaults, ...opts.thresholds }; + + const content = fs.readFileSync(path.join(ROOT, opts.skillPath), 'utf-8'); + const startIdx = content.indexOf(opts.startMarker); + if (startIdx === -1) throw new Error(`Start marker not found in ${opts.skillPath}: "${opts.startMarker}"`); + + let section: string; + if (opts.endMarker) { + const endIdx = content.indexOf(opts.endMarker, startIdx); + if (endIdx === -1) throw new Error(`End marker not found in ${opts.skillPath}: "${opts.endMarker}"`); + section = content.slice(startIdx, endIdx); + } else { + section = content.slice(startIdx); + } + + const scores = await callJudge(`You are evaluating the quality of ${opts.judgeContext} for an AI coding agent. + +The agent reads this document to learn ${opts.judgeGoal}. It references external tools and files +that are documented separately — do NOT penalize for missing external definitions. + +Rate on three dimensions (1-5 scale): +- **clarity** (1-5): Can an agent follow the instructions without ambiguity? +- **completeness** (1-5): Are all steps, decision points, and outputs well-defined? +- **actionability** (1-5): Can an agent execute this workflow and produce the expected deliverables? + +Respond with ONLY valid JSON: +{"clarity": N, "completeness": N, "actionability": N, "reasoning": "brief explanation"} + +Here is the document to evaluate: + +${section}`); + + console.log(`${opts.testName} scores:`, JSON.stringify(scores, null, 2)); + + evalCollector?.addTest({ + name: opts.testName, + suite: opts.suite, + tier: 'llm-judge', + passed: scores.clarity >= thresholds.clarity && scores.completeness >= thresholds.completeness && scores.actionability >= thresholds.actionability, + duration_ms: Date.now() - t0, + cost_usd: 0.02, + judge_scores: { clarity: scores.clarity, completeness: scores.completeness, actionability: scores.actionability }, + judge_reasoning: scores.reasoning, + }); + + expect(scores.clarity).toBeGreaterThanOrEqual(thresholds.clarity); + expect(scores.completeness).toBeGreaterThanOrEqual(thresholds.completeness); + expect(scores.actionability).toBeGreaterThanOrEqual(thresholds.actionability); +} + +// Block 1: Ship & Release skills +describeIfSelected('Ship & Release skill evals', ['ship/SKILL.md workflow', 'document-release/SKILL.md workflow'], () => { + testIfSelected('ship/SKILL.md workflow', async () => { + await runWorkflowJudge({ + testName: 'ship/SKILL.md workflow', + suite: 'Ship & Release skill evals', + skillPath: 'ship/SKILL.md', + startMarker: '# Ship:', + endMarker: '## Important Rules', + judgeContext: 'a ship/release workflow document', + judgeGoal: 'how to create a PR: merge base branch, run tests, review diff, bump version, update changelog, push, and open PR', + }); + }, 30_000); + + testIfSelected('document-release/SKILL.md workflow', async () => { + await runWorkflowJudge({ + testName: 'document-release/SKILL.md workflow', + suite: 'Ship & Release skill evals', + skillPath: 'document-release/SKILL.md', + startMarker: '# Document Release:', + endMarker: '## Important Rules', + judgeContext: 'a post-ship documentation update workflow', + judgeGoal: 'how to audit and update project documentation after code ships: README, ARCHITECTURE, CONTRIBUTING, CLAUDE.md, CHANGELOG, TODOS', + }); + }, 30_000); +}); + +// Block 2: Plan Review skills +describeIfSelected('Plan Review skill evals', [ + 'plan-ceo-review/SKILL.md modes', 'plan-eng-review/SKILL.md sections', 'plan-design-review/SKILL.md passes', +], () => { + testIfSelected('plan-ceo-review/SKILL.md modes', async () => { + await runWorkflowJudge({ + testName: 'plan-ceo-review/SKILL.md modes', + suite: 'Plan Review skill evals', + skillPath: 'plan-ceo-review/SKILL.md', + startMarker: '## Step 0: Nuclear Scope Challenge', + endMarker: '## Review Sections', + judgeContext: 'a CEO/founder plan review framework with 4 scope modes', + judgeGoal: 'how to conduct a CEO-perspective plan review: challenge scope, select a mode (Expansion, Selective Expansion, Hold Scope, Reduction), then review sections interactively', + }); + }, 30_000); + + testIfSelected('plan-eng-review/SKILL.md sections', async () => { + await runWorkflowJudge({ + testName: 'plan-eng-review/SKILL.md sections', + suite: 'Plan Review skill evals', + skillPath: 'plan-eng-review/SKILL.md', + startMarker: '## BEFORE YOU START:', + endMarker: '## CRITICAL RULE', + judgeContext: 'an engineering plan review framework with 4 review sections', + judgeGoal: 'how to review a plan for architecture quality, code quality, test coverage, and performance — walking through each section interactively with AskUserQuestion', + }); + }, 30_000); + + testIfSelected('plan-design-review/SKILL.md passes', async () => { + await runWorkflowJudge({ + testName: 'plan-design-review/SKILL.md passes', + suite: 'Plan Review skill evals', + skillPath: 'plan-design-review/SKILL.md', + startMarker: '## Review Sections', + endMarker: '## CRITICAL RULE', + judgeContext: 'a design plan review framework with 7 review passes', + judgeGoal: 'how to review a plan for design quality using a 0-10 rating method: rate each dimension, explain what a 10 looks like, edit the plan to fix gaps, then re-rate', + }); + }, 30_000); +}); + +// Block 3: Design skills +describeIfSelected('Design skill evals', ['design-review/SKILL.md fix loop', 'design-consultation/SKILL.md research'], () => { + testIfSelected('design-review/SKILL.md fix loop', async () => { + await runWorkflowJudge({ + testName: 'design-review/SKILL.md fix loop', + suite: 'Design skill evals', + skillPath: 'design-review/SKILL.md', + startMarker: '## Phase 7:', + endMarker: '## Additional Rules', + judgeContext: 'a design audit triage and fix loop workflow', + judgeGoal: 'how to triage design issues by severity, fix them atomically in source code, commit each fix, and re-verify with before/after screenshots', + }); + }, 30_000); + + testIfSelected('design-consultation/SKILL.md research', async () => { + await runWorkflowJudge({ + testName: 'design-consultation/SKILL.md research', + suite: 'Design skill evals', + skillPath: 'design-consultation/SKILL.md', + startMarker: '## Phase 1:', + endMarker: '## Phase 4:', + judgeContext: 'a design consultation research and proposal workflow', + judgeGoal: 'how to gather product context, research the competitive landscape, and produce a complete design system proposal with typography, color, spacing, and motion specifications', + }); + }, 30_000); +}); + +// Block 4: Other skills +describeIfSelected('Other skill evals', [ + 'retro/SKILL.md instructions', 'qa-only/SKILL.md workflow', 'gstack-upgrade/SKILL.md upgrade flow', +], () => { + testIfSelected('retro/SKILL.md instructions', async () => { + await runWorkflowJudge({ + testName: 'retro/SKILL.md instructions', + suite: 'Other skill evals', + skillPath: 'retro/SKILL.md', + startMarker: '## Instructions', + endMarker: '## Compare Mode', + judgeContext: 'an engineering retrospective data gathering and analysis workflow', + judgeGoal: 'how to gather git metrics (commit history, test counts, work patterns), analyze them, produce a structured retro report with praise, growth areas, and trend tracking', + }); + }, 30_000); + + testIfSelected('qa-only/SKILL.md workflow', async () => { + await runWorkflowJudge({ + testName: 'qa-only/SKILL.md workflow', + suite: 'Other skill evals', + skillPath: 'qa-only/SKILL.md', + startMarker: '## Workflow', + endMarker: '## Important Rules', + judgeContext: 'a report-only QA testing workflow', + judgeGoal: 'how to systematically QA test a web application and produce a structured report with health score, screenshots, and repro steps — without fixing anything', + }); + }, 30_000); + + testIfSelected('gstack-upgrade/SKILL.md upgrade flow', async () => { + await runWorkflowJudge({ + testName: 'gstack-upgrade/SKILL.md upgrade flow', + suite: 'Other skill evals', + skillPath: 'gstack-upgrade/SKILL.md', + startMarker: '## Inline upgrade flow', + endMarker: '## Standalone usage', + judgeContext: 'a version upgrade detection and execution workflow', + judgeGoal: 'how to detect install type, compare versions, back up current install, upgrade via git or fresh clone, run setup, and show what changed', + }); + }, 30_000); +}); + // Module-level afterAll — finalize eval collector after all tests complete afterAll(async () => { if (evalCollector) { diff --git a/test/skill-validation.test.ts b/test/skill-validation.test.ts index 81d97d3..bd0e205 100644 --- a/test/skill-validation.test.ts +++ b/test/skill-validation.test.ts @@ -72,15 +72,29 @@ describe('SKILL.md command validation', () => { expect(result.snapshotFlagErrors).toHaveLength(0); }); - test('all $B commands in qa-design-review/SKILL.md are valid browse commands', () => { - const skill = path.join(ROOT, 'qa-design-review', 'SKILL.md'); + test('all $B commands in design-review/SKILL.md are valid browse commands', () => { + const skill = path.join(ROOT, 'design-review', 'SKILL.md'); if (!fs.existsSync(skill)) return; const result = validateSkill(skill); expect(result.invalid).toHaveLength(0); }); - test('all snapshot flags in qa-design-review/SKILL.md are valid', () => { - const skill = path.join(ROOT, 'qa-design-review', 'SKILL.md'); + test('all snapshot flags in design-review/SKILL.md are valid', () => { + const skill = path.join(ROOT, 'design-review', 'SKILL.md'); + if (!fs.existsSync(skill)) return; + const result = validateSkill(skill); + expect(result.snapshotFlagErrors).toHaveLength(0); + }); + + test('all $B commands in design-consultation/SKILL.md are valid browse commands', () => { + const skill = path.join(ROOT, 'design-consultation', 'SKILL.md'); + if (!fs.existsSync(skill)) return; + const result = validateSkill(skill); + expect(result.invalid).toHaveLength(0); + }); + + test('all snapshot flags in design-consultation/SKILL.md are valid', () => { + const skill = path.join(ROOT, 'design-consultation', 'SKILL.md'); if (!fs.existsSync(skill)) return; const result = validateSkill(skill); expect(result.snapshotFlagErrors).toHaveLength(0); @@ -205,7 +219,7 @@ describe('Update check preamble', () => { 'plan-ceo-review/SKILL.md', 'plan-eng-review/SKILL.md', 'retro/SKILL.md', 'plan-design-review/SKILL.md', - 'qa-design-review/SKILL.md', + 'design-review/SKILL.md', 'design-consultation/SKILL.md', 'document-release/SKILL.md', ]; @@ -430,6 +444,8 @@ describe('No hardcoded branch names in SKILL templates', () => { 'plan-ceo-review/SKILL.md.tmpl', 'retro/SKILL.md.tmpl', 'document-release/SKILL.md.tmpl', + 'plan-eng-review/SKILL.md.tmpl', + 'plan-design-review/SKILL.md.tmpl', ]; // Patterns that indicate hardcoded 'main' in git commands @@ -513,7 +529,7 @@ describe('v0.4.1 preamble features', () => { 'plan-ceo-review/SKILL.md', 'plan-eng-review/SKILL.md', 'retro/SKILL.md', 'plan-design-review/SKILL.md', - 'qa-design-review/SKILL.md', + 'design-review/SKILL.md', 'design-consultation/SKILL.md', 'document-release/SKILL.md', ]; @@ -543,6 +559,10 @@ describe('Contributor mode preamble structure', () => { 'ship/SKILL.md', 'review/SKILL.md', 'plan-ceo-review/SKILL.md', 'plan-eng-review/SKILL.md', 'retro/SKILL.md', + 'plan-design-review/SKILL.md', + 'design-review/SKILL.md', + 'design-consultation/SKILL.md', + 'document-release/SKILL.md', ]; for (const skill of skillsWithPreamble) { @@ -628,7 +648,7 @@ describe('Completeness Principle in generated SKILL.md files', () => { 'plan-ceo-review/SKILL.md', 'plan-eng-review/SKILL.md', 'retro/SKILL.md', 'plan-design-review/SKILL.md', - 'qa-design-review/SKILL.md', + 'design-review/SKILL.md', 'design-consultation/SKILL.md', 'document-release/SKILL.md', ]; @@ -801,8 +821,8 @@ describe('Test Bootstrap ({{TEST_BOOTSTRAP}}) integration', () => { expect(content).toContain('Step 2.5'); }); - test('TEST_BOOTSTRAP appears in qa-design-review/SKILL.md', () => { - const content = fs.readFileSync(path.join(ROOT, 'qa-design-review', 'SKILL.md'), 'utf-8'); + test('TEST_BOOTSTRAP appears in design-review/SKILL.md', () => { + const content = fs.readFileSync(path.join(ROOT, 'design-review', 'SKILL.md'), 'utf-8'); expect(content).toContain('Test Framework Bootstrap'); }); @@ -843,10 +863,10 @@ describe('Test Bootstrap ({{TEST_BOOTSTRAP}}) integration', () => { expect(content).toContain('100% test coverage'); }); - test('WebSearch is in allowed-tools for qa, ship, qa-design-review', () => { + test('WebSearch is in allowed-tools for qa, ship, design-review', () => { const qa = fs.readFileSync(path.join(ROOT, 'qa', 'SKILL.md'), 'utf-8'); const ship = fs.readFileSync(path.join(ROOT, 'ship', 'SKILL.md'), 'utf-8'); - const qaDesign = fs.readFileSync(path.join(ROOT, 'qa-design-review', 'SKILL.md'), 'utf-8'); + const qaDesign = fs.readFileSync(path.join(ROOT, 'design-review', 'SKILL.md'), 'utf-8'); expect(qa).toContain('WebSearch'); expect(ship).toContain('WebSearch'); expect(qaDesign).toContain('WebSearch'); @@ -869,8 +889,8 @@ describe('Phase 8e.5 regression test generation', () => { expect(content).not.toContain('Never modify tests or CI configuration'); }); - test('qa-design-review has CSS-aware Phase 8e.5 variant', () => { - const content = fs.readFileSync(path.join(ROOT, 'qa-design-review', 'SKILL.md'), 'utf-8'); + test('design-review has CSS-aware Phase 8e.5 variant', () => { + const content = fs.readFileSync(path.join(ROOT, 'design-review', 'SKILL.md'), 'utf-8'); expect(content).toContain('8e.5. Regression Test (design-review variant)'); expect(content).toContain('CSS-only'); expect(content).toContain('test(design): regression test'); diff --git a/test/touchfiles.test.ts b/test/touchfiles.test.ts index e666bb3..48613d6 100644 --- a/test/touchfiles.test.ts +++ b/test/touchfiles.test.ts @@ -66,7 +66,7 @@ describe('selectTests', () => { expect(result.selected).toContain('browse-snapshot'); expect(result.selected).toContain('qa-quick'); expect(result.selected).toContain('qa-fix-loop'); - expect(result.selected).toContain('qa-design-review-fix'); + expect(result.selected).toContain('design-review-fix'); expect(result.reason).toBe('diff'); // Should NOT include unrelated tests expect(result.selected).not.toContain('plan-ceo-review');