create-starbase 5.0.0

package/README.md

@@ -0,0 +1,94 @@
+# Starbase v5
+
+Starbase is a personal, opinionated front-end starter kit built on Vite, TypeScript, React and Tailwind CSS. It's been one of my favorite passion projects for over 8 years now, and v5 is its most ambitious launch yet.
+
+For most of its life, Starbase solved a very specific problem: you don't have to write Webpack configs from scratch. That problem doesn't really exist anymore. Vite handles bundling beautifully, and the value of a boilerplate that just wires up a build tool has dropped to near zero.
+
+So v5 asks a different question: what if the boilerplate encoded _how you build_, not just _what you build with_?
+
+## The mission
+
+The hard part of modern front-end development isn't getting a dev server running. It's maintaining consistency -- naming conventions, component architecture, accessibility standards, file organization -- across a codebase that grows over time, especially when AI tooling is doing a lot of the heavy lifting.
+
+Starbase v5 is built around [Claude Code](https://docs.anthropic.com/en/docs/claude-code). The baseline components aren't throwaway demos. They're reference implementations that Claude pattern-matches against when generating new code. Every atom, molecule, and organism is a teaching artifact. The result is an AI-assisted workflow where generated code actually looks like _your_ code.
+
+## Stack
+
+| Tool                                               | Role                                                           |
+| -------------------------------------------------- | -------------------------------------------------------------- |
+| [Vite](https://vite.dev/)                          | Build tooling and dev server                                   |
+| [TypeScript](https://www.typescriptlang.org/)      | Type safety                                                    |
+| [React](https://react.dev/)                        | UI library                                                     |
+| [Tailwind CSS](https://tailwindcss.com/)           | Utility-first styling with a semantic `sb-` color token system |
+| [TanStack Router](https://tanstack.com/router)     | File-based routing                                             |
+| [TanStack React Query](https://tanstack.com/query) | Server state and data fetching                                 |
+| [Motion](https://motion.dev/)                      | Animation                                                      |
+| [ESLint](https://eslint.org/)                      | Linting (with react-x and react-dom plugins)                   |
+| [Prettier](https://prettier.io/)                   | Formatting                                                     |
+
+See [`template/package.json`](template/package.json) for the full dependency list.
+
+## Architecture
+
+Components follow [Atomic Design](https://atomicdesign.bradfrost.com/chapter-2/):
+
+- **Atoms** -- Smallest building blocks. HTML-level primitives like buttons, inputs, links, and icons.
+- **Molecules** -- Small groups of atoms functioning together as a unit. A dark mode toggle, a page header.
+- **Organisms** -- Larger sections composed of molecules and atoms. Full-width layouts, distinct page sections.
+- **Templates** -- Page-level layout structures that define where things go and how they relate.
+
+Everything else is organized by concern:
+
+```
+src/
+  lib/
+    queries/    # React Query options, organized by API domain
+    theme/      # Tailwind CSS and theme config
+    utils/      # Utility functions (cn, darkMode, etc.)
+  ui/
+    atoms/      # Button, Link, Code, StarbaseLogo
+    molecules/  # DarkModeToggle, PageHeader, Stargazers
+    organisms/
+    templates/
+  routes/       # TanStack Router file-based routes
+```
+
+Imports use path aliases everywhere -- `from 'atoms/Button'` instead of `from '../../ui/atoms/Button'`. If you find yourself reaching for a relative path, that's a sign a new alias is needed.
+
+## `CLAUDE.md`
+
+This is the north star of the project. It's a living document that maps development preferences directly to codebase patterns -- accessibility standards, import conventions, component architecture, color tokens, writing style, and more.
+
+It's not a personality dump. It's a working contract between you and Claude that says: here's how I like things done, and here are the reference implementations to prove it. When Claude generates code in a Starbase project, it builds on these conventions instead of guessing.
+
+Read it. Evolve it. It's designed to grow with the project.
+
+## Claude Code commands
+
+Starbase ships with custom [Claude Code commands](https://docs.anthropic.com/en/docs/claude-code/tutorials#create-custom-slash-commands) that go beyond what a linter can catch:
+
+- **`/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.
+
+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.
+
+## Liftoff
+
+Scaffold a new project, install dependencies, and you're in orbit:
+
+```bash
+npm create starbase@latest my-project
+cd my-project
+npm install
+npm run dev
+```
+
+## History
+
+Starbase is built and maintained by [Brian Staruk](https://brian.staruk.net), a Boston-based web developer with 20+ years of experience who's never quite gotten over the urge to nerd out in public. Go Sox. That impulse is the main reason this project has been actively maintained since 2017 -- through four major versions, each one reflecting whatever felt like the right way to build for the web at the time. PostCSS, Webpack, TypeScript, Tailwind -- it picked up tools as they matured and dropped them when something better came along.
+
+v5 is the biggest shift yet. The build tool problem is solved. The new problem is encoding taste and standards so that AI tooling can extend your work faithfully. That's the mission now.
+
+## License
+
+MIT

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+#!/usr/bin/env node
+export {};

package/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "create-starbase",
+  "version": "5.0.0",
+  "type": "module",
+  "author": "Brian Staruk <brian@staruk.net>",
+  "contributors": [
+    {
+      "name": "Brian Staruk",
+      "email": "brian@staruk.net",
+      "url": "https://brian.staruk.net"
+    }
+  ],
+  "description": "Create a new Starbase project with Vite, TypeScript, and React.",
+  "homepage": "https://github.com/bstaruk/starbase",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/bstaruk/starbase.git"
+  },
+  "bugs": {
+    "url": "https://github.com/bstaruk/starbase/issues",
+    "email": "brian@staruk.net"
+  },
+  "license": "MIT",
+  "main": "./dist/index.js",
+  "bin": {
+    "create-starbase": "./dist/index.js"
+  },
+  "files": [
+    "dist",
+    "template"
+  ],
+  "scripts": {
+    "build": "tsc",
+    "format": "prettier --write .",
+    "lint": "eslint .",
+    "start": "npm run build && node ./dist/index.js",
+    "prepare": "husky"
+  },
+  "devDependencies": {
+    "@commitlint/cli": "^20.4.1",
+    "@commitlint/config-conventional": "^20.4.1",
+    "@types/node": "^20.11.0",
+    "husky": "^9.1.7",
+    "lint-staged": "^16.2.7",
+    "prettier": "^3.8.1",
+    "typescript": "^5.3.0"
+  },
+  "lint-staged": {
+    "*.{js,jsx,ts,tsx,css,md,json}": "prettier --write"
+  },
+  "engines": {
+    "node": ">=20"
+  }
+}

package/template/.claude/commands/audit.md

@@ -0,0 +1,14 @@
+Perform an audit of this codebase. Read CLAUDE.md first — it is the source of truth for all conventions, standards, and architectural decisions. Every finding should be measured against what's documented there.
+
+Focus: $ARGUMENTS
+
+If a focus was provided, narrow the audit to those areas. Otherwise, audit broadly across all conventions in CLAUDE.md — accessibility, component patterns, import conventions, color tokens, etc.
+
+For each finding, report:
+
+- What the issue is
+- Which CLAUDE.md convention it violates (or which WCAG criterion, if accessibility-related)
+- Where in the code it occurs (file and line)
+- A recommended fix
+
+Group findings by severity: critical, moderate, minor. If everything passes, say so.

package/template/.claude/commands/review.md

@@ -0,0 +1,23 @@
+Review the changes on the current branch compared to the base branch.
+
+Base branch: $ARGUMENTS
+
+If a base branch was provided, use it. Otherwise, default to `develop`.
+
+Start by reading CLAUDE.md — it is the source of truth for all conventions and standards. Then run `git diff <base>...HEAD` to get the full diff of this branch.
+
+Review every change against the conventions in CLAUDE.md. Check for:
+
+- Violations of documented patterns (imports, component structure, utils organization, etc.)
+- Accessibility regressions (WCAG 2.2 AA)
+- Correctness and potential bugs
+- Anything that contradicts the project's stated opinions
+
+For each finding, report:
+
+- What the issue is
+- Which convention or standard it violates
+- The file and line
+- A recommended fix
+
+If everything looks good, say so. Keep the review focused on what actually changed — don't audit the entire codebase, just the diff.

package/template/.editorconfig

@@ -0,0 +1,14 @@
+# editorconfig.org
+
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+insert_final_newline = true
+indent_style = space
+indent_size = 2
+trim_trailing_whitespace = true
+
+[*.md]
+trim_trailing_whitespace = false

package/template/.env

@@ -0,0 +1 @@
+VITE_DEVTOOLS=false

package/template/.env.example

@@ -0,0 +1 @@
+VITE_DEVTOOLS=true

package/template/.nvmrc

@@ -0,0 +1 @@
+v24

package/template/.prettierignore

@@ -0,0 +1,12 @@
+# Build outputs
+dist/
+build/
+
+# Dependencies
+node_modules/
+
+# Package manager
+package-lock.json
+
+# Generated
+src/routeTree.gen.ts

package/template/.prettierrc.json

@@ -0,0 +1,7 @@
+{
+  "tabWidth": 2,
+  "useTabs": false,
+  "semi": true,
+  "singleQuote": true,
+  "trailingComma": "all"
+}

package/template/.vscode/extensions.json

@@ -0,0 +1,8 @@
+{
+  "recommendations": [
+    "bradlc.vscode-tailwindcss",
+    "dbaeumer.vscode-eslint",
+    "EditorConfig.EditorConfig",
+    "esbenp.prettier-vscode"
+  ]
+}

package/template/.vscode/settings.json

@@ -0,0 +1,48 @@
+{
+  // Format w/ prettier on save
+  "editor.formatOnSave": true,
+
+  // Prefer path aliases over relative imports
+  "typescript.preferences.importModuleSpecifier": "non-relative",
+  "javascript.preferences.importModuleSpecifier": "non-relative",
+
+  // Defer JS linting to ESLint Extension
+  "eslint.validate": [
+    "javascript",
+    "typescript",
+    "javascriptreact",
+    "typescriptreact"
+  ],
+
+  "files.associations": {
+    "*.css": "tailwindcss"
+  },
+
+  // Fix-all ESLint on save
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": "explicit"
+  },
+
+  // Tailwind CSS IntelliSense settings
+  "tailwindCSS.experimental.classRegex": [
+    ["cn\\(([^)]*)\\)", "(?:'|\"|`)([^\"'`]*)(?:'|\"|`)"]
+  ],
+
+  // Replace "index.tsx" with "Component" for "Component/index.tsx" in editor tabs
+  "workbench.editor.customLabels.enabled": true,
+  "workbench.editor.customLabels.patterns": {
+    "**/index.ts": "${dirname}",
+    "**/index.tsx": "${dirname}"
+  },
+
+  // TanStack Router autogen files
+  "files.readonlyInclude": {
+    "**/routeTree.gen.ts": true
+  },
+  "files.watcherExclude": {
+    "**/routeTree.gen.ts": true
+  },
+  "search.exclude": {
+    "**/routeTree.gen.ts": true
+  }
+}

package/template/CLAUDE.md

@@ -0,0 +1,109 @@
+# CLAUDE.md
+
+> _"Simplicity is the ultimate sophistication."_
+
+Starbase is a personal, opinionated boilerplate — it reflects deliberately chosen tools, patterns, and workflows. Decisions should favor informed preference over broad appeal. When in doubt, optimize for productivity and consistency with the existing stack, not generality. That said, preference never trumps code quality — clean, correct, well-structured code wins every time. Opinion only applies when the choice is genuinely a matter of taste.
+
+This file captures conventions, patterns, and lessons learned from working on this project. It is meant to evolve — when we discover a useful pattern or convention worth preserving, suggest adding it here.
+
+## Accessibility
+
+Inclusivity and accessibility are more important than any other aspect of the user experience. Unstyled, semantic HTML that works for everyone is better than a polished UI that excludes people.
+
+- Target **WCAG 2.2 AA** compliance as the baseline for all work
+- Use semantic HTML elements — prefer native behavior over custom JS (e.g., `<button>` over `<div onClick>`, `<nav>` over `<div class="nav">`)
+- All interactive elements must be keyboard-accessible and have visible focus indicators
+- Images need meaningful `alt` text (or `alt=""` for purely decorative images)
+- Color alone must never be the only way to convey information — pair it with text, icons, or patterns
+- Ensure sufficient color contrast ratios (4.5:1 for normal text, 3:1 for large text)
+- Test with screen readers when building new interactive patterns
+- When in doubt between a flashy feature and an accessible one, choose accessible
+
+## Import Conventions
+
+- **Always use aliased paths** — never relative imports
+  - `from 'utils'` not `from '../../lib/utils/darkMode'`
+  - `from 'atoms/Button'` 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
+
+## Utils Organization
+
+- All utils live in `src/lib/utils/` as individual files (e.g., `cn.ts`, `darkMode.ts`)
+- Every util must be re-exported from `src/lib/utils/index.ts` so consumers import from `'utils'`
+- Single-export utils use `export * from './cn'` (flat import: `import { cn } from 'utils'`)
+- Multi-function utils use `export * as darkMode from './darkMode'` (namespaced import: `import { darkMode } from 'utils'`, then `darkMode.applyTheme()`)
+- Pattern: create the file, add the re-export to `index.ts`, import via `'utils'`
+
+## Queries Organization
+
+All query/mutation options live in `src/lib/queries/`, organized by API domain — one file per domain (e.g., `github.ts`, `users.ts`, `products.ts`).
+
+- Every domain file must be re-exported from `src/lib/queries/index.ts` as a namespace: `export * as github from './github'`
+- Consumers import via the `'queries'` alias: `import { github } from 'queries'`, then `github.repoQueryOptions()`
+- Domain files group all related concerns: query options, mutation options, and associated types
+- One file per API domain/data source, not one file per query — this is what keeps the structure scalable
+- Pattern: create the domain file, add the namespaced re-export to `index.ts`, import via `'queries'`
+
+### Barrel Export Rules (applies to both utils and queries)
+
+The re-export pattern depends on the content of the file:
+
+- **Single-export files** → flat: `export * from './cn'` (import as `{ cn }`)
+- **Multi-export domain files** → namespaced: `export * as github from './github'` (import as `{ github }`, then `github.thing()`)
+
+Query domain files are always multi-export, so they always use namespaced re-exports.
+
+## Component Patterns
+
+Components follow [Atomic Design](https://atomicdesign.bradfrost.com/chapter-2/) and live in `src/ui/`:
+
+- **Atoms** (`atoms/`) — Smallest building blocks that can't be broken down further without losing meaning. HTML-level primitives: buttons, inputs, labels, links, icons. Each has its own distinct properties (size variants, color, font) but no dependency on other custom components.
+- **Molecules** (`molecules/`) — Small groups of atoms functioning together as a single unit. A search form (label + input + button), a labeled toggle, a stat with an icon. Each molecule does one thing well — single responsibility.
+- **Organisms** (`organisms/`) — Larger, distinct sections composed of molecules, atoms, or other organisms. A site header (logo + nav + search), a product grid, a comment thread. Organisms provide context — they show how smaller pieces work together in a meaningful section.
+- **Templates** (`templates/`) — Page-level layout structures that arrange organisms and molecules into a content hierarchy. Focus is on spatial arrangement and content slots, not final content. Defines where things go and how they relate.
+
+Reference: [Atomic Design by Brad Frost](https://atomicdesign.bradfrost.com/table-of-contents/)
+
+- Theme prefix: `sb-` (starbase) for all color tokens
+
+## Libraries
+
+Preferred libraries already in the project — reach for these before writing custom solutions or adding alternatives:
+
+- **js-cookie** — Cookie read/write
+- **usehooks-ts** — Common React hooks (prefer over writing custom hooks when a suitable one exists)
+- **clsx** + **tailwind-merge** (via `cn()`) — Conditional/merged class names
+- **react-icons** — Icon sets (currently using `react-icons/lu` for Lucide icons)
+- **@tanstack/react-query** — Server state / data fetching
+- **@tanstack/react-router** — Routing
+- **motion** — Animation (import from `motion/react`)
+
+See `package.json` for the full dependency list.
+
+When adding a new library, always do a fresh web search for the latest docs, changelog, and community status. Do not rely on cached or training data — APIs change, packages get deprecated, and better alternatives emerge.
+
+## Color Token System
+
+- 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)
+
+## Writing Style
+
+- Never reference conversations, past edits, or memories in code comments, commit messages, or documentation
+- Keep everything matter-of-fact and readable for any future developer
+- No "as we discussed", "per our earlier change", or similar phrasing
+
+## Git
+
+- **Never commit, push, or run destructive git commands** — read-only git operations (diff, status, log, etc.) are fine
+- After every code change, provide a [Conventional Commit](https://www.conventionalcommits.org/) message ready to copy+paste
+  - Format: `type(scope): description` — e.g., `feat(ui): add dark mode toggle atom`
+  - Common types: `feat`, `fix`, `chore`, `style`, `refactor`, `docs`, `test`
+  - Keep the description concise and lowercase
+
+## Working Together
+
+- This file is a living document — suggest additions when we land on a convention worth preserving
+- Goal is to fine-tune how we collaborate over time so good patterns stick

package/template/README.md

@@ -0,0 +1,46 @@
+# Starbase
+
+Welcome aboard. Here's what you need to know.
+
+## Commands
+
+| Command           | Description                          |
+| ----------------- | ------------------------------------ |
+| `npm run dev`     | Start the Vite dev server            |
+| `npm run build`   | Type-check and build for production  |
+| `npm run preview` | Preview the production build locally |
+| `npm run lint`    | Run ESLint                           |
+| `npm run format`  | Run Prettier                         |
+
+## Project structure
+
+```
+src/
+  lib/
+    queries/    # React Query options, organized by API domain
+    theme/      # Tailwind CSS and theme config
+    utils/      # Utility functions (cn, darkMode, etc.)
+  ui/
+    atoms/      # Smallest building blocks (Button, Link, Code)
+    molecules/  # Functional groups of atoms (DarkModeToggle, PageHeader)
+    organisms/  # Larger composed sections
+    templates/  # Page-level layout structures
+  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.
+
+## CLAUDE.md
+
+Start here. It's the source of truth for all conventions, patterns, and architectural decisions. It's also what makes [Claude Code](https://docs.anthropic.com/en/docs/claude-code) work well with this project -- read it, build on it, evolve it.
+
+## Claude Code commands
+
+- **`/audit`** -- Scan the codebase for drift against CLAUDE.md conventions
+- **`/review`** -- Review current branch changes against CLAUDE.md
+
+## Learn more
+
+- [Starbase on GitHub](https://github.com/bstaruk/starbase) -- full docs, history, and mission
+- [Atomic Design](https://atomicdesign.bradfrost.com/chapter-2/) -- the component methodology
+- [Claude Code docs](https://docs.anthropic.com/en/docs/claude-code) -- getting the most out of the AI workflow

package/template/eslint.config.js

@@ -0,0 +1,27 @@
+import js from '@eslint/js';
+import globals from 'globals';
+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 tseslint from 'typescript-eslint';
+import { defineConfig, globalIgnores } from 'eslint/config';
+
+export default defineConfig([
+  globalIgnores(['dist', 'src/routeTree.gen.ts']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      js.configs.recommended,
+      tseslint.configs.recommended,
+      reactX.configs['recommended-typescript'],
+      reactDom.configs.recommended,
+      reactHooks.configs.flat.recommended,
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+  },
+]);

package/template/index.html

@@ -0,0 +1,47 @@
+<!doctype html>
+<html lang="en" style="background-color: #f5f5f4">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Starbase</title>
+    <script>
+      // Inline script to prevent dark mode flash
+      (function () {
+        const COOKIE_NAME = 'theme-preference';
+        const DARK_CLASS = 'dark';
+
+        // Get theme preference from cookie
+        const getCookie = (name) => {
+          const cookie = document.cookie
+            .split('; ')
+            .find((row) => row.startsWith(name + '='));
+          return cookie ? cookie.split('=')[1] : null;
+        };
+
+        const preference = getCookie(COOKIE_NAME) || 'system';
+
+        // Determine effective theme (default is light)
+        let theme = 'light';
+        if (preference === 'dark') {
+          theme = 'dark';
+        } else if (preference === 'system') {
+          theme = window.matchMedia('(prefers-color-scheme: dark)').matches
+            ? 'dark'
+            : 'light';
+        }
+
+        // Apply dark class only if dark mode
+        if (theme === 'dark') {
+          document.documentElement.classList.add(DARK_CLASS);
+          document.documentElement.style.backgroundColor = '#09090b';
+        }
+      })();
+    </script>
+  </head>
+
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package/template/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "template",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "format": "prettier --write .",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@fontsource/bricolage-grotesque": "^5.2.10",
+    "@fontsource/nunito": "^5.2.7",
+    "@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",
+    "clsx": "^2.1.1",
+    "js-cookie": "^3.0.5",
+    "motion": "^12.33.0",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "react-icons": "^5.5.0",
+    "tailwind-merge": "^3.4.0",
+    "usehooks-ts": "^3.1.1"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.1",
+    "@tailwindcss/vite": "^4.1.18",
+    "@tanstack/router-plugin": "^1.158.1",
+    "@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-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.4.24",
+    "eslint-plugin-react-x": "^2.11.0",
+    "globals": "^16.5.0",
+    "prettier": "^3.8.1",
+    "tailwindcss": "^4.1.18",
+    "typescript": "~5.9.3",
+    "typescript-eslint": "^8.46.4",
+    "vite": "^7.2.4"
+  }
+}

package/template/src/lib/queries/github.ts

@@ -0,0 +1,13 @@
+import { queryOptions } from '@tanstack/react-query';
+
+export function starbaseRepoQueryOptions() {
+  return queryOptions({
+    queryKey: ['github', 'repos', 'bstaruk', 'starbase'],
+    queryFn: async () => {
+      const res = await fetch('https://api.github.com/repos/bstaruk/starbase');
+      if (!res.ok) throw new Error('Failed to fetch repo data');
+      return res.json() as Promise<{ stargazers_count: number }>;
+    },
+    staleTime: 5 * 60 * 1000,
+  });
+}

package/template/src/lib/queries/index.ts

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

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

@@ -0,0 +1,3 @@
+/** Ordered Imports (be careful when modifying) */
+@import './tailwind.css'; /* Tailwind package imports */
+@import './base.css'; /* Base styles (h1-h6, etc) */

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

@@ -0,0 +1,37 @@
+@layer base {
+  html {
+    scrollbar-gutter: stable;
+  }
+
+  body {
+    @apply font-sans text-base underline-offset-4 bg-sb-surface text-sb-fg;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5 {
+    @apply font-display font-medium;
+  }
+
+  h1 {
+    @apply text-h1;
+  }
+
+  h2 {
+    @apply text-h2;
+  }
+
+  h3 {
+    @apply text-h3;
+  }
+
+  h4 {
+    @apply text-h4;
+  }
+
+  h5 {
+    @apply text-h5;
+  }
+}