new-tanstack-spa

name	new-tanstack-spa
description	This skill should be used when the user asks to "create a SPA", "set up a single page app", "scaffold a TanStack app", "new vite react app", "create a dashboard", "build a client app", or mentions "tanstack", "SPA", "single page application", "vite react", "client-only" in the context of starting a new project.

TanStack SPA Template Setup

Scaffold a new client-side single page application from the niskan516/web-template repository.

Prerequisites

• git installed
• bun installed (package manager)

Step 1: Collect Information

Ask the user for:

Input	Format	Used In
Project name	kebab-case (e.g., my-dashboard)	package.json, directory name
App description	Short sentence	public/manifest.json description field

If invoked from the new-project router skill, project name and target directory are already provided.

Step 2: Clone and Extract

The TanStack SPA template lives in a subfolder of a monorepo. Extract it:

# Clone to temp directory
TEMP_DIR=$(mktemp -d)
git clone --depth 1 https://github.com/niskan516/web-template.git "$TEMP_DIR"

# Copy tanstack-spa subfolder to target directory
TARGET_DIR="<target-directory>/<project-name>"
cp -r "$TEMP_DIR/tanstack-spa/" "$TARGET_DIR"

# Copy shared root configs if they exist
for f in .gitignore biome.json; do
  [ -f "$TEMP_DIR/$f" ] && cp "$TEMP_DIR/$f" "$TARGET_DIR/"
done

# Clean up temp directory
rm -rf "$TEMP_DIR"

Step 3: Customize Placeholders

Perform these exact replacements in the target directory:

File	Find	Replace With
package.json	tanstack-spa-template	<project-name>
public/manifest.json	TanStack SPA Template	<project-name> in title case
public/manifest.json	TanStack SPA	<project-name> in title case (short name)
public/manifest.json	A modern React SPA with TanStack Router and PWA support	<app-description>

Step 4: Clean Up

Remove template-only files if any exist:

rm -f USING_THIS_TEMPLATE.md

Step 5: Initialize

cd "$TARGET_DIR"

# Reset git history
rm -rf .git
git init

# Install dependencies
bun install

# Create initial commit
git add -A
git commit -m "Initial commit from tanstack-spa template"

Step 6: Verify

bun run check:all

Report the results to the user. If checks fail, investigate and fix before proceeding.

Tech Stack Summary

The scaffolded project includes:

Category	Technology
UI	React 19, Tailwind CSS v4, shadcn
Router	TanStack Router v1
Build	Vite 7
State	Zustand v5, TanStack Query v5
i18n	Lingui v5
PWA	Serwist
Linting	Biome
Git hooks	Lefthook
Testing	Vitest + Playwright