SkillsAdd

dobroslavradosavljevic/skills

tanstack-start-architecture

>- Enforce portable TanStack Start app architecture: file-route trees, page folders with index.tsx, route colocation (-components/-hooks/-lib), reuse-gated src/modules, naming, and import boundaries. Use when scaffolding a Start app or feature, adding pages/layouts, reviewing or reorganizing route/module layout, or when the user asks for tanstack-start-architecture / Start house style. Optional with-* overlays for generated OpenAPI clients, Better Auth client, TanStack Query, route gates, TanSt…

First seen Aug 5, 2026

Installation

$ npx skills add dobroslavradosavljevic/skills --skill tanstack-start-architecture
View on skills.sh ↗ GitHub repository ↗

Similar popular skills

Related neighbors and high-traction skills in the same topics — useful to compare before installing.

flutter-apply-architecture-best-practices Similar name
flutter/agent-plugins

Architects a Flutter application using the recommended layered approach (UI, Logic, Data). Use …

34.4K installs
architecture-blueprint-generator Similar name
github/awesome-copilot

Comprehensive project architecture blueprint generator that analyzes codebases to create detail…

12K installs
clickhouse-architecture-advisor Similar name
clickhouse/agent-skills

MUST USE when designing ClickHouse architectures, selecting between ingestion or modeling patte…

7.9K installs
architecture Similar name
anthropics/knowledge-work-plugins

Create or evaluate an architecture decision record (ADR). Use when choosing between technologie…

5.9K installs
gtm-partnership-architecture Similar name
github/awesome-copilot

Build and scale partner ecosystems that drive revenue and platform adoption. Use when building …

1.6K installs
azure-architecture-autopilot Similar name
github/awesome-copilot

Design Azure infrastructure using natural language, or analyze existing Azure resources to auto…

1.5K installs

Also in this package

Other skills from dobroslavradosavljevic/skills · top by installs.

npx skills add dobroslavradosavljevic/skills
subagents 53 effect 52 ultraplan 50 brainstorm 49 unsmell 46 elysia 46 motion 45 tailwind 45 research 45 handoff 43

Browse all from dobroslavradosavljevic/skills

More details

Agent compatibility

Declared targets from SKILL.md / docs. Unmarked agents are not listed — the skill may still install via the CLI.

Claude Code Not declared
Cursor Not declared
Codex Not declared
GitHub Copilot Not declared
Windsurf Not declared
Gemini CLI Not declared
Cline Not declared
OpenCode Not declared

Repository health

Stars 1
License LICENSE
Default branch main
Open issues 0
Status Active

Package contents

Files included with this skill beyond the listing page.

  • skill md SKILL.md 5,475 B
  • docs SUMMARY.md 599 B

History

  1. First seen on skills.sh
  2. First recorded snapshot · 31 installs

SKILL.md

TanStack Start Architecture

Portable house style for TanStack Start (@tanstack/react-start) apps. Use this skill alone — it does not depend on other skills.

Job: where UI, hooks, and feature code live; folder/file naming; ownership.

Not this skill: Start/Router API quirks, SSR adapters, deployment, or latest framework docs. Prefer current TanStack Start / Router docs for those. Official Start docs still describe the framework as a Release Candidate (API considered stable; not bug-free). Prefer npm latest of @tanstack/react-start + @tanstack/react-router over stale “alpha” labels elsewhere.

If the target repo already documents architecture (e.g. AGENTS.md) and it conflicts, repo wins unless the user asks to migrate toward this skill.

Stack defaults (core)

Piece Default
Framework TanStack Start + file-based TanStack Router (Vite or Rsbuild)
Entrypoints src/router.tsx (getRouter), routes/__root.tsx, generated routeTree.gen.ts; optional start.ts / server.ts
Pages Folder + index.tsx per page (no flat page leaves)
Route-only code Hyphen-prefixed colocated folders (-components, -hooks, -lib)
Reusable features src/modules/<feature>/ after a reuse gate
App-wide UI src/components/
Non-feature infra src/lib/
Ignore prefix Router routeFileIgnorePrefix default -

Load matching with-* extensions when those stacks are present (see below).

Modes

  1. Scaffold — new page/layout/feature from [checklist.md](references/checklist.md) + [tree.md](references/tree.md).
  2. Apply — place new UI/hooks/helpers in the canonical spots.
  3. Review — compare to [rules.md](references/rules.md); propose moves; do not invent a parallel layout.

Hard rules (core)

  1. Every page is segment/index.tsx. Do not add flat page leaves (billing.tsx as the page component file). Prefer billing/index.tsx.
  2. Route-only modules use a - prefix (or the app’s configured ignore prefix). Unprefixed files under src/routes become URLs.
  3. Default new page UI to routes/…/-components. Same for page-only hooks (-hooks) and helpers (-lib).
  4. Reuse gate for src/modules/<feature>/: promote when a second consumer appears, or for clearly shared clients/schemas used across routes. Do not pre-create empty module trees.
  5. Modules must not import from src/routes. Routes may import modules.
  6. No module barrel index.ts by default. Import concrete paths (@/modules/billing/hooks/use-checkout).
  7. App-wide toolkit → src/components/; non-feature infra → src/lib/. Do not dump random shared UI into routes/.
  8. Pathless layouts use name/ (or name.tsx) when wrapping a section without changing the URL.
  9. Naming: folder = noun/route segment; leaf = short aspect (billing-page.tsx, use-checkout.ts). Do not repeat parent path noise in every filename when the folder already carries it.
  10. One job per route folder: that segment’s page/layout and its colocated private code only.

Details: [rules.md](references/rules.md), [tree.md](references/tree.md), [examples.md](references/examples.md).

Progressive disclosure

Need Read
Canonical trees + tokens [references/tree.md](references/tree.md)
Enforce rules + anti-patterns [references/rules.md](references/rules.md)
Scaffold / review checklists [references/checklist.md](references/checklist.md)
Good vs bad layouts [references/examples.md](references/examples.md)
Optional stack overlays [Extensions](#extensions) below

Extensions

Load an extension only when the matching stack is present (or the user asks). Extensions add rules; they do not replace the core tree.

When Extension
Generated OpenAPI / Hey-style client [with-generated-api-client.md](references/with-generated-api-client.md)
Better Auth (or session) client module [with-better-auth-client.md](references/with-better-auth-client.md)
TanStack Query + loaders / ensureQueryData [with-tanstack-query.md](references/with-tanstack-query.md)
Pathless auth / onboarding / org gates [with-route-gates.md](references/with-route-gates.md)
TanStack Form + module/route schemas [with-tanstack-form.md](references/with-tanstack-form.md)
T3 Env / VITE_ client keys [with-env.md](references/with-env.md)
Pure authz package + client adapters [with-client-authorization.md](references/with-client-authorization.md)
Workspace UI package + Storybook/tokens [with-ui-package.md](references/with-ui-package.md)
Effect Schema / server-only Effect [with-effect.md](references/with-effect.md)
Vitest — libs/schemas/gates focus [with-vitest.md](references/with-vitest.md)