claude-flow-novice 1.5.0 → 1.5.1

package/.claude/commands/fullstack.md

@@ -0,0 +1,134 @@
+---
+description: "Launch full-stack development team with coordinated consensus validation"
+argument-hint: "<goal description>"
+allowed-tools: ["Task", "TodoWrite", "Read", "Write", "Edit", "Bash", "Glob", "Grep"]
+---
+
+# Full-Stack Development Team
+
+Launch a coordinated full-stack development team to accomplish complex features with built-in consensus validation.
+
+**Goal**: $ARGUMENTS
+
+## Team Composition
+
+The fullstack team includes:
+- **Researcher**: Requirements analysis, pattern detection, architectural planning
+- **Coder**: Implementation of backend and frontend features
+- **Tester**: Comprehensive testing including unit, integration, and E2E tests
+- **Reviewer**: Code quality analysis, security review, performance optimization
+- **Architect** (for complex tasks): System design and architectural decisions
+
+## Execution Pattern
+
+### Phase 1: Execute
+1. **Launch Primary Swarm** (3-5 agents in parallel using Claude Code's Task tool)
+   - All agents execute concurrently in a single message
+   - Each agent receives full context and specific responsibilities
+   - Agents produce deliverables with confidence scores
+
+2. **Progress Tracking**
+   - Use TodoWrite to track all tasks (5-10+ items minimum)
+   - Mark tasks as in_progress before starting
+   - Complete tasks immediately after finishing (no batching)
+
+### Phase 2: Verify (Only when Primary Swarm believes it's done)
+1. **Self-Assessment**: Primary swarm evaluates completion (confidence ≥75% required)
+2. **Launch Consensus Swarm** (2-4 validators in parallel)
+   - Independent verification with Byzantine fault tolerance
+   - Comprehensive validation: tests, security, performance, architecture
+   - Voting mechanism with critical criteria checks
+
+### Phase 3: Decision
+**PASS Criteria** (≥90% agreement + all critical checks):
+- All tests passing (100% for critical paths, ≥80% coverage overall)
+- No security vulnerabilities
+- Performance within acceptable thresholds
+- Architecture review approved
+
+**FAIL Criteria**:
+- <90% validator agreement OR critical criteria failed
+- Round counter increments
+- Feedback injected into context
+
+### Phase 4: Action
+- **PASS**: Store results → Move to next task → Report completion
+- **FAIL**:
+  - If Round < 10: Inject feedback → Relaunch primary swarm with improvements
+  - If Round ≥ 10: Escalate to human with full history + recommendations
+
+### Phase 5: Repeat
+Iterative improvement with accumulated context from all previous rounds until:
+- Success achieved (PASS)
+- Maximum rounds reached (10)
+- Human intervention requested
+
+## Consensus Validation Requirements
+
+**Validator Team** (4 agents for Byzantine fault tolerance):
+1. **Validator 1** - Test Coverage & Quality
+2. **Validator 2** - Security & Compliance
+3. **Validator 3** - Performance & Optimization
+4. **Validator 4** - Architecture & Design
+
+**Scoring System**:
+- Overall Score: 0-100 (weighted average)
+- Pass Threshold: ≥90/100 with unanimous approval
+- Tier 2: 85-94 (production-ready with minor issues)
+- Tier 3: 75-84 (needs improvements)
+- Fail: <75 (significant issues)
+
+**Critical Criteria** (all must pass):
+- Tests executing and passing
+- No critical security vulnerabilities
+- Code compiles/builds successfully
+- Core functionality working
+
+## Usage Examples
+
+```bash
+# Simple feature
+/fullstack Add user authentication with JWT tokens and password hashing
+
+# Complex feature with multiple components
+/fullstack Build a real-time chat system with user presence, typing indicators, message history, and file sharing
+
+# Backend API
+/fullstack Create REST API for product catalog with CRUD operations, search, filtering, and pagination
+
+# Frontend feature
+/fullstack Implement responsive dashboard with data visualization, real-time updates, and mobile support
+
+# Full-stack integration
+/fullstack Develop e-commerce checkout flow with payment processing, order management, and email notifications
+```
+
+## Execution Instructions
+
+When this command is invoked:
+
+1. **Parse the goal** from $ARGUMENTS
+2. **Create comprehensive task list** using TodoWrite (5-10+ items)
+3. **Launch primary swarm** using Claude Code's Task tool in a SINGLE message:
+   ```
+   Task("Research and analyze requirements", "Analyze goal: [goal]. Research patterns, identify requirements, create detailed specifications...", "researcher")
+   Task("Implement core features", "Implement goal: [goal]. Write production code following best practices...", "coder")
+   Task("Create comprehensive tests", "Test goal: [goal]. Write unit, integration, and E2E tests...", "tester")
+   Task("Review and optimize", "Review implementation of goal: [goal]. Check security, performance, architecture...", "reviewer")
+   ```
+4. **Monitor progress** and update TodoWrite in real-time
+5. **Self-assess** when primary work complete
+6. **Launch consensus swarm** if confidence ≥75%
+7. **Process results** according to validation outcome
+8. **Iterate or complete** based on consensus decision
+
+## Important Notes
+
+- **Always use Task tool in parallel** - spawn all agents in ONE message
+- **Update TodoWrite immediately** - never batch completions
+- **Run post-edit hooks** after EVERY file modification
+- **Store results in appropriate directories** - never save to root
+- **Follow file organization** - use /src, /tests, /docs structure
+- **Enable consensus validation** - for production-ready code quality
+
+Execute the fullstack development workflow for the specified goal with comprehensive validation.

package/.claude/commands/index.js

@@ -43,6 +43,7 @@ export { default as registerClaudeMd } from './register-claude-md.js';
 export const Commands = {
   SPARC: 'sparc',
   SWARM: 'swarm',
+  FULLSTACK: 'fullstack',
   HOOKS: 'hooks',
   NEURAL: 'neural',
   PERFORMANCE: 'performance',
@@ -57,6 +58,8 @@ export const Commands = {
  */
 export const Aliases = {
   s: 'swarm',
+  fs: 'fullstack',
+  full: 'fullstack',
   h: 'hooks',
   n: 'neural',
   p: 'performance',
@@ -91,6 +94,7 @@ export function getQuickHelp() {
 🚀 **CLAUDE-FLOW SLASH COMMANDS**
 
 **Essential Commands:**
+- \`/fullstack "goal"\` - Launch full-stack development team with consensus validation
 - \`/swarm init mesh 8\` - Initialize agent swarm
 - \`/hooks enable\` - Enable automation hooks
 - \`/sparc spec "task"\` - Run SPARC methodology

package/CHANGELOG.md

@@ -5,6 +5,19 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [Unreleased]
+
+### ✨ Added
+- **`/fullstack` Slash Command**: Launch coordinated full-stack development team with consensus validation
+  - Automatic team composition (researcher, coder, tester, reviewer, architect)
+  - Built-in consensus validation with 4-validator Byzantine fault tolerance
+  - Iterative improvement with up to 10 rounds and feedback injection
+  - Production-ready code quality (≥90% agreement + critical criteria)
+  - User can specify custom goals: `/fullstack "Add authentication with JWT"`
+  - Command aliases: `/fs`, `/full`
+  - Comprehensive documentation in `docs/commands/fullstack.md`
+  - Auto-discovered by Claude Code (no manual registration required)
+
 ## [1.4.1] - 2025-09-29
 
 ### 🔧 Fixed

package/CLAUDE.md

@@ -1050,3 +1050,941 @@ class TestAPI:
         assert response.json()["status"] == "success"
 ```
 
+
+
+## Custom Configuration
+
+<!-- Preserved from existing CLAUDE.md -->
+  hooks/             # Custom hooks (if React)
+  types/             # Type definitions (if TypeScript)
+```
+
+**Testing Patterns:**
+```javascript
+import { jest } from '@jest/globals';
+
+describe('Module Tests', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  test('handles async operations correctly', async () => {
+    const mockFn = jest.fn().mockResolvedValue({ success: true });
+    const result = await asyncOperation(mockFn);
+
+    expect(result).toEqual({ success: true });
+    expect(mockFn).toHaveBeenCalledTimes(1);
+  });
+
+  test('handles errors gracefully', async () => {
+    const mockFn = jest.fn().mockRejectedValue(new Error('Test error'));
+
+    await expect(asyncOperation(mockFn)).rejects.toThrow('Test error');
+  });
+});
+```
+
+**Performance Best Practices:**
+- Use code splitting for large applications
+- Implement lazy loading for routes/components
+- Minimize bundle size with tree shaking
+- Use Web Workers for heavy computations
+- Implement proper caching strategies
+
+**Error Handling:**
+```javascript
+// Global error handler
+process.on('unhandledRejection', (reason, promise) => {
+  console.error('Unhandled Rejection at:', promise, 'reason:', reason);
+  // Application specific logging logic here
+});
+
+// Async error wrapper
+const asyncHandler = (fn) => (req, res, next) => {
+  Promise.resolve(fn(req, res, next)).catch(next);
+};
+```
+
+**Environment Configuration:**
+```javascript
+// config/index.js
+const config = {
+  development: {
+    api: {
+      baseURL: 'http://localhost:3000',
+      timeout: 5000
+    }
+  },
+  production: {
+    api: {
+      baseURL: process.env.API_BASE_URL,
+      timeout: 10000
+    }
+  }
+};
+
+export default config[process.env.NODE_ENV || 'development'];
+```
+
+
+  hooks/           # Custom hooks (if React)
+    useApi.ts      # Generic API hook
+```
+
+
+  hooks/              # Custom hooks
+    useApi.js
+    useLocalStorage.js
+    useAuth.js
+  context/            # React context providers
+    AuthContext.jsx
+    ThemeContext.jsx
+  services/           # API services
+    api.js
+    auth.js
+  utils/              # Helper functions
+    validators.js
+    formatters.js
+  styles/             # Global styles
+    globals.css
+    variables.css
+```
+
+**Component Patterns:**
+```jsx
+import React, { useState, useEffect, useCallback, useMemo } from 'react';
+import PropTypes from 'prop-types';
+
+// Functional component with hooks
+const UserProfile = ({ userId, onUpdate }) => {
+  const [user, setUser] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+
+  // Memoized expensive calculations
+  const userStats = useMemo(() => {
+    if (!user) return null;
+    return {
+      totalPosts: user.posts?.length || 0,
+      joinedDate: new Date(user.createdAt).toLocaleDateString()
+    };
+  }, [user]);
+
+  // Memoized callbacks to prevent unnecessary re-renders
+  const handleUpdateUser = useCallback(async (updates) => {
+    try {
+      const updatedUser = await updateUser(userId, updates);
+      setUser(updatedUser);
+      onUpdate?.(updatedUser);
+    } catch (err) {
+      setError(err.message);
+    }
+  }, [userId, onUpdate]);
+
+  useEffect(() => {
+    let cancelled = false;
+
+    const fetchUser = async () => {
+      try {
+        setLoading(true);
+        const userData = await getUserById(userId);
+        if (!cancelled) {
+          setUser(userData);
+        }
+      } catch (err) {
+        if (!cancelled) {
+          setError(err.message);
+        }
+      } finally {
+        if (!cancelled) {
+          setLoading(false);
+        }
+      }
+    };
+
+    fetchUser();
+
+    return () => {
+      cancelled = true;
+    };
+  }, [userId]);
+
+  if (loading) return <LoadingSpinner />;
+  if (error) return <ErrorMessage message={error} />;
+  if (!user) return <NotFound />;
+
+  return (
+    <div className="user-profile">
+      <ProfileHeader user={user} stats={userStats} />
+      <ProfileContent user={user} onUpdate={handleUpdateUser} />
+    </div>
+  );
+};
+
+UserProfile.propTypes = {
+  userId: PropTypes.string.isRequired,
+  onUpdate: PropTypes.func
+};
+
+export default React.memo(UserProfile);
+```
+
+**Custom Hooks Pattern:**
+```jsx
+import { useState, useEffect, useCallback } from 'react';
+
+// Generic API hook
+export const useApi = (url, options = {}) => {
+  const [data, setData] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+
+  const fetchData = useCallback(async () => {
+    try {
+      setLoading(true);
+      setError(null);
+      const response = await fetch(url, options);
+
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
+      }
+
+      const result = await response.json();
+      setData(result);
+    } catch (err) {
+      setError(err.message);
+    } finally {
+      setLoading(false);
+    }
+  }, [url, options]);
+
+  useEffect(() => {
+    fetchData();
+  }, [fetchData]);
+
+  const refetch = useCallback(() => {
+    fetchData();
+  }, [fetchData]);
+
+  return { data, loading, error, refetch };
+};
+
+// Local storage hook
+export const useLocalStorage = (key, initialValue) => {
+  const [storedValue, setStoredValue] = useState(() => {
+    try {
+      const item = window.localStorage.getItem(key);
+      return item ? JSON.parse(item) : initialValue;
+    } catch (error) {
+      console.error(`Error reading localStorage key "${key}":`, error);
+      return initialValue;
+    }
+  });
+
+  const setValue = useCallback((value) => {
+    try {
+      const valueToStore = value instanceof Function ? value(storedValue) : value;
+      setStoredValue(valueToStore);
+      window.localStorage.setItem(key, JSON.stringify(valueToStore));
+    } catch (error) {
+      console.error(`Error setting localStorage key "${key}":`, error);
+    }
+  }, [key, storedValue]);
+
+  return [storedValue, setValue];
+};
+```
+
+**Context Pattern:**
+```jsx
+import React, { createContext, useContext, useReducer, useCallback } from 'react';
+
+// State and actions
+const initialState = {
+  user: null,
+  isAuthenticated: false,
+  loading: false,
+  error: null
+};
+
+const authReducer = (state, action) => {
+  switch (action.type) {
+    case 'LOGIN_START':
+      return { ...state, loading: true, error: null };
+    case 'LOGIN_SUCCESS':
+      return {
+        ...state,
+        user: action.payload,
+        isAuthenticated: true,
+        loading: false,
+        error: null
+      };
+    case 'LOGIN_FAILURE':
+      return {
+        ...state,
+        user: null,
+        isAuthenticated: false,
+        loading: false,
+        error: action.payload
+      };
+    case 'LOGOUT':
+      return initialState;
+    default:
+      return state;
+  }
+};
+
+// Context creation
+const AuthContext = createContext();
+
+// Provider component
+export const AuthProvider = ({ children }) => {
+  const [state, dispatch] = useReducer(authReducer, initialState);
+
+  const login = useCallback(async (credentials) => {
+    dispatch({ type: 'LOGIN_START' });
+    try {
+      const user = await authService.login(credentials);
+      dispatch({ type: 'LOGIN_SUCCESS', payload: user });
+      return user;
+    } catch (error) {
+      dispatch({ type: 'LOGIN_FAILURE', payload: error.message });
+      throw error;
+    }
+  }, []);
+
+  const logout = useCallback(() => {
+    authService.logout();
+    dispatch({ type: 'LOGOUT' });
+  }, []);
+
+  const value = {
+    ...state,
+    login,
+    logout
+  };
+
+  return (
+    <AuthContext.Provider value={value}>
+      {children}
+    </AuthContext.Provider>
+  );
+};
+
+// Custom hook for using auth context
+export const useAuth = () => {
+  const context = useContext(AuthContext);
+  if (!context) {
+    throw new Error('useAuth must be used within an AuthProvider');
+  }
+  return context;
+};
+```
+
+**Testing with React Testing Library:**
+```jsx
+import React from 'react';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { jest } from '@jest/globals';
+import UserProfile from '../UserProfile';
+import * as api from '../../services/api';
+
+// Mock the API module
+jest.mock('../../services/api');
+
+describe('UserProfile', () => {
+  const mockUser = {
+    id: '123',
+    name: 'John Doe',
+    email: 'john@example.com',
+    posts: [{ id: 1, title: 'Test Post' }]
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  test('renders user profile after loading', async () => {
+    api.getUserById.mockResolvedValue(mockUser);
+
+    render(<UserProfile userId="123" />);
+
+    // Check loading state
+    expect(screen.getByTestId('loading-spinner')).toBeInTheDocument();
+
+    // Wait for user data to load
+    await waitFor(() => {
+      expect(screen.getByText('John Doe')).toBeInTheDocument();
+    });
+
+    expect(screen.getByText('john@example.com')).toBeInTheDocument();
+    expect(screen.getByText('1 Posts')).toBeInTheDocument();
+  });
+
+  test('handles update user interaction', async () => {
+    const user = userEvent.setup();
+    const onUpdate = jest.fn();
+
+    api.getUserById.mockResolvedValue(mockUser);
+    api.updateUser.mockResolvedValue({ ...mockUser, name: 'Jane Doe' });
+
+    render(<UserProfile userId="123" onUpdate={onUpdate} />);
+
+    await waitFor(() => {
+      expect(screen.getByText('John Doe')).toBeInTheDocument();
+    });
+
+    const editButton = screen.getByRole('button', { name: /edit/i });
+    await user.click(editButton);
+
+    const nameInput = screen.getByDisplayValue('John Doe');
+    await user.clear(nameInput);
+    await user.type(nameInput, 'Jane Doe');
+
+    const saveButton = screen.getByRole('button', { name: /save/i });
+    await user.click(saveButton);
+
+    await waitFor(() => {
+      expect(onUpdate).toHaveBeenCalledWith({ ...mockUser, name: 'Jane Doe' });
+    });
+  });
+
+  test('displays error message on API failure', async () => {
+    api.getUserById.mockRejectedValue(new Error('Network error'));
+
+    render(<UserProfile userId="123" />);
+
+    await waitFor(() => {
+      expect(screen.getByText(/network error/i)).toBeInTheDocument();
+    });
+  });
+});
+```
+
+**Performance Optimization:**
+```jsx
+import React, { memo, lazy, Suspense } from 'react';
+
+// Lazy loading for code splitting
+const LazyUserProfile = lazy(() => import('./UserProfile'));
+const LazyUserSettings = lazy(() => import('./UserSettings'));
+
+// Memoized component to prevent unnecessary re-renders
+const UserCard = memo(({ user, onUpdate }) => {
+  return (
+    <div className="user-card">
+      <h3>{user.name}</h3>
+      <p>{user.email}</p>
+      <button onClick={() => onUpdate(user.id)}>
+        Update
+      </button>
+    </div>
+  );
+});
+
+// Main app with lazy loading
+const App = () => {
+  return (
+    <div className="app">
+      <Suspense fallback={<div>Loading...</div>}>
+        <Routes>
+          <Route path="/profile" element={<LazyUserProfile />} />
+          <Route path="/settings" element={<LazyUserSettings />} />
+        </Routes>
+      </Suspense>
+    </div>
+  );
+};
+```
+
+**State Management with Zustand:**
+```jsx
+import { create } from 'zustand';
+import { devtools, persist } from 'zustand/middleware';
+
+const useUserStore = create(
+  devtools(
+    persist(
+      (set, get) => ({
+        users: [],
+        currentUser: null,
+        loading: false,
+
+        fetchUsers: async () => {
+          set({ loading: true });
+          try {
+            const users = await api.getUsers();
+            set({ users, loading: false });
+          } catch (error) {
+            set({ loading: false });
+            throw error;
+          }
+        },
+
+        setCurrentUser: (user) => set({ currentUser: user }),
+
+        updateUser: async (userId, updates) => {
+          const updatedUser = await api.updateUser(userId, updates);
+          set((state) => ({
+            users: state.users.map((user) =>
+              user.id === userId ? updatedUser : user
+            ),
+            currentUser: state.currentUser?.id === userId ? updatedUser : state.currentUser
+          }));
+          return updatedUser;
+        }
+      }),
+      { name: 'user-store' }
+    )
+  )
+);
+
+// Usage in component
+const UserList = () => {
+  const { users, loading, fetchUsers } = useUserStore();
+
+  useEffect(() => {
+    fetchUsers();
+  }, [fetchUsers]);
+
+  if (loading) return <LoadingSpinner />;
+
+  return (
+    <div>
+      {users.map((user) => (
+        <UserCard key={user.id} user={user} />
+      ))}
+    </div>
+  );
+};
+```
+
+
+  hooks/              # Custom hooks
+    useApi.js
+    useLocalStorage.js
+    useAuth.js
+  context/            # React context providers
+    AuthContext.jsx
+    ThemeContext.jsx
+  services/           # API services
+    api.js
+    auth.js
+  utils/              # Helper functions
+    validators.js
+    formatters.js
+  styles/             # Global styles
+    globals.css
+    variables.css
+```
+
+**Component Patterns:**
+```jsx
+import React, { useState, useEffect, useCallback, useMemo } from 'react';
+import PropTypes from 'prop-types';
+
+// Functional component with hooks
+const UserProfile = ({ userId, onUpdate }) => {
+  const [user, setUser] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+
+  // Memoized expensive calculations
+  const userStats = useMemo(() => {
+    if (!user) return null;
+    return {
+      totalPosts: user.posts?.length || 0,
+      joinedDate: new Date(user.createdAt).toLocaleDateString()
+    };
+  }, [user]);
+
+  // Memoized callbacks to prevent unnecessary re-renders
+  const handleUpdateUser = useCallback(async (updates) => {
+    try {
+      const updatedUser = await updateUser(userId, updates);
+      setUser(updatedUser);
+      onUpdate?.(updatedUser);
+    } catch (err) {
+      setError(err.message);
+    }
+  }, [userId, onUpdate]);
+
+  useEffect(() => {
+    let cancelled = false;
+
+    const fetchUser = async () => {
+      try {
+        setLoading(true);
+        const userData = await getUserById(userId);
+        if (!cancelled) {
+          setUser(userData);
+        }
+      } catch (err) {
+        if (!cancelled) {
+          setError(err.message);
+        }
+      } finally {
+        if (!cancelled) {
+          setLoading(false);
+        }
+      }
+    };
+
+    fetchUser();
+
+    return () => {
+      cancelled = true;
+    };
+  }, [userId]);
+
+  if (loading) return <LoadingSpinner />;
+  if (error) return <ErrorMessage message={error} />;
+  if (!user) return <NotFound />;
+
+  return (
+    <div className="user-profile">
+      <ProfileHeader user={user} stats={userStats} />
+      <ProfileContent user={user} onUpdate={handleUpdateUser} />
+    </div>
+  );
+};
+
+UserProfile.propTypes = {
+  userId: PropTypes.string.isRequired,
+  onUpdate: PropTypes.func
+};
+
+export default React.memo(UserProfile);
+```
+
+**Custom Hooks Pattern:**
+```jsx
+import { useState, useEffect, useCallback } from 'react';
+
+// Generic API hook
+export const useApi = (url, options = {}) => {
+  const [data, setData] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+
+  const fetchData = useCallback(async () => {
+    try {
+      setLoading(true);
+      setError(null);
+      const response = await fetch(url, options);
+
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
+      }
+
+      const result = await response.json();
+      setData(result);
+    } catch (err) {
+      setError(err.message);
+    } finally {
+      setLoading(false);
+    }
+  }, [url, options]);
+
+  useEffect(() => {
+    fetchData();
+  }, [fetchData]);
+
+  const refetch = useCallback(() => {
+    fetchData();
+  }, [fetchData]);
+
+  return { data, loading, error, refetch };
+};
+
+// Local storage hook
+export const useLocalStorage = (key, initialValue) => {
+  const [storedValue, setStoredValue] = useState(() => {
+    try {
+      const item = window.localStorage.getItem(key);
+      return item ? JSON.parse(item) : initialValue;
+    } catch (error) {
+      console.error(`Error reading localStorage key "${key}":`, error);
+      return initialValue;
+    }
+  });
+
+  const setValue = useCallback((value) => {
+    try {
+      const valueToStore = value instanceof Function ? value(storedValue) : value;
+      setStoredValue(valueToStore);
+      window.localStorage.setItem(key, JSON.stringify(valueToStore));
+    } catch (error) {
+      console.error(`Error setting localStorage key "${key}":`, error);
+    }
+  }, [key, storedValue]);
+
+  return [storedValue, setValue];
+};
+```
+
+**Context Pattern:**
+```jsx
+import React, { createContext, useContext, useReducer, useCallback } from 'react';
+
+// State and actions
+const initialState = {
+  user: null,
+  isAuthenticated: false,
+  loading: false,
+  error: null
+};
+
+const authReducer = (state, action) => {
+  switch (action.type) {
+    case 'LOGIN_START':
+      return { ...state, loading: true, error: null };
+    case 'LOGIN_SUCCESS':
+      return {
+        ...state,
+        user: action.payload,
+        isAuthenticated: true,
+        loading: false,
+        error: null
+      };
+    case 'LOGIN_FAILURE':
+      return {
+        ...state,
+        user: null,
+        isAuthenticated: false,
+        loading: false,
+        error: action.payload
+      };
+    case 'LOGOUT':
+      return initialState;
+    default:
+      return state;
+  }
+};
+
+// Context creation
+const AuthContext = createContext();
+
+// Provider component
+export const AuthProvider = ({ children }) => {
+  const [state, dispatch] = useReducer(authReducer, initialState);
+
+  const login = useCallback(async (credentials) => {
+    dispatch({ type: 'LOGIN_START' });
+    try {
+      const user = await authService.login(credentials);
+      dispatch({ type: 'LOGIN_SUCCESS', payload: user });
+      return user;
+    } catch (error) {
+      dispatch({ type: 'LOGIN_FAILURE', payload: error.message });
+      throw error;
+    }
+  }, []);
+
+  const logout = useCallback(() => {
+    authService.logout();
+    dispatch({ type: 'LOGOUT' });
+  }, []);
+
+  const value = {
+    ...state,
+    login,
+    logout
+  };
+
+  return (
+    <AuthContext.Provider value={value}>
+      {children}
+    </AuthContext.Provider>
+  );
+};
+
+// Custom hook for using auth context
+export const useAuth = () => {
+  const context = useContext(AuthContext);
+  if (!context) {
+    throw new Error('useAuth must be used within an AuthProvider');
+  }
+  return context;
+};
+```
+
+**Testing with React Testing Library:**
+```jsx
+import React from 'react';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { jest } from '@jest/globals';
+import UserProfile from '../UserProfile';
+import * as api from '../../services/api';
+
+// Mock the API module
+jest.mock('../../services/api');
+
+describe('UserProfile', () => {
+  const mockUser = {
+    id: '123',
+    name: 'John Doe',
+    email: 'john@example.com',
+    posts: [{ id: 1, title: 'Test Post' }]
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  test('renders user profile after loading', async () => {
+    api.getUserById.mockResolvedValue(mockUser);
+
+    render(<UserProfile userId="123" />);
+
+    // Check loading state
+    expect(screen.getByTestId('loading-spinner')).toBeInTheDocument();
+
+    // Wait for user data to load
+    await waitFor(() => {
+      expect(screen.getByText('John Doe')).toBeInTheDocument();
+    });
+
+    expect(screen.getByText('john@example.com')).toBeInTheDocument();
+    expect(screen.getByText('1 Posts')).toBeInTheDocument();
+  });
+
+  test('handles update user interaction', async () => {
+    const user = userEvent.setup();
+    const onUpdate = jest.fn();
+
+    api.getUserById.mockResolvedValue(mockUser);
+    api.updateUser.mockResolvedValue({ ...mockUser, name: 'Jane Doe' });
+
+    render(<UserProfile userId="123" onUpdate={onUpdate} />);
+
+    await waitFor(() => {
+      expect(screen.getByText('John Doe')).toBeInTheDocument();
+    });
+
+    const editButton = screen.getByRole('button', { name: /edit/i });
+    await user.click(editButton);
+
+    const nameInput = screen.getByDisplayValue('John Doe');
+    await user.clear(nameInput);
+    await user.type(nameInput, 'Jane Doe');
+
+    const saveButton = screen.getByRole('button', { name: /save/i });
+    await user.click(saveButton);
+
+    await waitFor(() => {
+      expect(onUpdate).toHaveBeenCalledWith({ ...mockUser, name: 'Jane Doe' });
+    });
+  });
+
+  test('displays error message on API failure', async () => {
+    api.getUserById.mockRejectedValue(new Error('Network error'));
+
+    render(<UserProfile userId="123" />);
+
+    await waitFor(() => {
+      expect(screen.getByText(/network error/i)).toBeInTheDocument();
+    });
+  });
+});
+```
+
+**Performance Optimization:**
+```jsx
+import React, { memo, lazy, Suspense } from 'react';
+
+// Lazy loading for code splitting
+const LazyUserProfile = lazy(() => import('./UserProfile'));
+const LazyUserSettings = lazy(() => import('./UserSettings'));
+
+// Memoized component to prevent unnecessary re-renders
+const UserCard = memo(({ user, onUpdate }) => {
+  return (
+    <div className="user-card">
+      <h3>{user.name}</h3>
+      <p>{user.email}</p>
+      <button onClick={() => onUpdate(user.id)}>
+        Update
+      </button>
+    </div>
+  );
+});
+
+// Main app with lazy loading
+const App = () => {
+  return (
+    <div className="app">
+      <Suspense fallback={<div>Loading...</div>}>
+        <Routes>
+          <Route path="/profile" element={<LazyUserProfile />} />
+          <Route path="/settings" element={<LazyUserSettings />} />
+        </Routes>
+      </Suspense>
+    </div>
+  );
+};
+```
+
+**State Management with Zustand:**
+```jsx
+import { create } from 'zustand';
+import { devtools, persist } from 'zustand/middleware';
+
+const useUserStore = create(
+  devtools(
+    persist(
+      (set, get) => ({
+        users: [],
+        currentUser: null,
+        loading: false,
+
+        fetchUsers: async () => {
+          set({ loading: true });
+          try {
+            const users = await api.getUsers();
+            set({ users, loading: false });
+          } catch (error) {
+            set({ loading: false });
+            throw error;
+          }
+        },
+
+        setCurrentUser: (user) => set({ currentUser: user }),
+
+        updateUser: async (userId, updates) => {
+          const updatedUser = await api.updateUser(userId, updates);
+          set((state) => ({
+            users: state.users.map((user) =>
+              user.id === userId ? updatedUser : user
+            ),
+            currentUser: state.currentUser?.id === userId ? updatedUser : state.currentUser
+          }));
+          return updatedUser;
+        }
+      }),
+      { name: 'user-store' }
+    )
+  )
+);
+
+// Usage in component
+const UserList = () => {
+  const { users, loading, fetchUsers } = useUserStore();
+
+  useEffect(() => {
+    fetchUsers();
+  }, [fetchUsers]);
+
+  if (loading) return <LoadingSpinner />;
+
+  return (
+    <div>
+      {users.map((user) => (
+        <UserCard key={user.id} user={user} />
+      ))}
+    </div>
+  );
+};
+```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "claude-flow-novice",
-  "version": "1.5.0",
+  "version": "1.5.1",
   "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/CLAUDE.md

@@ -174,7 +174,8 @@ claude mcp add claude-flow-novice npx claude-flow-novice mcp start
 ## Essential Commands
 - `npx claude-flow-novice status` - System health
 - `npx claude-flow-novice --help` - Available commands
-- `/swarm`, `/sparc`, `/hooks` - Slash commands (auto-discovered)
+- `/fullstack "goal"` - Launch full-stack development team with consensus validation
+- `/swarm`, `/sparc`, `/hooks` - Other slash commands (auto-discovered)
 
 ## DEVELOPMENT FLOW 
   1. Execute - Primary swarm (3-8 agents) produces deliverables with confidence score