@thanhthi2895/luna-ai 2.16.2

package/agentic/antigravity/.agents/skills/react-best-practices/rules/server-serialization.md

@@ -0,0 +1,38 @@
+---
+title: Minimize Serialization at RSC Boundaries
+impact: HIGH
+impactDescription: reduces data transfer size
+tags: server, rsc, serialization, props
+---
+
+## Minimize Serialization at RSC Boundaries
+
+The React Server/Client boundary serializes all object properties into strings and embeds them in the HTML response and subsequent RSC requests. This serialized data directly impacts page weight and load time, so **size matters a lot**. Only pass fields that the client actually uses.
+
+**Incorrect (serializes all 50 fields):**
+
+```tsx
+async function Page() {
+  const user = await fetchUser()  // 50 fields
+  return <Profile user={user} />
+}
+
+'use client'
+function Profile({ user }: { user: User }) {
+  return <div>{user.name}</div>  // uses 1 field
+}
+```
+
+**Correct (serializes only 1 field):**
+
+```tsx
+async function Page() {
+  const user = await fetchUser()
+  return <Profile name={user.name} />
+}
+
+'use client'
+function Profile({ name }: { name: string }) {
+  return <div>{name}</div>
+}
+```

package/agentic/antigravity/.agents/skills/react-structure/SKILL.md

