@xonovex/skills 0.1.0

package/skills/python-guidelines/reference/exception-handling.md

@@ -0,0 +1,72 @@
+# exception-handling: Specific Exception Handling
+
+**Guideline:** Raise and catch specific exception types, never use bare `except`.
+
+**Rationale:** Specific exceptions enable precise error handling and better debugging. Bare `except` catches system exceptions like `KeyboardInterrupt` and `SystemExit`, making programs unresponsive. Custom exceptions document error conditions and enable targeted error handling. Specific exception handling improves code reliability and maintainability.
+
+**Example:**
+
+```python
+from pathlib import Path
+from typing import Optional
+
+# Raise specific exceptions
+def read_user_file(user_id: str) -> str:
+    path = Path(f"users/{user_id}.json")
+
+    if not path.exists():
+        raise FileNotFoundError(f"User file not found: {user_id}")
+
+    if not path.is_file():
+        raise ValueError(f"Path is not a file: {path}")
+
+    return path.read_text()
+
+# Catch specific exceptions
+def load_user(user_id: str) -> Optional[dict]:
+    try:
+        data = read_user_file(user_id)
+        return parse_json(data)
+    except FileNotFoundError:
+        print(f"User {user_id} not found")
+        return None
+    except ValueError as e:
+        print(f"Invalid data: {e}")
+        return None
+    except Exception as e:
+        print(f"Unexpected error: {e}")
+        raise
+
+# Custom exceptions
+class ValidationError(ValueError):
+    """Raised when input validation fails"""
+    pass
+
+class DatabaseError(RuntimeError):
+    """Raised when database operations fail"""
+    pass
+
+def validate_email(email: str) -> None:
+    if "@" not in email:
+        raise ValidationError(f"Invalid email format: {email}")
+
+# ❌ Avoid bare except
+try:
+    risky_operation()
+except:  # Don't do this - catches everything including KeyboardInterrupt
+    pass
+
+# ✅ Better - catch specific exceptions
+try:
+    risky_operation()
+except (ValueError, TypeError) as e:
+    handle_error(e)
+```
+
+**Techniques:**
+- Raise specific built-in exceptions (`ValueError`, `TypeError`, `FileNotFoundError`)
+- Create custom exceptions by subclassing built-in exceptions
+- Catch specific exceptions or tuples of exceptions
+- Use `except Exception` as a catch-all (not bare `except`)
+- Re-raise unexpected exceptions after logging
+- Provide meaningful error messages with context

package/skills/python-guidelines/reference/generators-comprehensions.md

