start-vibing-stacks 2.0.2 → 2.0.3

package/dist/ui.js

@@ -2,7 +2,7 @@
  * Start Vibing Stacks — Terminal UI
  */
 import chalk from 'chalk';
-const VERSION = '2.0.2';
+const VERSION = '2.0.3';
 const gradient = (text) => {
     const colors = [chalk.hex('#FF6B6B'), chalk.hex('#FF8E53'), chalk.hex('#FFBD2E'), chalk.hex('#48BB78'), chalk.hex('#4299E1'), chalk.hex('#9F7AEA')];
     return text.split('').map((c, i) => colors[i % colors.length](c)).join('');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "start-vibing-stacks",
-  "version": "2.0.2",
+  "version": "2.0.3",
   "description": "AI-powered multi-stack dev workflow for Claude Code. Supports PHP, Node.js, Python and more.",
   "type": "module",
   "bin": {

package/stacks/frontend/react/skills/react-patterns/SKILL.md

@@ -104,10 +104,121 @@ const Heavy = lazy(() => import('./HeavyComponent'));
 <Suspense fallback={<Loading />}><Heavy /></Suspense>
 ```
 
+## React 19 Hooks
+
+```tsx
+// useActionState — form submission state
+import { useActionState } from 'react';
+
+function LoginForm() {
+  const [state, formAction, isPending] = useActionState(
+    async (prev, formData: FormData) => {
+      const result = await login(formData);
+      if (result.error) return { error: result.error };
+      redirect('/dashboard');
+    },
+    { error: null }
+  );
+
+  return (
+    <form action={formAction}>
+      <input name="email" type="email" />
+      {state.error && <p className="text-destructive">{state.error}</p>}
+      <button disabled={isPending}>
+        {isPending ? 'Signing in...' : 'Sign In'}
+      </button>
+    </form>
+  );
+}
+
+// useOptimistic — instant UI feedback
+import { useOptimistic } from 'react';
+
+function TodoList({ todos }: { todos: Todo[] }) {
+  const [optimisticTodos, addOptimistic] = useOptimistic(
+    todos,
+    (state, newTodo: Todo) => [...state, newTodo]
+  );
+
+  const addTodo = async (formData: FormData) => {
+    const todo = { id: crypto.randomUUID(), title: formData.get('title') as string, done: false };
+    addOptimistic(todo);  // Instant UI
+    await saveTodo(todo);  // Server sync
+  };
+
+  return <ul>{optimisticTodos.map(t => <li key={t.id}>{t.title}</li>)}</ul>;
+}
+```
+
+## State Management Selection
+
+| Complexity | Solution | When |
+|---|---|---|
+| Simple local | `useState` | Single component, simple values |
+| Complex local | `useReducer` | Multiple related state transitions |
+| Parent-child | Lift state up | 1-2 levels |
+| Subtree | Context + `useReducer` | Theme, auth, 3+ levels |
+| Server state | React Query / SWR | API data, caching, refetch |
+| Complex global | Zustand | Cross-feature, many consumers |
+
+## Error Boundaries
+
+```tsx
+import { Component, type ReactNode } from 'react';
+
+class ErrorBoundary extends Component<
+  { children: ReactNode; fallback?: ReactNode },
+  { hasError: boolean; error?: Error }
+> {
+  state = { hasError: false, error: undefined as Error | undefined };
+
+  static getDerivedStateFromError(error: Error) {
+    return { hasError: true, error };
+  }
+
+  componentDidCatch(error: Error, info: React.ErrorInfo) {
+    console.error('ErrorBoundary caught:', error, info);
+    // Send to Sentry/logging
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return this.props.fallback ?? (
+        <div className="p-8 text-center">
+          <h2 className="text-lg font-semibold text-foreground">Something went wrong</h2>
+          <button onClick={() => this.setState({ hasError: false })}
+            className="mt-4 px-4 py-2 bg-primary text-primary-foreground rounded-lg">
+            Try Again
+          </button>
+        </div>
+      );
+    }
+    return this.props.children;
+  }
+}
+
+// Usage: wrap routes/features
+<ErrorBoundary fallback={<ErrorPage />}>
+  <DashboardFeature />
+</ErrorBoundary>
+```
+
+## Component Types
+
+| Type | Use | Example |
+|---|---|---|
+| **Server** (RSC) | Data fetching, static content | Page-level components |
+| **Client** (`'use client'`) | Interactivity, hooks, browser APIs | Forms, modals, dropdowns |
+| **Presentational** | Pure display, props only | `<Badge>`, `<Avatar>` |
+| **Container** | Logic + state, renders presentational | `<UserListContainer>` |
+
 ## FORBIDDEN
 
-1. **Class components** — function components only
+1. **Class components** — function components only (except ErrorBoundary)
 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 setState/dispatch
+6. **Index as key** — use stable unique ID (`uuid`, `id`)
+7. **Premature optimization** — profile first with React DevTools
+8. **useEffect for everything** — prefer server components for data