create-stencil-components 1.0.7 → 1.0.9

package/dist/templates/base/.github/skills/nx-import/references/NEXT.md

@@ -0,0 +1,214 @@
+## Next.js
+
+Next.js-specific guidance for `nx import`. For generic import issues (pnpm globs, root deps, project references, name collisions, ESLint, frontend tsconfig base settings, `@nx/react` typings, Jest preset, target name prefixing, non-Nx source handling), see `SKILL.md`.
+
+---
+
+### `@nx/next/plugin` Inferred Targets
+
+`@nx/next/plugin` detects `next.config.{ts,js,cjs,mjs}` and creates these targets:
+
+- `build` → `next build` (with `dependsOn: ['^build']`)
+- `dev` → `next dev`
+- `start` → `next start` (depends on `build`)
+- `serve-static` → same as `start`
+- `build-deps` / `watch-deps` — for TS solution setup
+
+**No separate typecheck target** — Next.js runs TypeScript checking as part of `next build`. The `@nx/js/typescript` plugin provides a standalone `typecheck` target for non-Next libraries in the workspace.
+
+**Build target conflict**: Both `@nx/next/plugin` and `@nx/js/typescript` define a `build` target. `@nx/next/plugin` wins for Next.js projects (it detects `next.config.*`), while `@nx/js/typescript` handles libraries with `tsconfig.lib.json`. No rename needed — they coexist.
+
+### `withNx` in `next.config.js`
+
+Nx-generated Next.js projects use `composePlugins(withNx)` from `@nx/next`. This wrapper is optional for `next build` via the inferred plugin (which just runs `next build`), but it provides Nx-specific configuration. Keep it if present.
+
+### Root Dependencies for Next.js
+
+Beyond the generic root deps issue (see SKILL.md), Next.js projects typically need:
+
+**Core**: `react`, `react-dom`, `@types/react`, `@types/react-dom`, `@types/node`, `@nx/react` (see SKILL.md for `@nx/react` typings)
+**Nx plugins**: `@nx/next` (auto-installed by import), `@nx/eslint`, `@nx/jest`
+**Testing**: see SKILL.md "Jest Preset Missing" section
+**ESLint**: `@next/eslint-plugin-next` (in addition to generic ESLint deps from SKILL.md)
+
+### Next.js Auto-Installing Dependencies via Wrong Package Manager
+
+Next.js detects missing `@types/react` during `next build` and tries to install it using `yarn add` regardless of the actual package manager. In a pnpm workspace, this fails with a "nearest package directory isn't part of the project" error.
+
+**Root cause**: `@types/react` is missing from root devDependencies.
+**Fix**: Install deps at the root before building: `pnpm add -wD @types/react @types/react-dom`
+
+### Next.js TypeScript Config Specifics
+
+Next.js app tsconfigs have unique patterns compared to Vite:
+
+- **`noEmit: true`** with `emitDeclarationOnly: false` — Next.js handles emit, TS just checks types. This conflicts with `composite: true` from the TS solution setup.
+- **`"types": ["jest", "node"]`** — includes test types in the main tsconfig (no separate `tsconfig.app.json`)
+- **`"plugins": [{ "name": "next" }]`** — for IDE integration
+- **`include`** references `.next/types/**/*.ts` for Next.js auto-generated types
+- **`"jsx": "preserve"`** — Next.js uses its own JSX transform, not React's
+
+**Gotcha**: The Next.js tsconfig sets `"noEmit": true` which disables `composite` mode. This is fine because Next.js projects use `next build` for building, not `tsc`. The `@nx/js/typescript` plugin's `typecheck` target is not needed for Next.js apps.
+
+### `next.config.js` Lint Warning
+
+Imported Next.js configs may have `// eslint-disable-next-line @typescript-eslint/no-var-requires` but the project ESLint config enables different rule sets. This produces `Unused eslint-disable directive` warnings. Harmless — remove the comment or ignore.
+
+### `@nx/next:init` Rewrites All npm Scripts (Whole-Repo Import)
+
+When `@nx/next:init` runs during a whole-repo import, it rewrites the project's `package.json` scripts to prefixed `nx` calls:
+
+```json
+{
+    "dev": "nx next:dev",
+    "build": "nx next:build",
+    "start": "nx next:start"
+}
+```
+
+This is the standard "npm Script Rewriting" issue from SKILL.md, but triggered by `@nx/next:init` rather than Nx init. **Fix**: Remove all rewritten scripts from `package.json` — `@nx/next/plugin` infers all targets from `next.config.*`.
+
+---
+
+## Non-Nx Source (create-next-app)
+
+### Whole-Repo Import Recommended
+
+For single-project `create-next-app` repos, use whole-repo import into a subdirectory:
+
+```bash
+nx import /path/to/source apps/web --ref=main --source=. --no-interactive
+```
+
+### `next-env.d.ts`
+
+`next build` auto-generates `next-env.d.ts` at the project root. Add `next-env.d.ts` to the dest root `.gitignore` — it is framework-generated and should not be committed.
+
+### ESLint: Self-Contained `eslint-config-next`
+
+`create-next-app` generates a flat ESLint config using `eslint-config-next` (which bundles its own plugins). This is **self-contained** — no root `eslint.config.mjs` needed, no `@nx/eslint-plugin` dependency. The `@nx/eslint/plugin` detects it and creates a lint target.
+
+### TypeScript: No Changes Needed
+
+Non-Nx Next.js projects have self-contained tsconfigs with `noEmit: true`, their own `lib`, `module`, `moduleResolution`, and `jsx` settings. Since `next build` handles type checking internally, no tsconfig modifications are needed. The project does NOT need to extend `tsconfig.base.json`.
+
+**Gotcha**: The `@nx/js/typescript` plugin won't create a `typecheck` target because there's no `tsconfig.lib.json`. This is fine — use `next:build` for type checking.
+
+### `noEmit: true` and TS Solution Setup
+
+Non-Nx Next.js projects use `noEmit: true`, which conflicts with Nx's TS solution setup (`composite: true`). If the dest workspace uses project references and you want the Next.js app to participate:
+
+1. Remove `noEmit: true`, add `composite: true`, `emitDeclarationOnly: true`
+2. Add `extends: "../../tsconfig.base.json"`
+3. Add `outDir` and `tsBuildInfoFile`
+
+**However**, this is optional for standalone Next.js apps that don't export types consumed by other workspace projects.
+
+### Tailwind / PostCSS
+
+`create-next-app` with Tailwind generates `postcss.config.mjs`. This works as-is after import — no path changes needed since PostCSS resolves relative to the project root.
+
+---
+
+## Mixed Next.js + Vite Coexistence
+
+When both Next.js and Vite projects exist in the same workspace.
+
+### Plugin Coexistence
+
+Both `@nx/next/plugin` and `@nx/vite/plugin` can coexist in `nx.json`. They detect different config files (`next.config.*` vs `vite.config.*`) so there are no conflicts. The `@nx/js/typescript` plugin handles libraries.
+
+### Vite Standalone Project tsconfig Fixes
+
+Vite standalone projects (imported as whole-repo) have self-contained tsconfigs without `composite: true`. The `@nx/js/typescript` plugin's typecheck target runs `tsc --build --emitDeclarationOnly` which requires `composite`.
+
+**Fix**:
+
+1. Add `extends: "../../tsconfig.base.json"` to the root project tsconfig
+2. Add `composite: true`, `declaration: true`, `declarationMap: true`, `tsBuildInfoFile` to `tsconfig.app.json` and `tsconfig.spec.json`
+3. Set `moduleResolution: "bundler"` (replace `"node"`)
+4. Add source files to `tsconfig.spec.json` `include` — specs import app code, and `composite` mode requires all files to be listed
+
+### Typecheck Target Names
+
+- `@nx/vite/plugin` defaults `typecheckTargetName` to `"vite:typecheck"`
+- `@nx/js/typescript` uses `"typecheck"`
+- Next.js projects have NO standalone typecheck target — Next.js runs type checking during `next build`
+
+No naming conflicts between frameworks.
+
+---
+
+## Fix Order — Nx Source (Subdirectory Import)
+
+1. Import Next.js apps into `apps/<name>` (see SKILL.md: "Application vs Library Detection")
+2. Generic fixes from SKILL.md (pnpm globs, root deps, `.gitkeep` removal, frontend tsconfig base settings, `@nx/react` typings)
+3. Install Next.js-specific deps: `pnpm add -wD @next/eslint-plugin-next`
+4. ESLint setup (see SKILL.md: "Root ESLint Config Missing")
+5. Jest setup (see SKILL.md: "Jest Preset Missing")
+6. `nx reset && nx sync --yes && nx run-many -t typecheck,build,test,lint`
+
+## Fix Order — Non-Nx Source (create-next-app)
+
+1. Import into `apps/<name>` (see SKILL.md: "Application vs Library Detection")
+2. Generic fixes from SKILL.md (pnpm globs, stale files cleanup, script rewriting, target name prefixing)
+3. (Optional) If app needs to export types for other workspace projects: fix `noEmit` → `composite` (see SKILL.md)
+4. `nx reset && nx run-many -t next:build,eslint:lint` (or unprefixed names if renamed)
+
+---
+
+## Iteration Log
+
+### Scenario 1: Basic Nx Next.js App Router + Shared Lib → TS preset (PASS)
+
+- Source: CNW next preset (Next.js 16, App Router) + `@nx/react:library` shared-ui
+- Dest: CNW ts preset (Nx 23)
+- Import: subdirectory-at-a-time (apps, libs separately)
+- Errors found & fixed:
+    1. pnpm-workspace.yaml: `apps`/`libs` → `apps/*`/`libs/*`
+    2. Root tsconfig: `nodenext` → `bundler`, add `dom`/`dom.iterable` to `lib`, add `jsx: react-jsx`
+    3. Missing `@nx/react` (for CSS module/image type defs in lib)
+    4. Missing `@types/react`, `@types/react-dom`, `@types/node`
+    5. Next.js trying `yarn add @types/react` — fixed by installing at root
+    6. Missing `@nx/eslint`, root `eslint.config.mjs`, ESLint plugins
+    7. Missing `@nx/jest`, `jest.preset.js`, `jest-environment-jsdom`, `ts-jest`
+- All targets green: typecheck, build, test, lint
+
+### Scenario 3: Non-Nx create-next-app (App Router + Tailwind) → TS preset (PASS)
+
+- Source: `create-next-app@latest` (Next.js 16.1.6, App Router, Tailwind v4, flat ESLint config)
+- Dest: CNW ts preset (Nx 23)
+- Import: whole-repo into `apps/web`
+- Errors found & fixed:
+    1. pnpm-workspace.yaml: `apps/web` → `apps/*`
+    2. Stale files: `node_modules/`, `pnpm-lock.yaml`, `pnpm-workspace.yaml`, `.gitignore` — deleted
+    3. Nx-rewritten npm scripts (`"build": "nx next:build"`, etc.) — removed
+- No tsconfig changes needed — self-contained config with `noEmit: true`
+- ESLint self-contained via `eslint-config-next` — no root config needed
+- No test setup (create-next-app doesn't include tests)
+- All targets green: next:build, eslint:lint
+
+### Scenario 4: Non-Nx create-next-app (alongside Vite, React Router 7, TanStack, CRA) → TS preset (PASS)
+
+- See VITE.md Scenario 6 for the full multi-import scenario
+- Next.js-specific findings:
+    1. `@nx/next:init` rewrote all scripts to `nx next:*` format — removed all rewritten scripts
+    2. Stale files: `node_modules/`, `package-lock.json`, `.gitignore` — deleted (npm workspace, no pnpm files)
+    3. ESLint self-contained via `eslint-config-next` — no root config needed
+    4. No tsconfig changes needed — `noEmit: true` stays; `next build` handles type checking
+- Targets: `next:build`, `next:dev`, `next:start`, `eslint:lint`
+
+### Scenario 5: Mixed Next.js (Nx) + Vite React (standalone) → TS preset (PASS)
+
+- Source A: CNW next preset (Next.js 16, App Router) — subdirectory import of `apps/`
+- Source B: CNW react-standalone preset (Vite 7, React 19) — whole-repo import into `apps/vite-app`
+- Dest: CNW ts preset (Nx 23)
+- Errors found & fixed:
+    1. All Scenario 1 fixes for the Next.js app
+    2. Stale files from Vite source: `node_modules/`, `pnpm-lock.yaml`, `pnpm-workspace.yaml`, `.gitignore`, `nx.json`
+    3. Removed rewritten scripts from Vite app's `package.json`
+    4. ESLint 8 vs 9 conflict — `@nx/eslint` peer on ESLint 8 resolved wrong version. Fixed with `pnpm.overrides`
+    5. Vite tsconfigs missing `composite: true`, `declaration: true` — needed for `tsc --build --emitDeclarationOnly`
+    6. Vite `tsconfig.spec.json` `include` missing source files — specs import app code
+    7. Vite tsconfig `moduleResolution: "node"` → `"bundler"`, added `extends: "../../tsconfig.base.json"`
+- All targets green: typecheck, build, test, lint for both projects

package/dist/templates/base/.github/skills/nx-import/references/TURBOREPO.md

@@ -0,0 +1,62 @@
+## Turborepo
+
+- Nx replaces Turborepo task orchestration, but a clean migration requires handling Turborepo's config packages.
+- Migration guide: https://nx.dev/docs/guides/adopting-nx/from-turborepo#easy-automated-migration-example
+- Since Nx replaces Turborepo, all turbo config files and config packages become dead code and should be removed.
+
+## The Config-as-Package Pattern
+
+Turborepo monorepos ship with internal workspace packages that share configuration:
+
+- **`@repo/typescript-config`** (or similar) — tsconfig files (`base.json`, `nextjs.json`, `react-library.json`, etc.)
+- **`@repo/eslint-config`** (or similar) — ESLint config files and all ESLint plugin dependencies
+
+These are not code libraries. They distribute config via Node module resolution (e.g., `"extends": "@repo/typescript-config/nextjs.json"`). This is the **default** Turborepo pattern — expect it in virtually every Turborepo import. Package names vary — check `package.json` files to identify the actual names.
+
+## Check for Root Config Files First
+
+**Before doing any config merging, check whether the destination workspace uses shared root configuration.** This decides how to handle the config packages.
+
+- If the workspace has a root `tsconfig.base.json` and/or root `eslint.config.mjs` that projects extend, merge the config packages into these root configs (see steps below).
+- If the workspace does NOT have root config files — each project manages its own configuration independently (similar to Turborepo). In this case, **do not create root config files or merge into them**. Just remove turbo-specific parts (`turbo.json`, `eslint-plugin-turbo`) and leave the config packages in place, or ask the user how they want to handle them.
+
+If unclear, check for the presence of `tsconfig.base.json` at the root or ask the user.
+
+## Merging TypeScript Config (Only When Root tsconfig.base.json Exists)
+
+The config package contains a hierarchy of tsconfig files. Each project extends one via package name.
+
+1. **Read the config package** — trace the full inheritance chain (e.g., `nextjs.json` extends `base.json`).
+2. **Update root `tsconfig.base.json`** — absorb `compilerOptions` from the base config. Add Nx `paths` for cross-project imports (Turborepo doesn't use path aliases, Nx relies on them).
+3. **Update each project's `tsconfig.json`**:
+    - Change `"extends"` from `"@repo/typescript-config/<variant>.json"` to the relative path to root `tsconfig.base.json`.
+    - Inline variant-specific overrides from the intermediate config (e.g., Next.js: `"module": "ESNext"`, `"moduleResolution": "Bundler"`, `"jsx": "preserve"`, `"noEmit": true`; React library: `"jsx": "react-jsx"`).
+    - Preserve project-specific settings (`outDir`, `include`, `exclude`, etc.).
+4. **Delete the config package** and remove it from all `devDependencies`.
+
+## Merging ESLint Config (Only When Root eslint.config Exists)
+
+The config package centralizes ESLint plugin dependencies and exports composable flat configs.
+
+1. **Read the config package** — identify exported configs, plugin dependencies, and inheritance.
+2. **Update root `eslint.config.mjs`** — absorb base rules (JS recommended, TypeScript-ESLint, Prettier, etc.). Drop `eslint-plugin-turbo`.
+3. **Update each project's `eslint.config.mjs`** — switch from importing `@repo/eslint-config/<variant>` to extending the root config, adding framework-specific plugins inline.
+4. **Move ESLint plugin dependencies** from the config package to root `devDependencies`.
+5. If `@nx/eslint` plugin is configured with inferred targets, remove `"lint"` scripts from project `package.json` files.
+6. **Delete the config package** and remove it from all `devDependencies`.
+
+## General Cleanup
+
+- Remove turbo-specific dependencies: `turbo`, `eslint-plugin-turbo`.
+- Delete all `turbo.json` files (root and per-package).
+- Run workspace validation (`nx run-many -t build lint test typecheck`) to confirm nothing broke.
+
+## Key Pitfalls
+
+- **Trace the full inheritance chain** before inlining — check what each variant inherits from the base.
+- **Module resolution changes** — from Node package resolution (`@repo/...`) to relative paths (`../../tsconfig.base.json`).
+- **ESLint configs are JavaScript, not JSON** — handle JS imports, array spreading, and plugin objects when merging.
+
+Helpful docs:
+
+- https://nx.dev/docs/guides/adopting-nx/from-turborepo

package/dist/templates/base/.github/skills/nx-import/references/VITE.md

@@ -0,0 +1,393 @@
+## Vite
+
+Vite-specific guidance for `nx import`. For generic import issues (pnpm globs, root deps, project references, name collisions, ESLint, frontend tsconfig base settings, `@nx/react` typings, Jest preset, non-Nx source handling), see `SKILL.md`.
+
+---
+
+### `@nx/vite/plugin` Typecheck Target
+
+`@nx/vite/plugin` defaults `typecheckTargetName` to `"vite:typecheck"`. If the workspace expects `"typecheck"`, set it explicitly in `nx.json`. If `@nx/js/typescript` is also registered, rename one target to avoid conflicts (e.g. `"tsc-typecheck"` for the JS plugin).
+
+Keep both plugins only if the workspace has non-Vite pure TS libraries — `@nx/js/typescript` handles those while `@nx/vite/plugin` handles Vite projects.
+
+### @nx/vite Plugin Install Failure
+
+Plugin init loads `vite.config.ts` before deps are available. **Fix**: `pnpm add -wD vite @vitejs/plugin-react` (or `@vitejs/plugin-vue`) first, then `pnpm exec nx add @nx/vite`.
+
+### Vite `resolve.alias` and `__dirname` (Non-Nx Sources)
+
+**`__dirname` undefined** (CJS-only): Replace with `fileURLToPath(new URL('./src', import.meta.url))` from `'node:url'`.
+
+**`@/` path alias**: Vite's `resolve.alias` works at runtime but TS needs matching `"paths"`. Set `"baseUrl": "."` in project tsconfig.
+
+**PostCSS/Tailwind**: Verify `content` globs resolve correctly after import.
+
+### Missing TypeScript `types` (Non-Nx Sources)
+
+Non-Nx tsconfigs may not declare all needed types. Ensure Vite projects include `"types": ["node", "vite/client"]` in their tsconfig.
+
+### `noEmit` Fix: Vite-Specific Notes
+
+See SKILL.md for the generic noEmit→composite fix. Vite-specific additions:
+
+- Non-Nx Vite projects often have **both** `tsconfig.app.json` and `tsconfig.node.json` with `noEmit` — fix both
+- Solution-style tsconfigs (`"files": [], "references": [...]`) may lack `extends`. Add `extends` pointing to the dest root `tsconfig.base.json` so base settings (`moduleResolution`, `lib`) apply.
+- This is safe — Vite/Vitest ignore TypeScript emit settings.
+
+### Dependency Version Conflicts
+
+**Shared Vite deps (both frameworks):** `vite`, `vitest`, `jsdom`, `@types/node`, `typescript` (dev)
+
+**Vite 6→7**: Typecheck fails (`Plugin<any>` type mismatch); build/serve still works. Fix: align versions.
+**Vitest 3→4**: Usually works; type conflicts may surface in shared test utils.
+
+---
+
+## React Router 7 (Vite-Based)
+
+React Router 7 (`@react-router/dev`) uses Vite under the hood with a `vite.config.ts` and a `react-router.config.ts`. The `@nx/vite/plugin` detects `vite.config.ts` and creates inferred targets.
+
+### Targets
+
+`@nx/vite/plugin` creates `build`, `dev`, `serve` targets. The `build` target invokes the script defined in `package.json` (usually `react-router build`), not `vite build` directly.
+
+**No separate typecheck target from `@nx/vite/plugin`** — React Router 7 typegen is run as part of `typecheck` (e.g. `react-router typegen && tsc`). The `typecheck` target is inferred from the tsconfig. Keep the `typecheck` script in `package.json` if present; it is not rewritten.
+
+### tsconfig Notes
+
+React Router 7 uses a single `tsconfig.json` (no `tsconfig.app.json`/`tsconfig.node.json` split). It includes:
+
+- `"rootDirs": [".", "./.react-router/types"]` — for generated type files; keep as-is
+- `"paths": { "~/*": ["./app/*"] }` — self-referential alias; keep as-is
+- `"noEmit": true` — replace with composite settings per SKILL.md
+
+### Build Output
+
+React Router 7 outputs to `build/` (not `dist/`). Add `build` to the dest root `.gitignore`.
+
+### Generated Types Directory
+
+React Router 7 generates `.react-router/` at the project root for route type generation. Add `.react-router` to the dest root `.gitignore`.
+
+---
+
+## TanStack Start (Vite-Based)
+
+TanStack Start uses Vinxi under the hood, which wraps Vite. Projects have a standard `vite.config.ts` that `@nx/vite/plugin` detects normally.
+
+### Targets
+
+`@nx/vite/plugin` creates `build`, `dev`, `preview`, `serve-static`, `typecheck` targets. The `build` target runs `vite build` which invokes the TanStack Start Vinxi pipeline (produces both client and SSR bundles).
+
+### tsconfig Notes
+
+TanStack Start uses a single `tsconfig.json` with `"allowImportingTsExtensions": true` and `"noEmit": true`. Apply the standard noEmit → composite fix. `allowImportingTsExtensions` is compatible with `emitDeclarationOnly: true` — no change needed.
+
+### `paths` Aliases
+
+TanStack Start commonly uses `"#/*": ["./src/*"]` and `"@/*": ["./src/*"]`. These are self-referential — keep as-is for a single-project app.
+
+### Uncommitted Source Repo
+
+`create-tan-stack` initializes a git repo but does NOT make an initial commit. Before importing, commit first:
+
+```bash
+git -C /path/to/source add . && git -C /path/to/source commit -m "Initial commit"
+```
+
+### Generated and Build Directories
+
+TanStack Start / Vinxi / Nitro generate several directories that must be added to the dest root `.gitignore`:
+
+- `.vinxi` — Vinxi build cache
+- `.tanstack` — TanStack generated files
+- `.nitro` — Nitro build artifacts
+- `.output` — server-side build output (SSR/edge)
+
+These are not covered by `dist` or `build`.
+
+---
+
+## React-Specific
+
+### React Dependencies
+
+**Production:** `react`, `react-dom`
+**Dev:** `@types/react`, `@types/react-dom`, `@vitejs/plugin-react`, `@testing-library/react`, `@testing-library/jest-dom`, `jsdom`
+**ESLint (Nx sources):** `eslint-plugin-import`, `eslint-plugin-jsx-a11y`, `eslint-plugin-react`, `eslint-plugin-react-hooks`
+**ESLint (`create-vite`):** `eslint-plugin-react-refresh`, `eslint-plugin-react-hooks` — self-contained flat configs can be left as-is
+**Nx plugins:** `@nx/react` (generators), `@nx/vite`, `@nx/vitest`, `@nx/eslint`
+
+### React TypeScript Configuration
+
+Add `"jsx": "react-jsx"` — in `tsconfig.base.json` for single-framework workspaces, per-project for mixed (see Mixed section).
+
+### React ESLint Config
+
+```js
+import nx from '@nx/eslint-plugin';
+import baseConfig from '../../eslint.config.mjs';
+export default [...baseConfig, ...nx.configs['flat/react'], { files: ['**/*.ts', '**/*.tsx'], rules: {} }];
+```
+
+### React Version Conflicts
+
+React 18 (source) + React 19 (dest): pnpm may hoist mismatched `react-dom`, causing `TypeError: Cannot read properties of undefined (reading 'S')`. **Fix**: Align versions with `pnpm.overrides`.
+
+### `@testing-library/jest-dom` with Vitest
+
+If source used Jest: change import to `@testing-library/jest-dom/vitest` in test-setup.ts, add to tsconfig `types`.
+
+---
+
+## Vue-Specific
+
+### Vue Dependencies
+
+**Production:** `vue` (plus `vue-router`, `pinia` if used)
+**Dev:** `@vitejs/plugin-vue`, `vue-tsc`, `@vue/test-utils`, `jsdom`
+**ESLint:** `eslint-plugin-vue`, `vue-eslint-parser`, `@vue/eslint-config-typescript`, `@vue/eslint-config-prettier`
+**Nx plugins:** `@nx/vue` (generators), `@nx/vite`, `@nx/vitest`, `@nx/eslint` (install AFTER deps — see below)
+
+### Vue TypeScript Configuration
+
+Add to `tsconfig.base.json` (single-framework) or per-project (mixed):
+
+```json
+{ "jsx": "preserve", "jsxImportSource": "vue", "resolveJsonModule": true }
+```
+
+### `vue-shims.d.ts`
+
+Vue SFC files need a type declaration. Usually exists in each project's `src/` and imports cleanly. If missing:
+
+```ts
+declare module '*.vue' {
+    import { defineComponent } from 'vue';
+    const component: ReturnType<typeof defineComponent>;
+    export default component;
+}
+```
+
+### `vue-tsc` Auto-Detection
+
+Both `@nx/js/typescript` and `@nx/vite/plugin` auto-detect `vue-tsc` when installed — no manual config needed. Remove source scripts like `"typecheck": "vue-tsc --noEmit"`.
+
+### ESLint Plugin Installation Order (Critical)
+
+`@nx/eslint` init **crashes** if Vue ESLint deps aren't installed first (it loads all config files).
+
+**Correct order:**
+
+1. `pnpm add -wD eslint@^9 eslint-plugin-vue vue-eslint-parser @vue/eslint-config-typescript @typescript-eslint/parser @nx/eslint-plugin typescript-eslint`
+2. Create root `eslint.config.mjs`
+3. Then `npx nx add @nx/eslint`
+
+### Vue ESLint Config Pattern
+
+```js
+import vue from 'eslint-plugin-vue';
+import vueParser from 'vue-eslint-parser';
+import tsParser from '@typescript-eslint/parser';
+import baseConfig from '../../eslint.config.mjs';
+export default [
+    ...baseConfig,
+    ...vue.configs['flat/recommended'],
+    {
+        files: ['**/*.vue'],
+        languageOptions: { parser: vueParser, parserOptions: { parser: tsParser } },
+    },
+    {
+        files: ['**/*.ts', '**/*.tsx', '**/*.js', '**/*.jsx', '**/*.vue'],
+        rules: { 'vue/multi-word-component-names': 'off' },
+    },
+];
+```
+
+**Important**: `vue-eslint-parser` override must come **AFTER** base config — `flat/typescript` sets the TS parser globally without a `files` filter, breaking `.vue` parsing.
+
+`vue-eslint-parser` must be an explicit pnpm dependency (strict resolution prevents transitive import).
+
+**Known issue**: Some generated Vue ESLint configs omit `vue-eslint-parser`. Use the pattern above instead.
+
+---
+
+## Mixed React + Vue
+
+When both frameworks coexist, several settings become per-project.
+
+### tsconfig `jsx` — Per-Project Only
+
+- React: `"jsx": "react-jsx"` in project tsconfig
+- Vue: `"jsx": "preserve"`, `"jsxImportSource": "vue"` in project tsconfig
+- Root: **NO** `jsx` setting
+
+### Typecheck — Auto-Detects Framework
+
+`@nx/vite/plugin` uses `vue-tsc` for Vue projects and `tsc` for React automatically.
+
+```json
+{
+    "plugins": [
+        { "plugin": "@nx/eslint/plugin", "options": { "targetName": "lint" } },
+        {
+            "plugin": "@nx/vite/plugin",
+            "options": {
+                "buildTargetName": "build",
+                "typecheckTargetName": "typecheck",
+                "testTargetName": "test"
+            }
+        }
+    ]
+}
+```
+
+Remove `@nx/js/typescript` if all projects use Vite. Keep it (renamed to `"tsc-typecheck"`) only for non-Vite pure TS libs.
+
+### ESLint — Three-Tier Config
+
+1. **Root**: Base rules only, no framework-specific rules
+2. **React projects**: Extend root + `nx.configs['flat/react']`
+3. **Vue projects**: Extend root + `vue.configs['flat/recommended']` + `vue-eslint-parser`
+
+**Required packages**: Shared (`eslint@^9`, `@nx/eslint-plugin`, `typescript-eslint`, `@typescript-eslint/parser`), React (`eslint-plugin-import`, `eslint-plugin-jsx-a11y`, `eslint-plugin-react`, `eslint-plugin-react-hooks`), Vue (`eslint-plugin-vue`, `vue-eslint-parser`)
+
+`@nx/react`/`@nx/vue` are for generators only — no target conflicts.
+
+---
+
+## Redundant npm Scripts After Import
+
+`nx import` copies `package.json` verbatim, so npm scripts come along. For Vite-based projects `@nx/vite/plugin` already infers the same targets from `vite.config.ts` — the npm scripts just shadow the plugin with weaker `nx:run-script` wrappers (no first-class caching inputs/outputs). Remove them after import.
+
+### Standalone Vite App (`create-vite`)
+
+Remove the following scripts — every one is redundant:
+
+| Script                        | Plugin replacement                                                           |
+| ----------------------------- | ---------------------------------------------------------------------------- |
+| `dev: vite`                   | `@nx/vite/plugin` → `dev`                                                    |
+| `build: tsc -b && vite build` | `@nx/vite/plugin` → `build`; `typecheck` via `@nx/js/typescript` handles tsc |
+| `preview: vite preview`       | `@nx/vite/plugin` → `preview`                                                |
+| `lint: eslint .`              | `@nx/eslint/plugin` → `eslint:lint`                                          |
+
+### TanStack Start
+
+Remove `build`, `dev`, `preview`, and `test` scripts, but move any hardcoded `--port` flag to `vite.config.ts` first:
+
+```ts
+// vite.config.ts
+export default defineConfig({
+  server: { port: 3000 },  // replaces `vite dev --port 3000`
+  ...
+})
+```
+
+### React Router 7 — Keep ALL scripts
+
+Do **not** remove React Router 7 scripts. They use the framework CLI (`react-router build`, `react-router dev`, `react-router-serve`) which is not interchangeable with plain `vite`:
+
+- `typecheck` runs `react-router typegen && tsc` — typegen must precede `tsc` or it fails on missing route types
+- `start` serves the SSR bundle — no plugin equivalent
+
+---
+
+## Fix Orders
+
+### Nx Source
+
+1. Generic fixes from SKILL.md (pnpm globs, root deps, executor paths, frontend tsconfig base settings, `@nx/react` typings)
+2. Configure `@nx/vite/plugin` typecheck target
+3. **React**: `jsx: "react-jsx"` (root or per-project)
+4. **Vue**: `jsx: "preserve"` + `jsxImportSource: "vue"`; verify `vue-shims.d.ts`; install ESLint deps before `@nx/eslint`
+5. **Mixed**: `jsx` per-project; remove/rename `@nx/js/typescript`
+6. `nx sync --yes && nx reset && nx run-many -t typecheck,build,test,lint`
+
+### Non-Nx Source (additional steps)
+
+0. Import into `apps/<name>` (see SKILL.md: "Application vs Library Detection")
+1. Generic fixes from SKILL.md (stale files cleanup, pnpm globs, rewritten scripts, target name prefixing, noEmit→composite, ESLint handling)
+2. Fix `noEmit` in **all** tsconfigs (app, node, etc. — non-Nx projects often have multiple)
+3. Add `extends` to solution-style tsconfigs so root settings apply
+4. Fix `resolve.alias` / `__dirname` / `baseUrl`
+5. Ensure `types` include `vite/client` and `node`
+6. Install `@nx/vite` manually if it failed during import
+7. Remove redundant npm scripts so `@nx/vite/plugin` infers them natively (see "Redundant npm Scripts" section)
+8. **Vue**: Add `outDir` + `**/*.vue.d.ts` to ESLint ignores
+9. Full verification
+
+### Multiple-Source Imports
+
+See SKILL.md for generic multi-import (name collisions, dep refs). Vite-specific: fix tsconfig `references` paths for alternate directories (`../../libs/` → `../../libs-beta/`).
+
+### Non-Nx Source: React Router 7
+
+1. Ensure source has at least one commit (see SKILL.md: "Source Repo Has No Commits")
+2. `nx import` whole-repo into `apps/<name>` (see SKILL.md: "Application vs Library Detection") → auto-installs `@nx/vite`, `@nx/react`
+3. Stale file cleanup: `node_modules/`, `package-lock.json`, `.gitignore`
+4. Fix `tsconfig.json`: `noEmit` → `composite + emitDeclarationOnly + outDir + tsBuildInfoFile`
+5. Add `build` and `.react-router` to dest root `.gitignore`
+6. **Keep all npm scripts** — React Router 7 uses framework CLI (`react-router build/dev`), not plain vite (see "Redundant npm Scripts" above)
+7. `npm install && nx reset && nx sync --yes`
+
+### Non-Nx Source: TanStack Start
+
+1. Ensure source has at least one commit — `create-tan-stack` does NOT auto-commit (see SKILL.md)
+2. `nx import` whole-repo into `apps/<name>` (see SKILL.md: "Application vs Library Detection") → auto-installs `@nx/vite`, `@nx/vitest`
+3. Stale file cleanup: `node_modules/`, `package-lock.json`, `.gitignore`
+4. Fix `tsconfig.json`: `noEmit` → `composite + emitDeclarationOnly + outDir + tsBuildInfoFile`
+5. Keep `allowImportingTsExtensions` — compatible with `emitDeclarationOnly: true`
+6. Add `.vinxi`, `.tanstack`, `.nitro`, `.output` to dest root `.gitignore`
+7. Move hardcoded `--port` from `dev` script into `vite.config.ts` (`server: { port: N }`)
+8. Remove redundant npm scripts — `@nx/vite/plugin` infers `build`, `dev`, `preview`, `test` (see "Redundant npm Scripts" above)
+9. `npm install && nx reset && nx sync --yes`
+
+### Quick Reference: React vs Vue
+
+| Aspect        | React                    | Vue                                       |
+| ------------- | ------------------------ | ----------------------------------------- |
+| Vite plugin   | `@vitejs/plugin-react`   | `@vitejs/plugin-vue`                      |
+| Type checker  | `tsc`                    | `vue-tsc` (auto-detected)                 |
+| SFC support   | N/A                      | `vue-shims.d.ts` needed                   |
+| tsconfig jsx  | `"react-jsx"`            | `"preserve"` + `"jsxImportSource": "vue"` |
+| ESLint parser | Standard TS              | `vue-eslint-parser` + TS sub-parser       |
+| ESLint setup  | Straightforward          | Must install deps before `@nx/eslint`     |
+| Test utils    | `@testing-library/react` | `@vue/test-utils`                         |
+
+### Quick Reference: Vite-Based React Frameworks
+
+| Aspect             | Vite (standalone) | React Router 7          | TanStack Start           |
+| ------------------ | ----------------- | ----------------------- | ------------------------ |
+| Build config       | `vite.config.ts`  | `vite.config.ts`        | `vite.config.ts`         |
+| Build output       | `dist/`           | `build/`                | `dist/`                  |
+| SSR bundle         | No                | Yes (`build/server/`)   | Yes (`dist/server/`)     |
+| tsconfig layout    | app + node split  | Single tsconfig         | Single tsconfig          |
+| Auto-committed     | Depends on tool   | Usually yes             | **No — commit first**    |
+| `nx import` plugin | `@nx/vite`        | `@nx/vite`, `@nx/react` | `@nx/vite`, `@nx/vitest` |
+
+---
+
+## Iteration Log
+
+### Scenario 6: Multiple non-Nx React apps (CRA, Next.js, React Router 7, TanStack Start, Vite) → TS preset (PASS)
+
+- Sources: 5 standalone non-Nx repos with different build tools
+- Dest: CNW ts preset (Nx 22.5.1), npm workspaces, `packages/*`
+- Import: whole-repo for each, sequential into `packages/<name>`
+- Pre-import fixes:
+    1. Removed `packages/.gitkeep` and committed
+    2. `git init && git add . && git commit` in Vite app (no git at all)
+    3. `git add . && git commit` in TanStack app (git init'd but no commits)
+- Import: `npm exec nx -- import <source> packages/<name> --source=. --ref=main --no-interactive`
+    - Next.js import auto-installed `@nx/eslint`, `@nx/next`
+    - React Router 7 import auto-installed `@nx/vite`, `@nx/react`, `@nx/docker` (Dockerfile present)
+    - TanStack import auto-installed `@nx/vitest`
+- Post-import fixes:
+    1. Removed stale `node_modules/`, `package-lock.json`, `.gitignore` from each package
+    2. Removed Nx-rewritten scripts from `board-games-nextjs/package.json` (had `"build": "nx next:build"`, etc.)
+    3. Updated root `tsconfig.base.json`: `nodenext` → `bundler`, added `dom`/`dom.iterable` to lib, added `jsx: react-jsx`
+    4. Added `build` to dest root `.gitignore` (CRA and React Router 7 output there)
+    5. Fixed `noEmit` → `composite + emitDeclarationOnly` in: `board-games-vite/tsconfig.app.json`, `board-games-vite/tsconfig.node.json`, `board-games-react-router/tsconfig.json`, `board-games-tanstack/tsconfig.json`
+    6. Fixed `tsBuildInfoFile` paths from `./node_modules/.tmp/...` to `./dist/...`
+    7. Installed root `@types/react`, `@types/react-dom`, `@types/node`
+- All targets green: `build` for all 5 projects; `typecheck` for Vite/React Router/TanStack; `next:build` for Next.js