A Claude-first front-end launchpad.
Welcome aboard. Here's everything you need to fly.
| 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 |
Open http://localhost:3000 and start building.
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. Imports use path aliases and barrel files (from 'atoms', not relative paths). See CLAUDE.md for the full convention guide.
CLAUDE.md is the source of truth for all conventions, patterns, and architectural decisions. It's also what makes this a Claude-first project: Claude Code reads it, learns your preferences, and generates code that matches your style.
Start here. Read it. Build on it. Evolve it.
Starbase ships with custom Claude Code skills:
/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
- Starbase on GitHub: full docs, architecture, and mission briefing
- Atomic Design: the component methodology
- Claude Code: your AI co-pilot