@@ -0,0 +1,398 @@
+---
+name: lu:react-structure
+author: luna
+description: Scaffold standard folder structure and enforce Container-View pattern for React/Vite and Next.js projects. Use when creating new project, restructuring existing project, or splitting components into Container/View.
+---
+
+# React Project Structure 🗂️
+
+## Process (Folder Scaffold)
+
+1. **Identify stack**: React/Vite or Next.js (ask user if unclear).
+2. **Scaffold** per template below. Create `.gitkeep` in empty folders.
+3. **Implement**: apply all rules (Container-View, decomposition, naming, file placement).
+4. **Verify** — run checklist below against actual files (MANDATORY, auto-run after step 3).
+5. **Report** — output violation report to user before finishing.
+
+---
+
+## Step 4 — Verification Checklist
+
+After scaffold or refactor, run `tree src/` and check **every item**:
+
+### Structure
+- [ ] `screens/<Screen>/` contains **exactly**: `index.ts`, `<Screen>Container.tsx`, `<Screen>View.tsx`, `__tests__/`
+- [ ] No `hooks/`, `constants/`, `utils/` inside any `<Screen>/` folder
+- [ ] No sub-components inside `<Screen>/` (only imports from `../../../components/`)
+- [ ] `hooks/`, `constants/` exist at `features/<module>/` level (same level as `screens/`)
+- [ ] `page.tsx` (Next.js) contains **only** import + single JSX return — no logic
+
+### Container-View
+- [ ] Every custom component has `Container.tsx` + `View.tsx` + `index.ts`
+- [ ] `<Name>View.tsx` is wrapped in `React.memo()`
+- [ ] `<Screen>View.tsx` only renders sub-components — no raw HTML/JSX blocks
+- [ ] Callbacks in Container wrapped in `useCallback`, derived data in `useMemo`
+- [ ] `index.ts` re-exports **Container** as default (not View)
+- [ ] No file outside a component folder imports `*View.tsx` directly
+- [ ] All cross-folder imports use plain component name via `index.ts` (e.g. `import UsersHeader from '../components/UsersHeader'` not `import UsersHeaderView from '...'`)
+
+### Decomposition
+- [ ] No View file exceeds 30 lines of JSX
+- [ ] No component receives more than 5 props
+- [ ] Every distinct UI section (header, filter, table, pagination, empty state) is its own component
+
+### Naming
+- [ ] Folders: kebab-case (except component folders which are PascalCase)
+- [ ] Components: PascalCase
+- [ ] Hooks: camelCase starting with `use`
+- [ ] All functions/components use arrow function syntax
+
+### Tests
+- [ ] `__tests__/` exists at same level as each source file
+- [ ] Test files use `.test.ts` / `.test.tsx` suffix
+
+---
+
+## Step 5 — Violation Report
+
+After running checklist, output a report in this format:
+
+```
+## Structure Verification Report
+
+### ✅ Passed
+- [list passing checks]
+
+### ❌ Violations Found
+- [File/folder]: [rule violated] → [fix required]
+
+### ⚠️ Warnings
+- [non-critical issues or suggestions]
+
+### Next Steps
+- [what to fix before proceeding]
+```
+
+If all checks pass → output `✅ All checks passed. Structure is compliant.`
+
+---
+
+
+
+## Template: React/Vite & Next.js — Feature-based
+
+```
+src/
+  components/
+    ui/           # Atomic UI (Button, Input, ...)
+      __tests__/
+    layout/       # Header, Sidebar, Footer
+  features/
+    <module>/
+      components/
+        <Name>/   # Container-View pattern (MANDATORY for all custom components)
+          index.ts
+          <Name>Container.tsx
+          <Name>View.tsx
+          __tests__/
+      screens/
+        <Screen>/   # STRICT: only these 4 items allowed inside
+          index.ts
+          <Screen>Container.tsx
+          <Screen>View.tsx
+          __tests__/
+      hooks/        # feature hooks — same level as screens/
+        __tests__/
+      constants/    # feature constants — same level as screens/
+      services/
+        __tests__/
+      types/
+      index.ts
+  hooks/          # Shared hooks
+    __tests__/
+  services/       # Shared services
+    __tests__/
+  stores/         # Zustand / Redux
+  types/
+  utils/
+    __tests__/
+  lib/            # Third-party configs
+  test/
+    setup.ts
+    mocks/
+tests/
+  e2e/
+```
+
+**Next.js addition**: `src/app/` contains **only routing files** (`page.tsx`, `layout.tsx`, `loading.tsx`, `error.tsx`). All logic, components, hooks, and services MUST live in `src/features/<module>/`. Add `features/<module>/actions/` for Server Actions.
+
+---
+
+## Next.js App Router Convention 🚦
+
+### Core Rule
+
+> **`src/app/` is routing-only.** A `page.tsx` file MUST be a thin entry point — it only imports and renders the feature's root component. No JSX logic, no hooks, no data fetching inside `src/app/**/*.tsx`.
+
+### Folder layout
+
+```
+src/
+  app/
+    (route-group)/
+      page-name/
+        page.tsx        ← THIN: just `import` + `return <FeatureScreen />`
+        layout.tsx      ← layout only
+        loading.tsx     ← loading UI only
+        error.tsx       ← error boundary only
+  features/
+    <feature>/
+      components/       ← all custom components (Container-View)
+      screens/          ← page-level Container-View (entry component)
+      hooks/
+      services/
+      actions/          ← Next.js Server Actions
+      types/
+      index.ts
+```
+
+### page.tsx pattern (MANDATORY)
+
+```tsx
+// src/app/(dashboard)/users/page.tsx
+import UsersScreen from '@/features/users/screens/UsersScreen';
+
+const UsersPage = () => <UsersScreen />;
+export default UsersPage;
+```
+
+### What belongs where
+
+| Location | Allowed | Forbidden |
+|---|---|---|
+| `src/app/**/page.tsx` | import + single JSX return | hooks, logic, data fetching, components |
+| `src/app/**/layout.tsx` | layout shell, providers | business logic |
+| `src/features/<f>/screens/` | Container-View for the page | routing concerns |
+| `src/features/<f>/components/` | all custom UI components | anything from `src/app/` |
+| `src/features/<f>/actions/` | Server Actions (`'use server'`) | client-side code |
+
+---
+
+## Component Decomposition Rules 🔪
+
+### Screen Folder Contract (STRICT)
+
+> A `<Screen>/` folder contains **exactly 4 items** — nothing more.
+
+| Item | Allowed | Forbidden inside `<Screen>/` |
+|---|---|---|
+| `index.ts` | ✅ | hooks/, constants/, utils/ |
+| `<Screen>Container.tsx` | ✅ | any `.ts` constants file |
+| `<Screen>View.tsx` | ✅ | sub-components of any kind |
+| `__tests__/` | ✅ | nested folders beyond `__tests__/` |
+
+**Where the rest goes** (same level as `screens/`, inside `features/<module>/`):
+
+```
+features/<module>/
+  components/     ← sub-components used by screens
+  screens/        ← only Container + View + index + __tests__
+  hooks/          ← all feature hooks (useUsers, useFilters, ...)
+  constants/      ← all feature constants (COLUMNS, STATUS_MAP, ...)
+  services/
+  types/
+  index.ts
+```
+
+---
+
+### A — Screen = Composition Only (MANDATORY)
+
+> **A `<Screen>View.tsx` MUST only compose sub-components. No raw UI blocks allowed.**
+>
+> Every distinct visual section (header, filters, list, empty state, skeleton, pagination, modal trigger) MUST be its own component.
+
+```tsx
+// ✅ CORRECT — UsersScreenView.tsx
+const UsersScreenView = React.memo(({ ... }: UsersScreenViewProps) => (
+  <>
+    <UsersHeader />
+    <UsersFiltersBar />
+    <UsersTable />
+    <UsersPagination />
+  </>
+));
+
+// ❌ WRONG — raw JSX blocks inside ScreenView
+const UsersScreenView = React.memo(() => (
+  <div>
+    <div className="header"><h1>Users</h1><button>...</button></div>
+    <table>... 80 lines of table JSX ...</table>
+  </div>
+));
+```
+
+### B — All Sub-components Live in `components/` (same level as `screens/`)
+
+> **`screens/` is a consumer only.** It never owns sub-components.
+> All components — whether used by one screen or many — live in `features/<module>/components/`.
+
+```
+features/users/
+  components/             ← ALL sub-components live here
+    UsersHeader/
+      index.ts
+      UsersHeaderContainer.tsx
+      UsersHeaderView.tsx
+      __tests__/
+    UsersFiltersBar/
+      ...
+    UsersTable/
+      ...
+    UsersEmptyState/
+      ...
+  screens/
+    UsersScreen/          ← only IMPORTS from ../components/
+      index.ts
+      UsersScreenContainer.tsx
+      UsersScreenView.tsx   ← imports UsersHeader, UsersTable, ...
+      __tests__/
+```
+
+### C — Complexity Budget (Decompose Triggers)
+
+Decompose immediately when **ANY** of these thresholds is hit:
+
+| Metric | Threshold | Action |
+|---|---|---|
+| JSX lines in a View | > 30 lines | Extract to sub-component |
+| Props on a component | > 5 props | Split or group into object |
+| Concerns in one component | > 1 concern | Split by responsibility |
+| Same JSX pattern used 2+ times | — | Extract to reusable component |
+| Block has its own semantic name | header / filter / list / card / modal | Always extract |
+
+### Decompose Decision Tree
+
+```
+Is this JSX block a distinct UI section? (header, list, filter, modal, etc.)
+  YES → Extract to component → features/<module>/components/<Name>/
+  NO  → Keep inline
+
+Does the View exceed 30 lines of JSX?
+  YES → Find blocks to extract → components/<Name>/
+  NO  → OK
+
+Does a component receive > 5 props?
+  YES → Split or group props into typed object
+  NO  → OK
+
+Is this component used by 2+ screens?
+  YES → Already in components/ ✅ (no action needed)
+  NO  → Still in components/ ✅ (screens never own components)
+```
+
+---
+
+## Test Rules
+
+- `__tests__/` **always at same level** as source file (colocation).
+- Suffix: `.test.ts` / `.test.tsx`
+- E2E: `tests/e2e/` at root
+
+```
+✅  hooks/__tests__/useLogin.test.ts
+❌  hooks/useLogin.test.ts
+```
+
+---
+
+## Container-View Pattern 🧩
+
+### Mandatory Rule
+
+> **EVERY custom component — no matter how simple — MUST apply Container-View pattern.**
+>
+> ONLY exception: UI primitives imported directly from a framework (shadcn/ui, Radix UI, MUI, Ant Design, …).
+
+### Quick Start
+
+**Required split order:** View → Hook (if needed) → Container
+
+```
+components/UserCard/
+  index.ts               ← re-export Container as default ONLY
+  UserCardContainer.tsx  ← logic/state
+  UserCardView.tsx       ← presentation only (PRIVATE to this folder)
+  hooks/
+    useUserData.ts       ← optional custom hook
+```
+
+### `index.ts` Contract (MANDATORY)
+
+`index.ts` **MUST** re-export only the Container as default — nothing else:
+
+```ts
+// ✅ CORRECT — components/UserCard/index.ts
+export { default } from './UserCardContainer';
+
+// ❌ WRONG — never export View from index.ts
+export { default } from './UserCardView';
+export { UserCardView } from './UserCardView'; // forbidden
+```
+
+### Import Encapsulation Rules (MANDATORY)
+
+> **`<Name>View` is PRIVATE.** Only `<Name>Container` may import it.
+> All other files MUST import via `index.ts` using the plain component name.
+
+```tsx
+// ✅ CORRECT — UsersScreenView.tsx imports via index.ts
+import UsersHeader from '../components/UsersHeader';          // resolves to Container
+import UsersTable from '../components/UsersTable';            // resolves to Container
+
+// ❌ WRONG — importing View directly from outside the component folder
+import UsersHeaderView from '../components/UsersHeader/UsersHeaderView';
+import { UsersTableView } from '../components/UsersTable/UsersTableView';
+```
+
+| Who | Can import | Cannot import |
+|---|---|---|
+| `<Name>Container.tsx` | `<Name>View.tsx` ✅ | other components' View |
+| `<Screen>View.tsx` | `index.ts` of each component ✅ | any `*View.tsx` directly |
+| `<Screen>Container.tsx` | `index.ts` of each component ✅ | any `*View.tsx` directly |
+| Any file outside folder | `index.ts` only ✅ | `*View.tsx`, `*Container.tsx` directly |
+
+### Core Principles
+
+- **View**: pure presentation — props only, no `useState`/`useEffect`/API calls. **MUST wrap in `React.memo()`**
+- **Container**: orchestrates logic, calls hooks, passes data to View. **MUST wrap callbacks in `useCallback`, derived data in `useMemo`**
+- **Hook**: extracts reusable state/effects — return `{ data, handlers }`
+- **Arrow functions**: all components and functions MUST use arrow function syntax (`const Foo = () => {}`)
+- **TypeScript**: always define explicit props interface (see `schemas/`)
+- **Tests**: write immediately after each file — View, Hook, Container
+
+### Memoization Rules (MANDATORY)
+
+| What | How | Why |
+|------|-----|-----|
+| `<Name>View.tsx` component | `React.memo()` | Prevent unnecessary re-renders |
+| Callbacks passed to View | `useCallback()` in Container | Stable reference across renders |
+| Derived/computed data passed to View | `useMemo()` in Container | Avoid recomputation |
+| All functions (components, handlers, hooks) | Arrow function syntax | Consistent style |
+
+### References
+
+| Topic | File |
+|-------|------|
+| File structure & naming | `references/file-structure.md` |
+| Splitting process (step-by-step) | `references/splitting-process.md` |
+| Custom Hook pattern | `hooks/custom-hook-pattern.md` |
+| TypeScript props schema | `schemas/component-props-schema.md` |
+
+---
+
+## Notes
+
+- **Naming**: kebab-case folders, PascalCase for React components.
+- **Don't overwrite**: check target folder before creating.
+- For performance optimization rules, see `react-best-practices` skill.

