@ranimontagna/agent-toolkit 0.1.5 → 0.1.7

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

@@ -0,0 +1,341 @@
+---
+name: react-patterns
+description: React 18/19 patterns including hooks discipline, server/client component boundaries, Suspense + error boundaries, form actions, data fetching, state management decision trees, and accessibility-first composition. Use when writing or reviewing React components.
+origin: ECC
+---
+
+# React Patterns
+
+Idiomatic React 18/19 patterns for building robust, accessible, performant component trees.
+
+## When to Activate
+
+- Writing or modifying React function components, custom hooks, or component trees
+- Reviewing JSX/TSX files
+- Designing state shape or component composition
+- Migrating class components or older `forwardRef`/`useEffect`-heavy code
+- Choosing between local state, lifted state, context, and external stores
+- Working with Server Components / Client Components (Next.js App Router, RSC)
+- Implementing forms with React 19 actions or controlled inputs
+- Wiring data fetching with TanStack Query / SWR / RSC
+
+## Core Principles
+
+### 1. Render is a Pure Function of Props and State
+
+```tsx
+// Good: derive during render
+function Cart({ items }: { items: CartItem[] }) {
+  const total = items.reduce((sum, i) => sum + i.price * i.qty, 0);
+  return <span>{formatMoney(total)}</span>;
+}
+
+// Bad: derived state stored separately
+function Cart({ items }: { items: CartItem[] }) {
+  const [total, setTotal] = useState(0);
+  useEffect(() => {
+    setTotal(items.reduce((sum, i) => sum + i.price * i.qty, 0));
+  }, [items]);
+  return <span>{formatMoney(total)}</span>;
+}
+```
+
+Derived state in `useEffect` adds a render cycle, can desync, and obscures the data flow.
+
+### 2. Side Effects Outside Render
+
+Effects, mutations, network calls, and subscriptions live in event handlers or `useEffect` — never in the render body.
+
+### 3. Composition Over Inheritance
+
+React has no inheritance model for components. Compose with `children`, render props, or component props.
+
+## Hooks Discipline
+
+See [rules/react/hooks.md](rules/react/hooks.md) for the full ruleset. Highlights:
+
+- Top-level only, never conditional
+- Cleanup every subscription, interval, listener
+- Functional updater (`setX(prev => prev + 1)`) when new state depends on old
+- Default position: do not memoize — add `useMemo`/`useCallback` only when a profiler or a dependency chain proves it matters
+- Extract a custom hook only when the same hook sequence appears in 2+ components
+
+## State Location Decision Tree
+
+```
+Used by one component?
+  -> useState inside it
+
+Used by parent + a few descendants?
+  -> lift to nearest common ancestor
+
+Used across distant branches AND low-frequency reads (theme, auth, locale)?
+  -> React Context
+
+High-frequency updates shared across the tree?
+  -> external store (Zustand, Jotai, Redux Toolkit)
+
+Derived from a server?
+  -> server-state library (TanStack Query, SWR, RSC fetch)
+```
+
+Most pages do not need context or a global store. Resist abstraction until duplicated lifting becomes painful.
+
+## Server / Client Components (RSC)
+
+```tsx
+// Server Component - default, async, never ships JS for itself
+export default async function ProductPage({ params }: { params: { id: string } }) {
+  const product = await db.product.findUnique({ where: { id: params.id } });
+  if (!product) notFound();
+  return <ProductView product={product} />;
+}
+
+// Client Component - opt in with "use client"
+"use client";
+export function AddToCartButton({ productId }: { productId: string }) {
+  const [pending, startTransition] = useTransition();
+  return (
+    <button
+      disabled={pending}
+      onClick={() => startTransition(() => addToCart(productId))}
+    >
+      {pending ? "Adding..." : "Add to cart"}
+    </button>
+  );
+}
+```
+
+Boundaries:
+
+- Server -> Client: pass serializable props or `children`
+- Client -> Server: invoke Server Actions via `<form action={...}>` or imperatively from event handlers
+- Never `import` a Server Component from a Client Component file — compose them via `children` instead
+
+## Suspense + Error Boundaries
+
+```tsx
+<ErrorBoundary fallback={<ErrorView />}>
+  <Suspense fallback={<UserSkeleton />}>
+    <UserDetail id={id} />
+  </Suspense>
+</ErrorBoundary>
+```
+
+- Place Suspense boundaries close to the data, not at the route root — progressively reveal content
+- Error Boundary remains a class API; use `react-error-boundary` for a hook-friendly wrapper
+- A boundary catches errors thrown during render, lifecycle, and constructors of its children — NOT in event handlers or async code
+
+## Forms
+
+### React 19 form actions (preferred for new code)
+
+```tsx
+"use client";
+import { useActionState } from "react";
+
+const initial = { error: null as string | null };
+
+async function updateUserAction(_prev: typeof initial, formData: FormData) {
+  "use server";
+  const parsed = UserSchema.safeParse(Object.fromEntries(formData));
+  if (!parsed.success) return { error: "Invalid input" };
+  await db.user.update({ where: { id: parsed.data.id }, data: parsed.data });
+  return { error: null };
+}
+
+export function UserForm() {
+  const [state, formAction, pending] = useActionState(updateUserAction, initial);
+  return (
+    <form action={formAction}>
+      <input name="name" required />
+      <button type="submit" disabled={pending}>Save</button>
+      {state.error && <p role="alert">{state.error}</p>}
+    </form>
+  );
+}
+```
+
+### Controlled inputs
+
+Use controlled when the value drives other UI, formats on every keystroke, or implements real-time validation.
+
+### Complex forms
+
+For multi-step forms, dynamic field arrays, or cross-field validation: use a library (React Hook Form, TanStack Form). Roll-your-own state management for forms past trivial complexity is a maintenance trap.
+
+## Data Fetching Decision Matrix
+
+| Need | Tool |
+|---|---|
+| Per-request data in Next.js App Router | RSC `await fetch()` |
+| Client-side cache + mutations + invalidation | TanStack Query |
+| Lightweight client cache + revalidation | SWR |
+| Real-time subscriptions | Server-Sent Events, WebSockets, or the lib's subscription API |
+| One-off fire-and-forget | `fetch()` in an event handler |
+
+Avoid `useEffect` + `fetch` for application data — race conditions, no cache, no retry, no Suspense integration.
+
+## Composition Recipes
+
+### Slot via `children`
+
+```tsx
+<Layout>
+  <Header />
+  <Main>{content}</Main>
+</Layout>
+```
+
+### Named slots
+
+```tsx
+<Page header={<Nav />} sidebar={<Filters />}>
+  <Results />
+</Page>
+```
+
+### Compound components (shared state via Context)
+
+```tsx
+<Tabs defaultValue="profile">
+  <Tabs.List>
+    <Tabs.Trigger value="profile">Profile</Tabs.Trigger>
+    <Tabs.Trigger value="settings">Settings</Tabs.Trigger>
+  </Tabs.List>
+  <Tabs.Panel value="profile"><Profile /></Tabs.Panel>
+  <Tabs.Panel value="settings"><Settings /></Tabs.Panel>
+</Tabs>
+```
+
+### Render prop / function-as-child
+
+Useful when the parent needs to pass parameters to the rendered output:
+
+```tsx
+<DataLoader id={id}>
+  {({ data, isLoading }) => isLoading ? <Spinner /> : <UserCard user={data} />}
+</DataLoader>
+```
+
+Modern alternative: a hook (`useData(id)`) returning the same shape — usually cleaner.
+
+## Performance
+
+### When `React.memo` Actually Helps
+
+Wrap a component in `React.memo` only when:
+
+1. It re-renders frequently
+2. Its props are usually the same between renders
+3. Its render is measurably expensive
+
+`React.memo` adds an equality check on every render. If props differ on most renders, the check is pure overhead.
+
+### Avoiding Render Cascades
+
+- Lift state down rather than up where possible
+- Split context: one context per concern, so a change to `themeContext` does not re-render auth consumers
+- Use `useSyncExternalStore` for external state libraries — required for safe concurrent rendering
+
+### Lists
+
+- Provide stable `key` props (database id, not array index)
+- Virtualize long lists with `@tanstack/react-virtual` or `react-window` once visible item count exceeds ~50 with non-trivial rows
+
+## Accessibility-First Composition
+
+- Always render semantic HTML (`<button>`, `<a>`, `<nav>`, `<main>`) before reaching for `role` attributes
+- Every interactive element must be reachable by keyboard
+- Form inputs need labels — `<label htmlFor>` or `aria-label` if visually labeled by an icon
+- Manage focus on route changes and modal open/close
+- Run `axe` in component tests (see [skills/react-testing](../react-testing/SKILL.md))
+- Cross-link: skills/accessibility covers WCAG criteria and pattern libraries when that optional skill is installed
+
+## Routing
+
+This skill is router-agnostic. The patterns above work with React Router, TanStack Router, Next.js App Router, Remix Router. Router-specific patterns (loaders, actions, nested layouts) follow the router's documentation — those are framework concerns layered on top of React core.
+
+## Out of Scope (Pointer Sections)
+
+- **Next.js specifics**: App Router data loading, Route Handlers, Middleware, Parallel Routes — separate concern, use Next.js docs
+- **React Native**: Platform-specific patterns differ enough to warrant a separate `react-native-patterns` skill (not present yet)
+- **Remix**: Loader/action conventions overlap with RSC but follow Remix docs
+
+## Related
+
+- Rules: [rules/react/](rules/react/) — coding-style, hooks, patterns, security, testing
+- Skills: [react-performance](../react-performance/SKILL.md) for the Vercel-derived performance ruleset; frontend-patterns for cross-framework UI concerns; accessibility; angular-developer for framework comparison
+- Agents: `react-reviewer` for code review, `react-build-resolver` for build/bundler errors
+- Commands: `/react-review`, `/react-build`, `/react-test`
+
+## Examples
+
+### Custom hook for debounced search
+
+```tsx
+function useDebounce<T>(value: T, delay = 300): T {
+  const [debounced, setDebounced] = useState(value);
+  useEffect(() => {
+    const id = setTimeout(() => setDebounced(value), delay);
+    return () => clearTimeout(id);
+  }, [value, delay]);
+  return debounced;
+}
+
+function SearchBox() {
+  const [query, setQuery] = useState("");
+  const debounced = useDebounce(query, 300);
+  const { data } = useQuery({
+    queryKey: ["search", debounced],
+    queryFn: () => searchApi(debounced),
+    enabled: debounced.length > 0,
+  });
+  return (
+    <>
+      <input value={query} onChange={(e) => setQuery(e.target.value)} />
+      <Results items={data ?? []} />
+    </>
+  );
+}
+```
+
+### Optimistic UI with React 19 `useOptimistic`
+
+```tsx
+"use client";
+import { useOptimistic } from "react";
+
+export function MessageList({ messages }: { messages: Message[] }) {
+  const [optimistic, addOptimistic] = useOptimistic(
+    messages,
+    (state, newMessage: Message) => [...state, newMessage],
+  );
+
+  async function send(formData: FormData) {
+    const text = String(formData.get("text"));
+    addOptimistic({ id: "pending", text, sender: "me" });
+    await saveMessage(text);
+  }
+
+  return (
+    <>
+      <ul>{optimistic.map((m) => <li key={m.id}>{m.text}</li>)}</ul>
+      <form action={send}>
+        <input name="text" />
+        <button type="submit">Send</button>
+      </form>
+    </>
+  );
+}
+```
+
+### Splitting context to avoid render cascades
+
+```tsx
+// Two contexts: one rarely changes, one frequently
+const ThemeContext = createContext<Theme>("light");
+const NotificationsContext = createContext<Notification[]>([]);
+
+// A component that only consumes ThemeContext does NOT re-render when notifications change
+```

