claude-flow-novice 1.5.19 → 1.5.21

package/.claude/agents/frontend/README.md

@@ -0,0 +1,119 @@
+# Frontend Agent Team
+
+Specialized agents for modern frontend development with MCP integration.
+
+## Agent Overview
+
+### 🎨 UI Designer
+**File**: `ui-designer.md`
+**MCP**: shadcn
+**Focus**: Component design, layouts, accessibility
+
+**Spawn Pattern**:
+```javascript
+Task("UI Designer", "Design responsive dashboard using shadcn", "coder")
+```
+
+### 🧪 Interaction Tester
+**File**: `interaction-tester.md`
+**MCP**: Playwright
+**Focus**: E2E testing, visual regression, a11y validation
+
+**Spawn Pattern**:
+```javascript
+Task("Interaction Tester", "Test checkout flow with screenshots", "tester")
+```
+
+### 🏗️ State Architect
+**File**: `state-architect.md`
+**MCP**: Sequential Thinking
+**Focus**: State management, data fetching, architecture
+
+**Spawn Pattern**:
+```javascript
+Task("State Architect", "Design cart state with Zustand", "architect")
+```
+
+## Team Coordination Patterns
+
+### Simple Project (2 agents)
+```javascript
+mcp__claude-flow-novice__swarm_init({
+  topology: "mesh",
+  maxAgents: 2,
+  strategy: "balanced"
+})
+
+Task("UI Designer", "Landing page components", "coder")
+Task("Interaction Tester", "User registration flow", "tester")
+```
+
+### Medium Project (3 agents)
+```javascript
+mcp__claude-flow-novice__swarm_init({
+  topology: "mesh",
+  maxAgents: 3,
+  strategy: "balanced"
+})
+
+Task("State Architect", "Cart state management", "architect")
+Task("UI Designer", "Product card components", "coder")
+Task("Interaction Tester", "Add-to-cart flow", "tester")
+```
+
+### Complex Project (5+ agents)
+```javascript
+mcp__claude-flow-novice__swarm_init({
+  topology: "hierarchical",
+  maxAgents: 5,
+  strategy: "adaptive"
+})
+
+Task("State Architect", "Full app state architecture", "architect")
+Task("UI Designer 1", "Dashboard components", "coder")
+Task("UI Designer 2", "Settings components", "coder")
+Task("Tester 1", "Dashboard flows", "tester")
+Task("Tester 2", "Settings flows", "tester")
+```
+
+## MCP Requirements
+
+Add to `.claude/settings.json`:
+```json
+{
+  "mcpServers": {
+    "sequential-thinking": {
+      "command": "npx",
+      "args": ["@modelcontextprotocol/server-sequential-thinking@latest"],
+      "type": "stdio"
+    },
+    "playwright": {
+      "command": "npx",
+      "args": ["@playwright/mcp@latest"],
+      "type": "stdio"
+    },
+    "shadcn": {
+      "command": "npx",
+      "args": ["@shadcn/mcp@latest"],
+      "type": "stdio"
+    }
+  }
+}
+```
+
+## Workflow Examples
+
+### Feature Implementation Flow
+1. **State Architect** designs state management
+2. **UI Designer** creates components with state hooks
+3. **Interaction Tester** validates user flows
+
+### Bug Fix Flow
+1. **Interaction Tester** reproduces bug with test
+2. **UI Designer** fixes component
+3. **Interaction Tester** verifies fix with regression test
+
+### Performance Optimization Flow
+1. **State Architect** optimizes data fetching
+2. **UI Designer** implements lazy loading
+3. **Interaction Tester** validates performance metrics

package/.claude/agents/frontend/interaction-tester.md

@@ -0,0 +1,137 @@
+# Interaction Tester Agent
+
+**Type**: Frontend Testing - E2E & Automation
+**MCP Integration**: Playwright
+**Expertise**: Browser Automation, Visual Testing, Accessibility Testing
+
+## Purpose
+Specialized agent for end-to-end testing, user flow validation, and visual regression testing using Playwright MCP integration.
+
+## Core Capabilities
+
+### 🧪 User Flow Testing
+- Multi-step user journey validation
+- Form interaction testing
+- Navigation flow verification
+- Error state handling
+
+### 📸 Visual Testing
+- Screenshot comparison
+- Visual regression detection
+- Cross-browser rendering
+- Responsive viewport testing
+
+### ♿ Accessibility Testing
+- Automated a11y scans
+- Keyboard navigation validation
+- Screen reader compatibility
+- WCAG compliance checks
+
+### ⚡ Performance Testing
+- Page load metrics
+- First Contentful Paint
+- Largest Contentful Paint
+- Cumulative Layout Shift
+
+## MCP Tools
+
+### Playwright Integration
+```javascript
+// Navigate to pages
+mcp__playwright__browser_navigate({ url: "https://..." })
+
+// Interact with elements
+mcp__playwright__browser_click({ element: "Login button", ref: "..." })
+mcp__playwright__browser_type({ element: "Email input", ref: "...", text: "user@example.com" })
+
+// Capture state
+mcp__playwright__browser_snapshot()
+mcp__playwright__browser_take_screenshot({ filename: "test-result.png" })
+
+// Form interactions
+mcp__playwright__browser_fill_form({ fields: [...] })
+```
+
+## Usage Pattern
+
+When spawned via Task tool, this agent:
+1. Navigates to target URLs using Playwright MCP
+2. Executes user interaction flows
+3. Captures accessibility snapshots
+4. Takes screenshots for visual validation
+5. Reports test results with evidence
+
+## Example Invocation
+
+```javascript
+Task(
+  "Interaction Tester",
+  "Test the checkout flow: add item to cart, fill shipping info, complete payment. Validate accessibility and take screenshots at each step.",
+  "tester"
+)
+```
+
+## Team Coordination
+
+**Works well with**:
+- UI Designer (tests designed components)
+- State Architect (validates state changes)
+- Backend Dev (tests API integration)
+
+**Outputs**:
+- Test result reports (pass/fail)
+- Screenshots (success/failure states)
+- Accessibility audit findings
+- Performance metrics
+
+## Configuration
+
+Default settings (customizable via swarm memory):
+```typescript
+{
+  browsers: ["chromium"],
+  viewports: [
+    { width: 1920, height: 1080 },  // Desktop
+    { width: 1366, height: 768 },   // Laptop
+    { width: 375, height: 667 }     // Mobile
+  ],
+  screenshotOnFailure: true,
+  recordVideo: false
+}
+```
+
+## Test Scenarios
+
+### Login Flow
+```javascript
+1. Navigate to /login
+2. Fill email + password
+3. Click login button
+4. Verify redirect to /dashboard
+5. Check for auth token in cookies
+```
+
+### Checkout Flow
+```javascript
+1. Add product to cart
+2. Navigate to /checkout
+3. Fill shipping address
+4. Select payment method
+5. Confirm order
+6. Verify order confirmation
+```
+
+## Best Practices
+
+1. **Snapshot before actions** - Capture state for debugging
+2. **Wait for elements** - Ensure elements are visible/enabled
+3. **Screenshot on failure** - Visual evidence for debugging
+4. **Test across viewports** - Validate responsive behavior
+5. **Accessibility first** - Check a11y before visual tests
+
+## Error Handling
+
+- Element not found → Retry with increased timeout
+- Navigation timeout → Check network conditions
+- Screenshot failure → Fallback to HTML snapshot
+- Accessibility violations → Report with severity levels