package/agentic/antigravity/.agents/skills/react-structure/hooks/custom-hook-pattern.md

@@ -0,0 +1,82 @@
+# Custom Hook Pattern (`use<Feature>.ts`)
+
+## When to Create
+
+Create a custom hook when logic is **reusable** across containers or **complex enough** to warrant isolation.
+
+| Situation | Action |
+|-----------|--------|
+| State + effects used in > 1 container | ✅ Extract to custom hook |
+| API call + loading/error state | ✅ Extract to custom hook |
+| Simple `useState` in one container only | ❌ Keep in Container |
+
+## Structure
+
+**MUST** use arrow function syntax for hook and all internal handlers.
+Wrap handlers in `useCallback` so Container can pass stable refs to memoized View.
+
+```ts
+// useUserData.ts
+import { useState, useEffect, useCallback } from 'react';
+
+export const useUserData = (userId: string) => {
+  const [user, setUser] = useState<User | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    fetchUser(userId).then(setUser).finally(() => setLoading(false));
+  }, [userId]);
+
+  const handleUpdate = useCallback(async (data: Partial<User>) => {
+    await updateUser(userId, data);
+    setUser(prev => prev ? { ...prev, ...data } : null);
+  }, [userId]);
+
+  return {
+    data: { user, loading },
+    handlers: { handleUpdate },
+  };
+};
+```
+
+## Return Type (mandatory)
+
+**MUST** define explicit return type interface named `use<Name>Return`:
+
+```ts
+interface useUserDataReturn {
+  data: { user: User | null; loading: boolean };
+  handlers: { handleUpdate: (data: Partial<User>) => Promise<void> };
+}
+
+export const useUserData = (userId: string): useUserDataReturn => {
+  // ...
+  return {
+    data: { user, loading },
+    handlers: { handleUpdate },
+  };
+};
+```
+
+Always return `{ data, handlers }` shape.
+
+## File Naming
+
+- `use<Feature>.ts` — for data/state (e.g., `useUserData.ts`)
+- `use<Action>.ts` — for actions (e.g., `useFormSubmit.ts`)
+
+## Testing
+
+Write test immediately after creating the hook:
+
+```ts
+// useUserData.test.ts
+import { renderHook, act } from '@testing-library/react';
+import { useUserData } from './useUserData';
+
+it('fetches user on mount', async () => {
+  const { result } = renderHook(() => useUserData('1'));
+  expect(result.current.data.loading).toBe(true);
+  // ...
+});
+```

