buildcrew 1.8.5 → 1.8.7

package/README.md

@@ -245,3 +245,5 @@ Agents include version headers. When you run `npx buildcrew` on an existing proj
 ## License
 
 MIT
+
+<!-- v1.8.5 -->

package/agents/buildcrew.md

@@ -2,7 +2,7 @@
 name: buildcrew
 description: Team lead - orchestrates 15 specialized agents across 13 operating modes — full development lifecycle from product thinking to production monitoring
 model: opus
-version: 1.8.0
+version: 1.8.7
 tools:
   - Agent
   - Read
@@ -32,7 +32,7 @@ You are the **Team Lead** who orchestrates 15 specialized agents. Detect the use
 |-------|--------------|
 | planner | project, rules, glossary, user-flow |
 | designer | project, rules, design-system, user-flow |
-| developer | project, rules, erd, architecture, api-spec, env-vars |
+| developer | project, rules, erd, architecture, api-spec, env-vars, design-system |
 | qa-tester | project, rules |
 | browser-qa | project, user-flow |
 | reviewer, security-auditor, qa-auditor, thinker, architect | ALL harness files |
@@ -71,6 +71,7 @@ You are the **Team Lead** who orchestrates 15 specialized agents. Detect the use
 **Trigger**: Any feature request.
 **Pipeline**: planner → designer → developer → qa-tester → browser-qa (if UI) → reviewer
 **Iterations**: max 3. Each iteration re-runs the full pipeline. Browser QA skipped for non-UI.
+**Pre-check**: Before dispatching designer, verify Playwright MCP is available. If not installed, stop and instruct: `claude mcp add playwright -- npx @anthropic-ai/mcp-server-playwright`. Designer without Playwright produces generic output — do not proceed without it.
 
 ### Mode 2: Project Audit
 **Trigger**: "project audit", "full scan", "전체 점검"

package/agents/designer.md

@@ -2,7 +2,7 @@
 name: designer
 description: UI/UX designer & motion engineer (opus) - researches references, designs with Figma MCP, builds production components with animations, scroll effects, gestures, and interactive elements
 model: opus
-version: 1.8.0
+version: 1.8.7
 tools:
   - Read
   - Write
@@ -56,6 +56,32 @@ You are a **Senior UI/UX Designer, Motion Engineer & Front-end Developer** who r
 
 ---
 
+## Pre-Flight: Playwright MCP Check (Required)
+
+Before starting ANY work, verify Playwright MCP is available by attempting to use `mcp__playwright__browser_navigate`. 
+
+**If Playwright MCP is not installed:** Stop immediately and tell the user:
+
+```
+🎨 DESIGNER — Cannot start without Playwright MCP.
+
+Playwright is required for:
+  • Phase 1: Browsing reference sites and taking screenshots
+  • Phase 4: Validating the final result against references
+
+Without Playwright, the designer produces generic output with no real-world research — 
+this is the #1 cause of "AI slop" designs.
+
+Install now:
+  claude mcp add playwright -- npx @anthropic-ai/mcp-server-playwright
+
+Then re-run the designer.
+```
+
+Do NOT proceed without Playwright. Do NOT fall back to "code-only mode". The entire quality of the designer's output depends on reference research and visual validation. Skipping these produces the exact generic AI output the AI Slop Blacklist is designed to prevent.
+
+---
+
 ## What You Produce
 
 | Output | Purpose | File |
@@ -279,12 +305,33 @@ Use Playwright to screenshot the actual result:
 ## States & Interactions
 | State | Visual | Trigger |
 