package/skills/frontend/react/react-patterns/rules/react/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Affaan Mustafa
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/skills/frontend/react/react-patterns/rules/react/NOTICE.md

@@ -0,0 +1,11 @@
+# Third-party notice
+
+This directory contains React rule references copied from Affaan Mustafa's ECC
+repository.
+
+- Source: https://github.com/affaan-m/ECC/tree/main/rules/react
+- Source commit: 0f84c0e2796703fbda87d577b2636351418c7442
+- License: MIT
+- Copyright: Copyright (c) 2026 Affaan Mustafa
+
+The upstream MIT license is included in `LICENSE`.

package/skills/frontend/react/react-patterns/rules/react/coding-style.md

@@ -0,0 +1,109 @@
+---
+paths:
+  - "**/*.tsx"
+  - "**/*.jsx"
+  - "**/components/**/*.ts"
+  - "**/components/**/*.js"
+  - "**/hooks/**/*.ts"
+  - "**/hooks/**/*.js"
+---
+# React Coding Style
+
+> This file extends the upstream `typescript/coding-style.md` and `common/coding-style.md` rules with React specific content.
+
+## File Extensions
+
+- `.tsx` for any file containing JSX, even one-liner snippets
+- `.ts` for pure logic, custom hooks without JSX, type definitions, utilities
+- `.test.tsx` / `.test.ts` mirroring the source file
+- Use `.jsx` only when the project intentionally avoids TypeScript — flag every new untyped React file in review
+
+## Naming
+
+- Components: `PascalCase` for both the symbol and the file (`UserCard.tsx`, default export `UserCard`)
+- Custom hooks: `useCamelCase` for the symbol, kebab-case for the file when the project convention is kebab-case (`use-debounce.ts` exports `useDebounce`)
+- Context: `<Domain>Context` symbol, `<Domain>Provider` provider component, `use<Domain>` consumer hook
+- Event handlers: `handleClick`, `handleSubmit` inside the component; the prop that receives it is `onClick`, `onSubmit`
+- Boolean props: `isLoading`, `hasError`, `canSubmit` — never `loading` or `error` alone for booleans
+
+## Component Shape
+
+```tsx
+type Props = {
+  user: User;
+  onSelect: (id: string) => void;
+};
+
+export function UserCard({ user, onSelect }: Props) {
+  return (
+    <button type="button" onClick={() => onSelect(user.id)}>
+      {user.name}
+    </button>
+  );
+}
+```
+
+- Prefer `type Props = {}` for closed component prop shapes
+- Use `interface` only when the prop type is extended via declaration merging or exported as a public API extension point
+- Always destructure props in the parameter list — no `props.user` access inside the body
+- Type the return implicitly through JSX (`function Foo(): JSX.Element` only when the function returns conditionally and the union confuses inference)
+
+## JSX
+
+- Self-close tags with no children: `<img />`, `<UserCard user={u} />`
+- Use fragments `<>...</>` over wrapper `<div>` when no DOM element is needed
+- Conditional rendering: `{condition && <Foo />}` for booleans, ternary for either/or, early return for guard clauses
+- Never put logic inline in JSX when it reads as multi-line — extract to a const above the return or a function
+
+```tsx
+// Prefer
+const greeting = user.isAdmin ? "Welcome, admin" : `Hello ${user.name}`;
+return <h1>{greeting}</h1>;
+
+// Over
+return <h1>{user.isAdmin ? "Welcome, admin" : `Hello ${user.name}`}</h1>;
+```
+
+## Server / Client Boundary (Next.js App Router, RSC)
+
+- Default a new file to Server Component — only add `"use client"` when the file uses state, effects, refs, browser APIs, or event handlers
+- Place the `"use client"` directive on line 1, before any imports
+- Never import a Client Component file from inside a `"use server"` action file
+- Never re-export server-only code through a client module — the bundler will silently include it
+
+## Imports
+
+- React imports first: `import { useState } from "react"`
+- Then third-party libs, then absolute project imports, then relative
+- Type-only imports: `import type { ReactNode } from "react"` — never mix runtime and type imports in one statement when ESLint's `consistent-type-imports` is configured
+
+## Hooks Discipline
+
+See [hooks.md](./hooks.md) for the full ruleset. Style highlights:
+
+- Custom hooks must start with `use` — enforced by `eslint-plugin-react-hooks`
+- Group all hook calls at the top of the component, before any conditional logic
+- Avoid creating ad-hoc hooks for one-line wrappers — inline the call instead
+
+## State
+
+- Local first (`useState`), lift only when shared
+- Context for cross-cutting state read by many components (theme, auth, i18n) — not for high-frequency updates
+- External store (Zustand, Jotai, Redux Toolkit) when state must persist across route changes, sync across tabs, or be debugged via devtools
+- Never duplicate state that can be derived — compute during render
+
+## Class Components
+
+Forbidden in new code. Convert legacy class components to function components when touching them for non-trivial changes.
+
+## File Layout per Component
+
+```
+components/UserCard/
+  UserCard.tsx
+  UserCard.module.css   # or styled-components, or Tailwind classes inline
+  UserCard.test.tsx
+  index.ts              # re-export only
+```
+
+Inline single-file components are fine for trivial presentational pieces.