package/agentic/antigravity/.agents/skills/react-structure/references/file-structure.md

@@ -0,0 +1,63 @@
+# File Structure Reference
+
+## Standard Component Folder
+
+```
+components/UserCard/
+  index.ts                       ← MANDATORY: re-export Container as default
+  UserCardContainer.tsx          ← PascalCase: <Name>Container.tsx
+  UserCardView.tsx               ← PascalCase: <Name>View.tsx
+  hooks/
+    useUserData.ts               ← optional: use<Feature>.ts
+  __tests__/
+    UserCardView.test.tsx
+    UserCardContainer.test.tsx
+```
+
+## Naming Rules
+
+| File | Convention | Example |
+|------|-----------|---------|
+| Folder | PascalCase | `UserCard/` |
+| Container | `<Name>Container.tsx` | `UserCardContainer.tsx` |
+| View | `<Name>View.tsx` | `UserCardView.tsx` |
+| Hook | `use<Feature>.ts` | `useUserData.ts` |
+| Entry point | `index.ts` | `index.ts` |
+
+## `index.ts` (mandatory content)
+
+```ts
+export { UserCardContainer as default } from './UserCardContainer';
+```
+
+## ❌ Anti-patterns
+
+```
+components/UserCard.tsx              ← flat file
+components/UserCard.view.tsx         ← dot-notation
+components/UserCard.container.tsx    ← dot-notation
+components/UserCard/UserCardView.tsx ← missing index.ts
+```
+
+## Standard Screen Folder
+
+```
+screens/Dashboard/
+  index.ts                         ← MANDATORY: re-export Container as default
+  DashboardContainer.tsx           ← PascalCase: <Screen>Container.tsx
+  DashboardView.tsx                ← PascalCase: <Screen>View.tsx (wrapped in memo)
+  hooks/
+    useDashboardData.ts            ← optional: use<Feature>.ts
+  __tests__/
+    DashboardView.test.tsx
+    DashboardContainer.test.tsx
+```
+
+## Component Exemptions
+
+| Component Type | Container-View? |
+|----------------|-----------------|
+| Custom written component | ✅ MANDATORY |
+| Page / Screen / Feature | ✅ MANDATORY |
+| shadcn/ui `<Button>`, `<Card>` | ❌ Exempt |
+| Radix / MUI / Ant Design | ❌ Exempt |

