···11+<!-- intent-skills:start -->
22+# Skill mappings - when working in these areas, load the linked skill file into context.
33+skills:
44+ - task: "Root route / SSR shell setup (HeadContent, Scripts, shellComponent, head config)"
55+ load: "node_modules/@tanstack/start-client-core/skills/start-core/SKILL.md"
66+77+ - task: "Adding or modifying routes (file-based routing, params, nested routes)"
88+ load: "node_modules/@tanstack/router-core/skills/router-core/SKILL.md"
99+1010+ - task: "Route data loading (loaders, caching, pendingComponent)"
1111+ load: "node_modules/@tanstack/router-core/skills/router-core/data-loading/SKILL.md"
1212+1313+ - task: "Server functions (createServerFn, API calls, server-side logic)"
1414+ load: "node_modules/@tanstack/start-client-core/skills/start-core/server-functions/SKILL.md"
1515+1616+ - task: "Devtools configuration (plugins, position, hotkeys)"
1717+ load: "node_modules/@tanstack/devtools/skills/devtools-app-setup/SKILL.md"
1818+1919+ - task: "Devtools Vite plugin (source inspection, console piping, production stripping)"
2020+ load: "node_modules/@tanstack/devtools-vite/skills/devtools-vite-plugin/SKILL.md"
2121+<!-- intent-skills:end -->
+193
README.md
···11+Welcome to your new TanStack Start app!
22+33+# Getting Started
44+55+To run this application:
66+77+```bash
88+npm install
99+npm run dev
1010+```
1111+1212+# Building For Production
1313+1414+To build this application for production:
1515+1616+```bash
1717+npm run build
1818+```
1919+2020+## Testing
2121+2222+This project uses [Vitest](https://vitest.dev/) for testing. You can run the tests with:
2323+2424+```bash
2525+npm run test
2626+```
2727+2828+## Styling
2929+3030+This project uses [Tailwind CSS](https://tailwindcss.com/) for styling.
3131+3232+### Removing Tailwind CSS
3333+3434+If you prefer not to use Tailwind CSS:
3535+3636+1. Remove the demo pages in `src/routes/demo/`
3737+2. Replace the Tailwind import in `src/styles.css` with your own styles
3838+3. Remove `tailwindcss()` from the plugins array in `vite.config.ts`
3939+4. Uninstall the packages: `npm install @tailwindcss/vite tailwindcss -D`
4040+4141+4242+4343+## Routing
4444+4545+This project uses [TanStack Router](https://tanstack.com/router) with file-based routing. Routes are managed as files in `src/routes`.
4646+4747+### Adding A Route
4848+4949+To add a new route to your application just add a new file in the `./src/routes` directory.
5050+5151+TanStack will automatically generate the content of the route file for you.
5252+5353+Now that you have two routes you can use a `Link` component to navigate between them.
5454+5555+### Adding Links
5656+5757+To use SPA (Single Page Application) navigation you will need to import the `Link` component from `@tanstack/react-router`.
5858+5959+```tsx
6060+import { Link } from "@tanstack/react-router";
6161+```
6262+6363+Then anywhere in your JSX you can use it like so:
6464+6565+```tsx
6666+<Link to="/about">About</Link>
6767+```
6868+6969+This will create a link that will navigate to the `/about` route.
7070+7171+More information on the `Link` component can be found in the [Link documentation](https://tanstack.com/router/v1/docs/framework/react/api/router/linkComponent).
7272+7373+### Using A Layout
7474+7575+In the File Based Routing setup the layout is located in `src/routes/__root.tsx`. Anything you add to the root route will appear in all the routes. The route content will appear in the JSX where you render `{children}` in the `shellComponent`.
7676+7777+Here is an example layout that includes a header:
7878+7979+```tsx
8080+import { HeadContent, Scripts, createRootRoute } from '@tanstack/react-router'
8181+8282+export const Route = createRootRoute({
8383+ head: () => ({
8484+ meta: [
8585+ { charSet: 'utf-8' },
8686+ { name: 'viewport', content: 'width=device-width, initial-scale=1' },
8787+ { title: 'My App' },
8888+ ],
8989+ }),
9090+ shellComponent: ({ children }) => (
9191+ <html lang="en">
9292+ <head>
9393+ <HeadContent />
9494+ </head>
9595+ <body>
9696+ <header>
9797+ <nav>
9898+ <Link to="/">Home</Link>
9999+ <Link to="/about">About</Link>
100100+ </nav>
101101+ </header>
102102+ {children}
103103+ <Scripts />
104104+ </body>
105105+ </html>
106106+ ),
107107+})
108108+```
109109+110110+More information on layouts can be found in the [Layouts documentation](https://tanstack.com/router/latest/docs/framework/react/guide/routing-concepts#layouts).
111111+112112+## Server Functions
113113+114114+TanStack Start provides server functions that allow you to write server-side code that seamlessly integrates with your client components.
115115+116116+```tsx
117117+import { createServerFn } from '@tanstack/react-start'
118118+119119+const getServerTime = createServerFn({
120120+ method: 'GET',
121121+}).handler(async () => {
122122+ return new Date().toISOString()
123123+})
124124+125125+// Use in a component
126126+function MyComponent() {
127127+ const [time, setTime] = useState('')
128128+129129+ useEffect(() => {
130130+ getServerTime().then(setTime)
131131+ }, [])
132132+133133+ return <div>Server time: {time}</div>
134134+}
135135+```
136136+137137+## API Routes
138138+139139+You can create API routes by using the `server` property in your route definitions:
140140+141141+```tsx
142142+import { createFileRoute } from '@tanstack/react-router'
143143+import { json } from '@tanstack/react-start'
144144+145145+export const Route = createFileRoute('/api/hello')({
146146+ server: {
147147+ handlers: {
148148+ GET: () => json({ message: 'Hello, World!' }),
149149+ },
150150+ },
151151+})
152152+```
153153+154154+## Data Fetching
155155+156156+There are multiple ways to fetch data in your application. You can use TanStack Query to fetch data from a server. But you can also use the `loader` functionality built into TanStack Router to load the data for a route before it's rendered.
157157+158158+For example:
159159+160160+```tsx
161161+import { createFileRoute } from '@tanstack/react-router'
162162+163163+export const Route = createFileRoute('/people')({
164164+ loader: async () => {
165165+ const response = await fetch('https://swapi.dev/api/people')
166166+ return response.json()
167167+ },
168168+ component: PeopleComponent,
169169+})
170170+171171+function PeopleComponent() {
172172+ const data = Route.useLoaderData()
173173+ return (
174174+ <ul>
175175+ {data.results.map((person) => (
176176+ <li key={person.name}>{person.name}</li>
177177+ ))}
178178+ </ul>
179179+ )
180180+}
181181+```
182182+183183+Loaders simplify your data fetching logic dramatically. Check out more information in the [Loader documentation](https://tanstack.com/router/latest/docs/framework/react/guide/data-loading#loader-parameters).
184184+185185+# Demo files
186186+187187+Files prefixed with `demo` can be safely deleted. They are there to provide a starting point for you to play around with the features you've installed.
188188+189189+# Learn More
190190+191191+You can learn more about all of the offerings from TanStack in the [TanStack documentation](https://tanstack.com).
192192+193193+For TanStack Start specific documentation, visit [TanStack Start](https://tanstack.com/start).