package/.claude/agents/frontend/state-architect.md

@@ -0,0 +1,162 @@
+# State Architect Agent
+
+**Type**: Frontend Architecture - State Management
+**MCP Integration**: Sequential Thinking
+**Expertise**: Zustand, React Query, State Design, Data Flow
+
+## Purpose
+Specialized agent for designing state management architecture, data fetching strategies, and state synchronization patterns using sequential planning.
+
+## Core Capabilities
+
+### 🏗️ State Architecture
+- State domain decomposition
+- Store design (Zustand, Redux, Jotai, Recoil)
+- Action/mutation planning
+- Selector optimization
+
+### 🔄 Data Fetching
+- React Query/SWR integration
+- Cache strategy design
+- Optimistic updates
+- Real-time synchronization
+
+### 📊 Sequential Planning
+- Step-by-step state design via `mcp__sequential-thinking`
+- Complex state flow mapping
+- Dependency analysis
+- Conflict resolution
+
+### 💾 Persistence
+- LocalStorage/SessionStorage
+- IndexedDB integration
+- State hydration
+- Migration strategies
+
+## MCP Tools
+
+### Sequential Thinking Integration
+```javascript
+// Use for complex state planning
+mcp__sequential-thinking({
+  task: "Design cart state management with multi-step checkout",
+  steps: [
+    "1. Identify state domains (cart, user, checkout)",
+    "2. Define state shape for each domain",
+    "3. Plan actions and mutations",
+    "4. Design selectors for derived state",
+    "5. Configure persistence middleware"
+  ]
+})
+```
+
+## Usage Pattern
+
+When spawned via Task tool, this agent:
+1. Uses sequential-thinking MCP to break down requirements
+2. Designs state architecture step-by-step
+3. Creates store configurations
+4. Plans data fetching strategies
+5. Defines state synchronization logic
+
+## Example Invocation
+
+```javascript
+Task(
+  "State Architect",
+  "Design state management for e-commerce app: product catalog, shopping cart, user auth, order history. Use Zustand + React Query with localStorage persistence.",
+  "architect"
+)
+```
+
+## Team Coordination
+
+**Works well with**:
+- UI Designer (provides state hooks)
+- Backend Dev (coordinates API contracts)
+- Interaction Tester (validates state transitions)
+
+**Outputs**:
+- Store configurations (Zustand/Redux)
+- Data fetching setup (React Query/SWR)
+- State persistence logic
+- Architecture documentation
+
+## Configuration
+
+Default settings (customizable via swarm memory):
+```typescript
+{
+  stateLibrary: "zustand",
+  dataFetchingLibrary: "react-query",
+  persistenceStrategy: "localStorage"
+}
+```
+
+## State Patterns
+
+### Zustand Store
+```typescript
+// Generated by State Architect
+import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
+
+interface CartState {
+  items: CartItem[];
+  actions: {
+    addItem: (item: CartItem) => void;
+    removeItem: (id: string) => void;
+    clearCart: () => void;
+  };
+}
+
+export const useCartStore = create<CartState>()(
+  persist(
+    (set, get) => ({
+      items: [],
+      actions: {
+        addItem: (item) => set(state => ({
+          items: [...state.items, item]
+        })),
+        // ... more actions
+      }
+    }),
+    { name: 'cart-storage' }
+  )
+);
+```
+
+### React Query Setup
+```typescript
+// Generated by State Architect
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      staleTime: 300000, // 5 minutes
+      refetchOnWindowFocus: false
+    }
+  }
+});
+
+// Product query
+export const useProducts = () => useQuery({
+  queryKey: ['products'],
+  queryFn: fetchProducts,
+  staleTime: 600000 // 10 minutes
+});
+```
+
+## Best Practices
+
+1. **Sequential planning first** - Use MCP to break down complex state
+2. **Domain separation** - Separate concerns (auth, cart, products)
+3. **Derived state via selectors** - Avoid redundant state
+4. **Optimistic updates** - Better UX for mutations
+5. **Persistence strategy** - Plan for offline/hydration
+
+## Error Handling
+
+- State hydration failure → Fallback to initial state
+- Persistence quota exceeded → Implement cleanup strategy
+- Concurrent updates → Use atomic operations
+- Network failure → Queue mutations with retry logic