package/agentic/antigravity/.agents/skills/react-structure/references/splitting-process.md

@@ -0,0 +1,82 @@
+# Splitting Process
+
+**Required order: View → Hook → Container**
+
+## Step 1: View (`<Name>View.tsx`)
+
+**Purpose:** Pure presentation, zero logic.
+
+- Receives all data + callbacks via props
+- No `useState`, `useEffect`, or API calls
+- Define explicit TypeScript interface for props (see `schemas/component-props-schema.md`)
+- **MUST** use arrow function syntax
+- **MUST** wrap in `React.memo()` to prevent unnecessary re-renders
+- **MUST** set `displayName` after memo wrapping
+
+**Immediately after creating:** write `<Name>View.test.tsx` — test render with mock props.
+
+```tsx
+// UserCardView.tsx
+import { memo } from 'react';
+
+interface UserCardViewProps {
+  user: User;
+  onEdit: (id: string) => void;
+}
+
+export const UserCardView = memo(({ user, onEdit }: UserCardViewProps) => {
+  return (
+    <div>
+      <h2>{user.name}</h2>
+      <button onClick={() => onEdit(user.id)}>Edit</button>
+    </div>
+  );
+});
+
+UserCardView.displayName = 'UserCardView';
+```
+
+## Step 2: Custom Hook (`hooks/use<Feature>.ts`) — if reusable logic
+
+**Purpose:** Encapsulate state, effects, handlers.
+
+- Only create when logic is reusable or complex (see `hooks/custom-hook-pattern.md`)
+- Return `{ data, handlers }` shape
+
+**Immediately after creating:** write hook test (mock API calls, check state transitions).
+
+## Step 3: Container (`<Name>Container.tsx`)
+
+**Purpose:** Orchestrate logic, pass data to View.
+
+- Call custom hook (or manage state directly if not reusable)
+- Map hook output to View props
+- Handle side effects (navigation, toasts, etc.)
+- **MUST** use arrow function syntax
+- **MUST** wrap all callbacks passed to View in `useCallback`
+- **MUST** wrap all derived/computed data passed to View in `useMemo`
+
+**Immediately after creating:** write `<Name>Container.test.tsx` — test logic with mock hook.
+
+```tsx
+// UserCardContainer.tsx
+import { useCallback, useMemo } from 'react';
+
+export const UserCardContainer = ({ userId }: UserCardContainerProps) => {
+  const { data, handlers } = useUserData(userId);
+
+  const handleEdit = useCallback((id: string) => {
+    handlers.handleEdit(id);
+  }, [handlers.handleEdit]);
+
+  const userData = useMemo(() => data.user, [data.user]);
+
+  return <UserCardView user={userData} onEdit={handleEdit} />;
+};
+```
+
+## Notes
+
+- **Don't break imports:** Update all import sites → new Container (or use `index.ts` re-export)
+- **Props drilling > 2 layers:** Consider Context instead
+- **Fully stateless component:** `<Name>View.tsx` + `index.ts` only — no Container needed