@nockdev/awf 6.2.0

package/.agent/skills/frameworks/react/SKILL.md

@@ -0,0 +1,263 @@
+---
+name: react
+detect: ["package.json:react", "*.jsx", "*.tsx", "vite.config.ts"]
+version: "6.1.2"
+category: frontend
+tier: 1
+---
+
+# React Patterns — DOMYH Awesome Code
+
+> **Version**: React 19 (2025-2026)
+> **Philosophy**: Server-first, compiler-optimized, hooks-based
+
+---
+
+## 🎯 When to Use This Skill
+
+Use for: React SPAs, component libraries, client-side apps.
+**NOT for**: SSR (→ nextjs), mobile-first (→ flutter).
+
+---
+
+## 📦 Recommended Stack (2025-2026)
+
+### Core
+
+- **React 19** - UI library 🏆
+- **TypeScript 5.5+** - Type safety
+- **Vite 6** - Build tool 🏆
+
+### UI Components
+
+- **shadcn/ui** - Radix + Tailwind 🏆
+- **Radix UI** - Headless primitives
+
+### State Management
+
+- **Zustand** - Simple client state 🏆
+- **TanStack Query** - Server state 🏆
+
+### Forms
+
+- **React Hook Form** + **Zod** 🏆
+
+---
+
+## 🆕 React 19 Features
+
+### React Compiler (Auto Memoization)
+
+```tsx
+// ✅ No need for useMemo/useCallback!
+function ExpensiveList({ items }: { items: Item[] }) {
+  const sorted = items.toSorted((a, b) => a.name.localeCompare(b.name));
+  return (
+    <ul>
+      {sorted.map((item) => (
+        <li key={item.id}>{item.name}</li>
+      ))}
+    </ul>
+  );
+}
+```
+
+### use() Hook
+
+```tsx
+import { use, Suspense } from "react";
+
+function UserProfile({ userPromise }: { userPromise: Promise<User> }) {
+  const user = use(userPromise);
+  return <h1>{user.name}</h1>;
+}
+
+<Suspense fallback={<Loading />}>
+  <UserProfile userPromise={fetchUser()} />
+</Suspense>;
+```
+
+### useOptimistic Hook
+
+```tsx
+"use client";
+import { useOptimistic } from "react";
+
+function LikeButton({ likes }: { likes: number }) {
+  const [optimisticLikes, addLike] = useOptimistic(likes, (s) => s + 1);
+
+  async function handleLike() {
+    addLike(null);
+    await likePost();
+  }
+
+  return <button onClick={handleLike}>❤️ {optimisticLikes}</button>;
+}
+```
+
+### useActionState
+
+```tsx
+import { useActionState, useFormStatus } from "react";
+
+function SubmitButton() {
+  const { pending } = useFormStatus();
+  return <button disabled={pending}>{pending ? "..." : "Submit"}</button>;
+}
+
+function Form() {
+  const [state, action] = useActionState(async (prev, formData) => {
+    const result = await submit(formData);
+    return result.success ? null : result.error;
+  }, null);
+
+  return (
+    <form action={action}>
+      <input name="email" required />
+      <SubmitButton />
+      {state && <p className="text-red-500">{state}</p>}
+    </form>
+  );
+}
+```
+
+---
+
+## 🏗️ Component Patterns
+
+```tsx
+interface Props {
+  user: User;
+  onEdit?: (user: User) => void;
+}
+
+export function UserCard({ user, onEdit }: Props) {
+  return (
+    <div className="rounded-lg p-4 shadow">
+      <h3>{user.name}</h3>
+      {onEdit && <button onClick={() => onEdit(user)}>Edit</button>}
+    </div>
+  );
+}
+```
+
+---
+
+## 📊 State Management
+
+### Zustand Store
+
+```tsx
+import { create } from "zustand";
+
+interface AuthStore {
+  user: User | null;
+  login: (email: string, password: string) => Promise<void>;
+  logout: () => void;
+}
+
+export const useAuth = create<AuthStore>((set) => ({
+  user: null,
+  login: async (email, password) => {
+    const user = await authApi.login(email, password);
+    set({ user });
+  },
+  logout: () => set({ user: null }),
+}));
+```
+
+### TanStack Query
+
+```tsx
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+
+export function useUser(id: string) {
+  return useQuery({
+    queryKey: ["user", id],
+    queryFn: () => api.getUser(id),
+    staleTime: 5 * 60 * 1000,
+  });
+}
+
+export function useUpdateUser() {
+  const client = useQueryClient();
+  return useMutation({
+    mutationFn: api.updateUser,
+    onSuccess: () => client.invalidateQueries({ queryKey: ["user"] }),
+  });
+}
+```
+
+---
+
+## 🎨 Form Handling
+
+```tsx
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+
+const schema = z.object({
+  name: z.string().min(2),
+  email: z.string().email(),
+});
+
+export function UserForm({
+  onSubmit,
+}: {
+  onSubmit: (d: z.infer<typeof schema>) => void;
+}) {
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm({
+    resolver: zodResolver(schema),
+  });
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)}>
+      <input {...register("name")} />
+      {errors.name && <span>{errors.name.message}</span>}
+      <input {...register("email")} />
+      {errors.email && <span>{errors.email.message}</span>}
+      <button>Submit</button>
+    </form>
+  );
+}
+```
+
+---
+
+## ✅ Best Practices Checklist
+
+- [ ] React 19 Compiler enabled
+- [ ] TypeScript strict mode
+- [ ] TanStack Query for server state
+- [ ] Zustand for client state
+- [ ] Suspense for loading states
+- [ ] Proper accessibility (a11y)
+
+---
+
+## 📚 External References — Performance Rules
+
+> **Source**: Vercel React Best Practices (57 rules)
+> **Rules**: 57 detailed optimization rules across 8 categories
+
+For advanced performance optimization, see [ADVANCED.md](./ADVANCED.md#vercel-performance-rules):
+
+| Priority | Category                   | Impact   | Prefix         |
+| -------- | -------------------------- | -------- | -------------- |
+| 1        | Eliminating Waterfalls     | CRITICAL | `async-`       |
+| 2        | Bundle Size Optimization   | CRITICAL | `bundle-`      |
+| 3        | Server-Side Performance    | HIGH     | `server-`      |
+| 4        | Client-Side Data Fetching  | HIGH     | `client-`      |
+| 5        | Re-render Optimization     | MEDIUM   | `rerender-`    |
+| 6        | Third-Party Optimization   | MEDIUM   | `third-party-` |
+| 7        | Image & Media Optimization | MEDIUM   | `media-`       |
+| 8        | Advanced Patterns          | LOW      | `advanced-`    |
+
+---
+
+_DOMYH Awesome Code • React 19_

package/.agent/skills/frameworks/react/data/core.yaml

@@ -0,0 +1,278 @@
+# =============================================================================
+# React Core Patterns (Feb 2026)
+# =============================================================================
+# React 19.2, Server Components, Hooks
+
+metadata:
+  skill: react
+  domain: core
+  version: "19.2"
+  updated: "2026-02-05"
+  patterns_count: 6
+
+patterns:
+  - id: react001
+    name: Functional Components
+    category: architecture
+    version: "16.8+"
+    description: Modern React component pattern with hooks
+    text: function component hook useState useEffect props
+    example: |
+      import { useState, useEffect } from 'react';
+
+      interface UserCardProps {
+        userId: string;
+        onSelect?: (user: User) => void;
+      }
+
+      export function UserCard({ userId, onSelect }: UserCardProps) {
+        const [user, setUser] = useState<User | null>(null);
+        const [loading, setLoading] = useState(true);
+
+        useEffect(() => {
+          async function fetchUser() {
+            setLoading(true);
+            const response = await fetch(`/api/users/${userId}`);
+            const data = await response.json();
+            setUser(data);
+            setLoading(false);
+          }
+          fetchUser();
+        }, [userId]);
+
+        if (loading) return <Skeleton />;
+        if (!user) return <p>User not found</p>;
+
+        return (
+          <div onClick={() => onSelect?.(user)}>
+            <img src={user.avatar} alt={user.name} />
+            <h3>{user.name}</h3>
+            <p>{user.email}</p>
+          </div>
+        );
+      }
+    severity: CRITICAL
+    docs_url: https://react.dev/learn/your-first-component
+
+  - id: react002
+    name: useOptimistic (React 19)
+    category: hooks
+    version: "19+"
+    description: Optimistic UI updates for instant feedback
+    text: useOptimistic optimistic ui pending instant update
+    example: |
+      'use client';
+      import { useOptimistic } from 'react';
+
+      interface Message {
+        id: string;
+        text: string;
+        sending?: boolean;
+      }
+
+      export function MessageList({ messages, sendMessage }) {
+        // ✅ useOptimistic for instant UI feedback
+        const [optimisticMessages, addOptimisticMessage] = useOptimistic<
+          Message[],
+          string
+        >(messages, (state, newMessage) => [
+          ...state,
+          { id: crypto.randomUUID(), text: newMessage, sending: true },
+        ]);
+
+        async function handleSubmit(formData: FormData) {
+          const text = formData.get('message') as string;
+          addOptimisticMessage(text);  // Instant UI update
+          await sendMessage(text);      // Server action
+        }
+
+        return (
+          <>
+            <ul>
+              {optimisticMessages.map((msg) => (
+                <li key={msg.id} style={{ opacity: msg.sending ? 0.5 : 1 }}>
+                  {msg.text}
+                </li>
+              ))}
+            </ul>
+            <form action={handleSubmit}>
+              <input name="message" />
+              <button>Send</button>
+            </form>
+          </>
+        );
+      }
+    severity: HIGH
+    docs_url: https://react.dev/reference/react/useOptimistic
+
+  - id: react003
+    name: useEffectEvent (React 19.2)
+    category: hooks
+    version: "19.2+"
+    description: |
+      Stable event handlers without stale closures.
+      Access latest props/state without re-running effects.
+    text: useEffectEvent effect event stable closure dependencies
+    example: |
+      import { useEffect, useEffectEvent } from 'react';
+
+      function ChatRoom({ roomId, theme }) {
+        // ✅ useEffectEvent: Stable callback that always sees latest values
+        const onMessage = useEffectEvent((message: Message) => {
+          // Always has access to current theme, without triggering effect rerun
+          showNotification(message, theme);
+        });
+
+        useEffect(() => {
+          const connection = createConnection(roomId);
+          connection.on('message', onMessage);
+          return () => connection.disconnect();
+        }, [roomId]);  // ✅ onMessage NOT in deps array!
+
+        // ✅ Benefits:
+        // - No stale closure bugs
+        // - Effect doesn't rerun when theme changes
+        // - Always accesses current props/state
+
+        // ⚠️ Rules:
+        // - Only call from useEffect or other useEffectEvent
+        // - Cannot be called during rendering
+      }
+    severity: HIGH
+    docs_url: https://react.dev/reference/react/useEffectEvent
+
+  - id: react004
+    name: Activity Component (React 19.2)
+    category: rendering
+    version: "19.2+"
+    description: |
+      Preserve component state when hidden.
+      Pre-render offscreen components efficiently.
+    text: activity hidden visible offscreen preserve state
+    example: |
+      import { Activity } from 'react';
+
+      function TabContainer({ activeTab }) {
+        return (
+          <div>
+            {/* ✅ Activity preserves state when hidden */}
+            <Activity mode={activeTab === 'home' ? 'visible' : 'hidden'}>
+              <HomeTab />
+            </Activity>
+
+            <Activity mode={activeTab === 'profile' ? 'visible' : 'hidden'}>
+              <ProfileTab />
+            </Activity>
+
+            <Activity mode={activeTab === 'settings' ? 'visible' : 'hidden'}>
+              <SettingsTab />
+            </Activity>
+          </div>
+        );
+      }
+
+      // ✅ Benefits:
+      // - State preserved across visibility changes
+      // - Effects cleaned up when hidden, restored when visible
+      // - No remounting = faster tab switches
+      // - Pre-render content before showing
+
+      // Use cases:
+      // - Tab interfaces
+      // - Modals
+      // - Multi-step forms
+      // - Drawer navigation
+    severity: MEDIUM
+    docs_url: https://react.dev/reference/react/Activity
+
+  - id: react005
+    name: use() Hook (React 19)
+    category: hooks
+    version: "19+"
+    description: Read resources (Promises, Context) in render
+    text: use promise context suspend async await render
+    example: |
+      import { use } from 'react';
+
+      // ✅ use() with Promises
+      function UserProfile({ userPromise }) {
+        // Suspends until promise resolves
+        const user = use(userPromise);
+        return <h1>{user.name}</h1>;
+      }
+
+      // ✅ use() with Context (conditional access!)
+      function ThemedButton({ showTheme }) {
+        if (showTheme) {
+          const theme = use(ThemeContext);  // ✅ OK in conditionals!
+          return <button style={{ background: theme.primary }}>Click</button>;
+        }
+        return <button>Click</button>;
+      }
+
+      // Usage with Suspense
+      <Suspense fallback={<Loading />}>
+        <UserProfile userPromise={fetchUser(id)} />
+      </Suspense>
+
+      // ✅ Benefits over useContext:
+      // - Can be called conditionally
+      // - Works with Promises
+      // - Better integration with Suspense
+    severity: HIGH
+    docs_url: https://react.dev/reference/react/use
+
+  - id: react006
+    name: Custom Hooks
+    category: patterns
+    version: "16.8+"
+    description: Extract and reuse stateful logic
+    text: custom hook reusable logic extract composition
+    example: |
+      import { useState, useEffect, useCallback } from 'react';
+
+      // ✅ Custom hook for data fetching
+      function useFetch<T>(url: string) {
+        const [data, setData] = useState<T | null>(null);
+        const [error, setError] = useState<Error | null>(null);
+        const [loading, setLoading] = useState(true);
+
+        const refetch = useCallback(async () => {
+          setLoading(true);
+          try {
+            const response = await fetch(url);
+            if (!response.ok) throw new Error('Failed to fetch');
+            setData(await response.json());
+          } catch (e) {
+            setError(e as Error);
+          } finally {
+            setLoading(false);
+          }
+        }, [url]);
+
+        useEffect(() => {
+          refetch();
+        }, [refetch]);
+
+        return { data, error, loading, refetch };
+      }
+
+      // ✅ Custom hook for form state
+      function useForm<T>(initialValues: T) {
+        const [values, setValues] = useState(initialValues);
+
+        const handleChange = (name: keyof T) => (
+          e: React.ChangeEvent<HTMLInputElement>
+        ) => {
+          setValues((prev) => ({ ...prev, [name]: e.target.value }));
+        };
+
+        const reset = () => setValues(initialValues);
+
+        return { values, handleChange, reset };
+      }
+
+      // Usage
+      const { values, handleChange } = useForm({ email: '', password: '' });
+    severity: HIGH
+    docs_url: https://react.dev/learn/reusing-logic-with-custom-hooks