package/.claude/agents/frontend/ui-designer.md

@@ -0,0 +1,101 @@
+# UI Designer Agent
+
+**Type**: Frontend Development - UI/UX Design
+**MCP Integration**: shadcn
+**Expertise**: React, Tailwind CSS, Accessibility, Component Design
+
+## Purpose
+Specialized agent for designing and implementing user interface components with a focus on design systems, accessibility, and responsive layouts.
+
+## Core Capabilities
+
+### 🎨 Component Design
+- Design components using shadcn/ui specifications via `mcp__shadcn__getComponent`
+- Create responsive layouts with Tailwind CSS
+- Implement design token systems
+- Build component hierarchies
+
+### ♿ Accessibility
+- WCAG AA/AAA compliance validation
+- Screen reader optimization
+- Keyboard navigation support
+- Color contrast analysis
+- ARIA attribute management
+
+### 📱 Responsive Design
+- Mobile-first approach
+- Breakpoint-based layouts (sm, md, lg, xl, 2xl)
+- Flexible grid systems
+- Adaptive component behavior
+
+## MCP Tools
+
+### shadcn Integration
+```javascript
+// Query available components
+mcp__shadcn__getComponents()
+
+// Get component specifications
+mcp__shadcn__getComponent({
+  component: "dialog" | "button" | "card" | ...
+})
+```
+
+## Usage Pattern
+
+When spawned via Task tool, this agent:
+1. Queries shadcn MCP for component specifications
+2. Designs component structure with accessibility
+3. Implements responsive layouts
+4. Validates WCAG compliance
+5. Creates design token systems
+
+## Example Invocation
+
+```javascript
+Task(
+  "UI Designer",
+  "Design a responsive dashboard layout using shadcn components with WCAG AA compliance",
+  "coder"
+)
+```
+
+## Team Coordination
+
+**Works well with**:
+- State Architect (receives state hooks)
+- Interaction Tester (provides components for testing)
+- Backend Dev (integrates with API contracts)
+
+**Outputs**:
+- Component implementations (.tsx/.jsx)
+- Style configurations (Tailwind)
+- Design token definitions
+- Accessibility audit reports
+
+## Configuration
+
+Default settings (customizable via swarm memory):
+```typescript
+{
+  framework: "react",
+  designSystem: "shadcn",
+  responsiveBreakpoints: ["sm", "md", "lg", "xl", "2xl"],
+  accessibilityLevel: "wcag-aa"
+}
+```
+
+## Best Practices
+
+1. **Always query shadcn MCP first** for component specs
+2. **Design system consistency** - use design tokens
+3. **Accessibility by default** - validate WCAG compliance
+4. **Mobile-first** - start with smallest breakpoint
+5. **Component composition** - build complex UIs from primitives
+
+## Error Handling
+
+- Missing ARIA labels → Auto-suggest based on component type
+- Low color contrast → Recommend accessible alternatives
+- Non-keyboard accessible → Add tabIndex and handlers
+- Missing responsive breakpoints → Default to mobile-first

package/.claude-flow-novice/dist/src/agents/frontend/index.js

@@ -0,0 +1,124 @@
+/**
+ * Frontend Agent Team
+ * Coordinates UI design, interaction testing, and state architecture
+ */ export { UIDesigner } from './ui-designer';
+export { InteractionTester } from './interaction-tester';
+export { StateArchitect } from './state-architect';
+export const FRONTEND_TEAM_CAPABILITIES = {
+    uiDesigner: {
+        name: 'UI Designer',
+        description: 'Component design, layout, accessibility, shadcn integration',
+        mcpTools: [
+            'mcp__shadcn__getComponents',
+            'mcp__shadcn__getComponent'
+        ],
+        expertise: [
+            'react',
+            'tailwindcss',
+            'shadcn/ui',
+            'responsive-design',
+            'accessibility'
+        ]
+    },
+    interactionTester: {
+        name: 'Interaction Tester',
+        description: 'Browser automation, user flows, visual regression, Playwright integration',
+        mcpTools: [
+            'mcp__playwright__browser_navigate',
+            'mcp__playwright__browser_click',
+            'mcp__playwright__browser_snapshot',
+            'mcp__playwright__browser_take_screenshot'
+        ],
+        expertise: [
+            'playwright',
+            'e2e-testing',
+            'visual-testing',
+            'accessibility-testing'
+        ]
+    },
+    stateArchitect: {
+        name: 'State Architect',
+        description: 'State management, data flow, sequential planning',
+        mcpTools: [
+            'mcp__sequential-thinking'
+        ],
+        expertise: [
+            'zustand',
+            'react-query',
+            'state-management',
+            'data-fetching',
+            'architecture'
+        ]
+    }
+};
+/**
+ * Frontend team coordination
+ */ export class FrontendTeam {
+    /**
+   * Coordinate full frontend implementation
+   */ static async coordinateImplementation(requirements) {
+        return {
+            phase: 'coordination',
+            teams: [
+                {
+                    agent: 'state-architect',
+                    task: 'Design state architecture',
+                    priority: 1
+                },
+                {
+                    agent: 'ui-designer',
+                    task: 'Design component hierarchy',
+                    priority: 2
+                },
+                {
+                    agent: 'interaction-tester',
+                    task: 'Plan test scenarios',
+                    priority: 3
+                }
+            ],
+            mcpIntegration: {
+                sequentialThinking: 'Planning agent coordination',
+                shadcn: 'Component specifications',
+                playwright: 'Interaction validation'
+            }
+        };
+    }
+    /**
+   * Recommended agent spawning pattern
+   */ static getSpawnPattern(complexity) {
+        const patterns = {
+            simple: {
+                agents: [
+                    'ui-designer',
+                    'interaction-tester'
+                ],
+                topology: 'mesh',
+                maxAgents: 2
+            },
+            medium: {
+                agents: [
+                    'state-architect',
+                    'ui-designer',
+                    'interaction-tester'
+                ],
+                topology: 'mesh',
+                maxAgents: 3
+            },
+            complex: {
+                agents: [
+                    'state-architect',
+                    'ui-designer',
+                    'ui-designer',
+                    'interaction-tester',
+                    'interaction-tester'
+                ],
+                topology: 'hierarchical',
+                maxAgents: 5
+            }
+        };
+        return patterns[complexity];
+    }
+}
+export default FrontendTeam;
+
+//# sourceMappingURL=index.js.map

