create-starbase 5.0.0 → 5.1.0

package/README.md

@@ -69,8 +69,9 @@ Starbase ships with custom [Claude Code commands](https://docs.anthropic.com/en/
 
 - **`/audit`** -- Scans the codebase for drift against CLAUDE.md conventions. Raw color values bypassing the token system, components at the wrong atomic level, accessibility regressions, import violations. Architecture enforcement, automated.
 - **`/review`** -- Reviews the current branch's changes against CLAUDE.md. Like a PR review from someone who actually read the style guide.
+- **`/update-deps`** -- Runs `npm outdated`, categorizes updates into safe / Vite-aligned / major-breaking tiers, bumps what's safe, holds what isn't, and verifies with build + lint. Scaffolds a fresh `create-vite` template to check alignment -- no hardcoded version lists to maintain.
 
-More commands are on the launchpad. The goal is a suite of tools that handle the mechanical parts of maintaining consistency so you can focus on building.
+The goal is a suite of tools that handle the mechanical parts of maintaining consistency so you can focus on building.
 
 ## Liftoff
 

package/dist/index.js

@@ -0,0 +1,56 @@
+#!/usr/bin/env node
+import fs from 'node:fs';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const SKIP_FILES = ['node_modules', '.npmignore'];
+function copyDir(src, dest) {
+    fs.mkdirSync(dest, { recursive: true });
+    for (const entry of fs.readdirSync(src, { withFileTypes: true })) {
+        const srcPath = path.join(src, entry.name);
+        const destPath = path.join(dest, entry.name);
+        if (SKIP_FILES.includes(entry.name)) {
+            continue;
+        }
+        if (entry.isDirectory()) {
+            copyDir(srcPath, destPath);
+        }
+        else {
+            fs.copyFileSync(srcPath, destPath);
+        }
+    }
+}
+function main() {
+    const args = process.argv.slice(2);
+    const projectName = args[0];
+    if (!projectName) {
+        console.error('Error: Please specify a project name.');
+        console.error('  npm create starbase <project-name>');
+        process.exit(1);
+    }
+    const targetDir = path.resolve(process.cwd(), projectName);
+    if (fs.existsSync(targetDir)) {
+        console.error(`Error: Directory "${projectName}" already exists.`);
+        process.exit(1);
+    }
+    const templateDir = path.resolve(__dirname, '..', 'template');
+    if (!fs.existsSync(templateDir)) {
+        console.error('Error: Template directory not found.');
+        process.exit(1);
+    }
+    console.log(`Creating project in ${targetDir}...`);
+    copyDir(templateDir, targetDir);
+    const packageJsonPath = path.join(targetDir, 'package.json');
+    if (fs.existsSync(packageJsonPath)) {
+        const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf-8'));
+        packageJson.name = projectName;
+        fs.writeFileSync(packageJsonPath, JSON.stringify(packageJson, null, 2) + '\n');
+    }
+    console.log('\nDone! Next steps:\n');
+    console.log(`  cd ${projectName}`);
+    console.log('  npm install');
+    console.log('  npm run dev');
+    console.log();
+}
+main();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-starbase",
-  "version": "5.0.0",
+  "version": "5.1.0",
   "type": "module",
   "author": "Brian Staruk <brian@staruk.net>",
   "contributors": [
@@ -39,7 +39,7 @@
   "devDependencies": {
     "@commitlint/cli": "^20.4.1",
     "@commitlint/config-conventional": "^20.4.1",
-    "@types/node": "^20.11.0",
+    "@types/node": "^24.10.1",
     "husky": "^9.1.7",
     "lint-staged": "^16.2.7",
     "prettier": "^3.8.1",
@@ -49,6 +49,6 @@
     "*.{js,jsx,ts,tsx,css,md,json}": "prettier --write"
   },
   "engines": {
-    "node": ">=20"
+    "node": ">=24"
   }
 }

package/template/.claude/commands/update-deps.md

@@ -0,0 +1,74 @@
+Update project dependencies safely and methodically.
+
+Focus: $ARGUMENTS
+
+If a focus was provided, narrow the update to matching packages. Otherwise, evaluate all dependencies.
+
+## Step 1: Inventory
+
+Run `npm outdated` and list every package with an available update. For each, note the current version, wanted version, and latest version.
+
+## Step 2: Categorize
+
+Sort every outdated package into one of three tiers:
+
+### Safe
+
+Patch and minor bumps with no breaking changes. These can be bumped immediately.
+
+### Hold — Vite alignment
+
+Packages that `create-vite` pins to a specific major version in its `react-ts` template. To check the current Vite-aligned versions, scaffold a throwaway project:
+
+```
+npm create vite@latest /tmp/vite-check -- --template react-ts
+cat /tmp/vite-check/package.json
+rm -rf /tmp/vite-check
+```
+
+Compare the major versions of shared packages — at minimum check these:
+
+- `vite`
+- `typescript`
+- `eslint`
+- `@eslint/js`
+- `globals`
+- `eslint-plugin-react-hooks`
+- `eslint-plugin-react-refresh`
+- `@vitejs/plugin-react`
+- `@types/react`
+- `@types/react-dom`
+
+If a package's latest version jumps to a higher major than what `create-vite` ships, **hold it** and note the Vite-aligned version. If `create-vite` has moved to a newer major and this project hasn't yet, flag it as a potential upgrade to investigate.
+
+### Hold — major/breaking
+
+Any remaining major version bump not covered by Vite alignment. These require investigation before bumping. Do a quick web search to check the changelog or migration guide and note what changed.
+
+### Special case: `@types/node`
+
+`@types/node` should match the major version in the `engines` field of `package.json` (currently `>=24`, so `@types/node` major should be `24`). Do not bump it to a higher major just because one exists.
+
+## Step 3: Apply safe updates
+
+For all packages in the **Safe** tier:
+
+1. Update the version ranges in `package.json`
+2. Run `nvm use` (`.nvmrc` exists in this directory)
+3. Run `npm install`
+4. Run `npm run build`
+5. Run `npm run lint`
+
+If build or lint fails, investigate and fix. If the failure is caused by a dependency update, move that package to the Hold tier and revert its bump.
+
+## Step 4: Report
+
+Output a summary with three sections:
+
+**Bumped** — what was updated and to which version
+
+**Held — Vite alignment** — what was held and the Vite-aligned version vs. latest
+
+**Held — major/breaking** — what was held and why (brief note on what the major change involves)
+
+If everything is already up to date, say so.

package/template/CLAUDE.md

@@ -23,7 +23,7 @@ Inclusivity and accessibility are more important than any other aspect of the us
 
 - **Always use aliased paths** — never relative imports
   - `from 'utils'` not `from '../../lib/utils/darkMode'`
-  - `from 'atoms/Button'` not `from '../ui/atoms/Button'`
+  - `from 'atoms'` not `from '../ui/atoms/Button'`
 - If a relative path seems necessary, that means a new alias is needed — update both `tsconfig.app.json` `paths` and `vite.config.ts` `resolve.alias`
 - See `tsconfig.app.json` `paths` for the current list of aliases
 
@@ -65,7 +65,25 @@ Components follow [Atomic Design](https://atomicdesign.bradfrost.com/chapter-2/)
 
 Reference: [Atomic Design by Brad Frost](https://atomicdesign.bradfrost.com/table-of-contents/)
 
-- Theme prefix: `sb-` (starbase) for all color tokens
+### Component Barrel Exports
+
+Each component level has a barrel file (`index.ts`) that re-exports all components. Every new component must be added to its level's barrel.
+
+Components import from **lower-level barrels** for cross-level dependencies. For same-level siblings, use **direct paths**. This avoids circular dependencies.
+
+```tsx
+// Molecule importing atoms (lower level barrel — safe)
+import { Button, Input, Label } from 'atoms';
+
+// Atom importing a sibling atom (same level — use direct path)
+import { Button } from 'atoms/Button';
+
+// Route file importing from atoms and molecules (barrel — safe)
+import { Code, RouterLink } from 'atoms';
+import { PageHeader } from 'molecules';
+```
+
+The rule: **never import from your own level's barrel** — it re-exports you, creating a circular dependency.
 
 ## Libraries
 
@@ -85,6 +103,7 @@ When adding a new library, always do a fresh web search for the latest docs, cha
 
 ## Color Token System
 
+- Theme prefix: `sb-` (starbase) for all color tokens
 - CSS variables defined in `src/lib/theme/tailwind.css`
 - Dark mode: `.dark` class on `<html>`, with flash-prevention script in `index.html`
 - Cookie: `theme-preference` with values `light`, `dark`, or absent (system default)

package/template/README.md

@@ -28,7 +28,7 @@ src/
   routes/       # TanStack Router file-based routes
 ```
 
-Components follow [Atomic Design](https://atomicdesign.bradfrost.com/chapter-2/). Imports use path aliases -- `from 'atoms/Button'`, not relative paths.
+Components follow [Atomic Design](https://atomicdesign.bradfrost.com/chapter-2/). Imports use path aliases and barrel files -- `from 'atoms'`, not relative paths. See CLAUDE.md for the full convention.
 
 ## CLAUDE.md
 
@@ -38,6 +38,7 @@ Start here. It's the source of truth for all conventions, patterns, and architec
 
 - **`/audit`** -- Scan the codebase for drift against CLAUDE.md conventions
 - **`/review`** -- Review current branch changes against CLAUDE.md
+- **`/update-deps`** -- Update dependencies safely with Vite-alignment awareness
 
 ## Learn more
 

package/template/eslint.config.js

@@ -1,9 +1,11 @@
 import js from '@eslint/js';
-import globals from 'globals';
+import tanstackQuery from '@tanstack/eslint-plugin-query';
+import importPlugin from 'eslint-plugin-import';
 import reactDom from 'eslint-plugin-react-dom';
 import reactHooks from 'eslint-plugin-react-hooks';
 import reactRefresh from 'eslint-plugin-react-refresh';
 import reactX from 'eslint-plugin-react-x';
+import globals from 'globals';
 import tseslint from 'typescript-eslint';
 import { defineConfig, globalIgnores } from 'eslint/config';
 
@@ -18,10 +20,58 @@ export default defineConfig([
       reactDom.configs.recommended,
       reactHooks.configs.flat.recommended,
       reactRefresh.configs.vite,
+      tanstackQuery.configs['flat/recommended'],
     ],
+    plugins: {
+      import: importPlugin,
+    },
     languageOptions: {
       ecmaVersion: 2020,
       globals: globals.browser,
     },
+    settings: {
+      'import/resolver': {
+        node: true,
+      },
+    },
+    rules: {
+      'import/no-duplicates': 'warn',
+      'import/order': [
+        'warn',
+        {
+          groups: [
+            'builtin',
+            'external',
+            'internal',
+            'parent',
+            'sibling',
+            'index',
+          ],
+          pathGroups: [
+            {
+              pattern: 'react',
+              group: 'external',
+              position: 'before',
+            },
+            {
+              pattern: '{queries,utils}',
+              group: 'internal',
+              position: 'before',
+            },
+            {
+              pattern: '{atoms,molecules,organisms,templates}{,/**}',
+              group: 'internal',
+              position: 'after',
+            },
+          ],
+          pathGroupsExcludedImportTypes: ['react'],
+          'newlines-between': 'never',
+          alphabetize: {
+            order: 'asc',
+            caseInsensitive: true,
+          },
+        },
+      ],
+    },
   },
 ]);

package/template/index.html

@@ -2,11 +2,11 @@
 <html lang="en" style="background-color: #f5f5f4">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Starbase</title>
+    <title>starbase.dev</title>
     <script>
-      // Inline script to prevent dark mode flash
+      // Prevent dark mode flash — keep colors in sync with --sb-surface in tailwind.css
       (function () {
         const COOKIE_NAME = 'theme-preference';
         const DARK_CLASS = 'dark';
@@ -34,7 +34,7 @@
         // Apply dark class only if dark mode
         if (theme === 'dark') {
           document.documentElement.classList.add(DARK_CLASS);
-          document.documentElement.style.backgroundColor = '#09090b';
+          document.documentElement.style.backgroundColor = '#18181b';
         }
       })();
     </script>

package/template/package.json

@@ -3,11 +3,15 @@
   "private": true,
   "version": "0.0.0",
   "type": "module",
+  "engines": {
+    "node": ">=24"
+  },
   "scripts": {
     "dev": "vite",
     "build": "tsc -b && vite build",
     "format": "prettier --write .",
     "lint": "eslint .",
+    "lint:fix": "eslint --fix .",
     "preview": "vite preview"
   },
   "dependencies": {
@@ -16,8 +20,8 @@
     "@fontsource/roboto-mono": "^5.2.8",
     "@tanstack/react-query": "^5.90.20",
     "@tanstack/react-query-devtools": "^5.91.3",
-    "@tanstack/react-router": "^1.158.1",
-    "@tanstack/react-router-devtools": "^1.158.1",
+    "@tanstack/react-router": "^1.158.4",
+    "@tanstack/react-router-devtools": "^1.158.4",
     "clsx": "^2.1.1",
     "js-cookie": "^3.0.5",
     "motion": "^12.33.0",
@@ -30,17 +34,19 @@
   "devDependencies": {
     "@eslint/js": "^9.39.1",
     "@tailwindcss/vite": "^4.1.18",
-    "@tanstack/router-plugin": "^1.158.1",
+    "@tanstack/eslint-plugin-query": "^5.91.4",
+    "@tanstack/router-plugin": "^1.158.4",
     "@types/js-cookie": "^3.0.6",
     "@types/node": "^24.10.1",
     "@types/react": "^19.2.5",
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^5.1.1",
     "eslint": "^9.39.1",
-    "eslint-plugin-react-dom": "^2.11.0",
+    "eslint-plugin-import": "^2.32.0",
+    "eslint-plugin-react-dom": "^2.12.1",
     "eslint-plugin-react-hooks": "^7.0.1",
     "eslint-plugin-react-refresh": "^0.4.24",
-    "eslint-plugin-react-x": "^2.11.0",
+    "eslint-plugin-react-x": "^2.12.1",
     "globals": "^16.5.0",
     "prettier": "^3.8.1",
     "tailwindcss": "^4.1.18",

package/template/public/favicon.svg

@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 576">
+  <path
+    transform="translate(288,288) translate(-288,-256)"
+    d="M316.9 18C311.6 7 300.4 0 288.1 0s-23.4 7-28.8 18L195 150.3 51.4 171.5c-12 1.8-22 10.2-25.7 21.7s-.7 24.2 7.9 32.7L137.8 329 113.2 474.7c-2 12 3 24.2 12.9 31.3s23 8 33.8 2.3l128.3-68.5 128.3 68.5c10.8 5.7 23.9 4.9 33.8-2.3s14.9-19.3 12.9-31.3L438.5 329 542.7 225.9c8.6-8.5 11.7-21.2 7.9-32.7s-13.7-19.9-25.7-21.7L381.2 150.3 316.9 18z"
+    fill="#ef4444"
+    stroke="#000"
+    stroke-width="30"
+    stroke-linejoin="round"
+  />
+</svg>

package/template/src/lib/theme/base.css

@@ -10,8 +10,7 @@
   h1,
   h2,
   h3,
-  h4,
-  h5 {
+  h4 {
     @apply font-display font-medium;
   }
 
@@ -30,8 +29,4 @@
   h4 {
     @apply text-h4;
   }
-
-  h5 {
-    @apply text-h5;
-  }
 }

package/template/src/lib/theme/tailwind.css

@@ -22,33 +22,26 @@
   --text-h1--letter-spacing: -0.01em;
 
   /* Text Variant: h2 */
-  /* 20px → 24px */
-  --text-h2: clamp(1.25rem, 1.1rem + 0.45vw, 1.5rem);
+  /* 18px → 20px */
+  --text-h2: clamp(1.125rem, 1.075rem + 0.15vw, 1.25rem);
   --text-h2--font-weight: 600;
-  --text-h2--line-height: 1.2;
+  --text-h2--line-height: 1.25;
   --text-h2--letter-spacing: -0.005em;
 
   /* Text Variant: h3 */
-  /* 18px → 22px */
-  --text-h3: clamp(1.125rem, 1rem + 0.4vw, 1.375rem);
+  /* 17px → 18px */
+  --text-h3: clamp(1.0625rem, 1.037rem + 0.098vw, 1.125rem);
   --text-h3--font-weight: 600;
-  --text-h3--line-height: 1.25;
-  --text-h3--letter-spacing: -0.005em;
+  --text-h3--line-height: 1.3;
+  --text-h3--letter-spacing: 0;
 
   /* Text Variant: h4 */
-  /* 17px → 20px */
-  --text-h4: clamp(1.0625rem, 0.975rem + 0.275vw, 1.25rem);
+  /* 16px → 17px */
+  --text-h4: clamp(1rem, 0.974rem + 0.098vw, 1.0625rem);
   --text-h4--font-weight: 600;
-  --text-h4--line-height: 1.3;
+  --text-h4--line-height: 1.35;
   --text-h4--letter-spacing: 0;
 
-  /* Text Variant: h5 */
-  /* 16px → 18px */
-  --text-h5: clamp(1rem, 0.95rem + 0.15vw, 1.125rem);
-  --text-h5--font-weight: 500;
-  --text-h5--line-height: 1.35;
-  --text-h5--letter-spacing: 0;
-
   /* Text Variant: base - 16px to 17px */
   --text-base: clamp(1rem, 0.974rem + 0.098vw, 1.063rem);
   --text-base--font-weight: 400;
@@ -61,14 +54,9 @@
   --text-sm--line-height: 1.5;
   --text-sm--letter-spacing: 0.005em;
 
-  /* Text Variant: xs - 14px to 15px */
-  --text-xs: clamp(0.875rem, 0.849rem + 0.098vw, 0.9375rem);
-  --text-xs--font-weight: 400;
-  --text-xs--line-height: 1.45;
-  --text-xs--letter-spacing: 0.01em;
-
   /* Spacing (padding, margins, height, width, etc) */
-  --spacing-wrapper-page-full-x: clamp(0.75rem, 0.25rem + 1.5vw, 1rem);
+  --spacing-page: 64rem;
+  --spacing-page-x: clamp(0.75rem, 0.25rem + 1.5vw, 1rem);
 
   /* List Style Types */
   --list-style-type-circle: circle;

package/template/src/lib/utils/cn.ts

@@ -4,8 +4,8 @@ import { extendTailwindMerge } from 'tailwind-merge';
 const twMerge = extendTailwindMerge({
   extend: {
     theme: {
-      spacing: ['wrapper-page-full-x'],
-      text: ['h1', 'h2', 'h3', 'h4', 'h5', 'base', 'sm', 'xs'],
+      spacing: ['page', 'page-x'],
+      text: ['h1', 'h2', 'h3', 'h4', 'base', 'sm'],
     },
     classGroups: {
       'list-style-type': [{ list: ['circle', 'roman'] }],

package/template/src/lib/utils/darkMode.ts

@@ -36,7 +36,7 @@ export function getEffectiveTheme(
 export function applyTheme(theme: 'light' | 'dark'): void {
   if (theme === 'dark') {
     document.documentElement.classList.add(DARK_CLASS);
-    document.documentElement.style.backgroundColor = 'var(--sb-canvas)';
+    document.documentElement.style.backgroundColor = 'var(--sb-surface)';
   } else {
     document.documentElement.classList.remove(DARK_CLASS);
     document.documentElement.style.backgroundColor = 'var(--sb-surface)';

package/template/src/main.tsx

@@ -1,8 +1,4 @@
 import { StrictMode } from 'react';
-import { createRoot } from 'react-dom/client';
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { RouterProvider, createRouter } from '@tanstack/react-router';
-
 import '@fontsource/bricolage-grotesque/400.css';
 import '@fontsource/bricolage-grotesque/500.css';
 import '@fontsource/bricolage-grotesque/600.css';
@@ -10,9 +6,10 @@ import '@fontsource/nunito/400.css';
 import '@fontsource/nunito/500.css';
 import '@fontsource/nunito/600.css';
 import '@fontsource/roboto-mono/400.css';
-
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { RouterProvider, createRouter } from '@tanstack/react-router';
+import { createRoot } from 'react-dom/client';
 import './lib/theme/app.css';
-
 import { routeTree } from './routeTree.gen';
 
 const queryClient = new QueryClient();

package/template/src/routes/__root.tsx

@@ -5,8 +5,7 @@ import {
   createRootRouteWithContext,
   Outlet,
 } from '@tanstack/react-router';
-import { DarkModeToggle } from 'molecules/DarkModeToggle';
-import { Stargazers } from 'molecules/Stargazers';
+import { SiteLayout } from 'templates';
 
 export interface RouterContext {
   queryClient: QueryClient;
@@ -35,13 +34,9 @@ export const Route = createRootRouteWithContext<RouterContext>()({
   component: () => (
     <>
       <HeadContent />
-      <main className="flex min-h-screen flex-col items-center justify-center gap-6 p-8">
+      <SiteLayout>
         <Outlet />
-        <footer className="flex items-center gap-3">
-          <Stargazers />
-          <DarkModeToggle />
-        </footer>
-      </main>
+      </SiteLayout>
       <TanStackRouterDevtools />
       <ReactQueryDevtools />
     </>

package/template/src/routes/index.tsx

@@ -1,29 +1,56 @@
 import { createFileRoute } from '@tanstack/react-router';
-import { Code } from 'atoms/Code';
-import { RouterLink } from 'atoms/Link';
-import { PageHeader } from 'molecules/PageHeader';
+import { motion, useReducedMotion } from 'motion/react';
+import { Code, StarbaseLogo } from 'atoms';
 
 export const Route = createFileRoute('/')({
   component: Index,
   head: () => ({
-    meta: [{ title: 'Starbase' }],
+    meta: [
+      { title: 'Opinionated React Starter for Claude Code | starbase.dev' },
+      {
+        name: 'description',
+        content:
+          'A launchpad for modern React apps, optimized for Claude Code. Built on Vite, TypeScript, Tailwind CSS, TanStack, and atomic design.',
+      },
+    ],
   }),
 });
 
 function Index() {
-  return (
-    <div className="flex flex-col items-center gap-6">
-      <PageHeader title="Starbase" />
-      <p className="text-sb-fg-subtle max-w-md text-center text-balance">
-        A launchpad for modern React apps, built on Vite, TypeScript, Tailwind
-        CSS, TanStack Router, and TanStack Query. Start your mission today:
-      </p>
+  const prefersReducedMotion = useReducedMotion();
 
-      <Code>npm create starbase@latest</Code>
+  return (
+    <div className="flex flex-1 flex-col items-center justify-center gap-10">
+      <div className="flex flex-col items-center gap-3">
+        <div className="flex flex-col items-center gap-4">
+          <motion.div
+            initial={prefersReducedMotion ? false : { y: -20, rotate: 12 }}
+            animate={{ y: 0, rotate: [16, 8, 14, 10, 12] }}
+            transition={
+              prefersReducedMotion
+                ? { duration: 0 }
+                : { duration: 0.5, ease: 'easeOut' }
+            }
+            whileHover={
+              prefersReducedMotion
+                ? undefined
+                : { rotate: [12, 4, 20, 6, 18, 9, 15, 12] }
+            }
+          >
+            <StarbaseLogo className="size-12" />
+          </motion.div>
+          <h1 className="text-sb-fg-title">Starbase</h1>
+        </div>
+        <p className="text-sb-fg-subtle max-w-md text-center text-balance">
+          A launchpad for modern React apps, optimized for Claude Code. Built on
+          Vite, TypeScript, Tailwind CSS, and TanStack.
+        </p>
+      </div>
 
-      <RouterLink to="/liftoff" className="text-sm">
-        Ready for liftoff?
-      </RouterLink>
+      <div className="flex flex-col items-center gap-3">
+        <h2 className="text-sb-fg">Start your mission today:</h2>
+        <Code>npm create starbase@latest</Code>
+      </div>
     </div>
   );
 }

package/template/src/routes/liftoff.tsx

@@ -1,22 +1,118 @@
 import { createFileRoute } from '@tanstack/react-router';
-import { RouterLink } from 'atoms/Link';
-import { PageHeader } from 'molecules/PageHeader';
+import {
+  LuAtom,
+  LuContrast,
+  LuLayers,
+  LuPaintbrush,
+  LuRocket,
+  LuRoute,
+  LuSearch,
+  LuSparkles,
+  LuSquareActivity,
+} from 'react-icons/lu';
+import { Link } from 'atoms';
+import { FeatureCard } from 'molecules';
 
 export const Route = createFileRoute('/liftoff')({
   component: Liftoff,
   head: () => ({
-    meta: [{ title: 'Liftoff — Starbase' }],
+    meta: [
+      { title: "What's On Board | starbase.dev" },
+      {
+        name: 'description',
+        content:
+          "What's included in Starbase: Claude Code integration, React 19, TanStack Router & Query, Tailwind CSS, dark mode theming, atomic design, and AA 2.2 a11y.",
+      },
+    ],
   }),
 });
 
+const features = [
+  {
+    icon: LuSparkles,
+    title: 'Claude Code',
+    description:
+      'Ships with CLAUDE.md conventions, project memory, and custom commands. Ready for AI-assisted development from the start.',
+  },
+  {
+    icon: LuAtom,
+    title: 'React 19 + Vite',
+    description:
+      'Latest React with Vite for instant HMR, fast builds, and a modern developer experience.',
+  },
+  {
+    icon: LuRoute,
+    title: 'TanStack Router',
+    description:
+      'File-based routing with type-safe navigation, preloading on intent, and automatic code splitting.',
+  },
+  {
+    icon: LuSquareActivity,
+    title: 'TanStack Query',
+    description:
+      'Declarative data fetching with caching, background updates, and stale-while-revalidate. See the stargazer count above for a live example.',
+  },
+  {
+    icon: LuPaintbrush,
+    title: 'Tailwind CSS',
+    description:
+      'Utility-first styling with custom theme tokens, responsive typography, and a semantic color system.',
+  },
+  {
+    icon: LuContrast,
+    title: 'Theming',
+    description:
+      'Dark and light modes with semantic color tokens, system preference detection, and zero-flash on load.',
+  },
+  {
+    icon: LuLayers,
+    title: 'Atomic Design',
+    description:
+      'Components organized as atoms, molecules, organisms, and templates, scaling from buttons to full page layouts.',
+  },
+  {
+    icon: LuSearch,
+    title: 'Accessibility',
+    description:
+      'WCAG 2.2 AA baseline with semantic HTML, keyboard navigation, focus indicators, and skip-to-content.',
+  },
+] as const;
+
 function Liftoff() {
   return (
-    <div className="flex flex-col items-center gap-6">
-      <PageHeader title="Liftoff" />
-      <p className="text-sb-fg-subtle">More details coming soon.</p>
-      <RouterLink to="/" className="text-sm">
-        Back to home
-      </RouterLink>
+    <div className="flex w-full max-w-3xl flex-col items-center gap-10 sm:gap-14">
+      <div className="flex flex-col items-center gap-4">
+        <h1 className="text-sb-fg-title">
+          Ready for liftoff!{' '}
+          <LuRocket
+            className="inline size-[1em] align-middle"
+            aria-hidden="true"
+          />
+        </h1>
+        <p className="max-w-lg text-center text-balance text-sb-fg-subtle">
+          An opinionated React starter, built with Claude Code in mind. Just
+          enough structure to ship fast without starting from scratch.
+        </p>
+      </div>
+
+      <h2 className="sr-only">Features</h2>
+      <ul className="grid w-full grid-cols-1 gap-4 sm:grid-cols-2 sm:gap-5">
+        {features.map((feature, i) => (
+          <FeatureCard key={feature.title} index={i} {...feature} />
+        ))}
+      </ul>
+
+      <p className="pb-4 text-center text-sm text-sb-fg-subtle">
+        Full documentation and source on{' '}
+        <Link
+          href="https://github.com/bstaruk/starbase"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          GitHub
+          <span className="sr-only"> (opens in new tab)</span>
+        </Link>
+      </p>
     </div>
   );
 }

package/template/src/ui/atoms/Button.tsx

@@ -8,21 +8,18 @@ type ButtonSize = 'sm' | 'md' | 'lg';
 
 export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   variant?: ButtonVariant;
-  iconOnly?: boolean;
   size?: ButtonSize;
   ref?: React.Ref<HTMLButtonElement>;
 }
 
 interface ButtonLinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
   variant?: ButtonVariant;
-  iconOnly?: boolean;
   size?: ButtonSize;
   ref?: React.Ref<HTMLAnchorElement>;
 }
 
 const makeButtonClasses = (
   variant?: ButtonVariant,
-  iconOnly?: boolean,
   size: ButtonSize = 'md',
   className?: string,
 ) =>
@@ -30,18 +27,13 @@ const makeButtonClasses = (
     // Base styles
     'inline-flex items-center justify-center',
     'font-sans font-semibold rounded-md border border-transparent outline-none focus-visible:outline-sb-action cursor-pointer',
-    'transition-all duration-150 ease-out',
+    'motion-safe:transition-all motion-safe:duration-150 ease-out',
     'disabled:opacity-50 disabled:cursor-not-allowed disabled:shadow-none',
     {
-      /* iconOnly sizes (square buttons) */
-      'shrink-0 p-0 size-8': iconOnly && size === 'sm',
-      'shrink-0 p-0 size-9': iconOnly && size === 'md',
-      'shrink-0 p-0 size-11 rounded-lg': iconOnly && size === 'lg',
-
-      /* text button sizes */
-      'text-sm px-3 py-1.5': !iconOnly && size === 'sm',
-      'text-base px-4 py-2': !iconOnly && size === 'md',
-      'text-lg px-5 py-2.5': !iconOnly && size === 'lg',
+      /* Size variants */
+      'text-sm px-3 py-1.5': size === 'sm',
+      'text-base px-4 py-2': size === 'md',
+      'text-lg px-5 py-2.5': size === 'lg',
 
       /* Variant: anchor */
       'bg-sb-anchor border-sb-anchor text-sb-surface-raised shadow-sm is-active:bg-sb-anchor-active is-active:border-sb-anchor-active is-active:shadow-md':
@@ -61,7 +53,6 @@ export const ButtonLink = ({
   children,
   className,
   variant = 'anchor',
-  iconOnly,
   size,
   ref,
   ...rest
@@ -70,7 +61,7 @@ export const ButtonLink = ({
     <a
       {...rest}
       ref={ref}
-      className={makeButtonClasses(variant, iconOnly, size, className)}
+      className={makeButtonClasses(variant, size, className)}
     >
       {children}
     </a>
@@ -81,7 +72,6 @@ export const Button = ({
   children,
   className,
   variant = 'anchor',
-  iconOnly,
   size,
   type = 'button',
   ref,
@@ -92,7 +82,7 @@ export const Button = ({
       {...rest}
       ref={ref}
       type={type}
-      className={makeButtonClasses(variant, iconOnly, size, className)}
+      className={makeButtonClasses(variant, size, className)}
     >
       {children}
     </button>

package/template/src/ui/atoms/Code.tsx

@@ -1,12 +1,12 @@
 import { type HTMLAttributes, type Ref, useEffect, useState } from 'react';
+import { LuCheck, LuCopy } from 'react-icons/lu';
 import { useCopyToClipboard } from 'usehooks-ts';
-import { LuCopy, LuCheck } from 'react-icons/lu';
-import { Button } from 'atoms/Button';
 import { cn } from 'utils';
+import { Button } from 'atoms/Button';
 
-export interface CodeProps extends HTMLAttributes<HTMLElement> {
+export interface CodeProps extends HTMLAttributes<HTMLDivElement> {
   children: string;
-  ref?: Ref<HTMLElement>;
+  ref?: Ref<HTMLDivElement>;
 }
 
 export const Code = ({ children, className, ref, ...rest }: CodeProps) => {
@@ -24,29 +24,31 @@ export const Code = ({ children, className, ref, ...rest }: CodeProps) => {
   };
 
   return (
-    <code
+    <div
       {...rest}
       ref={ref}
       className={cn(
-        'inline-flex items-center gap-2 font-mono',
+        'inline-flex items-center gap-2',
         'bg-sb-canvas text-sb-fg px-4 py-2 rounded-lg',
         className,
       )}
     >
-      {children}
+      <code className="font-mono">{children}</code>
       <Button
         variant="ghost"
-        iconOnly
         size="sm"
         onClick={handleCopy}
-        aria-label={copied ? 'Copied' : 'Copy to clipboard'}
+        aria-label="Copy to clipboard"
       >
         {copied ? (
-          <LuCheck className="size-4" />
+          <LuCheck className="size-4" aria-hidden="true" />
         ) : (
-          <LuCopy className="size-4" />
+          <LuCopy className="size-4" aria-hidden="true" />
         )}
       </Button>
-    </code>
+      <span role="status" className="sr-only">
+        {copied ? 'Copied to clipboard' : ''}
+      </span>
+    </div>
   );
 };

package/template/src/ui/atoms/Link.tsx

@@ -20,7 +20,7 @@ type LinkButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
 
 const makeLinkClasses = (variant?: LinkVariant, className?: string) => {
   return cn(
-    'outline-none focus-visible:outline-sb-action transition-colors duration-100',
+    'outline-none focus-visible:outline-sb-action motion-safe:transition-colors motion-safe:duration-100',
     'underline decoration-current/30 underline-offset-4',
     'hover:decoration-current focus-visible:decoration-current',
     {

package/template/src/ui/atoms/index.ts

@@ -0,0 +1,4 @@
+export * from './Button';
+export * from './Code';
+export * from './Link';
+export * from './StarbaseLogo';

package/template/src/ui/molecules/DarkModeToggle.tsx

@@ -1,7 +1,7 @@
 import { useCallback, useState } from 'react';
 import { LuMoon, LuSun } from 'react-icons/lu';
-import { Button } from 'atoms/Button';
 import { darkMode } from 'utils';
+import { Button } from 'atoms';
 
 export function DarkModeToggle() {
   const [isDark, setIsDark] = useState(
@@ -18,12 +18,16 @@ export function DarkModeToggle() {
   return (
     <Button
       variant="ghost"
-      iconOnly
       size="sm"
+      className="p-2"
       onClick={toggle}
       aria-label={isDark ? 'Switch to light mode' : 'Switch to dark mode'}
     >
-      {isDark ? <LuSun size={16} /> : <LuMoon size={16} />}
+      {isDark ? (
+        <LuSun size={16} aria-hidden="true" />
+      ) : (
+        <LuMoon size={16} aria-hidden="true" />
+      )}
     </Button>
   );
 }

package/template/src/ui/molecules/FeatureCard.tsx

@@ -0,0 +1,41 @@
+import type { ComponentType, SVGProps } from 'react';
+import { motion, useReducedMotion } from 'motion/react';
+
+interface FeatureCardProps {
+  icon: ComponentType<SVGProps<SVGSVGElement>>;
+  title: string;
+  description: string;
+  index?: number;
+}
+
+export function FeatureCard({
+  icon: Icon,
+  title,
+  description,
+  index = 0,
+}: FeatureCardProps) {
+  const prefersReducedMotion = useReducedMotion();
+
+  return (
+    <motion.li
+      initial={prefersReducedMotion ? false : { opacity: 0, y: 12 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={
+        prefersReducedMotion
+          ? { duration: 0 }
+          : {
+              duration: 0.4,
+              delay: 0.1 + index * 0.06,
+              ease: 'easeOut',
+            }
+      }
+      className="rounded-xl border border-sb-divider bg-sb-surface-raised p-5"
+    >
+      <div className="mb-3 flex items-center gap-3">
+        <Icon className="size-5 shrink-0 text-sb-action" aria-hidden="true" />
+        <h3 className="text-sb-fg-title">{title}</h3>
+      </div>
+      <p className="text-sm text-sb-fg-subtle">{description}</p>
+    </motion.li>
+  );
+}

package/template/src/ui/molecules/Stargazers.tsx

@@ -1,24 +1,50 @@
 import { useQuery } from '@tanstack/react-query';
+import { AnimatePresence, motion, useReducedMotion } from 'motion/react';
+import { LuGithub } from 'react-icons/lu';
 import { github } from 'queries';
-import { Link } from 'atoms/Link';
+import { ButtonLink } from 'atoms';
 
 export function Stargazers() {
   const { data } = useQuery({
     ...github.starbaseRepoQueryOptions(),
     retry: false,
   });
+  const prefersReducedMotion = useReducedMotion();
 
   return (
-    <Link
+    <ButtonLink
       href="https://github.com/bstaruk/starbase"
       target="_blank"
       rel="noopener noreferrer"
-      variant="fg-subtle"
+      variant="ghost"
+      size="sm"
+      className="p-2"
+      aria-label={
+        data
+          ? `${data.stargazers_count.toLocaleString()} stargazers on GitHub (opens in new tab)`
+          : 'Starbase on GitHub (opens in new tab)'
+      }
     >
-      {data
-        ? `${data.stargazers_count.toLocaleString()} stargazers on GitHub`
-        : 'find us on GitHub'}
-      <span className="sr-only"> (opens in new tab)</span>
-    </Link>
+      <AnimatePresence mode="popLayout">
+        {data && (
+          <motion.span
+            key="count"
+            initial={
+              prefersReducedMotion ? false : { opacity: 0, filter: 'blur(4px)' }
+            }
+            animate={{ opacity: 1, filter: 'blur(0px)' }}
+            transition={
+              prefersReducedMotion
+                ? { duration: 0 }
+                : { duration: 0.4, ease: 'easeOut' }
+            }
+            className="mr-1 text-xs font-semibold tabular-nums"
+          >
+            {data.stargazers_count.toLocaleString()}
+          </motion.span>
+        )}
+      </AnimatePresence>
+      <LuGithub size={16} aria-hidden="true" />
+    </ButtonLink>
   );
 }

package/template/src/ui/molecules/index.ts

@@ -0,0 +1,3 @@
+export * from './DarkModeToggle';
+export * from './FeatureCard';
+export * from './Stargazers';

package/template/src/ui/organisms/SiteHeader.tsx

@@ -0,0 +1,43 @@
+import { RouterLink, StarbaseLogo } from 'atoms';
+import { DarkModeToggle, Stargazers } from 'molecules';
+
+const navLinkClasses = 'font-display text-sm font-medium px-0.5';
+
+const activeProps = {
+  className: 'text-sb-fg-title',
+  'aria-current': 'page' as const,
+};
+
+export function SiteHeader() {
+  return (
+    <header className="flex items-center py-3">
+      <nav aria-label="Main" className="flex items-center gap-4 sm:gap-5">
+        <RouterLink
+          to="/"
+          variant="fg-subtle"
+          className={`${navLinkClasses} flex items-center gap-2 font-semibold tracking-tight`}
+          activeProps={activeProps}
+        >
+          <StarbaseLogo className="size-5 shrink-0" />
+          Starbase
+        </RouterLink>
+
+        <span aria-hidden="true" className="h-4 w-px bg-sb-divider" />
+
+        <RouterLink
+          to="/liftoff"
+          variant="fg-subtle"
+          className={navLinkClasses}
+          activeProps={activeProps}
+        >
+          Liftoff
+        </RouterLink>
+      </nav>
+
+      <div className="ml-auto flex items-center gap-1">
+        <Stargazers />
+        <DarkModeToggle />
+      </div>
+    </header>
+  );
+}

package/template/src/ui/organisms/index.ts

@@ -0,0 +1 @@
+export * from './SiteHeader';

package/template/src/ui/templates/SiteLayout.tsx

@@ -0,0 +1,26 @@
+import type { ReactNode } from 'react';
+import { SiteHeader } from 'organisms';
+
+interface SiteLayoutProps {
+  children: ReactNode;
+}
+
+export function SiteLayout({ children }: SiteLayoutProps) {
+  return (
+    <div className="mx-auto flex min-h-screen w-full max-w-page flex-col bg-sb-surface px-page-x">
+      <a
+        href="#main-content"
+        className="sr-only focus:not-sr-only focus:absolute focus:left-page-x focus:top-3 focus:z-50 focus:rounded-md focus:bg-sb-surface-raised focus:px-3 focus:py-1.5 focus:text-sm focus:font-medium focus:text-sb-fg focus:shadow-sm focus:ring-1 focus:ring-sb-divider focus:outline-none"
+      >
+        Skip to content
+      </a>
+      <SiteHeader />
+      <main
+        id="main-content"
+        className="flex flex-1 flex-col items-center py-6 sm:py-10"
+      >
+        {children}
+      </main>
+    </div>
+  );
+}

package/template/src/ui/templates/index.ts

@@ -0,0 +1 @@
+export * from './SiteLayout';

package/template/tsconfig.app.json

@@ -29,9 +29,13 @@
     "paths": {
       "queries": ["src/lib/queries/index.ts"],
       "utils": ["src/lib/utils/index.ts"],
+      "atoms": ["src/ui/atoms/index.ts"],
       "atoms/*": ["src/ui/atoms/*"],
+      "molecules": ["src/ui/molecules/index.ts"],
       "molecules/*": ["src/ui/molecules/*"],
+      "organisms": ["src/ui/organisms/index.ts"],
       "organisms/*": ["src/ui/organisms/*"],
+      "templates": ["src/ui/templates/index.ts"],
       "templates/*": ["src/ui/templates/*"]
     }
   },

package/template/vite.config.ts

@@ -1,8 +1,8 @@
 import path from 'path';
-import { defineConfig } from 'vite';
+import tailwindcss from '@tailwindcss/vite';
 import { tanstackRouter } from '@tanstack/router-plugin/vite';
 import react from '@vitejs/plugin-react';
-import tailwindcss from '@tailwindcss/vite';
+import { defineConfig } from 'vite';
 
 // https://vite.dev/config/
 export default defineConfig({

package/template/src/ui/molecules/PageHeader.tsx

@@ -1,35 +0,0 @@
-import { motion, useReducedMotion } from 'motion/react';
-import { useLocation } from '@tanstack/react-router';
-import { StarbaseLogo } from 'atoms/StarbaseLogo';
-
-interface PageHeaderProps {
-  title: string;
-}
-
-export function PageHeader({ title }: PageHeaderProps) {
-  const { pathname } = useLocation();
-  const prefersReducedMotion = useReducedMotion();
-
-  return (
-    <header className="flex flex-col items-center gap-4">
-      <motion.div
-        key={pathname}
-        initial={prefersReducedMotion ? false : { y: -20, rotate: 12 }}
-        animate={{ y: 0, rotate: [16, 8, 14, 10, 12] }}
-        transition={
-          prefersReducedMotion
-            ? { duration: 0 }
-            : { duration: 0.5, ease: 'easeOut' }
-        }
-        whileHover={
-          prefersReducedMotion
-            ? undefined
-            : { rotate: [12, 4, 20, 6, 18, 9, 15, 12] }
-        }
-      >
-        <StarbaseLogo className="size-12" />
-      </motion.div>
-      <h1 className="text-sb-fg-title">{title}</h1>
-    </header>
-  );
-}