start-vibing 2.0.9 → 2.0.11

package/template/.claude/skills/react-patterns/SKILL.md

@@ -1,376 +1,389 @@
----
-name: react-patterns
-description: Modern React patterns for React 19. Hooks, state management, component composition, performance optimization. Use when building React components.
-allowed-tools: Read, Write, Edit, Grep, Glob
----
-
-# React Patterns - Modern Component Architecture
-
-## Purpose
-
-Expert guidance for React 19 patterns:
-
-- **Component Design** - Composition over inheritance
-- **State Management** - Local, context, and server state
-- **Performance** - Memoization and optimization
-- **Hooks** - Built-in and custom hooks
-- **TypeScript** - Proper typing patterns
-
----
-
-## Component Patterns
-
-### 1. Compound Components
-
-```tsx
-// Composable API for complex UIs
-interface TabsContextValue {
-  activeTab: string;
-  setActiveTab: (id: string) => void;
-}
-
-const TabsContext = createContext<TabsContextValue | null>(null);
-
-function Tabs({ children, defaultTab }: { children: ReactNode; defaultTab: string }) {
-  const [activeTab, setActiveTab] = useState(defaultTab);
-
-  return (
-    <TabsContext.Provider value={{ activeTab, setActiveTab }}>
-      <div className="tabs">{children}</div>
-    </TabsContext.Provider>
-  );
-}
-
-function TabList({ children }: { children: ReactNode }) {
-  return <div className="tab-list" role="tablist">{children}</div>;
-}
-
-function Tab({ id, children }: { id: string; children: ReactNode }) {
-  const context = useContext(TabsContext);
-  if (!context) throw new Error('Tab must be used within Tabs');
-
-  return (
-    <button
-      role="tab"
-      aria-selected={context.activeTab === id}
-      onClick={() => context.setActiveTab(id)}
-    >
-      {children}
-    </button>
-  );
-}
-
-function TabPanel({ id, children }: { id: string; children: ReactNode }) {
-  const context = useContext(TabsContext);
-  if (!context) throw new Error('TabPanel must be used within Tabs');
-
-  if (context.activeTab !== id) return null;
-  return <div role="tabpanel">{children}</div>;
-}
-
-// Usage
-<Tabs defaultTab="home">
-  <TabList>
-    <Tab id="home">Home</Tab>
-    <Tab id="settings">Settings</Tab>
-  </TabList>
-  <TabPanel id="home">Home content</TabPanel>
-  <TabPanel id="settings">Settings content</TabPanel>
-</Tabs>
-```
-
-### 2. Render Props Pattern
-
-```tsx
-interface MousePosition {
-  x: number;
-  y: number;
-}
-
-function MouseTracker({ render }: { render: (pos: MousePosition) => ReactNode }) {
-  const [position, setPosition] = useState({ x: 0, y: 0 });
-
-  useEffect(() => {
-    const handleMove = (e: MouseEvent) => {
-      setPosition({ x: e.clientX, y: e.clientY });
-    };
-    window.addEventListener('mousemove', handleMove);
-    return () => window.removeEventListener('mousemove', handleMove);
-  }, []);
-
-  return <>{render(position)}</>;
-}
-
-// Usage
-<MouseTracker render={({ x, y }) => <div>Mouse: {x}, {y}</div>} />
-```
-
-### 3. HOC (Higher-Order Component)
-
-```tsx
-function withAuth<P extends object>(Component: ComponentType<P>) {
-  return function AuthenticatedComponent(props: P) {
-    const { user, isLoading } = useAuth();
-
-    if (isLoading) return <Loading />;
-    if (!user) return <Redirect to="/login" />;
-
-    return <Component {...props} />;
-  };
-}
-
-// Usage
-const ProtectedDashboard = withAuth(Dashboard);
-```
-
----
-
-## Hooks Patterns
-
-### Custom Hooks
-
-```tsx
-// useLocalStorage - Persist state
-function useLocalStorage<T>(key: string, initialValue: T) {
-  const [storedValue, setStoredValue] = useState<T>(() => {
-    if (typeof window === 'undefined') return initialValue;
-    try {
-      const item = window.localStorage.getItem(key);
-      return item ? JSON.parse(item) : initialValue;
-    } catch {
-      return initialValue;
-    }
-  });
-
-  const setValue = useCallback((value: T | ((val: T) => T)) => {
-    setStoredValue((prev) => {
-      const valueToStore = value instanceof Function ? value(prev) : value;
-      window.localStorage.setItem(key, JSON.stringify(valueToStore));
-      return valueToStore;
-    });
-  }, [key]);
-
-  return [storedValue, setValue] as const;
-}
-
-// useDebounce - Debounced value
-function useDebounce<T>(value: T, delay: number): T {
-  const [debouncedValue, setDebouncedValue] = useState(value);
-
-  useEffect(() => {
-    const handler = setTimeout(() => setDebouncedValue(value), delay);
-    return () => clearTimeout(handler);
-  }, [value, delay]);
-
-  return debouncedValue;
-}
-
-// useAsync - Async operation state
-function useAsync<T>(asyncFunction: () => Promise<T>, deps: unknown[] = []) {
-  const [state, setState] = useState<{
-    data: T | null;
-    loading: boolean;
-    error: Error | null;
-  }>({
-    data: null,
-    loading: true,
-    error: null,
-  });
-
-  useEffect(() => {
-    let mounted = true;
-    setState((s) => ({ ...s, loading: true }));
-
-    asyncFunction()
-      .then((data) => mounted && setState({ data, loading: false, error: null }))
-      .catch((error) => mounted && setState({ data: null, loading: false, error }));
-
-    return () => { mounted = false; };
-  }, deps);
-
-  return state;
-}
-```
-
----
-
-## State Management
-
-### 1. useReducer for Complex State
-
-```tsx
-type State = {
-  items: Item[];
-  loading: boolean;
-  error: string | null;
-};
-
-type Action =
-  | { type: 'FETCH_START' }
-  | { type: 'FETCH_SUCCESS'; payload: Item[] }
-  | { type: 'FETCH_ERROR'; payload: string }
-  | { type: 'ADD_ITEM'; payload: Item }
-  | { type: 'REMOVE_ITEM'; payload: string };
-
-function reducer(state: State, action: Action): State {
-  switch (action.type) {
-    case 'FETCH_START':
-      return { ...state, loading: true, error: null };
-    case 'FETCH_SUCCESS':
-      return { ...state, loading: false, items: action.payload };
-    case 'FETCH_ERROR':
-      return { ...state, loading: false, error: action.payload };
-    case 'ADD_ITEM':
-      return { ...state, items: [...state.items, action.payload] };
-    case 'REMOVE_ITEM':
-      return { ...state, items: state.items.filter((i) => i.id !== action.payload) };
-    default:
-      return state;
-  }
-}
-```
-
-### 2. Context for Global State
-
-```tsx
-interface AppContextValue {
-  user: User | null;
-  theme: 'light' | 'dark';
-  setTheme: (theme: 'light' | 'dark') => void;
-}
-
-const AppContext = createContext<AppContextValue | undefined>(undefined);
-
-export function AppProvider({ children }: { children: ReactNode }) {
-  const [theme, setTheme] = useState<'light' | 'dark'>('light');
-  const { data: user } = useUser();
-
-  const value = useMemo(() => ({ user, theme, setTheme }), [user, theme]);
-
-  return <AppContext.Provider value={value}>{children}</AppContext.Provider>;
-}
-
-export function useApp() {
-  const context = useContext(AppContext);
-  if (!context) throw new Error('useApp must be used within AppProvider');
-  return context;
-}
-```
-
----
-
-## Performance Optimization
-
-### 1. Memoization
-
-```tsx
-// memo - Prevent re-renders
-const ExpensiveList = memo(function ExpensiveList({ items }: { items: Item[] }) {
-  return (
-    <ul>
-      {items.map((item) => (
-        <li key={item.id}>{item.name}</li>
-      ))}
-    </ul>
-  );
-});
-
-// useMemo - Expensive calculations
-function Dashboard({ data }: { data: DataPoint[] }) {
-  const processedData = useMemo(() => {
-    return data.map((d) => ({ ...d, computed: expensiveCalculation(d) }));
-  }, [data]);
-
-  return <Chart data={processedData} />;
-}
-
-// useCallback - Stable function references
-function Parent() {
-  const [count, setCount] = useState(0);
-
-  const handleClick = useCallback(() => {
-    setCount((c) => c + 1);
-  }, []);
-
-  return <Child onClick={handleClick} />;
-}
-```
-
-### 2. Code Splitting
-
-```tsx
-import { lazy, Suspense } from 'react';
-
-const HeavyComponent = lazy(() => import('./HeavyComponent'));
-
-function App() {
-  return (
-    <Suspense fallback={<Loading />}>
-      <HeavyComponent />
-    </Suspense>
-  );
-}
-```
-
----
-
-## TypeScript Patterns
-
-### Props Types
-
-```tsx
-// Discriminated unions for variants
-type ButtonProps =
-  | { variant: 'primary'; onClick: () => void }
-  | { variant: 'link'; href: string };
-
-function Button(props: ButtonProps) {
-  if (props.variant === 'link') {
-    return <a href={props.href}>Link</a>;
-  }
-  return <button onClick={props.onClick}>Button</button>;
-}
-
-// Generic components
-interface ListProps<T> {
-  items: T[];
-  renderItem: (item: T) => ReactNode;
-  keyExtractor: (item: T) => string;
-}
-
-function List<T>({ items, renderItem, keyExtractor }: ListProps<T>) {
-  return (
-    <ul>
-      {items.map((item) => (
-        <li key={keyExtractor(item)}>{renderItem(item)}</li>
-      ))}
-    </ul>
-  );
-}
-```
-
----
-
-## Agent Integration
-
-This skill is used by:
-
-- **react-expert** subagent
-- **render-optimizer** for performance issues
-- **ui-mobile/tablet/desktop** for component patterns
-
----
-
-## FORBIDDEN
-
-1. **Class components** - Use function components
-2. **Prop drilling** - Use context or composition
-3. **Inline objects/functions in JSX** - Causes re-renders
-4. **useEffect for derived state** - Use useMemo
-5. **Mutating state directly** - Always use setState/dispatch
-
----
-
-## Version
-
-- **v1.0.0** - Initial implementation based on React 19 patterns
+---
+name: react-patterns
+description: Modern React patterns for React 19. Hooks, state management, component composition, performance optimization. Use when building React components.
+allowed-tools: Read, Write, Edit, Grep, Glob
+---
+
+# React Patterns - Modern Component Architecture
+
+## Purpose
+
+Expert guidance for React 19 patterns:
+
+- **Component Design** - Composition over inheritance
+- **State Management** - Local, context, and server state
+- **Performance** - Memoization and optimization
+- **Hooks** - Built-in and custom hooks
+- **TypeScript** - Proper typing patterns
+
+---
+
+## Component Patterns
+
+### 1. Compound Components
+
+```tsx
+// Composable API for complex UIs
+interface TabsContextValue {
+	activeTab: string;
+	setActiveTab: (id: string) => void;
+}
+
+const TabsContext = createContext<TabsContextValue | null>(null);
+
+function Tabs({ children, defaultTab }: { children: ReactNode; defaultTab: string }) {
+	const [activeTab, setActiveTab] = useState(defaultTab);
+
+	return (
+		<TabsContext.Provider value={{ activeTab, setActiveTab }}>
+			<div className="tabs">{children}</div>
+		</TabsContext.Provider>
+	);
+}
+
+function TabList({ children }: { children: ReactNode }) {
+	return (
+		<div className="tab-list" role="tablist">
+			{children}
+		</div>
+	);
+}
+
+function Tab({ id, children }: { id: string; children: ReactNode }) {
+	const context = useContext(TabsContext);
+	if (!context) throw new Error('Tab must be used within Tabs');
+
+	return (
+		<button
+			role="tab"
+			aria-selected={context.activeTab === id}
+			onClick={() => context.setActiveTab(id)}
+		>
+			{children}
+		</button>
+	);
+}
+
+function TabPanel({ id, children }: { id: string; children: ReactNode }) {
+	const context = useContext(TabsContext);
+	if (!context) throw new Error('TabPanel must be used within Tabs');
+
+	if (context.activeTab !== id) return null;
+	return <div role="tabpanel">{children}</div>;
+}
+
+// Usage
+<Tabs defaultTab="home">
+	<TabList>
+		<Tab id="home">Home</Tab>
+		<Tab id="settings">Settings</Tab>
+	</TabList>
+	<TabPanel id="home">Home content</TabPanel>
+	<TabPanel id="settings">Settings content</TabPanel>
+</Tabs>;
+```
+
+### 2. Render Props Pattern
+
+```tsx
+interface MousePosition {
+	x: number;
+	y: number;
+}
+
+function MouseTracker({ render }: { render: (pos: MousePosition) => ReactNode }) {
+	const [position, setPosition] = useState({ x: 0, y: 0 });
+
+	useEffect(() => {
+		const handleMove = (e: MouseEvent) => {
+			setPosition({ x: e.clientX, y: e.clientY });
+		};
+		window.addEventListener('mousemove', handleMove);
+		return () => window.removeEventListener('mousemove', handleMove);
+	}, []);
+
+	return <>{render(position)}</>;
+}
+
+// Usage
+<MouseTracker
+	render={({ x, y }) => (
+		<div>
+			Mouse: {x}, {y}
+		</div>
+	)}
+/>;
+```
+
+### 3. HOC (Higher-Order Component)
+
+```tsx
+function withAuth<P extends object>(Component: ComponentType<P>) {
+	return function AuthenticatedComponent(props: P) {
+		const { user, isLoading } = useAuth();
+
+		if (isLoading) return <Loading />;
+		if (!user) return <Redirect to="/login" />;
+
+		return <Component {...props} />;
+	};
+}
+
+// Usage
+const ProtectedDashboard = withAuth(Dashboard);
+```
+
+---
+
+## Hooks Patterns
+
+### Custom Hooks
+
+```tsx
+// useLocalStorage - Persist state
+function useLocalStorage<T>(key: string, initialValue: T) {
+	const [storedValue, setStoredValue] = useState<T>(() => {
+		if (typeof window === 'undefined') return initialValue;
+		try {
+			const item = window.localStorage.getItem(key);
+			return item ? JSON.parse(item) : initialValue;
+		} catch {
+			return initialValue;
+		}
+	});
+
+	const setValue = useCallback(
+		(value: T | ((val: T) => T)) => {
+			setStoredValue((prev) => {
+				const valueToStore = value instanceof Function ? value(prev) : value;
+				window.localStorage.setItem(key, JSON.stringify(valueToStore));
+				return valueToStore;
+			});
+		},
+		[key]
+	);
+
+	return [storedValue, setValue] as const;
+}
+
+// useDebounce - Debounced value
+function useDebounce<T>(value: T, delay: number): T {
+	const [debouncedValue, setDebouncedValue] = useState(value);
+
+	useEffect(() => {
+		const handler = setTimeout(() => setDebouncedValue(value), delay);
+		return () => clearTimeout(handler);
+	}, [value, delay]);
+
+	return debouncedValue;
+}
+
+// useAsync - Async operation state
+function useAsync<T>(asyncFunction: () => Promise<T>, deps: unknown[] = []) {
+	const [state, setState] = useState<{
+		data: T | null;
+		loading: boolean;
+		error: Error | null;
+	}>({
+		data: null,
+		loading: true,
+		error: null,
+	});
+
+	useEffect(() => {
+		let mounted = true;
+		setState((s) => ({ ...s, loading: true }));
+
+		asyncFunction()
+			.then((data) => mounted && setState({ data, loading: false, error: null }))
+			.catch((error) => mounted && setState({ data: null, loading: false, error }));
+
+		return () => {
+			mounted = false;
+		};
+	}, deps);
+
+	return state;
+}
+```
+
+---
+
+## State Management
+
+### 1. useReducer for Complex State
+
+```tsx
+type State = {
+	items: Item[];
+	loading: boolean;
+	error: string | null;
+};
+
+type Action =
+	| { type: 'FETCH_START' }
+	| { type: 'FETCH_SUCCESS'; payload: Item[] }
+	| { type: 'FETCH_ERROR'; payload: string }
+	| { type: 'ADD_ITEM'; payload: Item }
+	| { type: 'REMOVE_ITEM'; payload: string };
+
+function reducer(state: State, action: Action): State {
+	switch (action.type) {
+		case 'FETCH_START':
+			return { ...state, loading: true, error: null };
+		case 'FETCH_SUCCESS':
+			return { ...state, loading: false, items: action.payload };
+		case 'FETCH_ERROR':
+			return { ...state, loading: false, error: action.payload };
+		case 'ADD_ITEM':
+			return { ...state, items: [...state.items, action.payload] };
+		case 'REMOVE_ITEM':
+			return { ...state, items: state.items.filter((i) => i.id !== action.payload) };
+		default:
+			return state;
+	}
+}
+```
+
+### 2. Context for Global State
+
+```tsx
+interface AppContextValue {
+	user: User | null;
+	theme: 'light' | 'dark';
+	setTheme: (theme: 'light' | 'dark') => void;
+}
+
+const AppContext = createContext<AppContextValue | undefined>(undefined);
+
+export function AppProvider({ children }: { children: ReactNode }) {
+	const [theme, setTheme] = useState<'light' | 'dark'>('light');
+	const { data: user } = useUser();
+
+	const value = useMemo(() => ({ user, theme, setTheme }), [user, theme]);
+
+	return <AppContext.Provider value={value}>{children}</AppContext.Provider>;
+}
+
+export function useApp() {
+	const context = useContext(AppContext);
+	if (!context) throw new Error('useApp must be used within AppProvider');
+	return context;
+}
+```
+
+---
+
+## Performance Optimization
+
+### 1. Memoization
+
+```tsx
+// memo - Prevent re-renders
+const ExpensiveList = memo(function ExpensiveList({ items }: { items: Item[] }) {
+	return (
+		<ul>
+			{items.map((item) => (
+				<li key={item.id}>{item.name}</li>
+			))}
+		</ul>
+	);
+});
+
+// useMemo - Expensive calculations
+function Dashboard({ data }: { data: DataPoint[] }) {
+	const processedData = useMemo(() => {
+		return data.map((d) => ({ ...d, computed: expensiveCalculation(d) }));
+	}, [data]);
+
+	return <Chart data={processedData} />;
+}
+
+// useCallback - Stable function references
+function Parent() {
+	const [count, setCount] = useState(0);
+
+	const handleClick = useCallback(() => {
+		setCount((c) => c + 1);
+	}, []);
+
+	return <Child onClick={handleClick} />;
+}
+```
+
+### 2. Code Splitting
+
+```tsx
+import { lazy, Suspense } from 'react';
+
+const HeavyComponent = lazy(() => import('./HeavyComponent'));
+
+function App() {
+	return (
+		<Suspense fallback={<Loading />}>
+			<HeavyComponent />
+		</Suspense>
+	);
+}
+```
+
+---
+
+## TypeScript Patterns
+
+### Props Types
+
+```tsx
+// Discriminated unions for variants
+type ButtonProps = { variant: 'primary'; onClick: () => void } | { variant: 'link'; href: string };
+
+function Button(props: ButtonProps) {
+	if (props.variant === 'link') {
+		return <a href={props.href}>Link</a>;
+	}
+	return <button onClick={props.onClick}>Button</button>;
+}
+
+// Generic components
+interface ListProps<T> {
+	items: T[];
+	renderItem: (item: T) => ReactNode;
+	keyExtractor: (item: T) => string;
+}
+
+function List<T>({ items, renderItem, keyExtractor }: ListProps<T>) {
+	return (
+		<ul>
+			{items.map((item) => (
+				<li key={keyExtractor(item)}>{renderItem(item)}</li>
+			))}
+		</ul>
+	);
+}
+```
+
+---
+
+## Agent Integration
+
+This skill is used by:
+
+- **react-expert** subagent
+- **render-optimizer** for performance issues
+- **ui-mobile/tablet/desktop** for component patterns
+
+---
+
+## FORBIDDEN
+
+1. **Class components** - Use function components
+2. **Prop drilling** - Use context or composition
+3. **Inline objects/functions in JSX** - Causes re-renders
+4. **useEffect for derived state** - Use useMemo
+5. **Mutating state directly** - Always use setState/dispatch
+
+---
+
+## Version
+
+- **v1.0.0** - Initial implementation based on React 19 patterns