package/.claude-flow-novice/dist/src/agents/frontend/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/agents/frontend/index.ts"],"names":["UIDesigner","InteractionTester","StateArchitect","FRONTEND_TEAM_CAPABILITIES","uiDesigner","name","description","mcpTools","expertise","interactionTester","stateArchitect","FrontendTeam","coordinateImplementation","requirements","phase","teams","agent","task","priority","mcpIntegration","sequentialThinking","shadcn","playwright","getSpawnPattern","complexity","patterns","simple","agents","topology","maxAgents","medium","complex"],"mappings":"AAAA;;;CAGC,GAED,SAASA,UAAU,QAAQ,gBAAgB;AAC3C,SAASC,iBAAiB,QAAQ,uBAAuB;AACzD,SAASC,cAAc,QAAQ,oBAAoB;AAEnD,OAAO,MAAMC,6BAA6B;IACxCC,YAAY;QACVC,MAAM;QACNC,aAAa;QACbC,UAAU;YAAC;YAA8B;SAA4B;QACrEC,WAAW;YAAC;YAAS;YAAe;YAAa;YAAqB;SAAgB;IACxF;IACAC,mBAAmB;QACjBJ,MAAM;QACNC,aAAa;QACbC,UAAU;YACR;YACA;YACA;YACA;SACD;QACDC,WAAW;YAAC;YAAc;YAAe;YAAkB;SAAwB;IACrF;IACAE,gBAAgB;QACdL,MAAM;QACNC,aAAa;QACbC,UAAU;YAAC;SAA2B;QACtCC,WAAW;YAAC;YAAW;YAAe;YAAoB;YAAiB;SAAe;IAC5F;AACF,EAAE;AAEF;;CAEC,GACD,OAAO,MAAMG;IACX;;GAEC,GACD,aAAaC,yBAAyBC,YAAiB,EAAgB;QACrE,OAAO;YACLC,OAAO;YACPC,OAAO;gBACL;oBAAEC,OAAO;oBAAmBC,MAAM;oBAA6BC,UAAU;gBAAE;gBAC3E;oBAAEF,OAAO;oBAAeC,MAAM;oBAA8BC,UAAU;gBAAE;gBACxE;oBAAEF,OAAO;oBAAsBC,MAAM;oBAAuBC,UAAU;gBAAE;aACzE;YACDC,gBAAgB;gBACdC,oBAAoB;gBACpBC,QAAQ;gBACRC,YAAY;YACd;QACF;IACF;IAEA;;GAEC,GACD,OAAOC,gBAAgBC,UAA2C,EAAO;QACvE,MAAMC,WAAW;YACfC,QAAQ;gBACNC,QAAQ;oBAAC;oBAAe;iBAAqB;gBAC7CC,UAAU;gBACVC,WAAW;YACb;YACAC,QAAQ;gBACNH,QAAQ;oBAAC;oBAAmB;oBAAe;iBAAqB;gBAChEC,UAAU;gBACVC,WAAW;YACb;YACAE,SAAS;gBACPJ,QAAQ;oBACN;oBACA;oBACA;oBACA;oBACA;iBACD;gBACDC,UAAU;gBACVC,WAAW;YACb;QACF;QAEA,OAAOJ,QAAQ,CAACD,WAAW;IAC7B;AACF;AAEA,eAAeb,aAAa"}

package/.claude-flow-novice/dist/src/agents/frontend/interaction-tester.js

