Starbase

Starbase is an opinionated front-end starter kit that combines Vite, TypeScript, React, and Tailwind CSS with a CLAUDE.md-driven workflow, purpose-built so Claude Code generates code that matches your conventions. It's a boilerplate for developers who want AI assistance without losing their codebase's personality.

What is Starbase?

Starbase is a front-end launchpad that scaffolds a new React application with Vite as the build tool, TypeScript for type safety, Tailwind CSS for styling, TanStack Router for file-based routing, and TanStack React Query for server state. It takes a project through npm create starbase@latest and produces a working app with a documented convention system, a component library organized by Atomic Design, and a suite of custom Claude Code skills. The project is maintained by Brian Staruk and has been actively developed since 2017, with v5 being the current major version focused on AI-assisted development. The source is MIT licensed.

Key Features

• CLAUDE.md as the central contract — A living document that encodes accessibility standards, import conventions, component architecture, color tokens, and writing style; Claude Code reads it to align generated code with the project's established patterns.
• Custom Claude Code skills — Three slash commands ship with the template: /audit scans the codebase for drift against CLAUDE.md, /review evaluates the current branch's changes, and /update-deps categorizes dependency updates into safe, Vite-aligned, and major-breaking tiers before bumping anything.
• Reference components in Atomic Design — The starter includes example atoms (Button, Link, Code, StarbaseLogo), molecules (DarkModeToggle, PageHeader, Stargazers), organisms, and templates that double as teaching examples for AI code generation.
• ESLint with nine purpose-chosen plugins — The config goes beyond defaults with react-x, react-dom, react-hooks, jsx-a11y, TanStack Router and Query rules, Vite-aware react-refresh boundaries, and import ordering that sorts atoms before molecules, external deps before internal, and React always first.
• Path aliases instead of relative imports — Code references components as atoms/Button rather than ../../ui/atoms/Button, and the import-ordering ESLint rule understands this alias structure, so reaching for a relative path signals a new alias is needed.
• TanStack Router and Query prewired — File-based routes live in src/routes, and React Query options are organized by API domain in src/lib/queries, with dark mode and utility functions in src/lib/theme and src/lib/utils.
• Tailwind with semantic sb- color tokens — Utility-first styling is paired with a token system that keeps colors consistent across the app and makes theme changes centralized.

Who is it for?

• Developers using Claude Code who want AI-generated code to look like it came from their own hand, not a generic copilot. They can run /audit and /review to keep the codebase aligned with documented conventions.
• Teams adopting Atomic Design that need a structured component hierarchy starting with atoms and molecules, plus an import order that mechanically enforces the component levels.
• Maintainers of long-lived projects who value a starter that has evolved through Webpack, PostCSS, and now Vite — v5 is the fourth major version of this same template.
• Solo developers building React apps who want routing, data fetching, styling, linting, and animation configured in one command, then want Claude Code to carry the conventions forward.

Use cases

• Scaffold a new app: Run one command to get a dev server at localhost:3000 with Vite, React, TypeScript, Tailwind, TanStack Router, and React Query already wired together.
• Keep AI code on-style: When Claude Code generates components, it reads CLAUDE.md and the reference components, so the output follows the same import order and component architecture as the rest of the project.
• Automate code review: Use the /audit and /review skills to catch accessibility gaps, raw color values, misleveled components, and import violations that a linter alone would miss.
• Manage dependency updates safely: The /update-deps skill separates safe bumps from Vite-aligned and major-breaking changes, then verifies each update with build and lint.

How does Starbase work?

Start with npm create starbase@latest my-project, then npm install and npm run dev. The template includes CLAUDE.md as the flight manual, reference components as teaching artifacts, and ESLint rules that mechanically enforce the conventions. Claude Code reads the manual when generating code, and the custom skills plus linter close the loop by validating what was written.

FAQ

Is Starbase free?

Yes. Starbase is open source and released under the MIT license, so it can be used in commercial projects without restriction.

What is CLAUDE.md?

It's a markdown file at the center of the template that encodes your preferences: accessibility standards, import conventions, component architecture, color tokens, and writing style. Claude Code reads it as a working contract and uses it to pattern-match generated code to your conventions.

How do I install Starbase?

Run npm create starbase@latest my-project in a terminal, then cd my-project, npm install, and npm run dev. The dev server will be available at http://localhost:3000.

Does Starbase work without Claude Code?

Yes, the template is a fully functional Vite/React app with routing, data fetching, styling, and linting. The Claude Code skills and CLAUDE.md are optional enhancements that activate the AI-assisted workflow.

Who maintains Starbase?

Brian Staruk, a Boston-based web developer, created and maintains Starbase. He has been developing in public for over 20 years and has steered the template through four major versions since 2017.