{"owner":"onlook-dev","repo":"onlook","hasSkills":true,"hasMcp":false,"mcpConfig":null,"found":["AGENTS.md","CLAUDE.md"],"skills":{"AGENTS.md":"## Onlook Agents Guide\n\nActionable rules for repo agents—keep diffs minimal, safe, token‑efficient.\n\n### Purpose & Scope\n\n- Audience: automated coding agents working within this repository.\n- Goal: small, correct diffs aligned with the project’s architecture.\n- Non-goals: editing generated artifacts, lockfiles, or `node_modules`.\n\n### Repo Map\n\n- Monorepo managed by Bun workspaces (see root `package.json`).\n- App: `apps/web/client` (Next.js App Router + TailwindCSS).\n- API routes: `apps/web/client/src/server/api/routers/*`, aggregated in\n  `apps/web/client/src/server/api/root.ts`.\n- Shared utilities: `packages/*` (e.g., `packages/utility`).\n\n### Stack & Runtimes\n\n- UI: Next.js App Router, TailwindCSS.\n- API: tRPC + Zod (`apps/web/client/src/server/api/*`).\n- Package manager: Bun only — use Bun for all installs and scripts; do not use\n  npm, yarn, or pnpm.\n\n### Agent Priorities\n\n- Correctness first: minimal scope and targeted edits.\n- Respect client/server boundaries in App Router.\n- Prefer local patterns and existing abstractions; avoid one-off frameworks.\n- Do not modify build outputs, generated files, or lockfiles.\n- Use Bun for all scripts; do not introduce npm/yarn.\n- Avoid running the local dev server in automation contexts.\n- Respect type safety and\n\n### Next.js App Router\n\n- Default to Server Components. Add `use client` when using events,\n  state/effects, browser APIs, or client-only libs.\n- App structure: `apps/web/client/src/app/**` (`page.tsx`, `layout.tsx`,\n  `route.ts`).\n- Client providers live behind a client boundary (e.g.,\n  `apps/web/client/src/trpc/react.tsx`).\n- Example roots: `apps/web/client/src/app/layout.tsx` (RSC shell, providers\n  wired, scripts gated by env).\n- Components using `mobx-react-lite`'s `observer` must be client components\n  (include `use client`).\n\n### tRPC API\n\n- Routers live in `apps/web/client/src/server/api/routers/**` and must be\n  exported from `apps/web/client/src/server/api/root.ts`.\n- Use `publicProcedure`/`protectedProcedure` from\n  `apps/web/client/src/server/api/trpc.ts`; validate inputs with Zod.\n- Serialization handled by SuperJSON; return plain objects/arrays.\n- Client usage via `apps/web/client/src/trpc/react.tsx` (React Query + tRPC\n  links).\n\n### Auth & Supabase\n\n- Server-side client: `apps/web/client/src/utils/supabase/server.ts` (uses Next\n  headers/cookies). Use in server components, actions, and routes.\n- Browser client: `apps/web/client/src/utils/supabase/client/index.ts` for\n  client components.\n- Never pass server-only clients into client code.\n\n### Env & Config\n\n- Define/validate env vars in `apps/web/client/src/env.ts` via\n  `@t3-oss/env-nextjs`.\n- Expose browser vars with `NEXT_PUBLIC_*` and declare in the `client` schema.\n- Prefer `env` from `@/env`. In server-only helpers (e.g., base URL in\n  `src/trpc/helpers.ts`), read `process.env` only for deployment vars like\n  `VERCEL_URL`/`PORT`. Never use `process.env` in client code; in shared\n  modules, guard with `typeof window === 'undefined'`.\n- Import `./src/env` in `apps/web/client/next.config.ts` to enforce validation.\n\n### Imports & Paths\n\n- Use path aliases: `@/*` and `~/*` map to `apps/web/client/src/*` (see\n  `apps/web/client/tsconfig.json`).\n- Do not import server-only modules into client components. Limited exception:\n  editor modules that already use `path`; reuse only there. Never import\n  `process` in client code.\n- Split code by environment if needed (server file vs client file).\n\n### MobX + React Stores\n\n- Create store instances with `useState(() => new Store())` for stability across\n  renders.\n- Keep active store in `useRef`; clean up async with\n  `setTimeout(() => storeRef.current?.clear(), 0)` to avoid route-change races.\n- Avoid `useMemo` for store instances; React may drop memoized values leading to\n  data loss.\n- Avoid putting the store instance in effect deps if it loops; split concerns\n  (e.g., project vs branch).\n- `observer` components are client-only. Place one client boundary at the\n  feature entry; child observers need not include `use client` (e.g.,\n  `apps/web/client/src/app/project/[id]/_components/main.tsx`).\n- Example store: `apps/web/client/src/components/store/editor/engine.ts:1` (uses\n  `makeAutoObservable`).\n\n### Styling & UI\n\n- TailwindCSS-first styling; global styles are already imported in\n  `apps/web/client/src/app/layout.tsx`.\n- Prefer existing UI components from `@onlook/ui` and local patterns.\n- Preserve dark theme defaults via `ThemeProvider` usage in layout.\n\n### Internationalization\n\n- `next-intl` is configured; provider lives in\n  `apps/web/client/src/app/layout.tsx`.\n- Strings live in `apps/web/client/messages/*`. Add/modify keys there; avoid\n  hardcoded user-facing text.\n- Keep keys stable; prefer additions over breaking renames.\n\n### Common Pitfalls\n\n- Missing `use client` where needed (events/browser APIs) causes unbound events;\n  a single boundary at the feature root is sufficient.\n- New tRPC routers not exported in `src/server/api/root.ts` (endpoints\n  unreachable).\n- Env vars not typed/exposed in `src/env.ts` cause runtime/edge failures. Prefer\n  `env`; avoid new `process.env` reads in client code.\n- Importing server-only code into client components (bundling/runtime errors).\n  Note: `path` is already used in specific client code-editor modules; avoid\n  expanding Node API usage beyond those areas.\n- Bypassing i18n by hardcoding strings instead of using message files/hooks.\n- Avoid `useMemo` to create MobX stores (risk of lost references); avoid\n  synchronous cleanup on route change (race conditions).\n\n### Context Discipline (for Agents)\n\n- Search narrowly with ripgrep; open only files you need.\n- Read small sections; avoid `node_modules`, `.next`, large assets.\n- Propose minimal diffs aligned with existing conventions; avoid wide refactors.\n\n### Notes\n\n- Unit tests can be run with `bun test`\n- Run type checking with `bun run typecheck`\n- Apply database updates to local dev with `bun run db:push`\n- Refrain from running the dev server\n- DO NOT run `db:gen`. This is reserved for the maintainer.\n- DO NOT use any type unless necessary\n","CLAUDE.md":"## Onlook Agents Guide\n\nActionable rules for repo agents—keep diffs minimal, safe, token‑efficient.\n\n### Purpose & Scope\n\n- Audience: automated coding agents working within this repository.\n- Goal: small, correct diffs aligned with the project’s architecture.\n- Non-goals: editing generated artifacts, lockfiles, or `node_modules`.\n\n### Repo Map\n\n- Monorepo managed by Bun workspaces (see root `package.json`).\n- App: `apps/web/client` (Next.js App Router + TailwindCSS).\n- API routes: `apps/web/client/src/server/api/routers/*`, aggregated in\n  `apps/web/client/src/server/api/root.ts`.\n- Shared utilities: `packages/*` (e.g., `packages/utility`).\n\n### Stack & Runtimes\n\n- UI: Next.js App Router, TailwindCSS.\n- API: tRPC + Zod (`apps/web/client/src/server/api/*`).\n- Package manager: Bun only — use Bun for all installs and scripts; do not use\n  npm, yarn, or pnpm.\n\n### Agent Priorities\n\n- Correctness first: minimal scope and targeted edits.\n- Respect client/server boundaries in App Router.\n- Prefer local patterns and existing abstractions; avoid one-off frameworks.\n- Do not modify build outputs, generated files, or lockfiles.\n- Use Bun for all scripts; do not introduce npm/yarn.\n- Avoid running the local dev server in automation contexts.\n- Respect type safety and\n\n### Next.js App Router\n\n- Default to Server Components. Add `use client` when using events,\n  state/effects, browser APIs, or client-only libs.\n- App structure: `apps/web/client/src/app/**` (`page.tsx`, `layout.tsx`,\n  `route.ts`).\n- Client providers live behind a client boundary (e.g.,\n  `apps/web/client/src/trpc/react.tsx`).\n- Example roots: `apps/web/client/src/app/layout.tsx` (RSC shell, providers\n  wired, scripts gated by env).\n- Components using `mobx-react-lite`'s `observer` must be client components\n  (include `use client`).\n\n### tRPC API\n\n- Routers live in `apps/web/client/src/server/api/routers/**` and must be\n  exported from `apps/web/client/src/server/api/root.ts`.\n- Use `publicProcedure`/`protectedProcedure` from\n  `apps/web/client/src/server/api/trpc.ts`; validate inputs with Zod.\n- Serialization handled by SuperJSON; return plain objects/arrays.\n- Client usage via `apps/web/client/src/trpc/react.tsx` (React Query + tRPC\n  links).\n\n### Auth & Supabase\n\n- Server-side client: `apps/web/client/src/utils/supabase/server.ts` (uses Next\n  headers/cookies). Use in server components, actions, and routes.\n- Browser client: `apps/web/client/src/utils/supabase/client/index.ts` for\n  client components.\n- Never pass server-only clients into client code.\n\n### Env & Config\n\n- Define/validate env vars in `apps/web/client/src/env.ts` via\n  `@t3-oss/env-nextjs`.\n- Expose browser vars with `NEXT_PUBLIC_*` and declare in the `client` schema.\n- Prefer `env` from `@/env`. In server-only helpers (e.g., base URL in\n  `src/trpc/helpers.ts`), read `process.env` only for deployment vars like\n  `VERCEL_URL`/`PORT`. Never use `process.env` in client code; in shared\n  modules, guard with `typeof window === 'undefined'`.\n- Import `./src/env` in `apps/web/client/next.config.ts` to enforce validation.\n\n### Imports & Paths\n\n- Use path aliases: `@/*` and `~/*` map to `apps/web/client/src/*` (see\n  `apps/web/client/tsconfig.json`).\n- Do not import server-only modules into client components. Limited exception:\n  editor modules that already use `path`; reuse only there. Never import\n  `process` in client code.\n- Split code by environment if needed (server file vs client file).\n\n### MobX + React Stores\n\n- Create store instances with `useState(() => new Store())` for stability across\n  renders.\n- Keep active store in `useRef`; clean up async with\n  `setTimeout(() => storeRef.current?.clear(), 0)` to avoid route-change races.\n- Avoid `useMemo` for store instances; React may drop memoized values leading to\n  data loss.\n- Avoid putting the store instance in effect deps if it loops; split concerns\n  (e.g., project vs branch).\n- `observer` components are client-only. Place one client boundary at the\n  feature entry; child observers need not include `use client` (e.g.,\n  `apps/web/client/src/app/project/[id]/_components/main.tsx`).\n- Example store: `apps/web/client/src/components/store/editor/engine.ts:1` (uses\n  `makeAutoObservable`).\n\n### Styling & UI\n\n- TailwindCSS-first styling; global styles are already imported in\n  `apps/web/client/src/app/layout.tsx`.\n- Prefer existing UI components from `@onlook/ui` and local patterns.\n- Preserve dark theme defaults via `ThemeProvider` usage in layout.\n\n### Internationalization\n\n- `next-intl` is configured; provider lives in\n  `apps/web/client/src/app/layout.tsx`.\n- Strings live in `apps/web/client/messages/*`. Add/modify keys there; avoid\n  hardcoded user-facing text.\n- Keep keys stable; prefer additions over breaking renames.\n\n### Common Pitfalls\n\n- Missing `use client` where needed (events/browser APIs) causes unbound events;\n  a single boundary at the feature root is sufficient.\n- New tRPC routers not exported in `src/server/api/root.ts` (endpoints\n  unreachable).\n- Env vars not typed/exposed in `src/env.ts` cause runtime/edge failures. Prefer\n  `env`; avoid new `process.env` reads in client code.\n- Importing server-only code into client components (bundling/runtime errors).\n  Note: `path` is already used in specific client code-editor modules; avoid\n  expanding Node API usage beyond those areas.\n- Bypassing i18n by hardcoding strings instead of using message files/hooks.\n- Avoid `useMemo` to create MobX stores (risk of lost references); avoid\n  synchronous cleanup on route change (race conditions).\n\n### Context Discipline (for Agents)\n\n- Search narrowly with ripgrep; open only files you need.\n- Read small sections; avoid `node_modules`, `.next`, large assets.\n- Propose minimal diffs aligned with existing conventions; avoid wide refactors.\n\n### Notes\n\n- Unit tests can be run with `bun test`\n- Run type checking with `bun run typecheck`\n- Apply database updates to local dev with `bun run db:push`\n- Refrain from running the dev server\n- DO NOT run `db:gen`. This is reserved for the maintainer.\n- DO NOT use any type unless necessary\n"},"files":{"AGENTS.md":"## Onlook Agents Guide\n\nActionable rules for repo agents—keep diffs minimal, safe, token‑efficient.\n\n### Purpose & Scope\n\n- Audience: automated coding agents working within this repository.\n- Goal: small, correct diffs aligned with the project’s architecture.\n- Non-goals: editing generated artifacts, lockfiles, or `node_modules`.\n\n### Repo Map\n\n- Monorepo managed by Bun workspaces (see root `package.json`).\n- App: `apps/web/client` (Next.js App Router + TailwindCSS).\n- API routes: `apps/web/client/src/server/api/routers/*`, aggregated in\n  `apps/web/client/src/server/api/root.ts`.\n- Shared utilities: `packages/*` (e.g., `packages/utility`).\n\n### Stack & Runtimes\n\n- UI: Next.js App Router, TailwindCSS.\n- API: tRPC + Zod (`apps/web/client/src/server/api/*`).\n- Package manager: Bun only — use Bun for all installs and scripts; do not use\n  npm, yarn, or pnpm.\n\n### Agent Priorities\n\n- Correctness first: minimal scope and targeted edits.\n- Respect client/server boundaries in App Router.\n- Prefer local patterns and existing abstractions; avoid one-off frameworks.\n- Do not modify build outputs, generated files, or lockfiles.\n- Use Bun for all scripts; do not introduce npm/yarn.\n- Avoid running the local dev server in automation contexts.\n- Respect type safety and\n\n### Next.js App Router\n\n- Default to Server Components. Add `use client` when using events,\n  state/effects, browser APIs, or client-only libs.\n- App structure: `apps/web/client/src/app/**` (`page.tsx`, `layout.tsx`,\n  `route.ts`).\n- Client providers live behind a client boundary (e.g.,\n  `apps/web/client/src/trpc/react.tsx`).\n- Example roots: `apps/web/client/src/app/layout.tsx` (RSC shell, providers\n  wired, scripts gated by env).\n- Components using `mobx-react-lite`'s `observer` must be client components\n  (include `use client`).\n\n### tRPC API\n\n- Routers live in `apps/web/client/src/server/api/routers/**` and must be\n  exported from `apps/web/client/src/server/api/root.ts`.\n- Use `publicProcedure`/`protectedProcedure` from\n  `apps/web/client/src/server/api/trpc.ts`; validate inputs with Zod.\n- Serialization handled by SuperJSON; return plain objects/arrays.\n- Client usage via `apps/web/client/src/trpc/react.tsx` (React Query + tRPC\n  links).\n\n### Auth & Supabase\n\n- Server-side client: `apps/web/client/src/utils/supabase/server.ts` (uses Next\n  headers/cookies). Use in server components, actions, and routes.\n- Browser client: `apps/web/client/src/utils/supabase/client/index.ts` for\n  client components.\n- Never pass server-only clients into client code.\n\n### Env & Config\n\n- Define/validate env vars in `apps/web/client/src/env.ts` via\n  `@t3-oss/env-nextjs`.\n- Expose browser vars with `NEXT_PUBLIC_*` and declare in the `client` schema.\n- Prefer `env` from `@/env`. In server-only helpers (e.g., base URL in\n  `src/trpc/helpers.ts`), read `process.env` only for deployment vars like\n  `VERCEL_URL`/`PORT`. Never use `process.env` in client code; in shared\n  modules, guard with `typeof window === 'undefined'`.\n- Import `./src/env` in `apps/web/client/next.config.ts` to enforce validation.\n\n### Imports & Paths\n\n- Use path aliases: `@/*` and `~/*` map to `apps/web/client/src/*` (see\n  `apps/web/client/tsconfig.json`).\n- Do not import server-only modules into client components. Limited exception:\n  editor modules that already use `path`; reuse only there. Never import\n  `process` in client code.\n- Split code by environment if needed (server file vs client file).\n\n### MobX + React Stores\n\n- Create store instances with `useState(() => new Store())` for stability across\n  renders.\n- Keep active store in `useRef`; clean up async with\n  `setTimeout(() => storeRef.current?.clear(), 0)` to avoid route-change races.\n- Avoid `useMemo` for store instances; React may drop memoized values leading to\n  data loss.\n- Avoid putting the store instance in effect deps if it loops; split concerns\n  (e.g., project vs branch).\n- `observer` components are client-only. Place one client boundary at the\n  feature entry; child observers need not include `use client` (e.g.,\n  `apps/web/client/src/app/project/[id]/_components/main.tsx`).\n- Example store: `apps/web/client/src/components/store/editor/engine.ts:1` (uses\n  `makeAutoObservable`).\n\n### Styling & UI\n\n- TailwindCSS-first styling; global styles are already imported in\n  `apps/web/client/src/app/layout.tsx`.\n- Prefer existing UI components from `@onlook/ui` and local patterns.\n- Preserve dark theme defaults via `ThemeProvider` usage in layout.\n\n### Internationalization\n\n- `next-intl` is configured; provider lives in\n  `apps/web/client/src/app/layout.tsx`.\n- Strings live in `apps/web/client/messages/*`. Add/modify keys there; avoid\n  hardcoded user-facing text.\n- Keep keys stable; prefer additions over breaking renames.\n\n### Common Pitfalls\n\n- Missing `use client` where needed (events/browser APIs) causes unbound events;\n  a single boundary at the feature root is sufficient.\n- New tRPC routers not exported in `src/server/api/root.ts` (endpoints\n  unreachable).\n- Env vars not typed/exposed in `src/env.ts` cause runtime/edge failures. Prefer\n  `env`; avoid new `process.env` reads in client code.\n- Importing server-only code into client components (bundling/runtime errors).\n  Note: `path` is already used in specific client code-editor modules; avoid\n  expanding Node API usage beyond those areas.\n- Bypassing i18n by hardcoding strings instead of using message files/hooks.\n- Avoid `useMemo` to create MobX stores (risk of lost references); avoid\n  synchronous cleanup on route change (race conditions).\n\n### Context Discipline (for Agents)\n\n- Search narrowly with ripgrep; open only files you need.\n- Read small sections; avoid `node_modules`, `.next`, large assets.\n- Propose minimal diffs aligned with existing conventions; avoid wide refactors.\n\n### Notes\n\n- Unit tests can be run with `bun test`\n- Run type checking with `bun run typecheck`\n- Apply database updates to local dev with `bun run db:push`\n- Refrain from running the dev server\n- DO NOT run `db:gen`. This is reserved for the maintainer.\n- DO NOT use any type unless necessary\n","CLAUDE.md":"## Onlook Agents Guide\n\nActionable rules for repo agents—keep diffs minimal, safe, token‑efficient.\n\n### Purpose & Scope\n\n- Audience: automated coding agents working within this repository.\n- Goal: small, correct diffs aligned with the project’s architecture.\n- Non-goals: editing generated artifacts, lockfiles, or `node_modules`.\n\n### Repo Map\n\n- Monorepo managed by Bun workspaces (see root `package.json`).\n- App: `apps/web/client` (Next.js App Router + TailwindCSS).\n- API routes: `apps/web/client/src/server/api/routers/*`, aggregated in\n  `apps/web/client/src/server/api/root.ts`.\n- Shared utilities: `packages/*` (e.g., `packages/utility`).\n\n### Stack & Runtimes\n\n- UI: Next.js App Router, TailwindCSS.\n- API: tRPC + Zod (`apps/web/client/src/server/api/*`).\n- Package manager: Bun only — use Bun for all installs and scripts; do not use\n  npm, yarn, or pnpm.\n\n### Agent Priorities\n\n- Correctness first: minimal scope and targeted edits.\n- Respect client/server boundaries in App Router.\n- Prefer local patterns and existing abstractions; avoid one-off frameworks.\n- Do not modify build outputs, generated files, or lockfiles.\n- Use Bun for all scripts; do not introduce npm/yarn.\n- Avoid running the local dev server in automation contexts.\n- Respect type safety and\n\n### Next.js App Router\n\n- Default to Server Components. Add `use client` when using events,\n  state/effects, browser APIs, or client-only libs.\n- App structure: `apps/web/client/src/app/**` (`page.tsx`, `layout.tsx`,\n  `route.ts`).\n- Client providers live behind a client boundary (e.g.,\n  `apps/web/client/src/trpc/react.tsx`).\n- Example roots: `apps/web/client/src/app/layout.tsx` (RSC shell, providers\n  wired, scripts gated by env).\n- Components using `mobx-react-lite`'s `observer` must be client components\n  (include `use client`).\n\n### tRPC API\n\n- Routers live in `apps/web/client/src/server/api/routers/**` and must be\n  exported from `apps/web/client/src/server/api/root.ts`.\n- Use `publicProcedure`/`protectedProcedure` from\n  `apps/web/client/src/server/api/trpc.ts`; validate inputs with Zod.\n- Serialization handled by SuperJSON; return plain objects/arrays.\n- Client usage via `apps/web/client/src/trpc/react.tsx` (React Query + tRPC\n  links).\n\n### Auth & Supabase\n\n- Server-side client: `apps/web/client/src/utils/supabase/server.ts` (uses Next\n  headers/cookies). Use in server components, actions, and routes.\n- Browser client: `apps/web/client/src/utils/supabase/client/index.ts` for\n  client components.\n- Never pass server-only clients into client code.\n\n### Env & Config\n\n- Define/validate env vars in `apps/web/client/src/env.ts` via\n  `@t3-oss/env-nextjs`.\n- Expose browser vars with `NEXT_PUBLIC_*` and declare in the `client` schema.\n- Prefer `env` from `@/env`. In server-only helpers (e.g., base URL in\n  `src/trpc/helpers.ts`), read `process.env` only for deployment vars like\n  `VERCEL_URL`/`PORT`. Never use `process.env` in client code; in shared\n  modules, guard with `typeof window === 'undefined'`.\n- Import `./src/env` in `apps/web/client/next.config.ts` to enforce validation.\n\n### Imports & Paths\n\n- Use path aliases: `@/*` and `~/*` map to `apps/web/client/src/*` (see\n  `apps/web/client/tsconfig.json`).\n- Do not import server-only modules into client components. Limited exception:\n  editor modules that already use `path`; reuse only there. Never import\n  `process` in client code.\n- Split code by environment if needed (server file vs client file).\n\n### MobX + React Stores\n\n- Create store instances with `useState(() => new Store())` for stability across\n  renders.\n- Keep active store in `useRef`; clean up async with\n  `setTimeout(() => storeRef.current?.clear(), 0)` to avoid route-change races.\n- Avoid `useMemo` for store instances; React may drop memoized values leading to\n  data loss.\n- Avoid putting the store instance in effect deps if it loops; split concerns\n  (e.g., project vs branch).\n- `observer` components are client-only. Place one client boundary at the\n  feature entry; child observers need not include `use client` (e.g.,\n  `apps/web/client/src/app/project/[id]/_components/main.tsx`).\n- Example store: `apps/web/client/src/components/store/editor/engine.ts:1` (uses\n  `makeAutoObservable`).\n\n### Styling & UI\n\n- TailwindCSS-first styling; global styles are already imported in\n  `apps/web/client/src/app/layout.tsx`.\n- Prefer existing UI components from `@onlook/ui` and local patterns.\n- Preserve dark theme defaults via `ThemeProvider` usage in layout.\n\n### Internationalization\n\n- `next-intl` is configured; provider lives in\n  `apps/web/client/src/app/layout.tsx`.\n- Strings live in `apps/web/client/messages/*`. Add/modify keys there; avoid\n  hardcoded user-facing text.\n- Keep keys stable; prefer additions over breaking renames.\n\n### Common Pitfalls\n\n- Missing `use client` where needed (events/browser APIs) causes unbound events;\n  a single boundary at the feature root is sufficient.\n- New tRPC routers not exported in `src/server/api/root.ts` (endpoints\n  unreachable).\n- Env vars not typed/exposed in `src/env.ts` cause runtime/edge failures. Prefer\n  `env`; avoid new `process.env` reads in client code.\n- Importing server-only code into client components (bundling/runtime errors).\n  Note: `path` is already used in specific client code-editor modules; avoid\n  expanding Node API usage beyond those areas.\n- Bypassing i18n by hardcoding strings instead of using message files/hooks.\n- Avoid `useMemo` to create MobX stores (risk of lost references); avoid\n  synchronous cleanup on route change (race conditions).\n\n### Context Discipline (for Agents)\n\n- Search narrowly with ripgrep; open only files you need.\n- Read small sections; avoid `node_modules`, `.next`, large assets.\n- Propose minimal diffs aligned with existing conventions; avoid wide refactors.\n\n### Notes\n\n- Unit tests can be run with `bun test`\n- Run type checking with `bun run typecheck`\n- Apply database updates to local dev with `bun run db:push`\n- Refrain from running the dev server\n- DO NOT run `db:gen`. This is reserved for the maintainer.\n- DO NOT use any type unless necessary\n"},"items":[{"name":"AGENTS.md","path":"AGENTS.md","title":"AGENTS.md","content":"## Onlook Agents Guide\n\nActionable rules for repo agents—keep diffs minimal, safe, token‑efficient.\n\n### Purpose & Scope\n\n- Audience: automated coding agents working within this repository.\n- Goal: small, correct diffs aligned with the project’s architecture.\n- Non-goals: editing generated artifacts, lockfiles, or `node_modules`.\n\n### Repo Map\n\n- Monorepo managed by Bun workspaces (see root `package.json`).\n- App: `apps/web/client` (Next.js App Router + TailwindCSS).\n- API routes: `apps/web/client/src/server/api/routers/*`, aggregated in\n  `apps/web/client/src/server/api/root.ts`.\n- Shared utilities: `packages/*` (e.g., `packages/utility`).\n\n### Stack & Runtimes\n\n- UI: Next.js App Router, TailwindCSS.\n- API: tRPC + Zod (`apps/web/client/src/server/api/*`).\n- Package manager: Bun only — use Bun for all installs and scripts; do not use\n  npm, yarn, or pnpm.\n\n### Agent Priorities\n\n- Correctness first: minimal scope and targeted edits.\n- Respect client/server boundaries in App Router.\n- Prefer local patterns and existing abstractions; avoid one-off frameworks.\n- Do not modify build outputs, generated files, or lockfiles.\n- Use Bun for all scripts; do not introduce npm/yarn.\n- Avoid running the local dev server in automation contexts.\n- Respect type safety and\n\n### Next.js App Router\n\n- Default to Server Components. Add `use client` when using events,\n  state/effects, browser APIs, or client-only libs.\n- App structure: `apps/web/client/src/app/**` (`page.tsx`, `layout.tsx`,\n  `route.ts`).\n- Client providers live behind a client boundary (e.g.,\n  `apps/web/client/src/trpc/react.tsx`).\n- Example roots: `apps/web/client/src/app/layout.tsx` (RSC shell, providers\n  wired, scripts gated by env).\n- Components using `mobx-react-lite`'s `observer` must be client components\n  (include `use client`).\n\n### tRPC API\n\n- Routers live in `apps/web/client/src/server/api/routers/**` and must be\n  exported from `apps/web/client/src/server/api/root.ts`.\n- Use `publicProcedure`/`protectedProcedure` from\n  `apps/web/client/src/server/api/trpc.ts`; validate inputs with Zod.\n- Serialization handled by SuperJSON; return plain objects/arrays.\n- Client usage via `apps/web/client/src/trpc/react.tsx` (React Query + tRPC\n  links).\n\n### Auth & Supabase\n\n- Server-side client: `apps/web/client/src/utils/supabase/server.ts` (uses Next\n  headers/cookies). Use in server components, actions, and routes.\n- Browser client: `apps/web/client/src/utils/supabase/client/index.ts` for\n  client components.\n- Never pass server-only clients into client code.\n\n### Env & Config\n\n- Define/validate env vars in `apps/web/client/src/env.ts` via\n  `@t3-oss/env-nextjs`.\n- Expose browser vars with `NEXT_PUBLIC_*` and declare in the `client` schema.\n- Prefer `env` from `@/env`. In server-only helpers (e.g., base URL in\n  `src/trpc/helpers.ts`), read `process.env` only for deployment vars like\n  `VERCEL_URL`/`PORT`. Never use `process.env` in client code; in shared\n  modules, guard with `typeof window === 'undefined'`.\n- Import `./src/env` in `apps/web/client/next.config.ts` to enforce validation.\n\n### Imports & Paths\n\n- Use path aliases: `@/*` and `~/*` map to `apps/web/client/src/*` (see\n  `apps/web/client/tsconfig.json`).\n- Do not import server-only modules into client components. Limited exception:\n  editor modules that already use `path`; reuse only there. Never import\n  `process` in client code.\n- Split code by environment if needed (server file vs client file).\n\n### MobX + React Stores\n\n- Create store instances with `useState(() => new Store())` for stability across\n  renders.\n- Keep active store in `useRef`; clean up async with\n  `setTimeout(() => storeRef.current?.clear(), 0)` to avoid route-change races.\n- Avoid `useMemo` for store instances; React may drop memoized values leading to\n  data loss.\n- Avoid putting the store instance in effect deps if it loops; split concerns\n  (e.g., project vs branch).\n- `observer` components are client-only. Place one client boundary at the\n  feature entry; child observers need not include `use client` (e.g.,\n  `apps/web/client/src/app/project/[id]/_components/main.tsx`).\n- Example store: `apps/web/client/src/components/store/editor/engine.ts:1` (uses\n  `makeAutoObservable`).\n\n### Styling & UI\n\n- TailwindCSS-first styling; global styles are already imported in\n  `apps/web/client/src/app/layout.tsx`.\n- Prefer existing UI components from `@onlook/ui` and local patterns.\n- Preserve dark theme defaults via `ThemeProvider` usage in layout.\n\n### Internationalization\n\n- `next-intl` is configured; provider lives in\n  `apps/web/client/src/app/layout.tsx`.\n- Strings live in `apps/web/client/messages/*`. Add/modify keys there; avoid\n  hardcoded user-facing text.\n- Keep keys stable; prefer additions over breaking renames.\n\n### Common Pitfalls\n\n- Missing `use client` where needed (events/browser APIs) causes unbound events;\n  a single boundary at the feature root is sufficient.\n- New tRPC routers not exported in `src/server/api/root.ts` (endpoints\n  unreachable).\n- Env vars not typed/exposed in `src/env.ts` cause runtime/edge failures. Prefer\n  `env`; avoid new `process.env` reads in client code.\n- Importing server-only code into client components (bundling/runtime errors).\n  Note: `path` is already used in specific client code-editor modules; avoid\n  expanding Node API usage beyond those areas.\n- Bypassing i18n by hardcoding strings instead of using message files/hooks.\n- Avoid `useMemo` to create MobX stores (risk of lost references); avoid\n  synchronous cleanup on route change (race conditions).\n\n### Context Discipline (for Agents)\n\n- Search narrowly with ripgrep; open only files you need.\n- Read small sections; avoid `node_modules`, `.next`, large assets.\n- Propose minimal diffs aligned with existing conventions; avoid wide refactors.\n\n### Notes\n\n- Unit tests can be run with `bun test`\n- Run type checking with `bun run typecheck`\n- Apply database updates to local dev with `bun run db:push`\n- Refrain from running the dev server\n- DO NOT run `db:gen`. This is reserved for the maintainer.\n- DO NOT use any type unless necessary\n","category":"root","tokens":1528},{"name":"CLAUDE.md","path":"CLAUDE.md","title":"CLAUDE.md","content":"## Onlook Agents Guide\n\nActionable rules for repo agents—keep diffs minimal, safe, token‑efficient.\n\n### Purpose & Scope\n\n- Audience: automated coding agents working within this repository.\n- Goal: small, correct diffs aligned with the project’s architecture.\n- Non-goals: editing generated artifacts, lockfiles, or `node_modules`.\n\n### Repo Map\n\n- Monorepo managed by Bun workspaces (see root `package.json`).\n- App: `apps/web/client` (Next.js App Router + TailwindCSS).\n- API routes: `apps/web/client/src/server/api/routers/*`, aggregated in\n  `apps/web/client/src/server/api/root.ts`.\n- Shared utilities: `packages/*` (e.g., `packages/utility`).\n\n### Stack & Runtimes\n\n- UI: Next.js App Router, TailwindCSS.\n- API: tRPC + Zod (`apps/web/client/src/server/api/*`).\n- Package manager: Bun only — use Bun for all installs and scripts; do not use\n  npm, yarn, or pnpm.\n\n### Agent Priorities\n\n- Correctness first: minimal scope and targeted edits.\n- Respect client/server boundaries in App Router.\n- Prefer local patterns and existing abstractions; avoid one-off frameworks.\n- Do not modify build outputs, generated files, or lockfiles.\n- Use Bun for all scripts; do not introduce npm/yarn.\n- Avoid running the local dev server in automation contexts.\n- Respect type safety and\n\n### Next.js App Router\n\n- Default to Server Components. Add `use client` when using events,\n  state/effects, browser APIs, or client-only libs.\n- App structure: `apps/web/client/src/app/**` (`page.tsx`, `layout.tsx`,\n  `route.ts`).\n- Client providers live behind a client boundary (e.g.,\n  `apps/web/client/src/trpc/react.tsx`).\n- Example roots: `apps/web/client/src/app/layout.tsx` (RSC shell, providers\n  wired, scripts gated by env).\n- Components using `mobx-react-lite`'s `observer` must be client components\n  (include `use client`).\n\n### tRPC API\n\n- Routers live in `apps/web/client/src/server/api/routers/**` and must be\n  exported from `apps/web/client/src/server/api/root.ts`.\n- Use `publicProcedure`/`protectedProcedure` from\n  `apps/web/client/src/server/api/trpc.ts`; validate inputs with Zod.\n- Serialization handled by SuperJSON; return plain objects/arrays.\n- Client usage via `apps/web/client/src/trpc/react.tsx` (React Query + tRPC\n  links).\n\n### Auth & Supabase\n\n- Server-side client: `apps/web/client/src/utils/supabase/server.ts` (uses Next\n  headers/cookies). Use in server components, actions, and routes.\n- Browser client: `apps/web/client/src/utils/supabase/client/index.ts` for\n  client components.\n- Never pass server-only clients into client code.\n\n### Env & Config\n\n- Define/validate env vars in `apps/web/client/src/env.ts` via\n  `@t3-oss/env-nextjs`.\n- Expose browser vars with `NEXT_PUBLIC_*` and declare in the `client` schema.\n- Prefer `env` from `@/env`. In server-only helpers (e.g., base URL in\n  `src/trpc/helpers.ts`), read `process.env` only for deployment vars like\n  `VERCEL_URL`/`PORT`. Never use `process.env` in client code; in shared\n  modules, guard with `typeof window === 'undefined'`.\n- Import `./src/env` in `apps/web/client/next.config.ts` to enforce validation.\n\n### Imports & Paths\n\n- Use path aliases: `@/*` and `~/*` map to `apps/web/client/src/*` (see\n  `apps/web/client/tsconfig.json`).\n- Do not import server-only modules into client components. Limited exception:\n  editor modules that already use `path`; reuse only there. Never import\n  `process` in client code.\n- Split code by environment if needed (server file vs client file).\n\n### MobX + React Stores\n\n- Create store instances with `useState(() => new Store())` for stability across\n  renders.\n- Keep active store in `useRef`; clean up async with\n  `setTimeout(() => storeRef.current?.clear(), 0)` to avoid route-change races.\n- Avoid `useMemo` for store instances; React may drop memoized values leading to\n  data loss.\n- Avoid putting the store instance in effect deps if it loops; split concerns\n  (e.g., project vs branch).\n- `observer` components are client-only. Place one client boundary at the\n  feature entry; child observers need not include `use client` (e.g.,\n  `apps/web/client/src/app/project/[id]/_components/main.tsx`).\n- Example store: `apps/web/client/src/components/store/editor/engine.ts:1` (uses\n  `makeAutoObservable`).\n\n### Styling & UI\n\n- TailwindCSS-first styling; global styles are already imported in\n  `apps/web/client/src/app/layout.tsx`.\n- Prefer existing UI components from `@onlook/ui` and local patterns.\n- Preserve dark theme defaults via `ThemeProvider` usage in layout.\n\n### Internationalization\n\n- `next-intl` is configured; provider lives in\n  `apps/web/client/src/app/layout.tsx`.\n- Strings live in `apps/web/client/messages/*`. Add/modify keys there; avoid\n  hardcoded user-facing text.\n- Keep keys stable; prefer additions over breaking renames.\n\n### Common Pitfalls\n\n- Missing `use client` where needed (events/browser APIs) causes unbound events;\n  a single boundary at the feature root is sufficient.\n- New tRPC routers not exported in `src/server/api/root.ts` (endpoints\n  unreachable).\n- Env vars not typed/exposed in `src/env.ts` cause runtime/edge failures. Prefer\n  `env`; avoid new `process.env` reads in client code.\n- Importing server-only code into client components (bundling/runtime errors).\n  Note: `path` is already used in specific client code-editor modules; avoid\n  expanding Node API usage beyond those areas.\n- Bypassing i18n by hardcoding strings instead of using message files/hooks.\n- Avoid `useMemo` to create MobX stores (risk of lost references); avoid\n  synchronous cleanup on route change (race conditions).\n\n### Context Discipline (for Agents)\n\n- Search narrowly with ripgrep; open only files you need.\n- Read small sections; avoid `node_modules`, `.next`, large assets.\n- Propose minimal diffs aligned with existing conventions; avoid wide refactors.\n\n### Notes\n\n- Unit tests can be run with `bun test`\n- Run type checking with `bun run typecheck`\n- Apply database updates to local dev with `bun run db:push`\n- Refrain from running the dev server\n- DO NOT run `db:gen`. This is reserved for the maintainer.\n- DO NOT use any type unless necessary\n","category":"root","tokens":1528}]}