@@ -0,0 +1,146 @@
+/**
+ * Interaction Tester Agent
+ * Specializes in browser automation testing using Playwright MCP
+ * Validates user flows, component interactions, and visual regressions
+ */ export class InteractionTester {
+    config;
+    constructor(config = {}){
+        this.config = {
+            browsers: config.browsers || [
+                'chromium'
+            ],
+            viewports: config.viewports || [
+                {
+                    width: 1920,
+                    height: 1080
+                },
+                {
+                    width: 1366,
+                    height: 768
+                },
+                {
+                    width: 375,
+                    height: 667
+                }
+            ],
+            screenshotOnFailure: config.screenshotOnFailure ?? true,
+            recordVideo: config.recordVideo ?? false
+        };
+    }
+    /**
+   * Test user interaction flow using Playwright MCP
+   */ async testUserFlow(flowName, steps) {
+        const testResults = {
+            flowName,
+            passed: true,
+            steps: [],
+            screenshots: [],
+            errors: []
+        };
+        for (const step of steps){
+            try {
+                // Use Playwright MCP tools:
+                // - mcp__playwright__browser_navigate
+                // - mcp__playwright__browser_click
+                // - mcp__playwright__browser_type
+                // - mcp__playwright__browser_snapshot
+                // - mcp__playwright__browser_take_screenshot
+                const stepResult = {
+                    action: step.action,
+                    selector: step.selector,
+                    status: 'passed',
+                    duration: 0
+                };
+                testResults.steps.push(stepResult);
+            } catch (error) {
+                testResults.passed = false;
+                testResults.errors.push(`Step "${step.action}" failed: ${error}`);
+                if (this.config.screenshotOnFailure) {
+                    // Take screenshot on failure
+                    testResults.screenshots.push(`failure-${flowName}-${step.action}.png`);
+                }
+            }
+        }
+        return testResults;
+    }
+    /**
+   * Test form interactions
+   */ async testForm(formConfig) {
+        return {
+            formName: formConfig.name,
+            fields: formConfig.fields.map((field)=>({
+                    name: field.name,
+                    type: field.type,
+                    validation: 'pending',
+                    accessibility: 'pending'
+                })),
+            submitTest: 'pending'
+        };
+    }
+    /**
+   * Visual regression testing
+   */ async testVisualRegression(componentName, baselineUrl) {
+        const results = {
+            component: componentName,
+            viewportTests: [],
+            passed: true
+        };
+        for (const viewport of this.config.viewports){
+            const test = {
+                width: viewport.width,
+                height: viewport.height,
+                pixelDifference: 0,
+                passed: true
+            };
+            results.viewportTests.push(test);
+        }
+        return results;
+    }
+    /**
+   * Test component accessibility
+   */ async testAccessibility(component) {
+        return {
+            component,
+            violations: [],
+            warnings: [],
+            passed: true,
+            wcagLevel: 'AA',
+            tests: [
+                {
+                    name: 'keyboard-navigation',
+                    passed: true
+                },
+                {
+                    name: 'screen-reader',
+                    passed: true
+                },
+                {
+                    name: 'color-contrast',
+                    passed: true
+                },
+                {
+                    name: 'focus-management',
+                    passed: true
+                }
+            ]
+        };
+    }
+    /**
+   * Performance testing
+   */ async testPerformance(url) {
+        return {
+            url,
+            metrics: {
+                firstContentfulPaint: 0,
+                largestContentfulPaint: 0,
+                timeToInteractive: 0,
+                cumulativeLayoutShift: 0
+            },
+            score: 0,
+            recommendations: []
+        };
+    }
+}
+export default InteractionTester;
+
+//# sourceMappingURL=interaction-tester.js.map

package/.claude-flow-novice/dist/src/agents/frontend/interaction-tester.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/agents/frontend/interaction-tester.ts"],"names":["InteractionTester","config","browsers","viewports","width","height","screenshotOnFailure","recordVideo","testUserFlow","flowName","steps","testResults","passed","screenshots","errors","step","stepResult","action","selector","status","duration","push","error","testForm","formConfig","formName","name","fields","map","field","type","validation","accessibility","submitTest","testVisualRegression","componentName","baselineUrl","results","component","viewportTests","viewport","test","pixelDifference","testAccessibility","violations","warnings","wcagLevel","tests","testPerformance","url","metrics","firstContentfulPaint","largestContentfulPaint","timeToInteractive","cumulativeLayoutShift","score","recommendations"],"mappings":"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"}

package/.claude-flow-novice/dist/src/agents/frontend/state-architect.js

@@ -0,0 +1,146 @@
+/**
+ * State Architect Agent
+ * Specializes in state management architecture and data flow
+ * Uses sequential-thinking MCP for complex state planning
+ */ export class StateArchitect {
+    config;
+    constructor(config = {}){
+        this.config = {
+            stateLibrary: config.stateLibrary || 'zustand',
+            dataFetchingLibrary: config.dataFetchingLibrary || 'react-query',
+            persistenceStrategy: config.persistenceStrategy || 'localStorage'
+        };
+    }
+    /**
+   * Design state architecture using sequential-thinking MCP
+   * Breaks down complex state requirements into logical steps
+   */ async designStateArchitecture(requirements) {
+        // Use sequential-thinking MCP for step-by-step state design
+        const stateDesign = {
+            library: this.config.stateLibrary,
+            stores: [],
+            actions: [],
+            selectors: [],
+            middleware: []
+        };
+        // Sequential thinking steps:
+        // 1. Identify state domains (user, cart, products, etc.)
+        // 2. Define state shape for each domain
+        // 3. Determine actions and mutations
+        // 4. Design selectors for derived state
+        // 5. Configure middleware (logging, persistence, etc.)
+        return stateDesign;
+    }
+    /**
+   * Create store configuration
+   */ async createStore(storeName, initialState) {
+        const storeConfig = {
+            name: storeName,
+            library: this.config.stateLibrary,
+            initialState,
+            actions: {},
+            middleware: [],
+            persistence: this.config.persistenceStrategy
+        };
+        if (this.config.stateLibrary === 'zustand') {
+            return this.createZustandStore(storeConfig);
+        } else if (this.config.stateLibrary === 'redux') {
+            return this.createReduxStore(storeConfig);
+        }
+        return storeConfig;
+    }
+    createZustandStore(config) {
+        return {
+            ...config,
+            template: `
+import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
+
+interface ${config.name}State {
+  // State shape
+  ${Object.keys(config.initialState).map((key)=>`${key}: ${typeof config.initialState[key]};`).join('\n  ')}
+
+  // Actions
+  actions: {
+    // Define actions here
+  };
+}
+
+export const use${config.name}Store = create<${config.name}State>()(
+  persist(
+    (set, get) => ({
+      ...${JSON.stringify(config.initialState, null, 2)},
+      actions: {
+        // Implement actions here
+      },
+    }),
+    {
+      name: '${config.name.toLowerCase()}-storage',
+    }
+  )
+);
+      `.trim()
+        };
+    }
+    createReduxStore(config) {
+        return {
+            ...config,
+            template: `
+import { createSlice, configureStore } from '@reduxjs/toolkit';
+
+const ${config.name.toLowerCase()}Slice = createSlice({
+  name: '${config.name.toLowerCase()}',
+  initialState: ${JSON.stringify(config.initialState, null, 2)},
+  reducers: {
+    // Define reducers here
+  },
+});
+
+export const { actions } = ${config.name.toLowerCase()}Slice;
+export default ${config.name.toLowerCase()}Slice.reducer;
+      `.trim()
+        };
+    }
+    /**
+   * Design data fetching strategy
+   */ async designDataFetching(entityName, endpoints) {
+        return {
+            entity: entityName,
+            library: this.config.dataFetchingLibrary,
+            endpoints: endpoints.map((endpoint)=>({
+                    name: endpoint.name,
+                    method: endpoint.method,
+                    caching: true,
+                    refetchInterval: endpoint.realtime ? 5000 : 0,
+                    staleTime: endpoint.staleTime || 300000
+                }))
+        };
+    }
+    /**
+   * Plan state synchronization
+   */ async planStateSynchronization(sources) {
+        // Use sequential-thinking MCP to plan synchronization strategy
+        return {
+            sources,
+            strategy: 'optimistic-updates',
+            conflictResolution: 'last-write-wins',
+            offlineSupport: true,
+            syncInterval: 30000
+        };
+    }
+    /**
+   * Design derived state selectors
+   */ async createSelectors(storeName, derivedValues) {
+        return {
+            store: storeName,
+            selectors: derivedValues.map((dv)=>({
+                    name: dv.name,
+                    dependencies: dv.dependencies || [],
+                    memoized: true
+                }))
+        };
+    }
+}
+export default StateArchitect;
+
+//# sourceMappingURL=state-architect.js.map

