Create a new Starbase project with Vite, TypeScript, and React.
npm install create-starbaseA Claude-first front-end launchpad.
Starbase is an opinionated front-end starter kit built on Vite, TypeScript, React, and Tailwind CSS. Claude Code sits in the co-pilot seat by design. Every convention, component, and architectural decision is shaped to make Claude generate code that actually looks like yours.
``bash`
npm create starbase@latest my-project
cd my-project
npm install
npm run dev
Open http://localhost:3000. You're in orbit.
Getting a dev server running is the easy part. Maintaining consistency as your codebase grows? That's where things get interesting, especially when AI tooling is writing a significant chunk of your code.
Starbase puts CLAUDE.md at the center of everything. It encodes your preferences, conventions, and architectural decisions into a format that Claude Code can pattern-match against. The baseline components double as reference implementations. Teaching artifacts. When Claude generates new code in a Starbase project, it reads the flight manual and follows the plan.
The result: an accelerator, not an autopilot. AI-assisted development where the output actually feels like _your_ codebase, not a generic suggestion from the void of space.
| Tool | Role |
| -------------------------------------------------- | -------------------------------------------------------------- |
| Vite | Build tooling and dev server |
| TypeScript | Type safety |
| React | UI library |
| Tailwind CSS | Utility-first styling with a semantic sb- color token system |
| TanStack Router | File-based routing |
| TanStack React Query | Server state and data fetching |
| Motion | Animation |
| ESLint | Linting (with react-x, react-dom, and jsx-a11y plugins) |
| Prettier | Formatting |
See template/package.json for the full manifest.
The value lives in how these tools are wired together. CLAUDE.md documents the conventions. The reference components demonstrate them. ESLint enforces them mechanically. The /audit and /review skills catch the architectural stuff a linter can't reach. It's a closed loop: Claude reads the conventions, generates code that follows them, and the toolchain validates the output.
The ESLint setup is a good example of this philosophy in action. The config goes well beyond recommended defaults, pulling in nine plugins: React best practices (react-x, react-dom, react-hooks), accessibility (jsx-a11y), TanStack Router and Query patterns, Vite-aware refresh boundaries, and import ordering that understands the project's path alias structure. Atoms sort before molecules. External deps sort before internal ones. React always floats to the top. The linter knows the architecture, so it can enforce it without you thinking about it.
Components follow Atomic Design:
- Atoms: The smallest building blocks. Buttons, inputs, links, icons.
- Molecules: Small groups of atoms functioning 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're reaching for a relative path, that's a sign a new alias is needed.
CLAUDE.md is the north star of this project. It's a living document that maps your development preferences directly to codebase patterns: accessibility standards, import conventions, component architecture, color tokens, writing style, and more.
Think of it as a working contract between you and Claude. 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 your project.
Starbase ships with custom Claude Code skills that go beyond what a linter can catch:
- /audit: Scans the codebase for drift against CLAUDE.md conventions. Raw color values, misleveled components, accessibility gaps, import violations. Architecture enforcement, automated.
- /review: Reviews the current branch's changes against CLAUDE.md. Like a code review from someone who actually read the style guide.
- /update-deps`: Categorizes dependency updates into safe, Vite-aligned, and major-breaking tiers. Bumps what's safe, holds what isn't, and verifies with build + lint.
The goal: a suite of tools that handle the mechanical parts of consistency so you can focus on building cool stuff.
- Atomic Design: the component methodology
- Claude Code: your AI co-pilot
- Vite: the build engine
- TanStack Router: file-based routing
- TanStack React Query: server state management
Starbase is built and maintained by Brian Staruk, a Boston-based web developer who's been nerding out in public for over 20 years. Go Sox.
This project has been actively maintained since 2017, through four major versions. Each one reflected whatever felt like the right way to build for the web at the time. PostCSS, Webpack, TypeScript, Tailwind: tools got picked up as they matured and dropped when something better came along.
v5 is the biggest shift yet. The build tool era is over. The new frontier is encoding taste and standards so that AI tooling can extend your work faithfully. That's the mission now.
MIT