AI-Assisted Development

Tips for using AI coding assistants (Claude Code, Cursor, Copilot, etc.) with your Starterbase project.

How It Works

Your generated project includes a CLAUDE.md file that teaches AI assistants about:

AI assistants automatically read this file and use the existing components, icons, and patterns when generating code.

Example Prompts

Frontend

"Add a user profile card that shows avatar, name, and email"
→ Uses Card, Avatar from components/ui/

"Create a settings form with toggles for notifications"
→ Uses Input, Switch, Button from components/ui/

"Add a data table showing recent orders with pagination"
→ Uses Table, Pagination, Badge from components/ui/

"Add a confirmation dialog before deleting items"
→ Uses Dialog, Button from components/ui/

Backend

"Add a comments endpoint for posts"
→ Creates app/api/v1/comments/ with router.py, deps.py, schemas.py

"Add soft delete to the User model"
→ Adds deleted_at field, updates deps.py logic

"Add rate limiting to auth endpoints"
→ Uses Redis, adds middleware in deps.py

Full-Stack

"Add a favorites feature so users can bookmark items"
→ Backend: model, migration, 3-file module
→ Frontend: hook, API client, UI updates

"Add file upload for user avatars"
→ Backend: storage logic, endpoint
→ Frontend: upload component, preview

Tips

Be specific about what you want:

# Good
"Add a dropdown menu to the user avatar in the navbar with links to Settings and Logout"

# Vague
"Add a menu"

Reference existing patterns:

"Add a Teams page similar to how the Users admin page works"

Mention UI requirements:

"Add a search input with a magnifying glass icon and clear button"

What Gets Used Automatically

The AI reads your project's CLAUDE.md and follows the established patterns, so generated code stays consistent with the rest of your codebase.