package/.claude-flow-novice/dist/src/agents/frontend/state-architect.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/agents/frontend/state-architect.ts"],"names":["StateArchitect","config","stateLibrary","dataFetchingLibrary","persistenceStrategy","designStateArchitecture","requirements","stateDesign","library","stores","actions","selectors","middleware","createStore","storeName","initialState","storeConfig","name","persistence","createZustandStore","createReduxStore","template","Object","keys","map","key","join","JSON","stringify","toLowerCase","trim","designDataFetching","entityName","endpoints","entity","endpoint","method","caching","refetchInterval","realtime","staleTime","planStateSynchronization","sources","strategy","conflictResolution","offlineSupport","syncInterval","createSelectors","derivedValues","store","dv","dependencies","memoized"],"mappings":"AAAA;;;;CAIC,GAQD,OAAO,MAAMA;IACHC,OAA6B;IAErC,YAAYA,SAAwC,CAAC,CAAC,CAAE;QACtD,IAAI,CAACA,MAAM,GAAG;YACZC,cAAcD,OAAOC,YAAY,IAAI;YACrCC,qBAAqBF,OAAOE,mBAAmB,IAAI;YACnDC,qBAAqBH,OAAOG,mBAAmB,IAAI;QACrD;IACF;IAEA;;;GAGC,GACD,MAAMC,wBAAwBC,YAAiB,EAAgB;QAC7D,4DAA4D;QAC5D,MAAMC,cAAc;YAClBC,SAAS,IAAI,CAACP,MAAM,CAACC,YAAY;YACjCO,QAAQ,EAAE;YACVC,SAAS,EAAE;YACXC,WAAW,EAAE;YACbC,YAAY,EAAE;QAChB;QAEA,6BAA6B;QAC7B,yDAAyD;QACzD,wCAAwC;QACxC,qCAAqC;QACrC,wCAAwC;QACxC,uDAAuD;QAEvD,OAAOL;IACT;IAEA;;GAEC,GACD,MAAMM,YAAYC,SAAiB,EAAEC,YAAiB,EAAgB;QACpE,MAAMC,cAAc;YAClBC,MAAMH;YACNN,SAAS,IAAI,CAACP,MAAM,CAACC,YAAY;YACjCa;YACAL,SAAS,CAAC;YACVE,YAAY,EAAE;YACdM,aAAa,IAAI,CAACjB,MAAM,CAACG,mBAAmB;QAC9C;QAEA,IAAI,IAAI,CAACH,MAAM,CAACC,YAAY,KAAK,WAAW;YAC1C,OAAO,IAAI,CAACiB,kBAAkB,CAACH;QACjC,OAAO,IAAI,IAAI,CAACf,MAAM,CAACC,YAAY,KAAK,SAAS;YAC/C,OAAO,IAAI,CAACkB,gBAAgB,CAACJ;QAC/B;QAEA,OAAOA;IACT;IAEQG,mBAAmBlB,MAAW,EAAO;QAC3C,OAAO;YACL,GAAGA,MAAM;YACToB,UAAU,CAAC;;;;UAIP,EAAEpB,OAAOgB,IAAI,CAAC;;EAEtB,EAAEK,OAAOC,IAAI,CAACtB,OAAOc,YAAY,EAC9BS,GAAG,CAAC,CAACC,MAAQ,GAAGA,IAAI,EAAE,EAAE,OAAOxB,OAAOc,YAAY,CAACU,IAAI,CAAC,CAAC,CAAC,EAC1DC,IAAI,CAAC,QAAQ;;;;;;;;gBAQF,EAAEzB,OAAOgB,IAAI,CAAC,eAAe,EAAEhB,OAAOgB,IAAI,CAAC;;;SAGlD,EAAEU,KAAKC,SAAS,CAAC3B,OAAOc,YAAY,EAAE,MAAM,GAAG;;;;;;aAM3C,EAAEd,OAAOgB,IAAI,CAACY,WAAW,GAAG;;;;MAInC,CAAC,CAACC,IAAI;QACR;IACF;IAEQV,iBAAiBnB,MAAW,EAAO;QACzC,OAAO;YACL,GAAGA,MAAM;YACToB,UAAU,CAAC;;;MAGX,EAAEpB,OAAOgB,IAAI,CAACY,WAAW,GAAG;SACzB,EAAE5B,OAAOgB,IAAI,CAACY,WAAW,GAAG;gBACrB,EAAEF,KAAKC,SAAS,CAAC3B,OAAOc,YAAY,EAAE,MAAM,GAAG;;;;;;2BAMpC,EAAEd,OAAOgB,IAAI,CAACY,WAAW,GAAG;eACxC,EAAE5B,OAAOgB,IAAI,CAACY,WAAW,GAAG;MACrC,CAAC,CAACC,IAAI;QACR;IACF;IAEA;;GAEC,GACD,MAAMC,mBAAmBC,UAAkB,EAAEC,SAAgB,EAAgB;QAC3E,OAAO;YACLC,QAAQF;YACRxB,SAAS,IAAI,CAACP,MAAM,CAACE,mBAAmB;YACxC8B,WAAWA,UAAUT,GAAG,CAAC,CAACW,WAAc,CAAA;oBACtClB,MAAMkB,SAASlB,IAAI;oBACnBmB,QAAQD,SAASC,MAAM;oBACvBC,SAAS;oBACTC,iBAAiBH,SAASI,QAAQ,GAAG,OAAO;oBAC5CC,WAAWL,SAASK,SAAS,IAAI;gBACnC,CAAA;QACF;IACF;IAEA;;GAEC,GACD,MAAMC,yBAAyBC,OAAiB,EAAgB;QAC9D,+DAA+D;QAC/D,OAAO;YACLA;YACAC,UAAU;YACVC,oBAAoB;YACpBC,gBAAgB;YAChBC,cAAc;QAChB;IACF;IAEA;;GAEC,GACD,MAAMC,gBAAgBjC,SAAiB,EAAEkC,aAAoB,EAAgB;QAC3E,OAAO;YACLC,OAAOnC;YACPH,WAAWqC,cAAcxB,GAAG,CAAC,CAAC0B,KAAQ,CAAA;oBACpCjC,MAAMiC,GAAGjC,IAAI;oBACbkC,cAAcD,GAAGC,YAAY,IAAI,EAAE;oBACnCC,UAAU;gBACZ,CAAA;QACF;IACF;AACF;AAEA,eAAepD,eAAe"}

