Vite + TanStack Router Architecture Enforcement

<output_language>

Default all user-facing deliverables, saved artifacts, reports, plans, generated docs, summaries, handoff notes, commit/message drafts, and validation notes to Korean, even when this canonical skill file is written in English.

Preserve source code identifiers, CLI commands, file paths, schema keys, JSON/YAML field names, API names, package names, proper nouns, and quoted source excerpts in their required or original language.

Use a different language only when the user explicitly requests it, an existing target artifact must stay in another language for consistency, or a machine-readable contract requires exact English tokens. If a localized template or reference exists (for example *.ko.md or *.ko.json), prefer it for user-facing artifacts.

</output_language>

Overview

Enforces hypercore Vite + TanStack Router architecture rules with strict validation before editing code.

This skill is RIGID. Follow exactly. No exceptions.

OPERATING MODE: This skill must stay self-contained. Do not block on external orchestration surfaces just to apply architecture rules. If a repo-local persistence loop is already active, carry these gates into that loop. Otherwise proceed directly with this skill.

NOTE: Some rules in this skill are stricter than TanStack Router defaults. Treat them as hypercore team conventions unless the user explicitly asks to follow official TanStack defaults instead.

Trigger Examples

Positive

• Audit this Vite + TanStack Router app for route structure, validateSearch, and service boundaries before editing.
• Add a new route folder in a Vite + TanStack Router app and keep hooks/services compliant.
• Refactor a TanStack Router page so the UI stays in the route and logic moves into -hooks/.

Negative

• Create a new Codex skill for browser QA.
• Review a TanStack Start app that uses createServerFn and @tanstack/react-start.

Boundary

• Make a tiny copy-only text change in a Vite route file. Direct editing can be enough if the change does not cross an architecture boundary, but touched files still need a quick compliance check.

• The repo actually uses @tanstack/react-start. Route away to tanstack-start-architecture instead of forcing Vite rules onto a Start project.

Step 1: Project Validation

Before any work, confirm a Vite + TanStack Router project:

# Check for Vite + TanStack Router indicators (ANY of these)
grep -r "@tanstack/react-router" package.json 2>/dev/null
grep -r "vite" package.json 2>/dev/null
ls vite.config.ts 2>/dev/null
ls src/routes/__root.tsx 2>/dev/null

If NONE found: STOP. This skill does not apply. Inform the user and return to the normal implementation or review path.

If @tanstack/react-start or app.config.ts is present: STOP. Route to tanstack-start-architecture.

If the repo matches Vite + TanStack Router: proceed with architecture enforcement.

Step 2: Read Architecture Rules

Load the detailed rules reference:

REQUIRED: Read architecture-rules.md in this skill directory before writing any code.

For detailed patterns and examples, also read the relevant rule files:

• rules/conventions.md - naming, TypeScript, imports, comments
• rules/routes.md - route folder structure, route.tsx, loaders, search params
• rules/services.md - public API services, query options, mutations, client boundaries
• rules/hooks.md - custom hook separation and internal order
• rules/execution-model.md - loader/runtime boundaries, SSR-aware caveats, env safety
• rules/platform.md - vite.config.ts, router setup, generated files, env and alias rules

Step 3: Pre-Change Validation Checklist

Before writing ANY code, verify the planned change against these gates:

Brownfield Adoption Rule

• Do not treat every untouched legacy deviation as an immediate project-wide failure.
• Safety or boundary issues still block immediately, especially in touched files.
• Hypercore-specific style or structure drift in untouched legacy code can be recorded as migration backlog.
• Any file you touch should be brought into compliance unless that would require a materially risky migration.

Gate 1: Layer Violations

Routes -> Services -> External API

Check	Rule
Route calling fetch/axios directly?	BLOCKED. Must go through services
Hook calling fetch/axios directly?	BLOCKED. Must go through services
Service returning raw Response to routes/hooks?	BLOCKED. Return typed data
createServerFn, useServerFn, or Start-only middleware APIs in a Vite app?	BLOCKED

Gate 2: Route Structure

Check	Rule
Flat file route for a page that owns UI/logic? (routes/users.tsx)	BLOCKED. Use a folder route (routes/users/index.tsx)
Missing -components/ folder?	BLOCKED. Every page needs it
Missing -hooks/ folder?	BLOCKED. Every page needs it
-functions/ folder present?	BLOCKED. Vite skill does not allow server functions
const Route without export?	BLOCKED. Must be export const Route
Logic in page component?	BLOCKED. Extract to -hooks/
Layout route missing route.tsx while it owns shared loader/beforeLoad/layout work?	BLOCKED
Route with search params but no validateSearch?	BLOCKED. Use zodValidator
Route with loader but no pendingComponent?	WARNING. Recommended

Gate 3: Services

Check	Rule
POST/PUT/PATCH without schema validation?	BLOCKED. Validate with Zod before calling
Direct fetch/axios in route or hook?	BLOCKED. Use service functions
services/index.ts barrel export?	BLOCKED. Import directly from concrete files
Missing explicit return type on service function?	BLOCKED

Gate 4: Hooks

Check	Rule
Hook logic left inside page component?	BLOCKED. Move to -hooks/
Wrong hook order?	BLOCKED. State -> Global -> Query -> Handlers -> Memo -> Effect
Missing exported return type interface?	BLOCKED
camelCase hook filename?	BLOCKED. Use use-kebab-case.ts
useServerFn in a Vite hook?	BLOCKED

