TanStack Start full-stack React framework with Bun runtime. Use for TanStack Router, server functions, vinxi, or encountering SSR, build, preset errors.
Installs just this skill. Get the whole plugin for auto-invocation.
⚡ How it fires
How this skill gets triggered: by you, by Claude, or both.
Fires itselfClaude auto-loads it when your prompt matches the work.
You can call itInvoke it directly when you want it.
Slash command/bun-tanstack-start
👁️ Context preview
The summary Claude sees to decide when to auto-load this skill.
TanStack Start full-stack React framework with Bun runtime. Use for TanStack Router, server functions, vinxi, or encountering SSR, build, preset errors.
📊 Stats
Stars194
Forks29
LanguageTypeScript
LicenseMIT
📦 Ships with claude-skills
</> SKILL.md
bun-tanstack-start.SKILL.md
---name: bun-tanstack-start
description: TanStack Start full-stack React framework with Bun runtime. Use for TanStack Router, server functions, vinxi, or encountering SSR, build, preset errors.
license: MIT
---# Bun TanStack Start
Run TanStack Start (full-stack React framework) with Bun.
## Quick Start
```bash
# Create new TanStack Start project
bunx create-tanstack-start@latest my-app
cd my-app
# Install dependencies
bun install
# Development
bun run dev
# Build
bun run build
# Preview
bun run start
```
## Secure Installation
Scaffolding tools like `bunx create-tanstack-start` download and execute remote code. Before running, follow supply chain security best practices:
- **Block post-install scripts** — Bun disables them by default; allow specific packages via `trustedDependencies` in `package.json`
- **Cooldown period** — Configure `minimumReleaseAge` in `bunfig.toml` to wait 7 days for new versions
- **Audit before installing** — Run `socket package score npm <pkg>` or use `socket npm install <pkg>` to check packages
Load the `dependency-upgrade` skill for full security configuration including Socket CLI integration, cooldown setup, lockfile validation, and CI enforcement.
## Project Setup
### package.json
```json
{
"scripts": {
"dev": "vinxi dev",
"build": "vinxi build",
"start": "vinxi start"
},
"dependencies": {
"@tanstack/react-router": "^1.139.0",
"@tanstack/start": "^1.120.0",
"react": "^19.2.0",
"react-dom": "^19.2.0",
"vinxi": "^0.5.10"
}
}
```
### app.config.ts
```typescript
import { defineConfig } from "@tanstack/start/config";
export default defineConfig({
server: {
preset: "bun",
},
});
```
## File-Based Routing
```
app/
├── routes/
│ ├── __root.tsx # Root layout
│ ├── index.tsx # /
│ ├── about.tsx # /about
│ ├── users/
│ │ ├── index.tsx # /users
│ │ └── $userId.tsx # /users/:userId
│ └── api/
│ └── users.ts # /api/users
└── client.tsx
```
## Route Components
### Basic Route
```tsx
// app/routes/index.tsx
import { createFileRoute } from "@tanstack/react-router";
export const Route = createFileRoute("/")({
component: Home,
});
function Home() {
return <h1>Welcome Home</h1>;
}
```
### Route with Loader
```tsx
// app/routes/users/index.tsx
import { createFileRoute } from "@tanstack/react-router";
export const Route = createFileRoute("/users/")({
loader: async () => {
const response = await fetch("/api/users");
return response.json();
},
component: Users,
});
function Users() {
const users = Route.useLoaderData();
return (
<ul>
{users.map((user) => (
<li key={user.id}>{user.name}</li>
))}
</ul>
);
}
```
### Dynamic Routes
```tsx
// app/routes/users/$userId.tsx
import { createFileRoute } from "@tanstack/react-router";