package/.claude-flow-novice/dist/src/agents/frontend/ui-designer.js

@@ -0,0 +1,100 @@
+/**
+ * UI Designer Agent
+ * Specializes in component design, layout, and visual hierarchy
+ * Uses shadcn MCP for component specs
+ */ export class UIDesigner {
+    config;
+    constructor(config = {}){
+        this.config = {
+            framework: config.framework || 'react',
+            designSystem: config.designSystem || 'shadcn',
+            responsiveBreakpoints: config.responsiveBreakpoints || [
+                'sm',
+                'md',
+                'lg',
+                'xl',
+                '2xl'
+            ],
+            accessibilityLevel: config.accessibilityLevel || 'wcag-aa'
+        };
+    }
+    /**
+   * Design component structure using shadcn MCP
+   */ async designComponent(componentType, requirements) {
+        // Query shadcn MCP for component specs
+        const componentSpec = {
+            type: componentType,
+            framework: this.config.framework,
+            designSystem: this.config.designSystem,
+            accessibility: this.config.accessibilityLevel,
+            responsive: true,
+            requirements
+        };
+        return componentSpec;
+    }
+    /**
+   * Generate responsive layout
+   */ async createLayout(layoutType, components) {
+        return {
+            layoutType,
+            components,
+            breakpoints: this.config.responsiveBreakpoints,
+            spacing: 'responsive',
+            container: 'max-w-7xl mx-auto px-4 sm:px-6 lg:px-8'
+        };
+    }
+    /**
+   * Validate accessibility compliance
+   */ async validateAccessibility(component) {
+        const issues = [];
+        // Check ARIA labels
+        if (!component.ariaLabel && !component.ariaLabelledBy) {
+            issues.push('Missing ARIA label for screen readers');
+        }
+        // Check color contrast (mock validation)
+        if (component.colorContrast && component.colorContrast < 4.5) {
+            issues.push(`Color contrast ${component.colorContrast} below WCAG AA minimum (4.5:1)`);
+        }
+        // Check keyboard navigation
+        if (component.interactive && !component.tabIndex) {
+            issues.push('Interactive element not keyboard accessible');
+        }
+        return {
+            compliant: issues.length === 0,
+            issues
+        };
+    }
+    /**
+   * Design token system
+   */ async createDesignTokens() {
+        return {
+            colors: {
+                primary: 'hsl(var(--primary))',
+                secondary: 'hsl(var(--secondary))',
+                accent: 'hsl(var(--accent))',
+                background: 'hsl(var(--background))',
+                foreground: 'hsl(var(--foreground))'
+            },
+            spacing: {
+                xs: '0.25rem',
+                sm: '0.5rem',
+                md: '1rem',
+                lg: '1.5rem',
+                xl: '2rem'
+            },
+            typography: {
+                fontFamily: 'var(--font-sans)',
+                fontSize: {
+                    xs: '0.75rem',
+                    sm: '0.875rem',
+                    base: '1rem',
+                    lg: '1.125rem',
+                    xl: '1.25rem'
+                }
+            }
+        };
+    }
+}
+export default UIDesigner;
+
+//# sourceMappingURL=ui-designer.js.map

