---
name: lit-vs-nextjs-path-disambiguation
description: Verify whether InfiniBot-fresh task paths point to a Next.js app or the Lit-based UI before implementing, and route work to the correct stack.
---
# Lit vs Next.js Path Disambiguation
## When to use
- Task spec references paths like `src/app/app/...` or `app/studio/...` suggesting a Next.js app router layout.
- Task mentions React components, hooks, or JSX while the repo is InfiniBot-fresh.
- About to scaffold a new frontend surface (panel, modal, composer) inside InfiniBot-fresh.
- Extending an existing storyboard / studio / video-editor feature.
## How to apply
1. Run `ls /home/bigceo/Desktop/Development/InfiniBot-fresh/src/app 2>/dev/null` and check for `next.config.*` / `app/` router dirs. If absent, there is NO Next.js app — do not create one.
2. Locate the real UI surface under `ui/src/ui/views/` (top-level views) and `ui/src/ui/components/` (reusable web components). Views are Lit `LitElement` classes using `html\`...\`` template literals.
3. Map React concepts to Lit equivalents before writing code:
   - `useState` → reactive `@state()` properties or a controller class
   - `useEffect` → `firstUpdated` / `updated` lifecycle
   - JSX `<Foo />` → `<foo-bar>` custom element registered via `customElements.define`
   - Context providers → controller singletons imported from `ui/src/ui/controllers/`
4. Persist data via the existing storyboard store pattern (`src/storyboard/store.ts`): add columns to the SQLite schema and expose typed `get*`/`save*` helpers — do not invent a new ORM layer.
5. Mount new composers/panels by editing the parent view's `render*` method (e.g. `renderProjectDetail`, `renderRegenerateModal`) and passing scoped props like `{ compact, sceneId, mode }`.
6. When the task lists multiple generation surfaces, audit each one; flag any surface (e.g. `video-studio.ts`) that lacks a scoped project handle as a follow-up rather than forcing a wire-up.
## Rules
- Never create `src/app/` or Next.js scaffolding in InfiniBot-fresh — it is Lit + esbuild, not Next.
- Never import `react`, `react-dom`, or JSX runtime into `ui/src/ui/**`.
- Always confirm the target view file exists under `ui/src/ui/views/` before editing; if the spec's path doesn't resolve, search for the feature name with Grep before assuming a new file.
- Always extend `src/storyboard/types.ts` and `store.ts` together when adding persisted fields (type + column + getter/setter in the same change).
- Always reuse existing controllers in `ui/src/ui/controllers/` for cross-view state; do not duplicate them inside components.