package/skills/frontend/react/react-patterns/rules/react/hooks.md

@@ -0,0 +1,187 @@
+---
+paths:
+  - "**/*.tsx"
+  - "**/*.jsx"
+  - "**/hooks/**/*.ts"
+  - "**/hooks/**/*.js"
+  - "**/use-*.ts"
+  - "**/use-*.tsx"
+---
+# React Hooks
+
+> This file covers **React hooks** (`useState`, `useEffect`, `useMemo`, `useCallback`, custom hooks) — NOT the Claude Code `hooks/` runtime system. Naming matches the per-language convention `rules/<lang>/hooks.md` used across this repo.
+>
+> Extends the upstream `typescript/patterns.md` and `common/patterns.md` rules.
+
+## Rules of Hooks
+
+Enforce `eslint-plugin-react-hooks` with `react-hooks/rules-of-hooks` set to error.
+
+1. Hooks only at the top level of a function component or another hook
+2. Never in loops, conditionals, nested functions, or after early returns
+3. Always called in the same order on every render
+4. Only inside React function components or custom hooks (functions starting with `use`)
+
+```tsx
+// WRONG: conditional hook
+function Foo({ enabled }: { enabled: boolean }) {
+  if (enabled) {
+    const [x, setX] = useState(0); // rule violation
+  }
+}
+
+// CORRECT: hook unconditional, condition inside
+function Foo({ enabled }: { enabled: boolean }) {
+  const [x, setX] = useState(0);
+  if (!enabled) return null;
+  return <span>{x}</span>;
+}
+```
+
+## `useEffect` — When NOT to Use
+
+`useEffect` is for synchronizing with external systems (subscriptions, browser APIs, third-party libraries). It is **not** the right tool for:
+
+- Derived state — compute it during render
+- Transforming data for rendering — compute it during render
+- Resetting state when a prop changes — use a `key` on the parent or derive from props
+- Notifying parents of state changes — call the callback in the event handler
+- Initializing app-level singletons — call the function module-side or in `main.tsx`
+
+```tsx
+// WRONG: effect for derived state
+const [fullName, setFullName] = useState("");
+useEffect(() => {
+  setFullName(`${first} ${last}`);
+}, [first, last]);
+
+// CORRECT: derive during render
+const fullName = `${first} ${last}`;
+```
+
+## Dependency Arrays
+
+- Always include every reactive value referenced inside the effect/callback
+- Enable `react-hooks/exhaustive-deps` lint rule — never silence it without a comment explaining why
+- If the dep array grows unwieldy, the effect is doing too much — split it
+- Stable identity for functions passed in deps: wrap in `useCallback` only when the function is itself a dependency of another hook or passed to a memoized child
+
+## Cleanup
+
+Every subscription, interval, listener, or in-flight request must clean up.
+
+```tsx
+useEffect(() => {
+  const controller = new AbortController();
+  fetch(url, { signal: controller.signal }).then(handleResponse);
+  return () => controller.abort();
+}, [url]);
+```
+
+```tsx
+useEffect(() => {
+  const id = setInterval(tick, 1000);
+  return () => clearInterval(id);
+}, []);
+```
+
+Missing cleanup = race conditions when deps change, memory leaks on unmount.
+
+## `useMemo` and `useCallback` — When Worth It
+
+Default position: **do not memoize**. Add `useMemo` / `useCallback` only when:
+
+1. The value is passed to a `React.memo`-wrapped child as a prop, and identity matters
+2. The value is a dependency of another `useEffect` / `useMemo` / `useCallback`
+3. The computation is measurably expensive (profile before assuming)
+
+Premature memoization adds noise, hides bugs, and can be slower than the recompute it replaces.
+
+## Custom Hooks
+
+Extract a custom hook when:
+
+- The same hook sequence (state + effect + computed) appears in 2+ components
+- The logic has a clear, nameable purpose (`useDebounce`, `useOnClickOutside`, `useLocalStorage`)
+- You want to test the logic independently of any component
+
+Do NOT extract when:
+
+- It would have a single caller — inline it
+- The "hook" is just `useState` with a different name — adds indirection, no value
+
+```tsx
+export function useDebounce<T>(value: T, delay: number): T {
+  const [debounced, setDebounced] = useState(value);
+  useEffect(() => {
+    const id = setTimeout(() => setDebounced(value), delay);
+    return () => clearTimeout(id);
+  }, [value, delay]);
+  return debounced;
+}
+```
+
+## `useState` Patterns
+
+- Initial state from prop only at mount: pass a function `useState(() => computeInitial(prop))` when computation is expensive
+- Functional updater when the new state depends on the old: `setCount(c => c + 1)` — never `setCount(count + 1)` inside async or batched contexts
+- Group related state into one object only when they always change together; otherwise split into multiple `useState` calls
+- Use `useReducer` once state transitions are conditional on the previous state or there are 3+ related values
+
+## `useRef` Patterns
+
+- DOM refs for imperative APIs (focus, scroll, third-party libs)
+- Mutable container that does not trigger re-render (timer ids, previous values, "is mounted" flags)
+- Never read or write `ref.current` during render — only inside effects or event handlers
+- `useImperativeHandle` only when exposing a child API to a parent ref — last-resort escape hatch
+
+## `useSyncExternalStore`
+
+Use this hook to subscribe to any external store (browser API, third-party state lib, custom event emitter). It is the supported way to make external state safe with concurrent rendering.
+
+```tsx
+const isOnline = useSyncExternalStore(
+  (cb) => {
+    window.addEventListener("online", cb);
+    window.addEventListener("offline", cb);
+    return () => {
+      window.removeEventListener("online", cb);
+      window.removeEventListener("offline", cb);
+    };
+  },
+  () => navigator.onLine,
+  () => true,
+);
+```
+
+## React 19 Additions
+
+- `use()` — unwrap promises and contexts inline; usable conditionally (only hook with that property)
+- `useFormStatus()` / `useFormState()` (or `useActionState`) — form submission state without prop drilling
+- `useOptimistic()` — optimistic UI updates while a server action is pending
+- `useTransition()` — mark non-urgent state updates so urgent ones stay responsive
+
+When the project targets React 19+, prefer these over hand-rolled equivalents.
+
+## Stale Closure Trap
+
+Async handlers and intervals capture the values from the render where they were created. Fix by:
+
+1. Using the functional updater form of `setState`
+2. Putting the changing value in the dep array of `useEffect` and rebuilding the handler
+3. Reading from a ref that is kept in sync
+
+## Lint Configuration
+
+Required rules:
+
+```json
+{
+  "rules": {
+    "react-hooks/rules-of-hooks": "error",
+    "react-hooks/exhaustive-deps": "warn"
+  }
+}
+```
+
+Treat `exhaustive-deps` warnings as errors in CI for new code.