@@ -0,0 +1,54 @@
+# generators-comprehensions: Generators and Comprehensions
+
+**Guideline:** Use generators and comprehensions for memory-efficient, lazy data processing.
+
+**Rationale:** Generators process items on-demand without loading entire datasets into memory, enabling efficient handling of large files and streams. Comprehensions provide concise, readable syntax for transformations. Generator expressions and functions enable pipeline-style processing with minimal memory overhead.
+
+**Example:**
+
+```python
+from typing import Iterator, Iterable
+from pathlib import Path
+
+# List comprehension
+numbers = [x * 2 for x in range(10) if x % 2 == 0]
+
+# Dict comprehension
+squares = {x: x**2 for x in range(10)}
+
+# Set comprehension
+unique_lengths = {len(word) for word in words}
+
+# Generator expression (lazy, memory efficient)
+total = sum(x**2 for x in range(1000000))
+
+# Generator function
+def read_large_file(path: Path) -> Iterator[str]:
+    """Read file line by line without loading all into memory"""
+    with path.open('r') as f:
+        for line in f:
+            yield line.strip()
+
+# Generator with processing
+def process_items(items: Iterable[str]) -> Iterator[dict[str, any]]:
+    """Process items lazily"""
+    for item in items:
+        if item:
+            yield {"value": item, "length": len(item)}
+
+# Usage - only processes items as needed
+for processed in process_items(read_large_file(Path("data.txt"))):
+    print(processed)
+
+# ❌ Bad - loads entire file into memory
+def read_large_file_bad(path: Path) -> list[str]:
+    with path.open('r') as f:
+        return [line.strip() for line in f]  # All in memory!
+```
+
+**Techniques:**
+- Use list/dict/set comprehensions for small, in-memory collections
+- Use generator expressions (parentheses) for large or streamed data
+- Create generator functions with `yield` for lazy iteration
+- Chain generators for pipeline processing
+- Avoid materializing generators until needed (don't convert to list unnecessarily)

package/skills/python-guidelines/reference/pathlib-file-ops.md

@@ -0,0 +1,60 @@
+# pathlib-file-ops: Pathlib for File Operations
+
+**Guideline:** Use `pathlib.Path` for all file and directory operations instead of `os.path`.
+
+**Rationale:** Pathlib provides object-oriented path manipulation with intuitive methods and operators. The `/` operator for path joining is more readable than `os.path.join()`. Built-in methods like `.read_text()`, `.write_text()`, and `.glob()` simplify common operations. Pathlib is cross-platform and type-safe.
+
+**Example:**
+
+```python
+from pathlib import Path
+from typing import Iterator, Optional
+
+# Use Path objects
+config_path = Path("config.json")
+data_dir = Path("data")
+
+# Path operations
+if config_path.exists():
+    content = config_path.read_text()
+
+if data_dir.is_dir():
+    for file in data_dir.glob("*.txt"):
+        process_file(file)
+
+# Path construction
+user_dir = Path("users") / "123" / "profile"
+user_dir.mkdir(parents=True, exist_ok=True)
+
+# Read/write operations
+def save_data(path: Path, data: str) -> None:
+    path.write_text(data)
+
+def load_data(path: Path) -> str:
+    return path.read_text()
+
+# Iterate directory
+def find_python_files(directory: Path) -> Iterator[Path]:
+    return directory.rglob("*.py")
+
+# Safe file operations
+def read_if_exists(path: Path) -> Optional[str]:
+    if path.exists() and path.is_file():
+        return path.read_text()
+    return None
+
+# ❌ Avoid os.path
+import os
+old_path = os.path.join("users", "123", "profile")  # Don't do this
+
+# ✅ Use Path instead
+new_path = Path("users") / "123" / "profile"
+```
+
+**Techniques:**
+- Create Path objects: `path = Path("file.txt")`
+- Use `/` operator for path joining: `Path("dir") / "file.txt"`
+- Check existence with `.exists()`, `.is_file()`, `.is_dir()`
+- Read/write with `.read_text()`, `.write_text()`, `.read_bytes()`, `.write_bytes()`
+- Glob patterns with `.glob()` and `.rglob()`
+- Create directories with `.mkdir(parents=True, exist_ok=True)`

package/skills/python-guidelines/reference/resource-management.md

@@ -0,0 +1,58 @@
+# resource-management: Resource Management with Context Managers
+
+**Guideline:** Use context managers (`with` and `async with`) for automatic resource cleanup.
+
+**Rationale:** Context managers ensure resources are properly released even when exceptions occur. This prevents resource leaks and simplifies error handling. Custom context managers enable reusable resource management patterns like database transactions.
+
+**Example:**
+
+```python
+from pathlib import Path
+from contextlib import contextmanager, asynccontextmanager
+import asyncio
+
+# File operations with pathlib
+def read_config(path: Path) -> dict[str, str]:
+    with path.open('r') as f:
+        return parse_config(f.read())
+
+def write_config(path: Path, config: dict[str, str]) -> None:
+    with path.open('w') as f:
+        f.write(serialize_config(config))
+
+# Custom context manager
+@contextmanager
+def database_transaction(connection):
+    try:
+        yield connection
+        connection.commit()
+    except Exception:
+        connection.rollback()
+        raise
+
+# Usage
+with database_transaction(conn) as db:
+    db.execute("INSERT INTO users ...")
+
+# Async context manager
+@asynccontextmanager
+async def async_database_transaction(connection):
+    try:
+        yield connection
+        await connection.commit()
+    except Exception:
+        await connection.rollback()
+        raise
+
+# Usage
+async with async_database_transaction(conn) as db:
+    await db.execute("INSERT INTO users ...")
+```
+
+**Techniques:**
+- Use `with` for synchronous resource operations
+- Use `async with` for asynchronous resource operations
+- Create custom context managers with `@contextmanager` decorator
+- Create async context managers with `@asynccontextmanager`
+- Handle cleanup in finally blocks or with explicit rollback
+- Use pathlib.Path with context managers for file operations

package/skills/python-guidelines/reference/string-formatting.md

@@ -0,0 +1,41 @@
+# string-formatting: Modern String Formatting
+
+**Guideline:** Use f-strings for all string formatting and interpolation.
+
+**Rationale:** F-strings are more readable, faster, and less error-prone than old `%` formatting or `.format()` methods. They support inline expressions, formatting specifiers, and multiline strings. The syntax is concise and makes variable substitution obvious.
+
+**Example:**
+
+```python
+# f-strings (preferred)
+name = "Alice"
+age = 30
+message = f"Hello, {name}! You are {age} years old."
+
+# f-strings with expressions
+result = f"The answer is {2 + 2}"
+
+# f-strings with formatting
+pi = 3.14159
+formatted = f"Pi is approximately {pi:.2f}"
+
+# Multiline f-strings
+user = User(id="123", email="user@example.com", name="Alice", created_at=datetime.now())
+summary = f"""
+User Information:
+  ID: {user.id}
+  Email: {user.email}
+  Name: {user.name}
+"""
+
+# ❌ Avoid old-style formatting
+message_old = "Hello, %s! You are %d years old." % (name, age)
+message_format = "Hello, {}! You are {} years old.".format(name, age)
+```
+
+**Techniques:**
+- Use f-string syntax: `f"text {variable} more text"`
+- Embed expressions directly: `f"result: {2 + 2}"`
+- Apply format specifiers: `f"{value:.2f}"` for decimals
+- Use multiline f-strings with triple quotes for structured text
+- Avoid old `%` formatting and `.format()` methods

package/skills/python-guidelines/reference/type-checking.md

@@ -0,0 +1,47 @@
+# type-checking: Type Checking Best Practices
+
+**Guideline:** Use type aliases, protocols, and modern type syntax for clear, maintainable type hints.
+
+**Rationale:** Type aliases make complex types readable and reusable. Protocols enable structural typing (duck typing with type safety). Using `Sequence` and `Mapping` instead of `list` and `dict` in function parameters enables broader compatibility. Modern union syntax (`|`) is more concise than `Union`. Proper typing enables static analysis and better IDE support.
+
+**Example:**
+
+```python
+from typing import TypeAlias, Protocol, Sequence, Mapping
+
+# Type aliases
+UserId: TypeAlias = str
+Config: TypeAlias = dict[str, str | int | bool]
+
+# Protocol for structural typing (duck typing with types)
+class Drawable(Protocol):
+    def draw(self) -> None: ...
+
+def render(item: Drawable) -> None:
+    item.draw()
+
+# Sequence for read-only list-like
+def sum_numbers(numbers: Sequence[int]) -> int:
+    return sum(numbers)
+
+# Mapping for read-only dict-like
+def get_value(config: Mapping[str, str], key: str, default: str = "") -> str:
+    return config.get(key, default)
+
+# Use | for union types (Python 3.10+)
+def parse_value(value: str | int | float) -> float:
+    return float(value)
+
+# Use None instead of Optional when clear
+def find_user(user_id: str) -> User | None:
+    """Returns User or None if not found"""
+    pass
+```
+
+**Techniques:**
+- Create type aliases with `TypeAlias` for complex types
+- Use `Protocol` for structural typing requirements
+- Use `Sequence` for read-only list-like parameters
+- Use `Mapping` for read-only dict-like parameters
+- Use `|` for union types instead of `Optional` or `Union`
+- Return `Type | None` instead of `Optional[Type]` when clear

package/skills/react-guidelines/SKILL.md

@@ -0,0 +1,105 @@
+---
+name: react-guidelines
+description: >-
+  Trigger on `.tsx/.jsx` files with React imports, Vite config. Use when building React 19+ components. Apply for Server Components, Form Actions, new hooks, Suspense streaming, React Compiler. Keywords: React 19, RSC, Server Components, useActionState, useOptimistic, use(), Suspense, Form Actions, 'use client', 'use server', ref as prop, React Compiler.
+---
+
+# React Coding Guidelines
+
+## Requirements
+
+- React ≥ 19, Vite ≥ 6, Tailwind ≥ 4, Headless UI.
+
+## React 19 Essentials
+
+- **Server-first** - Components run on server by default; add `'use client'` only for interactivity
+- **Compiler handles memoization** - Write clean code; React Compiler optimizes automatically
+- **ref as prop** - Pass `ref` directly, no `forwardRef` wrapper needed
+- **Context as provider** - Use `<Context value={}>` directly, not `.Provider`
+- **Form Actions** - Use `useActionState` and `FormData` instead of controlled inputs
+- **New hooks** - `useActionState`, `useOptimistic`, `use()`, `useFormStatus`
+- **Native metadata** - Use `<title>`, `<meta>`, `<link>` anywhere, auto-hoisted to `<head>`
+
+## Quick Reference
+
+| Feature | React 18 | React 19+ |
+|---------|----------|-----------|
+| Memoization | Manual (`useMemo`, `useCallback`) | React Compiler (automatic) |
+| Forward refs | `forwardRef()` wrapper | `ref` as regular prop |
+| Context provider | `<Context.Provider value={}>` | `<Context value={}>` |
+| Form state | Custom `useState` | `useActionState` hook |
+| Optimistic updates | Manual state | `useOptimistic` hook |
+| Read promises | Not possible | `use()` hook |
+| Conditional context | Not possible | `use(Context)` after conditionals |
+| Form pending | Manual tracking | `useFormStatus` hook |
+
+## Example
+
+```tsx
+// React 19 Form with Actions
+'use client';
+import { useActionState } from 'react';
+
+function ContactForm() {
+  const [state, formAction, isPending] = useActionState(
+    async (prev, formData) => {
+      const result = await submitForm(Object.fromEntries(formData));
+      if (result.error) return { error: result.error };
+      return { success: true };
+    },
+    null
+  );
+
+  return (
+    <form action={formAction}>
+      <input name="email" type="email" disabled={isPending} />
+      <button disabled={isPending}>
+        {isPending ? 'Submitting...' : 'Submit'}
+      </button>
+      {state?.error && <p className="error">{state.error}</p>}
+    </form>
+  );
+}
+
+// ref as prop (no forwardRef needed)
+function Input({ ref, ...props }: { ref?: React.Ref<HTMLInputElement> }) {
+  return <input ref={ref} {...props} />;
+}
+
+// Context as provider
+const ThemeContext = createContext('light');
+
+function App({ children }) {
+  return <ThemeContext value="dark">{children}</ThemeContext>;
+}
+```
+
+## Essentials
+
+- **Component design** - Small, composable; lift/minimize state; derive when possible, see [reference/component-design.md](reference/component-design.md)
+- **Performance** - Let React Compiler handle memoization; manual `useMemo`/`useCallback` for effect deps only, see [reference/performance-optimization.md](reference/performance-optimization.md)
+- **Rendering** - Prefer Server Components; use Suspense for streaming, see [reference/suspense-streaming.md](reference/suspense-streaming.md)
+- **Accessibility** - Semantic HTML, ARIA, keyboard/focus management, see [reference/accessibility.md](reference/accessibility.md)
+- **Custom hooks** - Extract reusable logic, see [reference/hooks.md](reference/hooks.md)
+
+## Progressive Disclosure
+
+### Guidelines
+
+- Read [reference/component-design.md](reference/component-design.md) - When breaking down large components or managing state lifting
+- Read [reference/state-management.md](reference/state-management.md) - When choosing between useState, useReducer, or Context
+- Read [reference/performance-optimization.md](reference/performance-optimization.md) - When components re-render unnecessarily or performance lags
+- Read [reference/hooks.md](reference/hooks.md) - When extracting reusable logic or creating custom hooks
+- Read [reference/accessibility.md](reference/accessibility.md) - When adding keyboard navigation or screen reader support
+- Read [reference/new-hooks.md](reference/new-hooks.md) - When using useActionState, useOptimistic, use(), or useFormStatus
+- Read [reference/server-components.md](reference/server-components.md) - When building with RSC, Server Actions, or 'use server'/'use client' directives
+- Read [reference/suspense-streaming.md](reference/suspense-streaming.md) - When using Suspense boundaries, streaming, or error handling
+- Read [reference/react-compiler.md](reference/react-compiler.md) - When setting up React Compiler or understanding automatic memoization
+- Read [reference/activity-effect-event.md](reference/activity-effect-event.md) - When using Activity component or useEffectEvent
+
+### Migration from React 18
+
+- Read [reference/migration-paradigm-shifts.md](reference/migration-paradigm-shifts.md) - When adapting mental model from React 18 to React 19
+- Read [reference/migration-anti-patterns.md](reference/migration-anti-patterns.md) - When avoiding outdated patterns (useEffect for data, manual loading states)
+- Read [reference/migration-deprecations.md](reference/migration-deprecations.md) - When migrating from React 18 or handling removed APIs
+- Read [reference/migration-typescript.md](reference/migration-typescript.md) - When fixing TypeScript errors after React 19 upgrade

package/skills/react-guidelines/reference/accessibility.md

@@ -0,0 +1,31 @@
+# accessibility: Accessibility Best Practices
+
+**Guideline:** Use semantic HTML, ARIA labels/roles, proper focus management, and keyboard navigation for inclusive components.
+
+**Rationale:** Accessible design works for all users (screen readers, keyboards, assistive tech); legal requirement in many jurisdictions.
+
+**Example:**
+```tsx
+function Modal({ isOpen, onClose, title, children }) {
+  const closeButtonRef = useRef<HTMLButtonElement>(null);
+  useEffect(() => { if (isOpen) closeButtonRef.current?.focus(); }, [isOpen]);
+  if (!isOpen) return null;
+  return (
+    <div role="dialog" aria-modal="true" aria-labelledby="modal-title">
+      <h2 id="modal-title">{title}</h2>
+      {children}
+      <button ref={closeButtonRef} onClick={onClose} aria-label="Close modal">
+        Close
+      </button>
+    </div>
+  );
+}
+```
+
+**Techniques:**
+- Semantic HTML: `<button>`, `<nav>`, `<main>`, `<article>` instead of divs
+- ARIA attributes: aria-label, aria-labelledby, aria-describedby, role="dialog", role="list"
+- Focus management: useRef + useEffect to move focus to interactive elements
+- Visually hidden text: sr-only class for screen readers ("sr-only" Tailwind utility)
+- Icon buttons: Always include aria-label; never icon-only without text
+- Keyboard navigation: All interactive elements must be focusable via Tab

package/skills/react-guidelines/reference/activity-effect-event.md

@@ -0,0 +1,42 @@
+# activity-effect-event: Activity Component & useEffectEvent
+
+**Guideline:** Use `<Activity mode="hidden">` to preserve state; use `useEffectEvent` for Effect logic that reads latest values without re-triggering.
+
+**Rationale:** Activity preserves DOM state during hide (tabs, accordions); useEffectEvent eliminates false re-runs caused by dependency changes.
+
+**Example:**
+```tsx
+// Activity - preserve state when hidden
+function TabContainer({ tabs, activeTab }) {
+  return tabs.map(tab => (
+    <Activity
+      key={tab.id}
+      mode={tab.id === activeTab ? 'visible' : 'hidden'}
+    >
+      <TabContent tab={tab} /> {/* State preserved even when hidden */}
+    </Activity>
+  ));
+}
+
+// useEffectEvent - read theme without reconnecting
+function ChatRoom({ roomId, theme }) {
+  const onConnected = useEffectEvent(() => {
+    showNotification(`Connected to ${roomId}`, theme);
+  });
+  useEffect(() => {
+    const connection = createConnection(roomId);
+    connection.on('connected', onConnected);
+    connection.connect();
+    return () => connection.disconnect();
+  }, [roomId]); // theme NOT here - doesn't reconnect
+}
+```
+
+**Techniques:**
+- Activity visible/hidden: Preserves state of hidden components (vs conditional render which destroys state)
+- Activity pre-rendering: Load content in background for faster transition when shown
+- useEffectEvent: Read latest prop/state without adding to dependencies; reads current value
+- Solves false re-runs: Chat reconnect on theme change; analytics re-fires on items change
+- Media handling: Activity doesn't pause video/audio automatically; use useLayoutEffect to pause
+- Deprecating useLayoutEffect: useEffectEvent replaces some useLayoutEffect patterns in React 19
+

package/skills/react-guidelines/reference/component-design.md

@@ -0,0 +1,57 @@
+# component-design: Component Design Patterns
+
+**Guideline:** Build small, composable components with minimal state lifting and derived values.
+
+**Rationale:** Small components are easier to test, reuse, and maintain. Keeping state local reduces complexity and re-renders. Deriving values prevents synchronization bugs.
+
+**Example:**
+
+```tsx
+import {memo, useMemo, useState} from "react";
+
+type Item = {id: string; value: number};
+
+// Small, focused component
+export const List = memo(function List({items}: {items: Item[]}) {
+  const [query, setQuery] = useState("");
+
+  // Derived state - calculated from items and query
+  const filteredItems = useMemo(
+    () => items.filter((item) => String(item.value).includes(query)),
+    [items, query],
+  );
+
+  return (
+    <div>
+      <SearchInput value={query} onChange={setQuery} />
+      <ItemList items={filteredItems} />
+    </div>
+  );
+});
+
+// ✅ Good: Derived state
+function CartTotal({items}: {items: CartItem[]}) {
+  const total = useMemo(
+    () => items.reduce((sum, item) => sum + item.price, 0),
+    [items],
+  );
+  return <div>Total: ${total}</div>;
+}
+
+// ❌ Bad: Duplicated state
+function CartTotalBad({items}: {items: CartItem[]}) {
+  const [total, setTotal] = useState(0);
+
+  useEffect(() => {
+    setTotal(items.reduce((sum, item) => sum + item.price, 0));
+  }, [items]);
+
+  return <div>Total: ${total}</div>;
+}
+```
+
+**Techniques:**
+- Break down large components into smaller, focused pieces
+- Keep state in the lowest common ancestor that needs it
+- Calculate derived values using `useMemo` instead of storing them in state
+- Extract reusable logic into custom hooks

package/skills/react-guidelines/reference/hooks.md

@@ -0,0 +1,39 @@
+# filename: hooks
+
+**Guideline:** Follow Rules of Hooks (top-level only, from functions/custom hooks); extract reusable logic into custom hooks with `use` prefix.
+
+**Rationale:** Hook rules ensure predictable behavior; custom hooks enable logic reuse without prop drilling; focused hooks maintain single responsibility.
+
+**Example:**
+```tsx
+// useApi - fetch with loading/error states
+function useApi<T>(url: string) {
+  const [data, setData] = useState<T | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<Error | null>(null);
+
+  useEffect(() => {
+    let cancelled = false;
+    fetch(url).then(r => r.json()).then(json => {
+      if (!cancelled) {setData(json); setError(null);}
+    }).catch(err => {
+      if (!cancelled) setError(err);
+    }).finally(() => {
+      if (!cancelled) setLoading(false);
+    });
+    return () => {cancelled = true;};
+  }, [url]);
+
+  return {data, loading, error};
+}
+```
+
+**Techniques:**
+- Rules of Hooks: Call only at top-level (not loops/conditions); only from functions/custom hooks
+- Custom hooks: Extract reusable logic; name with `use` prefix; single responsibility
+- useApi: Fetch with cancellation flag; handle loading/error/data states; type-generic
+- useLocalStorage: Parse JSON on read; stringify on write; handle errors gracefully
+- usePrevious: Store value in `useRef`; update in `useEffect`; return previous on next render
+- useDebounce: Delay state updates with `setTimeout`; cleanup on unmount
+- Error handling: Type check errors (`instanceof Error`); cleanup in finally blocks
+- Dependencies: Always include full dependency array; avoid stale closures

package/skills/react-guidelines/reference/migration-anti-patterns.md

@@ -0,0 +1,33 @@
+# migration-anti-patterns: React 19 Anti-Patterns
+
+**Guideline:** Replace useEffect data fetching with Server Components; use Form Actions instead of useState for forms; let Compiler handle memoization.
+
+**Rationale:** React 19 provides cleaner solutions; old patterns create unnecessary complexity and performance overhead.
+
+**Example:**
+```tsx
+// OLD: useEffect + loading state
+function UserProfile({ userId }) {
+  const [user, setUser] = useState(null), [loading, setLoading] = useState(true);
+  useEffect(() => {
+    fetchUser(userId).then(setUser).finally(() => setLoading(false));
+  }, [userId]);
+  if (loading) return <Spinner />;
+  return <Profile user={user} />;
+}
+
+// NEW: Server Component
+async function UserProfile({ userId }) {
+  const user = await fetchUser(userId);
+  return <Profile user={user} />;
+}
+```
+
+**Techniques:**
+- Remove useEffect data fetching → Use Server Components (async/await, direct DB)
+- Remove manual loading state → Use useActionState and Suspense
+- Remove useState form fields → Use FormData + Server Actions
+- Remove excessive useMemo/useCallback → Let React Compiler optimize
+- Remove forwardRef wrapper → Pass ref as regular prop in React 19
+- Remove 'use client' everywhere → Server Components by default; client islands only
+- Remove <Suspense/> for errors only → Combine with Error Boundaries for full coverage