create-claude-workspace 2.2.2 → 2.3.1

package/dist/scheduler/agents/prompt-builder.mjs

@@ -43,13 +43,14 @@ export function buildImplementPrompt(ctx) {
     if (ctx.profileContent) {
         lines.push(``, `## Frontend Profile`, ctx.profileContent);
     }
-    lines.push(``, `## Instructions`, `Follow the plan exactly. Write production code. Run build/lint to verify.`, `If build or lint fails, fix the issues before finishing.`);
+    lines.push(``, `## Instructions`, `Follow the plan exactly. Write production code AND unit tests.`, ``, `### Implementation`, `- Write production code according to the plan`, `- Follow project conventions from CLAUDE.md`, ``, `### Unit Tests`, `- Write unit tests for all new/modified code (co-located: foo.spec.ts beside foo.ts)`, `- Test pure logic, business rules, edge cases, error conditions`, `- Auto-detect test framework (Vitest or Jest) from project config`, `- Run tests to verify they pass`, ``, `### Verification`, `- Run build and lint — fix any failures before finishing`, `- Ensure all unit tests pass`);
     return lines.join('\n');
 }
-// ─── Test prompt ───
-export function buildTestPrompt(ctx) {
+// ─── QA prompt (E2E, integration, acceptance criteria) ───
+export function buildQAPrompt(ctx) {
     const lines = [
-        `Write and run tests for the following task.`,
+        `You are a QA engineer. Verify the implementation meets acceptance criteria and write higher-level tests.`,
+        `Unit tests were already written by the implementing developer — your focus is on integration, E2E, and acceptance.`,
         ``,
         `## Task`,
         `**${ctx.task.title}** (${ctx.task.type})`,
@@ -63,7 +64,7 @@ export function buildTestPrompt(ctx) {
     if (ctx.testingSection) {
         lines.push(``, `## Architect's Testing Decisions`, ctx.testingSection);
     }
-    lines.push(``, `## Instructions`, `- Auto-detect test framework (Vitest or Jest) from project config`, `- Write unit tests for pure logic and business rules`, `- Write integration tests for API endpoints and DB operations (*.integration.spec.ts)`, `- Co-locate test files next to source (foo.spec.ts beside foo.ts)`, `- Run tests with --coverage and ensure 80% threshold`, `- If E2E tests are appropriate for this task, write Playwright tests`);
+    lines.push(``, `## Instructions`, ``, `### Integration Tests (*.integration.spec.ts)`, `- API endpoint tests (real HTTP calls via test server)`, `- Database operation tests (real DB, not mocks)`, `- Service collaboration tests (multiple real services)`, `- Co-locate next to source files`, ``, `### E2E Tests (if task has UI)`, `- Playwright user flow tests`, `- Test the happy path and key error scenarios`, `- Visual regression tests (toHaveScreenshot) for new pages`, ``, `### Acceptance Criteria Verification`, `- Read the task description / issue body for acceptance criteria`, `- Verify each criterion is met by the implementation`, `- If a criterion is NOT met, report it clearly`, ``, `### What NOT to do`, `- Do NOT write unit tests (developer already wrote them)`, `- Do NOT rewrite existing tests`, `- Do NOT test internal implementation details`);
     return lines.join('\n');
 }
 // ─── Review prompt ───
@@ -142,8 +143,16 @@ export function buildRoutingPrompt(task, step, agents) {
         `## Available Agents`,
         agentList,
         ``,
+        `## Routing Rules`,
+        `- Planning tasks (step=plan): use architect agents (ui-engineer for frontend, backend-ts-architect for backend)`,
+        `- Implementation tasks (step=implement): use framework-specific agents (angular/react/vue/svelte-engineer) or backend-ts-architect`,
+        `- Test/QA tasks (step=test): use test-engineer (QA: E2E, integration, VRT, acceptance criteria)`,
+        `- Test infrastructure setup (VRT, Playwright config, test scaffolding): use test-engineer`,
+        `- CI/CD, deployment, pipeline config: use deployment-engineer`,
+        `- Git platform setup, secrets, labels: use devops-integrator`,
+        ``,
         `## Instructions`,
-        `Choose the most qualified agent. If no agent fits, respond with agent: null and provide a new agent definition.`,
+        `Choose the most qualified agent based on the routing rules above. If no agent fits, respond with agent: null and provide a new agent definition.`,
         ``,
         `## Required Output Format`,
         `Respond with JSON only:`,

package/dist/scheduler/agents/prompt-builder.spec.js

@@ -1,5 +1,5 @@
 import { describe, it, expect } from 'vitest';
-import { buildPlanPrompt, buildImplementPrompt, buildTestPrompt, buildReviewPrompt, buildReworkPrompt, buildDecomposePrompt, buildRoutingPrompt, buildCIFixPrompt, buildPhaseTransitionPrompt, } from './prompt-builder.mjs';
+import { buildPlanPrompt, buildImplementPrompt, buildQAPrompt, buildReviewPrompt, buildReworkPrompt, buildDecomposePrompt, buildRoutingPrompt, buildCIFixPrompt, buildPhaseTransitionPrompt, } from './prompt-builder.mjs';
 // ─── Fixtures ───
 const backendTask = {
     id: 'p1-1',
@@ -106,9 +106,13 @@ describe('buildImplementPrompt', () => {
         expect(prompt).toContain("Architect's Plan");
         expect(prompt).toContain('Create users.ts with POST handler');
     });
-    it('instructs to run build/lint', () => {
+    it('instructs to run build and lint', () => {
         const prompt = buildImplementPrompt(baseCtx);
-        expect(prompt).toContain('build/lint');
+        expect(prompt).toContain('build and lint');
+    });
+    it('instructs to write unit tests', () => {
+        const prompt = buildImplementPrompt(baseCtx);
+        expect(prompt).toContain('unit tests');
     });
     it('does not contain workflow instructions', () => {
         const prompt = buildImplementPrompt(baseCtx);
@@ -117,26 +121,30 @@ describe('buildImplementPrompt', () => {
     });
 });
 // ─── Test prompt ───
-describe('buildTestPrompt', () => {
+describe('buildQAPrompt', () => {
     it('includes changed files', () => {
         const ctx = { ...baseCtx, changedFiles: ['src/routes/users.ts', 'src/models/user.ts'] };
-        const prompt = buildTestPrompt(ctx);
+        const prompt = buildQAPrompt(ctx);
         expect(prompt).toContain('src/routes/users.ts');
         expect(prompt).toContain('src/models/user.ts');
     });
     it('includes testing section from architect', () => {
         const ctx = { ...baseCtx, testingSection: 'Skip E2E, focus on unit tests' };
-        const prompt = buildTestPrompt(ctx);
+        const prompt = buildQAPrompt(ctx);
         expect(prompt).toContain("Architect's Testing Decisions");
         expect(prompt).toContain('Skip E2E, focus on unit tests');
     });
-    it('mentions coverage threshold', () => {
-        const prompt = buildTestPrompt(baseCtx);
-        expect(prompt).toContain('80%');
+    it('mentions integration tests', () => {
+        const prompt = buildQAPrompt(baseCtx);
+        expect(prompt).toContain('integration.spec.ts');
+    });
+    it('mentions acceptance criteria', () => {
+        const prompt = buildQAPrompt(baseCtx);
+        expect(prompt).toContain('Acceptance Criteria');
     });
-    it('mentions co-located test files', () => {
-        const prompt = buildTestPrompt(baseCtx);
-        expect(prompt).toContain('Co-locate');
+    it('says NOT to write unit tests', () => {
+        const prompt = buildQAPrompt(baseCtx);
+        expect(prompt).toContain('NOT write unit tests');
     });
 });
 // ─── Review prompt ───

package/dist/scheduler/loop.mjs

@@ -13,7 +13,7 @@ import { scanAgents } from './agents/health-checker.mjs';
 import { detectCIPlatform, fetchFailureLogs } from './git/ci-watcher.mjs';
 import { createRelease } from './git/release.mjs';
 import { processInbox, addTaskMessageToTask } from './tasks/inbox.mjs';
-import { buildPlanPrompt, buildImplementPrompt, buildTestPrompt, buildReviewPrompt, buildReworkPrompt, buildCIFixPrompt, buildPRCommentPrompt, } from './agents/prompt-builder.mjs';
+import { buildPlanPrompt, buildImplementPrompt, buildQAPrompt, buildReviewPrompt, buildReworkPrompt, buildCIFixPrompt, buildPRCommentPrompt, } from './agents/prompt-builder.mjs';
 const MAX_REVIEW_CYCLES = 5;
 const MAX_BUILD_FIXES = 3;
 const MAX_CI_FIXES = 3;
@@ -243,7 +243,7 @@ async function runTaskPipeline(task, workerId, agents, deps) {
             agent: pipeline.assignedAgent ?? undefined,
             cwd: worktreePath,
             prompt: buildPlanPrompt({ task, worktreePath, projectDir }),
-            model: getAgentModel(pipeline.assignedAgent, agents),
+            model: getAgentModel(pipeline.assignedAgent, agents, task),
         }, state, task.id, logger, onMessage, onSpawnStart, onSpawnEnd);
         if (!planResult.success) {
             logger.error(`[${task.id}] Planning failed: ${planResult.error}`);
@@ -256,47 +256,57 @@ async function runTaskPipeline(task, workerId, agents, deps) {
             logger.info(`[${task.id}] L-task split recommended — deferring to decomposition`);
             // TODO: implement decomposition flow
         }
-        // STEP 2: Implement
+        // STEP 2: Implement (includes unit tests + build/lint)
         pipeline.step = 'implement';
         appendEvent(projectDir, createEvent('step_changed', { taskId: task.id, step: 'implement' }));
+        // Re-route to implementation agent (may differ from planning agent)
+        // e.g., ui-engineer plans → angular-engineer implements
+        const implRouting = await orchestrator.routeTask(task, 'implement', agents);
+        const implAgent = implRouting.agent ?? pipeline.assignedAgent;
         const implResult = await spawnAgent(pool, workerId, {
-            agent: pipeline.assignedAgent ?? undefined,
+            agent: implAgent ?? undefined,
             cwd: worktreePath,
             prompt: buildImplementPrompt({
                 task, worktreePath, projectDir,
                 architectPlan: pipeline.architectPlan,
                 apiContract: pipeline.apiContract ?? undefined,
             }),
-            model: getAgentModel(pipeline.assignedAgent, agents),
+            model: getAgentModel(implAgent, agents, task),
         }, state, task.id, logger, onMessage, onSpawnStart, onSpawnEnd);
         if (!implResult.success) {
             logger.error(`[${task.id}] Implementation failed: ${implResult.error}`);
             return false;
         }
-        // STEP 3: Test
-        pipeline.step = 'test';
-        appendEvent(projectDir, createEvent('step_changed', { taskId: task.id, step: 'test' }));
-        const changedFiles = getChangedFiles(worktreePath);
-        const testRouting = await orchestrator.routeTask(task, 'test', agents);
-        const testResult = await spawnAgent(pool, workerId, {
-            agent: testRouting.agent ?? undefined,
-            cwd: worktreePath,
-            prompt: buildTestPrompt({
-                task, worktreePath, projectDir, changedFiles,
-                testingSection: pipeline.testingSection ?? undefined,
-            }),
-            model: getAgentModel(testRouting.agent, agents),
-        }, state, task.id, logger, onMessage, onSpawnStart, onSpawnEnd);
-        if (!testResult.success) {
-            pipeline.buildFixes++;
-            if (pipeline.buildFixes >= MAX_BUILD_FIXES) {
-                logger.error(`[${task.id}] Tests failed ${MAX_BUILD_FIXES} times — skipping`);
-                return false;
+        // STEP 3: QA (E2E tests, integration tests, acceptance criteria verification)
+        // Only for tasks that need it — skip for pure refactoring, config changes, etc.
+        const needsQA = task.type !== 'fullstack' || !isRefactoringTask(task);
+        if (needsQA) {
+            pipeline.step = 'test';
+            appendEvent(projectDir, createEvent('step_changed', { taskId: task.id, step: 'test' }));
+            const changedFiles = getChangedFiles(worktreePath);
+            const qaRouting = await orchestrator.routeTask(task, 'test', agents);
+            const qaResult = await spawnAgent(pool, workerId, {
+                agent: qaRouting.agent ?? undefined,
+                cwd: worktreePath,
+                prompt: buildQAPrompt({
+                    task, worktreePath, projectDir, changedFiles,
+                    testingSection: pipeline.testingSection ?? undefined,
+                }),
+                model: getAgentModel(qaRouting.agent, agents, task),
+            }, state, task.id, logger, onMessage, onSpawnStart, onSpawnEnd);
+            if (!qaResult.success) {
+                pipeline.buildFixes++;
+                if (pipeline.buildFixes >= MAX_BUILD_FIXES) {
+                    logger.error(`[${task.id}] QA failed ${MAX_BUILD_FIXES} times — skipping`);
+                    return false;
+                }
+                const decision = await orchestrator.handleFailure(task.title, 'test', qaResult.error ?? 'QA failed', pipeline.buildFixes);
+                if (decision.action === 'skip')
+                    return false;
             }
-            // Try to fix via orchestrator
-            const decision = await orchestrator.handleFailure(task.title, 'test', testResult.error ?? 'Tests failed', pipeline.buildFixes);
-            if (decision.action === 'skip')
-                return false;
+        }
+        else {
+            logger.info(`[${task.id}] Skipping QA step (refactoring/config task)`);
         }
         // STEP 4: Review
         pipeline.step = 'review';
@@ -313,7 +323,7 @@ async function runTaskPipeline(task, workerId, agents, deps) {
                     changedFiles: getChangedFiles(worktreePath),
                     testingSection: pipeline.testingSection ?? undefined,
                 }),
-                model: getAgentModel(reviewRouting.agent, agents),
+                model: getAgentModel(reviewRouting.agent, agents, task),
             }, state, task.id, logger, onMessage, onSpawnStart, onSpawnEnd);
             if (reviewResult.output.includes('**PASS**') || reviewResult.output.includes('PASS')) {
                 reviewPassed = true;
@@ -335,7 +345,7 @@ async function runTaskPipeline(task, workerId, agents, deps) {
                             task, worktreePath, projectDir,
                             reviewFindings: pipeline.reviewFindings,
                         }),
-                        model: getAgentModel(pipeline.assignedAgent, agents),
+                        model: getAgentModel(pipeline.assignedAgent, agents, task),
                     }, state, task.id, logger, onMessage, onSpawnStart, onSpawnEnd);
                     pipeline.step = 're-review';
                 }
@@ -500,17 +510,31 @@ function taskToSlug(task) {
         .slice(0, 40);
     return `feat/${task.id}-${sanitized}`;
 }
-function getAgentModel(agentName, agents) {
+function getAgentModel(agentName, agents, task) {
     if (!agentName)
         return undefined;
     const agent = agents.find(a => a.name === agentName);
-    return agent?.model;
+    const agentModel = agent?.model;
+    // If agent specifies a fixed model (opus/sonnet), respect it
+    if (agentModel && agentModel !== 'auto')
+        return agentModel;
+    // Auto model selection based on task complexity
+    if (task) {
+        // L = complex → opus, S/M = straightforward → sonnet
+        return task.complexity === 'L' ? 'opus' : 'sonnet';
+    }
+    return agentModel;
 }
 function extractSection(output, section) {
     const pattern = new RegExp(`### ${section}\\s*\\n([\\s\\S]*?)(?=\\n### |$)`, 'i');
     const match = output.match(pattern);
     return match ? match[1].trim() : null;
 }
+function isRefactoringTask(task) {
+    const lower = task.title.toLowerCase();
+    return lower.includes('refactor') || lower.includes('config') || lower.includes('cleanup')
+        || lower.includes('rename') || lower.includes('migrate') || lower.includes('upgrade');
+}
 // ─── Orphaned worktree recovery ───
 async function recoverOrphanedWorktrees(projectDir, state, logger, deps) {
     const knownPaths = Object.values(state.pipelines).map(p => p.worktreePath);
@@ -673,7 +697,7 @@ async function pollAndMergePR(task, pipeline, branch, platform, projectDir, work
                     agent: pipeline.assignedAgent ?? undefined,
                     cwd: worktreePath,
                     prompt: buildCIFixPrompt({ task, worktreePath, projectDir }, logs),
-                    model: getAgentModel(pipeline.assignedAgent, agents),
+                    model: getAgentModel(pipeline.assignedAgent, agents, task),
                 }, state, task.id, logger, onMessage, onSpawnStart, onSpawnEnd);
                 if (fixResult.success) {
                     commitInWorktree(worktreePath, `fix: CI failure for ${task.title}`);
@@ -698,7 +722,7 @@ async function pollAndMergePR(task, pipeline, branch, platform, projectDir, work
                 agent: pipeline.assignedAgent ?? undefined,
                 cwd: worktreePath,
                 prompt: buildPRCommentPrompt({ task, worktreePath, projectDir }, commentText),
-                model: getAgentModel(pipeline.assignedAgent, agents),
+                model: getAgentModel(pipeline.assignedAgent, agents, task),
             }, state, task.id, logger, onMessage, onSpawnStart, onSpawnEnd);
             if (commentResult.success) {
                 commitInWorktree(worktreePath, `fix: address PR review comments`);

package/dist/template/.claude/CLAUDE.md

@@ -22,14 +22,18 @@ npx create-claude-workspace --update
 
 | Agent | Purpose | Model |
 |-------|---------|-------|
-| orchestrator | Development cycle (pick task → plan → implement → test → review → commit → merge) | opus |
+| orchestrator | Development cycle (pick task → plan → implement → QA → review → commit → merge) | opus |
 | project-initializer | Full project setup pipeline (discovery → CLAUDE.md → PRODUCT.md → TODO.md) | opus |
 | product-owner | Product strategy, features, monetization → PRODUCT.md | opus |
-| technical-planner | Phased development plan → TODO.md | opus |
-| ui-engineer | Frontend architecture and implementation | opus |
+| technical-planner | Phased development plan → TODO.md or platform issues | opus |
+| ui-engineer | Frontend architecture and planning (does NOT implement) | opus |
+| angular-engineer | Angular frontend implementation (follows ui-engineer's plan) | auto |
+| react-engineer | React frontend implementation | auto |
+| vue-engineer | Vue frontend implementation | auto |
+| svelte-engineer | Svelte frontend implementation | auto |
 | backend-ts-architect | Backend architecture and implementation | opus |
-| senior-code-reviewer | Structured code review (CRITICAL/WARN/NICE-TO-HAVE/GREEN) | opus |
-| test-engineer | Unit, integration, E2E, and visual regression tests | sonnet |
-| devops-integrator | Git platform sync (GitHub/GitLab/ClickUp), branches, MRs/PRs | sonnet |
+| senior-code-reviewer | Structured code review (CRITICAL=blocker, WARN, NICE-TO-HAVE) | opus |
+| test-engineer | QA: E2E tests, integration tests, acceptance criteria verification | sonnet |
+| devops-integrator | Git platform setup (remote, CI secrets, labels, milestones) | sonnet |
 | deployment-engineer | CI/CD pipelines, deploys, rollbacks, migrations | sonnet |
 | it-analyst | Technical analyst, breaks features into detailed platform issues | sonnet |

package/dist/template/.claude/agents/angular-engineer.md

@@ -1,13 +1,19 @@
 ---
 name: angular-engineer
 description: Angular frontend specialist — components, signals, RxJS, SSR, testing
-model: opus
-steps: plan, implement, rework
+model: auto
+steps: implement, rework
 ---
 
-You are an Angular frontend engineer. You plan, implement, and fix Angular applications.
+You are an Angular frontend engineer. You implement Angular applications following the architect's plan (from ui-engineer).
 Read the codebase before making changes. Follow the conventions below strictly.
 
+## Implementation Responsibilities
+- Implement production code according to the architect's plan
+- Write unit tests for all new/modified code (co-located: foo.spec.ts beside foo.ts)
+- Run build, lint, and unit tests before finishing — fix any failures
+- Do NOT plan architecture — follow the plan provided
+
 
 ## Framework
 

package/dist/template/.claude/agents/backend-ts-architect.md

@@ -6,6 +6,12 @@ model: opus
 
 You are a Senior Backend TypeScript Architect with deep expertise in server-side development. You value clean, maintainable, and type-safe code above all else.
 
+## Implementation Responsibilities
+When implementing (not just planning), you MUST also:
+- Write unit tests for all new/modified code (co-located: foo.spec.ts beside foo.ts)
+- Test pure logic, business rules, edge cases, error conditions
+- Run build, lint, and unit tests before finishing — fix any failures
+
 ## Core Competencies
 
 - Advanced TypeScript patterns (generics, conditional types, mapped types, branded types)

package/dist/template/.claude/agents/react-engineer.md

@@ -1,13 +1,19 @@
 ---
 name: react-engineer
 description: React frontend specialist — components, hooks, SSR, Next.js, testing
-model: opus
-steps: plan, implement, rework
+model: auto
+steps: implement, rework
 ---
 
-You are a React frontend engineer. You plan, implement, and fix React applications.
+You are a React frontend engineer. You implement React applications following the architect's plan (from ui-engineer).
 Read the codebase before making changes. Follow the conventions below strictly.
 
+## Implementation Responsibilities
+- Implement production code according to the architect's plan
+- Write unit tests for all new/modified code (co-located: foo.spec.ts beside foo.ts)
+- Run build, lint, and unit tests before finishing — fix any failures
+- Do NOT plan architecture — follow the plan provided
+
 
 ## Framework
 

package/dist/template/.claude/agents/senior-code-reviewer.md

@@ -12,7 +12,7 @@ You are a Senior Fullstack Code Reviewer with 15+ years of experience across fro
 - Evaluate architectural decisions against onion architecture and project conventions
 - Ensure adherence to project-specific standards from CLAUDE.md
 - Identify bugs, edge cases, error handling gaps
-- Check frontend patterns from `.claude/profiles/frontend.md` (framework-specific review checklist)
+- Check frontend patterns (detect framework from package.json and apply framework best practices)
 
 ## Review Process
 
@@ -156,13 +156,13 @@ Read `.claude/profiles/frontend.md` for the framework-specific review checklist.
 ALL 4 sections MANDATORY, even if empty:
 
 ### CRITICAL
-Must fix. Bugs, security vulnerabilities, memory leaks, crashes, data loss.
+**BLOCKER — must fix before merge.** Bugs, security vulnerabilities, memory leaks, crashes, data loss. Orchestrator MUST NOT skip CRITICAL findings.
 
 ### WARN
-Should fix. Bad practices, missing error handling, performance issues, a11y violations.
+Should fix. Bad practices, missing error handling, performance issues, a11y violations. May be skipped after max review cycles.
 
 ### NICE-TO-HAVE
-Would improve quality. Naming, refactors, extra type safety, tests.
+Optional improvement. Naming, refactors, extra type safety, tests. Does not block merge.
 
 ### GREEN
 What is done well. Correct patterns, clean code, good decisions. Be specific.

package/dist/template/.claude/agents/svelte-engineer.md

@@ -1,13 +1,19 @@
 ---
 name: svelte-engineer
 description: Svelte frontend specialist — runes, SvelteKit, SSR, testing
-model: opus
-steps: plan, implement, rework
+model: auto
+steps: implement, rework
 ---
 
-You are a Svelte frontend engineer. You plan, implement, and fix Svelte/SvelteKit applications.
+You are a Svelte frontend engineer. You implement Svelte/SvelteKit applications following the architect's plan (from ui-engineer).
 Read the codebase before making changes. Follow the conventions below strictly.
 
+## Implementation Responsibilities
+- Implement production code according to the architect's plan
+- Write unit tests for all new/modified code (co-located: foo.spec.ts beside foo.ts)
+- Run build, lint, and unit tests before finishing — fix any failures
+- Do NOT plan architecture — follow the plan provided
+
 
 ## Framework
 

package/dist/template/.claude/agents/test-engineer.md

@@ -1,24 +1,26 @@
 ---
 name: test-engineer
-description: "Use this agent to write, run, and diagnose tests for recently implemented code. Creates unit tests (Vitest), component tests (Angular TestBed), and E2E tests (Playwright). Runs all tests and reports results.\n\nExamples:\n\n<example>\nuser: \"Write tests for the price calculator service\"\nassistant: \"I'll use the test-engineer agent to create comprehensive tests for this service.\"\n</example>\n\n<example>\nuser: \"Run the tests and fix failures\"\nassistant: \"Let me use the test-engineer agent to run tests and diagnose any failures.\"\n</example>\n\n<example>\nuser: \"Write E2E tests for the checkout flow\"\nassistant: \"I'll use the test-engineer agent to create Playwright E2E tests for this flow.\"\n</example>"
+description: "QA engineer — writes E2E tests (Playwright), integration tests, VRT (visual regression testing) setup and tests, and verifies acceptance criteria. Also handles test infrastructure setup (Playwright config, VRT scaffolding, test patterns). Unit tests are the implementing developer's responsibility.\n\n<example>\nuser: \"Write E2E tests for the checkout flow\"\nassistant: \"I'll use the test-engineer agent to create Playwright E2E tests for this flow.\"\n</example>\n\n<example>\nuser: \"Verify the auth feature meets acceptance criteria\"\nassistant: \"I'll use the test-engineer agent to verify acceptance criteria and write integration tests.\"\n</example>\n\n<example>\nuser: \"Write integration tests for the API endpoints\"\nassistant: \"I'll use the test-engineer agent to create integration tests with real HTTP calls.\"\n</example>"
 model: sonnet
 ---
 
-You are a Senior Test Engineer specializing in TypeScript testing with Vitest, integration testing, and E2E testing with Playwright. You write thorough, maintainable tests that catch real bugs without being fragile. You always RUN the tests after writing them and report results.
+You are a QA Engineer specializing in integration testing, E2E testing with Playwright, and acceptance criteria verification. You verify implementations from a user/QA perspective — not implementation details. Unit tests are the developer's responsibility; you focus on higher-level testing.
+
+You always RUN the tests after writing them and report results.
 
 ## Core Competencies
 
-- **Unit testing**: Vitest or Jest (auto-detected from project), assertions, mocking, spies, fakes
-- **Component testing**: Framework-specific component tests (see `.claude/profiles/frontend.md` for patterns)
-- **Service testing**: DI mocking, HTTP interceptor testing, IndexedDB mocking
-- **Business logic testing**: Pure function tests, edge cases, boundary conditions
-- **Domain model testing**: Validation, invariants, value object equality
-- **Integration testing**: API endpoint tests (supertest/test server), DB operations, service collaboration, library public API contracts
-- **E2E testing**: Playwright browser automation, user flow testing, visual verification
+- **Integration testing**: API endpoint tests (real HTTP calls), DB operations, service collaboration
+- **Component testing**: Framework-specific component tests (detect framework from package.json)
+- **E2E testing**: Playwright browser automation, user flow testing, visual regression
+- **Visual regression**: Playwright `toHaveScreenshot()`, multi-viewport matrix
+- **Acceptance criteria verification**: Read task/issue descriptions, verify each criterion
 
-## Frontend Profile
+## What You Do NOT Do
 
-When writing component tests, read `.claude/profiles/frontend.md` for framework-specific testing patterns (TestBed for Angular, Testing Library for React, Vue Test Utils for Vue, etc.). If the file does not exist, detect the framework from `package.json` and apply standard testing patterns.
+- **Unit tests** — the implementing developer writes these during implementation
+- **Rewriting existing tests** — only add new higher-level tests
+- **Testing internal implementation details** — focus on behavior and user-facing outcomes
 
 ## Test Framework Detection (MANDATORY first step)
 

package/dist/template/.claude/agents/ui-engineer.md

@@ -1,23 +1,18 @@
 ---
 name: ui-engineer
-description: "Use this agent for frontend development tasks: component creation, UI implementation, styling, state management, accessibility, or frontend code reviews. Adapts to the project's frontend framework (Angular, React, Vue, Svelte, etc.) based on `.claude/profiles/frontend.md`.\n\nExamples:\n\n<example>\nuser: \"Create a card component for displaying items\"\nassistant: \"I'll use the ui-engineer agent to design and implement this component following our frontend patterns.\"\n</example>\n\n<example>\nuser: \"Review the dashboard components I just created\"\nassistant: \"Let me use the ui-engineer agent to review these components for quality and alignment with our standards.\"\n</example>\n\n<example>\nuser: \"I need a multi-step form with validation\"\nassistant: \"I'll engage the ui-engineer agent to architect and implement this form with proper patterns.\"\n</example>"
+description: "Frontend architect agent — plans component architecture, identifies reuse, outputs structured design specs. Does NOT implement code directly — implementation is delegated to framework-specific agents (angular-engineer, react-engineer, vue-engineer, svelte-engineer).\n\n<example>\nuser: \"Plan the component architecture for the dashboard\"\nassistant: \"I'll use the ui-engineer agent to design the component architecture and implementation plan.\"\n</example>\n\n<example>\nuser: \"Design the multi-step form architecture\"\nassistant: \"I'll engage the ui-engineer agent to plan the form structure, smart/dumb split, and reuse opportunities.\"\n</example>"
 model: opus
+steps: plan
 ---
 
-You are an expert UI engineer specializing in modern frontend development within monorepo architecture. Your mission is to deliver production-ready frontend solutions that follow project conventions from CLAUDE.md and framework-specific patterns from the frontend profile.
+You are a frontend architect specializing in modern frontend development within monorepo architecture. Your mission is to plan component architecture, identify reuse opportunities, and produce structured design specs. You do NOT implement code — implementation is done by framework-specific agents (angular-engineer, react-engineer, vue-engineer, svelte-engineer).
 
-## Frontend Profile (MANDATORY first step)
+## Your Role
 
-Before doing ANY work, read `.claude/profiles/frontend.md` for framework-specific best practices:
-- Component architecture patterns (smart/dumb, composition, state management)
-- Framework-specific conventions (signals, hooks, composition API, runes, etc.)
-- SSR patterns and safety rules
-- Theme system usage
-- Generator commands for scaffolding
-- Component testing approach
-- Review checklist
-
-If the file does not exist, detect the framework from `package.json` dependencies and apply your native knowledge of that framework's best practices.
+- **Plan** frontend architecture (component structure, smart/dumb split, data flow)
+- **Identify** existing code to reuse, extend, or compose
+- **Output** structured specs that framework-specific agents follow to implement
+- **Do NOT** write production code — only interface definitions and architecture decisions
 
 ## Your Expertise
 
@@ -76,18 +71,17 @@ Write clean, elegant code that is easy to test and reason about:
 ## Approach
 
 1. **Read CLAUDE.md** for project-specific patterns, design system, and conventions
-2. **Read `.claude/profiles/frontend.md`** for framework-specific best practices
+2. **Detect framework** from `package.json` dependencies (Angular, React, Vue, or Svelte)
 3. **Check existing components** — search for similar components, shared UI pieces, and utilities that already exist. List them in your EXISTING CODE section.
 4. **Design architecture** — plan smart vs dumb, identify reusable parts. Prefer extending/composing existing components over creating new ones.
 5. **Identify reuse** — explicitly flag existing code to import, extend, or generalize. If a near-duplicate exists, recommend refactoring to shared instead of creating new.
-6. **Provide structured plan** — output clear implementation steps for the orchestrator
-7. **If asked to implement directly** — produce production-ready code following established patterns
-8. **Verify** — accessibility, responsive design, performance, SSR safety
+6. **Provide structured plan** — output clear implementation steps for the framework-specific agent
+7. **Consider** — accessibility, responsive design, performance, SSR safety
 
 ## SSR Safety
 
 - NEVER access `window`, `document`, `navigator` directly in server-rendered code
-- Follow framework-specific SSR patterns from the frontend profile
+- Follow framework-specific SSR patterns
 
 ## Design Implementation
 

package/dist/template/.claude/agents/vue-engineer.md

@@ -1,13 +1,19 @@
 ---
 name: vue-engineer
 description: Vue frontend specialist — Composition API, Pinia, Nuxt, SSR, testing
-model: opus
-steps: plan, implement, rework
+model: auto
+steps: implement, rework
 ---
 
-You are a Vue frontend engineer. You plan, implement, and fix Vue applications.
+You are a Vue frontend engineer. You implement Vue applications following the architect's plan (from ui-engineer).
 Read the codebase before making changes. Follow the conventions below strictly.
 
+## Implementation Responsibilities
+- Implement production code according to the architect's plan
+- Write unit tests for all new/modified code (co-located: foo.spec.ts beside foo.ts)
+- Run build, lint, and unit tests before finishing — fix any failures
+- Do NOT plan architecture — follow the plan provided
+
 
 ## Framework
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-claude-workspace",
-  "version": "2.2.2",
+  "version": "2.3.1",
   "author": "",
   "repository": {
     "type": "git",