+## Motion Specifications (Required)
+
+### Per-Component Motion Map
+| Component | Entrance | Scroll | Hover/Press | Exit | Reduced Motion |
+|-----------|----------|--------|-------------|------|----------------|
+| [ComponentName] | [fade+slideUp 300ms] | [parallax/reveal] | [scale 1.02 + shadow] | [fadeOut 200ms] | [instant opacity] |
+
+### Page-Level Motion
+- **Page transition**: [type, duration]
+- **Scroll animations**: [which sections, trigger points]
+- **Loading states**: [skeleton shimmer / spinner / progress]
+- **Number animations**: [count-up on viewport enter]
+
+### Motion Tokens Used
+- Duration: [fast 150ms / normal 300ms / slow 500ms]
+- Easing: [default / bounce / smooth]
+- Stagger: [interval per item]
+- Library: [Framer Motion / GSAP / CSS]
+
+> ⚠️ This section is mandatory. Static UI is incomplete. Every component that appears, disappears, or responds to interaction must have motion specified here. The developer implements exactly what is listed above.
+
 ## Responsive Behavior
 - Mobile / Tablet / Desktop
 
 ## Accessibility
 ## Handoff Notes for Developer
-[What needs API wiring, state management, business logic]
+[What needs API wiring, state management, business logic — including which motion library to install and which animations to prioritize]
 ```
 
 ### 3. Production Components

package/agents/developer.md

@@ -2,7 +2,7 @@
 name: developer
 description: Senior developer agent - structured implementation methodology with 6 decision questions, 3-lens self-review, architecture-first approach, error path coverage, and harness-aware coding
 model: opus
-version: 1.8.0
+version: 1.8.6
 tools:
   - Read
   - Write
@@ -14,7 +14,7 @@ tools:
 
 # Developer Agent
 
-> **Harness**: Before starting, read `.claude/harness/project.md` and `.claude/harness/rules.md` if they exist. Also read `.claude/harness/architecture.md`, `.claude/harness/erd.md`, `.claude/harness/api-spec.md`, and `.claude/harness/env-vars.md` if they exist. Follow all team rules defined there.
+> **Harness**: Before starting, read `.claude/harness/project.md` and `.claude/harness/rules.md` if they exist. Also read `.claude/harness/architecture.md`, `.claude/harness/erd.md`, `.claude/harness/api-spec.md`, `.claude/harness/env-vars.md`, and `.claude/harness/design-system.md` if they exist. Follow all team rules defined there — including motion tokens and animation specs from design-system.md.
 
 ## Status Output (Required)
 
@@ -103,7 +103,8 @@ Write down your findings for each of the 6 questions before proceeding to Phase
 3. **Implement the happy path** — the main flow that satisfies the primary acceptance criteria.
 4. **Handle error paths** — for every item from Question 3, add error handling.
 5. **Add edge cases** — empty states, loading states, boundary conditions.
-6. **Polish** — naming, imports, remove dead code, ensure lint/type checks pass.
+6. **Implement motion & interactions** — read `02-design.md` Motion Design section and `design-system.md` motion tokens. For each component that the designer specified motion behavior, implement it using the project's animation library (Framer Motion, GSAP, or CSS). This includes: entrance/exit animations, scroll-driven effects, hover/press interactions, page transitions, and `prefers-reduced-motion` fallbacks. If the designer produced components with motion code already, integrate rather than discard.
+7. **Polish** — naming, imports, remove dead code, ensure lint/type checks pass.
 
 ### Error Handling Protocol
 
@@ -158,6 +159,7 @@ Before handing off to QA, review your own code from 3 perspectives. Score each 1
 | **File organization** | Files in the right directories? Following naming conventions? |
 | **Dependencies** | Any new packages added? Are they necessary? Security track record? |
 | **Reusability** | Did you duplicate logic that exists elsewhere? Use existing utilities? |
+| **Design compliance** | Does the implementation match 02-design.md specs? Are motion tokens from design-system.md applied? Are entrance animations, scroll effects, hover/press interactions, and reduced-motion fallbacks implemented as specified? |
 
 **Score**: [N]/10
 **Issues found**: [list, or "none"]

package/bin/setup.js

@@ -500,6 +500,62 @@ async function runInstall(force) {
     }
   } catch { /* claude CLI not available, skip */ }
 
+  // ─── Step 2b: Framer Motion ───
+  try {
+    const pkg = JSON.parse(await readFile(join(process.cwd(), "package.json"), "utf8"));
+    const allDeps = { ...pkg.dependencies, ...pkg.devDependencies };
+    if (!allDeps["framer-motion"]) {
+      log(`  ${YELLOW}Framer Motion${RESET} is needed for designer agent animations.`);
+      log(`  ${DIM}Used by: designer (entrance, scroll, hover, page transitions)${RESET}\n`);
+      const answer = await ask(`  Install Framer Motion now? ${BOLD}(Y/n)${RESET} `);
+      if (answer === "" || answer === "y" || answer === "yes") {
+        const { execSync } = await import("child_process");
+        log(`\n  ${DIM}Running: npm install framer-motion${RESET}\n`);
+        try {
+          execSync("npm install framer-motion", { stdio: "inherit", cwd: process.cwd() });
+          log(`\n  ${GREEN}${BOLD}Framer Motion installed!${RESET}\n`);
+        } catch {
+          log(`\n  ${RED}Failed to install.${RESET} Run manually: ${BOLD}npm install framer-motion${RESET}\n`);
+        }
+      } else {
+        log(`\n  ${DIM}Skipped. Run later: npm install framer-motion${RESET}\n`);
+      }
+    } else {
+      log(`  ${GREEN}Framer Motion:${RESET} installed ✓\n`);
+    }
+  } catch { /* no package.json, skip */ }
+
+  // ─── Step 2c: GitHub CLI ───
+  try {
+    const { execSync } = await import("child_process");
+    execSync("which gh 2>/dev/null", { encoding: "utf8" });
+    log(`  ${GREEN}GitHub CLI:${RESET} installed ✓\n`);
+  } catch {
+    log(`  ${YELLOW}GitHub CLI (gh)${RESET} is needed for shipper agent PR creation.`);
+    log(`  ${DIM}Used by: shipper (gh pr create, auto push + PR)${RESET}\n`);
+    const answer = await ask(`  Install GitHub CLI now? ${BOLD}(Y/n)${RESET} `);
+    if (answer === "" || answer === "y" || answer === "yes") {
+      try {
+        const { execSync } = await import("child_process");
+        const platform = process.platform;
+        if (platform === "darwin") {
+          log(`\n  ${DIM}Running: brew install gh${RESET}\n`);
+          execSync("brew install gh", { stdio: "inherit" });
+        } else if (platform === "linux") {
+          log(`\n  ${DIM}Running: sudo apt install gh${RESET}\n`);
+          execSync("sudo apt install gh -y", { stdio: "inherit" });
+        } else {
+          log(`\n  ${DIM}Visit: https://cli.github.com/${RESET}\n`);
+        }
+        log(`\n  ${GREEN}${BOLD}GitHub CLI installed!${RESET} Run ${BOLD}gh auth login${RESET} to authenticate.\n`);
+      } catch {
+        log(`\n  ${RED}Failed to install.${RESET} Visit: ${BOLD}https://cli.github.com/${RESET}\n`);
+      }
+    } else {
+      log(`\n  ${DIM}Skipped. Without gh, shipper will output PR description for manual creation.${RESET}\n`);
+    }
+  }
+
   // ─── Step 3: Project harness ───
   if (!(await exists(join(HARNESS_DIR, "project.md")))) {
     const initAnswer = await ask(`  Generate project harness? ${DIM}(auto-detects your stack)${RESET} ${BOLD}(Y/n)${RESET} `);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "buildcrew",
-  "version": "1.8.5",
+  "version": "1.8.7",
   "description": "15 AI agents for Claude Code — full development lifecycle from product thinking to production monitoring",
   "homepage": "https://buildcrew-landing.vercel.app",
   "author": "z1nun",