Gate 5: Conventions

Check	Rule
camelCase filename?	BLOCKED. Use kebab-case
function keyword?	BLOCKED. Use const arrow functions
any type?	BLOCKED. Use unknown
Missing explicit return type?	BLOCKED
Wrong import order?	BLOCKED. External -> @/ -> Relative -> Type
Missing Korean block comments for grouped logic?	BLOCKED
Using z.string().email()?	BLOCKED. Use z.email() in Zod 4

Gate 6: Execution Model

Check	Rule
Treating a route loader as a private server-only boundary?	BLOCKED. Loaders are client-reachable and may also participate in SSR/manual rendering
Secret, DB, filesystem, or privileged SDK access inside a route module or loader?	BLOCKED. Keep it behind an actual backend/API boundary
Browser-only APIs used at module scope or in shared route helpers without a client boundary?	BLOCKED
Non-VITE_ env access in client-reachable code?	BLOCKED

Gate 7: Platform Setup

Check	Rule
vite.config.ts missing tanstackRouter() or plugin order is wrong?	BLOCKED. Router plugin must stay explicit and precede react()
routeTree.gen.ts hand-edited?	BLOCKED. Treat as generated output
Router setup hidden or inconsistent with SSR/manual rendering needs?	WARNING. Keep src/router.tsx explicit; use a fresh router factory when SSR/manual rendering exists
Path alias or env setup relies on implicit behavior only?	WARNING. Keep tsconfig/Vite config and runtime validation explicit

Step 3.5: Auto-Remediation Policy

Auto-fix directly when the issue is local, reversible, and low-risk.

• add missing validateSearch
• move direct route/hook network access into services/
• add missing pendingComponent or errorComponent
• create missing -components/ or -hooks/ folders for touched pages
• add or correct tanstackRouter() plugin setup, router scaffolding, or explicit env/alias wiring

Do not auto-apply broad or potentially breaking migrations without explicit justification.

• mass route/file renames
• sweeping route-tree restructures across many pages
• introducing SSR/manual server rendering where the repo was SPA-only
• large auth or API-client rewrites

Step 4: Implementation

Carry these acceptance criteria into the active task:

- [ ] Layer architecture respected (Routes -> Services -> External API)
- [ ] Route uses folder structure with -components/ and -hooks/
- [ ] export const Route = createFileRoute(...) used
- [ ] No Start-only server-function APIs in this Vite project
- [ ] Search params use zodValidator from @tanstack/zod-adapter
- [ ] Custom Hooks live in -hooks/ with correct internal order
- [ ] Loaders stay public-safe and SSR-safe
- [ ] Vite/router platform setup stays explicit (router plugin, router file, generated files)
- [ ] All filenames kebab-case
- [ ] Korean block comments present
- [ ] const arrow functions with explicit return types

Step 5: Post-Change Verification

After writing code, verify:

1. Structure check: confirm each touched page still has -components/ and -hooks/ and no -functions/
2. Export check: grep for export const Route
3. Layer check: no direct fetch/axios in touched route or hook files
4. Convention check: no camelCase filenames, no function keyword declarations
5. Hook order check: read touched hooks and verify State -> Global -> Query -> Handlers -> Memo -> Effect
6. Execution check: loaders and route modules do not touch secrets, DB clients, or private env values directly
7. Platform check: vite.config.ts, src/router.tsx, env wiring, and generated router files remain coherent

Quick Reference: Folder Structure

src/
├── routes/
│   ├── __root.tsx
│   ├── index.tsx
│   └── users/
│       ├── route.tsx          # shared layout / beforeLoad / loader
│       ├── index.tsx          # /users
│       ├── -components/
│       ├── -hooks/
│       ├── $id/
│       │   ├── index.tsx      # /users/$id
│       │   ├── -components/
│       │   └── -hooks/
│       └── -sections/         # optional for large pages
├── services/<domain>/
│   ├── schemas.ts
│   ├── queries.ts
│   └── mutations.ts
├── hooks/                     # global hooks
├── stores/
├── components/
├── config/
├── env/
├── lib/
├── src/router.tsx
└── routeTree.gen.ts           # generated, do not hand-edit

Common Mistakes

Mistake	Fix
routes/users.tsx for a full page	routes/users/index.tsx
routes/users/$id.tsx while the page owns its own UI/logic folders	routes/users/$id/index.tsx
const Route = createFileRoute(...)	export const Route = createFileRoute(...)
Direct fetch() in route/hook	move to services/<domain>/queries.ts or mutations.ts
createServerFn(...) or useServerFn(...) in this app	use services + TanStack Query
Page component holds useState, useQuery, mutations inline	extract to -hooks/use-*.ts
routeTree.gen.ts edited manually	regenerate it; do not hand-edit
Loader reads secrets or non-VITE_ env values	move behind a real backend/API boundary
validateSearch uses raw unvalidated search	add zodValidator(schema)

Red Flags - STOP and Fix

• @tanstack/react-start is present but the Vite skill is being applied
• route or hook imports fetch/axios directly
• missing export on const Route
• page component contains inline state/query/mutation logic
• createServerFn, useServerFn, or -functions/ appears in the route tree
• loader or route module reads secrets, DB clients, or private env values directly
• routeTree.gen.ts has hand edits
• search params are used without validateSearch