claude-flow-novice 1.5.19 → 1.5.20

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":"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"}

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.20",
   "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": {