package/.claude-flow-novice/dist/src/agents/frontend/ui-designer.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/agents/frontend/ui-designer.ts"],"names":["UIDesigner","config","framework","designSystem","responsiveBreakpoints","accessibilityLevel","designComponent","componentType","requirements","componentSpec","type","accessibility","responsive","createLayout","layoutType","components","breakpoints","spacing","container","validateAccessibility","component","issues","ariaLabel","ariaLabelledBy","push","colorContrast","interactive","tabIndex","compliant","length","createDesignTokens","colors","primary","secondary","accent","background","foreground","xs","sm","md","lg","xl","typography","fontFamily","fontSize","base"],"mappings":"AAAA;;;;CAIC,GASD,OAAO,MAAMA;IACHC,OAAyB;IAEjC,YAAYA,SAAoC,CAAC,CAAC,CAAE;QAClD,IAAI,CAACA,MAAM,GAAG;YACZC,WAAWD,OAAOC,SAAS,IAAI;YAC/BC,cAAcF,OAAOE,YAAY,IAAI;YACrCC,uBAAuBH,OAAOG,qBAAqB,IAAI;gBAAC;gBAAM;gBAAM;gBAAM;gBAAM;aAAM;YACtFC,oBAAoBJ,OAAOI,kBAAkB,IAAI;QACnD;IACF;IAEA;;GAEC,GACD,MAAMC,gBAAgBC,aAAqB,EAAEC,YAAiB,EAAgB;QAC5E,uCAAuC;QACvC,MAAMC,gBAAgB;YACpBC,MAAMH;YACNL,WAAW,IAAI,CAACD,MAAM,CAACC,SAAS;YAChCC,cAAc,IAAI,CAACF,MAAM,CAACE,YAAY;YACtCQ,eAAe,IAAI,CAACV,MAAM,CAACI,kBAAkB;YAC7CO,YAAY;YACZJ;QACF;QAEA,OAAOC;IACT;IAEA;;GAEC,GACD,MAAMI,aAAaC,UAAqC,EAAEC,UAAoB,EAAgB;QAC5F,OAAO;YACLD;YACAC;YACAC,aAAa,IAAI,CAACf,MAAM,CAACG,qBAAqB;YAC9Ca,SAAS;YACTC,WAAW;QACb;IACF;IAEA;;GAEC,GACD,MAAMC,sBAAsBC,SAAc,EAAqD;QAC7F,MAAMC,SAAmB,EAAE;QAE3B,oBAAoB;QACpB,IAAI,CAACD,UAAUE,SAAS,IAAI,CAACF,UAAUG,cAAc,EAAE;YACrDF,OAAOG,IAAI,CAAC;QACd;QAEA,yCAAyC;QACzC,IAAIJ,UAAUK,aAAa,IAAIL,UAAUK,aAAa,GAAG,KAAK;YAC5DJ,OAAOG,IAAI,CAAC,CAAC,eAAe,EAAEJ,UAAUK,aAAa,CAAC,8BAA8B,CAAC;QACvF;QAEA,4BAA4B;QAC5B,IAAIL,UAAUM,WAAW,IAAI,CAACN,UAAUO,QAAQ,EAAE;YAChDN,OAAOG,IAAI,CAAC;QACd;QAEA,OAAO;YACLI,WAAWP,OAAOQ,MAAM,KAAK;YAC7BR;QACF;IACF;IAEA;;GAEC,GACD,MAAMS,qBAAmC;QACvC,OAAO;YACLC,QAAQ;gBACNC,SAAS;gBACTC,WAAW;gBACXC,QAAQ;gBACRC,YAAY;gBACZC,YAAY;YACd;YACAnB,SAAS;gBACPoB,IAAI;gBACJC,IAAI;gBACJC,IAAI;gBACJC,IAAI;gBACJC,IAAI;YACN;YACAC,YAAY;gBACVC,YAAY;gBACZC,UAAU;oBACRP,IAAI;oBACJC,IAAI;oBACJO,MAAM;oBACNL,IAAI;oBACJC,IAAI;gBACN;YACF;QACF;IACF;AACF;AAEA,eAAezC,WAAW"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "claude-flow-novice",
-  "version": "1.5.19",
+  "version": "1.5.21",
   "description": "Standalone Claude Flow for beginners - AI agent orchestration made easy with enhanced TDD testing pipeline. Enhanced init command creates complete agent system, MCP configuration with 30 essential tools, and automated hooks with single-file testing, real-time coverage analysis, and advanced validation. Fully standalone with zero external dependencies, complete project setup in one command.",
   "mcpName": "io.github.ruvnet/claude-flow",
   "main": ".claude-flow-novice/dist/index.js",

package/src/cli/simple-commands/init/templates/settings.json.enhanced

@@ -8,10 +8,13 @@
     "session-end": ".claude/commands/hooks/session-end.md"
   },
   "permissions": {
-    "allow": ["mcp__ruv-swarm", "mcp__claude-flow"],
+    "allow": ["mcp__ruv-swarm", "mcp__claude-flow", "mcp__sequential-thinking", "mcp__playwright", "mcp__shadcn"],
     "autoApprove": {
       "mcp__ruv-swarm": ["*"],
-      "mcp__claude-flow": ["*"]
+      "mcp__claude-flow": ["*"],
+      "mcp__sequential-thinking": ["*"],
+      "mcp__playwright": ["*"],
+      "mcp__shadcn": ["*"]
     }
   },
   "mcpServers": {
@@ -24,6 +27,21 @@
       "command": "npx",
       "args": ["ruv-swarm@latest", "mcp", "start"],
       "type": "stdio"
+    },
+    "sequential-thinking": {
+      "command": "npx",
+      "args": ["@modelcontextprotocol/server-sequential-thinking@latest"],
+      "type": "stdio"
+    },
+    "playwright": {
+      "command": "npx",
+      "args": ["@playwright/mcp@latest"],
+      "type": "stdio"
+    },
+    "shadcn": {
+      "command": "npx",
+      "args": ["@shadcn/mcp@latest"],
+      "type": "stdio"
     }
   },
   "features": {