trinity-method-sdk 2.1.0 → 2.2.1

package/dist/templates/source/react-CLAUDE.md.template

@@ -1,513 +1,513 @@
-# CLAUDE.md - React Technology-Specific Rules
-## {{PROJECT_NAME}} - React Implementation
-
-**Framework:** React
-**Language:** JavaScript/TypeScript
-**Source Directory:** {{SOURCE_DIR}}
-**Build Tool:** Vite/Webpack/Create React App
-
----
-
-## Technology Stack Behavioral Modifications
-
-### React-Specific Requirements
-- **Component Patterns**: Use functional components with hooks
-- **State Management**: Implement appropriate state solution (Context, Redux, Zustand, Recoil)
-- **Performance Optimization**: Use React.memo, useMemo, useCallback appropriately
-- **Code Splitting**: Implement lazy loading for route-based code splitting
-- **TypeScript**: Prefer TypeScript for type safety
-
-### Modern React Practices
-- **Hooks**: Use built-in and custom hooks for logic reuse
-- **Composition**: Favor composition over inheritance
-- **Pure Components**: Keep components pure and predictable
-- **Error Boundaries**: Implement error boundaries for graceful failures
-- **Suspense**: Use Suspense for async operations
-
----
-
-## Technology Debugging Standards
-
-### React Debugging Framework
-```javascript
-// Standard debugging format for React applications
-const createDebugLogger = (componentName) => {
-    return {
-        render: (props, state) => {
-            if (process.env.NODE_ENV === 'development') {
-                console.log(`[RENDER] ${componentName}`, {
-                    props: props,
-                    state: state,
-                    timestamp: new Date().toISOString()
-                });
-            }
-        },
-        effect: (effectName, dependencies) => {
-            if (process.env.NODE_ENV === 'development') {
-                console.log(`[EFFECT] ${componentName}.${effectName}`, {
-                    dependencies: dependencies,
-                    timestamp: new Date().toISOString()
-                });
-            }
-        },
-        error: (error, errorInfo) => {
-            console.error(`[ERROR] ${componentName}`, {
-                error: error.message,
-                componentStack: errorInfo?.componentStack,
-                timestamp: new Date().toISOString()
-            });
-        }
-    };
-};
-
-// Usage in component
-const UserProfile = ({ userId }) => {
-    const logger = createDebugLogger('UserProfile');
-
-    useEffect(() => {
-        logger.effect('fetchUser', [userId]);
-
-        fetchUser(userId)
-            .then(user => logger.render({ userId }, user))
-            .catch(error => logger.error(error, {}));
-    }, [userId]);
-
-    logger.render({ userId }, null);
-
-    return <div>Profile</div>;
-};
-```
-
-### React DevTools Integration
-```javascript
-// Custom hooks with DevTools debugging
-function useDebugValue(value, format = (v) => v) {
-    useDebugValue(format(value));
-    return value;
-}
-
-// Usage
-function useUser(userId) {
-    const user = useSWR(`/api/users/${userId}`);
-    useDebugValue(user, u => u.data ? `User: ${u.data.name}` : 'Loading...');
-    return user;
-}
-```
-
----
-
-## Performance Optimization Rules
-
-### React Performance Monitoring
-```javascript
-// Performance measurement for components
-import { Profiler } from 'react';
-
-function onRenderCallback(
-    id, // the "id" prop of the Profiler tree that has just committed
-    phase, // either "mount" or "update"
-    actualDuration, // time spent rendering the committed update
-    baseDuration, // estimated time to render the entire subtree
-    startTime, // when React began rendering this update
-    commitTime // when React committed this update
-) {
-    console.log('[PERF]', {
-        component: id,
-        phase: phase,
-        actualDuration: `${actualDuration.toFixed(2)}ms`,
-        baseDuration: `${baseDuration.toFixed(2)}ms`,
-        timestamp: new Date(commitTime).toISOString()
-    });
-}
-
-// Usage
-<Profiler id="UserList" onRender={onRenderCallback}>
-    <UserList />
-</Profiler>
-```
-
-### Memoization Patterns
-```javascript
-// Optimize expensive computations
-const ExpensiveComponent = ({ data }) => {
-    const processedData = useMemo(() => {
-        console.log('[MEMO] Processing data...');
-        return expensiveOperation(data);
-    }, [data]);
-
-    const handleClick = useCallback(() => {
-        console.log('[CALLBACK] Handler executed');
-        // Handle click
-    }, []);
-
-    return <div onClick={handleClick}>{processedData}</div>;
-};
-
-// Memoize entire component
-export default React.memo(ExpensiveComponent);
-```
-
----
-
-## Security Best Practices
-
-### XSS Prevention
-```javascript
-// Safe HTML rendering
-import DOMPurify from 'dompurify';
-
-function SafeHTML({ html }) {
-    const sanitizedHTML = DOMPurify.sanitize(html);
-
-    return <div dangerouslySetInnerHTML={{ __html: sanitizedHTML }} />;
-}
-```
-
-### Input Validation
-```javascript
-// Form validation patterns
-const validateInput = (value, rules) => {
-    const errors = [];
-
-    if (rules.required && !value) {
-        errors.push('Field is required');
-    }
-
-    if (rules.email && value && !/^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/.test(value)) {
-        errors.push('Invalid email format');
-    }
-
-    if (rules.minLength && value && value.length < rules.minLength) {
-        errors.push(`Minimum length is ${rules.minLength}`);
-    }
-
-    return errors;
-};
-```
-
----
-
-## Testing Requirements
-
-### Jest + React Testing Library
-```javascript
-// Component testing
-import { render, screen, fireEvent, waitFor } from '@testing-library/react';
-import '@testing-library/jest-dom';
-import UserProfile from './UserProfile';
-
-describe('UserProfile', () => {
-    it('renders user information', async () => {
-        render(<UserProfile userId="123" />);
-
-        await waitFor(() => {
-            expect(screen.getByText(/John Doe/i)).toBeInTheDocument();
-        });
-    });
-
-    it('handles user interaction', async () => {
-        const handleClick = jest.fn();
-        render(<UserProfile userId="123" onEdit={handleClick} />);
-
-        fireEvent.click(screen.getByRole('button', { name: /edit/i }));
-
-        expect(handleClick).toHaveBeenCalledTimes(1);
-    });
-});
-```
-
-### Hook Testing
-```javascript
-// Custom hook testing
-import { renderHook, act } from '@testing-library/react';
-import { useCounter } from './useCounter';
-
-describe('useCounter', () => {
-    it('increments counter', () => {
-        const { result } = renderHook(() => useCounter(0));
-
-        act(() => {
-            result.current.increment();
-        });
-
-        expect(result.current.count).toBe(1);
-    });
-});
-```
-
----
-
-## Framework Best Practices
-
-### Component Structure
-```javascript
-// Standard component structure
-import React, { useState, useEffect, useCallback } from 'react';
-import PropTypes from 'prop-types';
-
-const UserProfile = ({ userId, onUpdate }) => {
-    // State declarations
-    const [user, setUser] = useState(null);
-    const [loading, setLoading] = useState(true);
-    const [error, setError] = useState(null);
-
-    // Effects
-    useEffect(() => {
-        fetchUser(userId)
-            .then(setUser)
-            .catch(setError)
-            .finally(() => setLoading(false));
-    }, [userId]);
-
-    // Callbacks
-    const handleUpdate = useCallback(() => {
-        onUpdate(user);
-    }, [user, onUpdate]);
-
-    // Render logic
-    if (loading) return <div>Loading...</div>;
-    if (error) return <div>Error: {error.message}</div>;
-
-    return (
-        <div className="user-profile">
-            <h1>{user.name}</h1>
-            <button onClick={handleUpdate}>Update</button>
-        </div>
-    );
-};
-
-// PropTypes validation
-UserProfile.propTypes = {
-    userId: PropTypes.string.isRequired,
-    onUpdate: PropTypes.func.isRequired
-};
-
-export default UserProfile;
-```
-
-### Custom Hooks
-```javascript
-// Reusable custom hook
-function useFetch(url, options = {}) {
-    const [data, setData] = useState(null);
-    const [loading, setLoading] = useState(true);
-    const [error, setError] = useState(null);
-
-    useEffect(() => {
-        console.log('[HOOK] useFetch', { url, options });
-
-        const abortController = new AbortController();
-
-        fetch(url, { ...options, signal: abortController.signal })
-            .then(res => res.json())
-            .then(setData)
-            .catch(err => {
-                if (err.name !== 'AbortError') {
-                    setError(err);
-                }
-            })
-            .finally(() => setLoading(false));
-
-        return () => abortController.abort();
-    }, [url, JSON.stringify(options)]);
-
-    return { data, loading, error };
-}
-```
-
----
-
-## Error Handling Patterns
-
-### Error Boundaries
-```javascript
-// Error boundary component
-class ErrorBoundary extends React.Component {
-    constructor(props) {
-        super(props);
-        this.state = { hasError: false, error: null };
-    }
-
-    static getDerivedStateFromError(error) {
-        return { hasError: true, error };
-    }
-
-    componentDidCatch(error, errorInfo) {
-        console.error('[ERROR-BOUNDARY]', {
-            error: error.message,
-            componentStack: errorInfo.componentStack,
-            timestamp: new Date().toISOString()
-        });
-
-        // Report to error tracking service
-        // reportError(error, errorInfo);
-    }
-
-    render() {
-        if (this.state.hasError) {
-            return (
-                <div className="error-fallback">
-                    <h1>Something went wrong</h1>
-                    <details>
-                        <summary>Error details</summary>
-                        <pre>{this.state.error?.message}</pre>
-                    </details>
-                </div>
-            );
-        }
-
-        return this.props.children;
-    }
-}
-
-// Usage
-<ErrorBoundary>
-    <App />
-</ErrorBoundary>
-```
-
-### Async Error Handling
-```javascript
-// Safe async operations
-async function safeAsync(operation, errorHandler) {
-    try {
-        return await operation();
-    } catch (error) {
-        console.error('[ASYNC-ERROR]', {
-            error: error.message,
-            stack: error.stack,
-            timestamp: new Date().toISOString()
-        });
-
-        if (errorHandler) {
-            return errorHandler(error);
-        }
-
-        throw error;
-    }
-}
-```
-
----
-
-## Technology-Specific Command References
-
-### Development Commands
-```bash
-# Development
-npm start                               # Start dev server
-npm run dev                             # Alternative dev command
-npm run build                           # Production build
-npm run preview                         # Preview production build
-
-# Type Checking (if TypeScript)
-npm run type-check                      # Check types
-tsc --noEmit                            # TypeScript compilation check
-```
-
-### Testing Commands
-```bash
-# Testing
-npm test                                # Run tests
-npm run test:watch                      # Watch mode
-npm run test:coverage                   # Generate coverage
-npm run test:debug                      # Debug tests
-```
-
----
-
-## State Management Patterns
-
-### Context API
-```javascript
-// Context setup
-const UserContext = React.createContext(null);
-
-export const UserProvider = ({ children }) => {
-    const [user, setUser] = useState(null);
-
-    const login = useCallback(async (credentials) => {
-        const user = await authService.login(credentials);
-        setUser(user);
-    }, []);
-
-    const logout = useCallback(() => {
-        setUser(null);
-    }, []);
-
-    const value = useMemo(
-        () => ({ user, login, logout }),
-        [user, login, logout]
-    );
-
-    return <UserContext.Provider value={value}>{children}</UserContext.Provider>;
-};
-
-export const useUser = () => {
-    const context = useContext(UserContext);
-    if (!context) {
-        throw new Error('useUser must be used within UserProvider');
-    }
-    return context;
-};
-```
-
-### Redux (if applicable)
-```javascript
-// Redux slice
-import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
-
-export const fetchUsers = createAsyncThunk(
-    'users/fetchUsers',
-    async () => {
-        console.log('[REDUX] Fetching users...');
-        const response = await api.getUsers();
-        return response.data;
-    }
-);
-
-const usersSlice = createSlice({
-    name: 'users',
-    initialState: { entities: [], loading: false, error: null },
-    reducers: {},
-    extraReducers: (builder) => {
-        builder
-            .addCase(fetchUsers.pending, (state) => {
-                state.loading = true;
-            })
-            .addCase(fetchUsers.fulfilled, (state, action) => {
-                state.entities = action.payload;
-                state.loading = false;
-            })
-            .addCase(fetchUsers.rejected, (state, action) => {
-                state.error = action.error.message;
-                state.loading = false;
-            });
-    }
-});
-
-export default usersSlice.reducer;
-```
-
----
-
-## Reference to Parent Context
-
-This file extends the Trinity Method protocols defined in `../trinity/CLAUDE.md` and global requirements from `../CLAUDE.md`. React implementations must comply with:
-
-- Trinity Method investigation requirements ([../trinity/CLAUDE.md](../trinity/CLAUDE.md))
-- Global performance baselines ([../trinity/knowledge-base/ARCHITECTURE.md](../trinity/knowledge-base/ARCHITECTURE.md#performance-baseline))
-- Quality gate standards (BAS 6-phase) ([../trinity/CLAUDE.md](../trinity/CLAUDE.md#quality-standards))
-- Crisis management protocols ([../trinity/CLAUDE.md](../trinity/CLAUDE.md#crisis-management))
-
-All React code must implement the debugging frameworks, error handling patterns, and performance monitoring specified in this document.
-
----
-
-**Technology Context**: React Implementation
-**Parent References**:
-- `../CLAUDE.md` - Global project requirements
-- `../trinity/CLAUDE.md` - Trinity Method enforcement
-
-**Last Updated**: {{CURRENT_DATE}}
-**Trinity Version**: {{TRINITY_VERSION}}
+# CLAUDE.md - React Technology-Specific Rules
+## {{PROJECT_NAME}} - React Implementation
+
+**Framework:** React
+**Language:** JavaScript/TypeScript
+**Source Directory:** {{SOURCE_DIR}}
+**Build Tool:** Vite/Webpack/Create React App
+
+---
+
+## Technology Stack Behavioral Modifications
+
+### React-Specific Requirements
+- **Component Patterns**: Use functional components with hooks
+- **State Management**: Implement appropriate state solution (Context, Redux, Zustand, Recoil)
+- **Performance Optimization**: Use React.memo, useMemo, useCallback appropriately
+- **Code Splitting**: Implement lazy loading for route-based code splitting
+- **TypeScript**: Prefer TypeScript for type safety
+
+### Modern React Practices
+- **Hooks**: Use built-in and custom hooks for logic reuse
+- **Composition**: Favor composition over inheritance
+- **Pure Components**: Keep components pure and predictable
+- **Error Boundaries**: Implement error boundaries for graceful failures
+- **Suspense**: Use Suspense for async operations
+
+---
+
+## Technology Debugging Standards
+
+### React Debugging Framework
+```javascript
+// Standard debugging format for React applications
+const createDebugLogger = (componentName) => {
+    return {
+        render: (props, state) => {
+            if (process.env.NODE_ENV === 'development') {
+                console.log(`[RENDER] ${componentName}`, {
+                    props: props,
+                    state: state,
+                    timestamp: new Date().toISOString()
+                });
+            }
+        },
+        effect: (effectName, dependencies) => {
+            if (process.env.NODE_ENV === 'development') {
+                console.log(`[EFFECT] ${componentName}.${effectName}`, {
+                    dependencies: dependencies,
+                    timestamp: new Date().toISOString()
+                });
+            }
+        },
+        error: (error, errorInfo) => {
+            console.error(`[ERROR] ${componentName}`, {
+                error: error.message,
+                componentStack: errorInfo?.componentStack,
+                timestamp: new Date().toISOString()
+            });
+        }
+    };
+};
+
+// Usage in component
+const UserProfile = ({ userId }) => {
+    const logger = createDebugLogger('UserProfile');
+
+    useEffect(() => {
+        logger.effect('fetchUser', [userId]);
+
+        fetchUser(userId)
+            .then(user => logger.render({ userId }, user))
+            .catch(error => logger.error(error, {}));
+    }, [userId]);
+
+    logger.render({ userId }, null);
+
+    return <div>Profile</div>;
+};
+```
+
+### React DevTools Integration
+```javascript
+// Custom hooks with DevTools debugging
+function useDebugValue(value, format = (v) => v) {
+    useDebugValue(format(value));
+    return value;
+}
+
+// Usage
+function useUser(userId) {
+    const user = useSWR(`/api/users/${userId}`);
+    useDebugValue(user, u => u.data ? `User: ${u.data.name}` : 'Loading...');
+    return user;
+}
+```
+
+---
+
+## Performance Optimization Rules
+
+### React Performance Monitoring
+```javascript
+// Performance measurement for components
+import { Profiler } from 'react';
+
+function onRenderCallback(
+    id, // the "id" prop of the Profiler tree that has just committed
+    phase, // either "mount" or "update"
+    actualDuration, // time spent rendering the committed update
+    baseDuration, // estimated time to render the entire subtree
+    startTime, // when React began rendering this update
+    commitTime // when React committed this update
+) {
+    console.log('[PERF]', {
+        component: id,
+        phase: phase,
+        actualDuration: `${actualDuration.toFixed(2)}ms`,
+        baseDuration: `${baseDuration.toFixed(2)}ms`,
+        timestamp: new Date(commitTime).toISOString()
+    });
+}
+
+// Usage
+<Profiler id="UserList" onRender={onRenderCallback}>
+    <UserList />
+</Profiler>
+```
+
+### Memoization Patterns
+```javascript
+// Optimize expensive computations
+const ExpensiveComponent = ({ data }) => {
+    const processedData = useMemo(() => {
+        console.log('[MEMO] Processing data...');
+        return expensiveOperation(data);
+    }, [data]);
+
+    const handleClick = useCallback(() => {
+        console.log('[CALLBACK] Handler executed');
+        // Handle click
+    }, []);
+
+    return <div onClick={handleClick}>{processedData}</div>;
+};
+
+// Memoize entire component
+export default React.memo(ExpensiveComponent);
+```
+
+---
+
+## Security Best Practices
+
+### XSS Prevention
+```javascript
+// Safe HTML rendering
+import DOMPurify from 'dompurify';
+
+function SafeHTML({ html }) {
+    const sanitizedHTML = DOMPurify.sanitize(html);
+
+    return <div dangerouslySetInnerHTML={{ __html: sanitizedHTML }} />;
+}
+```
+
+### Input Validation
+```javascript
+// Form validation patterns
+const validateInput = (value, rules) => {
+    const errors = [];
+
+    if (rules.required && !value) {
+        errors.push('Field is required');
+    }
+
+    if (rules.email && value && !/^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/.test(value)) {
+        errors.push('Invalid email format');
+    }
+
+    if (rules.minLength && value && value.length < rules.minLength) {
+        errors.push(`Minimum length is ${rules.minLength}`);
+    }
+
+    return errors;
+};
+```
+
+---
+
+## Testing Requirements
+
+### Jest + React Testing Library
+```javascript
+// Component testing
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import UserProfile from './UserProfile';
+
+describe('UserProfile', () => {
+    it('renders user information', async () => {
+        render(<UserProfile userId="123" />);
+
+        await waitFor(() => {
+            expect(screen.getByText(/John Doe/i)).toBeInTheDocument();
+        });
+    });
+
+    it('handles user interaction', async () => {
+        const handleClick = jest.fn();
+        render(<UserProfile userId="123" onEdit={handleClick} />);
+
+        fireEvent.click(screen.getByRole('button', { name: /edit/i }));
+
+        expect(handleClick).toHaveBeenCalledTimes(1);
+    });
+});
+```
+
+### Hook Testing
+```javascript
+// Custom hook testing
+import { renderHook, act } from '@testing-library/react';
+import { useCounter } from './useCounter';
+
+describe('useCounter', () => {
+    it('increments counter', () => {
+        const { result } = renderHook(() => useCounter(0));
+
+        act(() => {
+            result.current.increment();
+        });
+
+        expect(result.current.count).toBe(1);
+    });
+});
+```
+
+---
+
+## Framework Best Practices
+
+### Component Structure
+```javascript
+// Standard component structure
+import React, { useState, useEffect, useCallback } from 'react';
+import PropTypes from 'prop-types';
+
+const UserProfile = ({ userId, onUpdate }) => {
+    // State declarations
+    const [user, setUser] = useState(null);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(null);
+
+    // Effects
+    useEffect(() => {
+        fetchUser(userId)
+            .then(setUser)
+            .catch(setError)
+            .finally(() => setLoading(false));
+    }, [userId]);
+
+    // Callbacks
+    const handleUpdate = useCallback(() => {
+        onUpdate(user);
+    }, [user, onUpdate]);
+
+    // Render logic
+    if (loading) return <div>Loading...</div>;
+    if (error) return <div>Error: {error.message}</div>;
+
+    return (
+        <div className="user-profile">
+            <h1>{user.name}</h1>
+            <button onClick={handleUpdate}>Update</button>
+        </div>
+    );
+};
+
+// PropTypes validation
+UserProfile.propTypes = {
+    userId: PropTypes.string.isRequired,
+    onUpdate: PropTypes.func.isRequired
+};
+
+export default UserProfile;
+```
+
+### Custom Hooks
+```javascript
+// Reusable custom hook
+function useFetch(url, options = {}) {
+    const [data, setData] = useState(null);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(null);
+
+    useEffect(() => {
+        console.log('[HOOK] useFetch', { url, options });
+
+        const abortController = new AbortController();
+
+        fetch(url, { ...options, signal: abortController.signal })
+            .then(res => res.json())
+            .then(setData)
+            .catch(err => {
+                if (err.name !== 'AbortError') {
+                    setError(err);
+                }
+            })
+            .finally(() => setLoading(false));
+
+        return () => abortController.abort();
+    }, [url, JSON.stringify(options)]);
+
+    return { data, loading, error };
+}
+```
+
+---
+
+## Error Handling Patterns
+
+### Error Boundaries
+```javascript
+// Error boundary component
+class ErrorBoundary extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = { hasError: false, error: null };
+    }
+
+    static getDerivedStateFromError(error) {
+        return { hasError: true, error };
+    }
+
+    componentDidCatch(error, errorInfo) {
+        console.error('[ERROR-BOUNDARY]', {
+            error: error.message,
+            componentStack: errorInfo.componentStack,
+            timestamp: new Date().toISOString()
+        });
+
+        // Report to error tracking service
+        // reportError(error, errorInfo);
+    }
+
+    render() {
+        if (this.state.hasError) {
+            return (
+                <div className="error-fallback">
+                    <h1>Something went wrong</h1>
+                    <details>
+                        <summary>Error details</summary>
+                        <pre>{this.state.error?.message}</pre>
+                    </details>
+                </div>
+            );
+        }
+
+        return this.props.children;
+    }
+}
+
+// Usage
+<ErrorBoundary>
+    <App />
+</ErrorBoundary>
+```
+
+### Async Error Handling
+```javascript
+// Safe async operations
+async function safeAsync(operation, errorHandler) {
+    try {
+        return await operation();
+    } catch (error) {
+        console.error('[ASYNC-ERROR]', {
+            error: error.message,
+            stack: error.stack,
+            timestamp: new Date().toISOString()
+        });
+
+        if (errorHandler) {
+            return errorHandler(error);
+        }
+
+        throw error;
+    }
+}
+```
+
+---
+
+## Technology-Specific Command References
+
+### Development Commands
+```bash
+# Development
+npm start                               # Start dev server
+npm run dev                             # Alternative dev command
+npm run build                           # Production build
+npm run preview                         # Preview production build
+
+# Type Checking (if TypeScript)
+npm run type-check                      # Check types
+tsc --noEmit                            # TypeScript compilation check
+```
+
+### Testing Commands
+```bash
+# Testing
+npm test                                # Run tests
+npm run test:watch                      # Watch mode
+npm run test:coverage                   # Generate coverage
+npm run test:debug                      # Debug tests
+```
+
+---
+
+## State Management Patterns
+
+### Context API
+```javascript
+// Context setup
+const UserContext = React.createContext(null);
+
+export const UserProvider = ({ children }) => {
+    const [user, setUser] = useState(null);
+
+    const login = useCallback(async (credentials) => {
+        const user = await authService.login(credentials);
+        setUser(user);
+    }, []);
+
+    const logout = useCallback(() => {
+        setUser(null);
+    }, []);
+
+    const value = useMemo(
+        () => ({ user, login, logout }),
+        [user, login, logout]
+    );
+
+    return <UserContext.Provider value={value}>{children}</UserContext.Provider>;
+};
+
+export const useUser = () => {
+    const context = useContext(UserContext);
+    if (!context) {
+        throw new Error('useUser must be used within UserProvider');
+    }
+    return context;
+};
+```
+
+### Redux (if applicable)
+```javascript
+// Redux slice
+import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
+
+export const fetchUsers = createAsyncThunk(
+    'users/fetchUsers',
+    async () => {
+        console.log('[REDUX] Fetching users...');
+        const response = await api.getUsers();
+        return response.data;
+    }
+);
+
+const usersSlice = createSlice({
+    name: 'users',
+    initialState: { entities: [], loading: false, error: null },
+    reducers: {},
+    extraReducers: (builder) => {
+        builder
+            .addCase(fetchUsers.pending, (state) => {
+                state.loading = true;
+            })
+            .addCase(fetchUsers.fulfilled, (state, action) => {
+                state.entities = action.payload;
+                state.loading = false;
+            })
+            .addCase(fetchUsers.rejected, (state, action) => {
+                state.error = action.error.message;
+                state.loading = false;
+            });
+    }
+});
+
+export default usersSlice.reducer;
+```
+
+---
+
+## Reference to Parent Context
+
+This file extends the Trinity Method protocols defined in `../.claude/trinity/CLAUDE.md` and global requirements from `../CLAUDE.md`. React implementations must comply with:
+
+- Trinity Method investigation requirements ([../.claude/trinity/CLAUDE.md](../.claude/trinity/CLAUDE.md))
+- Global performance baselines ([../.claude/trinity/knowledge-base/ARCHITECTURE.md](../.claude/trinity/knowledge-base/ARCHITECTURE.md#performance-baseline))
+- Quality gate standards (BAS 6-phase) ([../.claude/trinity/CLAUDE.md](../.claude/trinity/CLAUDE.md#quality-standards))
+- Crisis management protocols ([../.claude/trinity/CLAUDE.md](../.claude/trinity/CLAUDE.md#crisis-management))
+
+All React code must implement the debugging frameworks, error handling patterns, and performance monitoring specified in this document.
+
+---
+
+**Technology Context**: React Implementation
+**Parent References**:
+- `../CLAUDE.md` - Global project requirements
+- `../.claude/trinity/CLAUDE.md` - Trinity Method enforcement
+
+**Last Updated**: {{CURRENT_DATE}}
+**Trinity Version**: {{TRINITY_VERSION}}