Slash Commands

Vibestacks includes custom slash commands that guide Claude through common development tasks. These commands ensure consistent code generation following your project's patterns.

Available Commands

/new-feature

The most powerful command - creates a complete feature from database to UI.

> /new-feature

Claude will ask you:

1. What is the feature name and description?
2. Does it need a database table?
3. Does it need API routes?
4. Does it need a new page or component?
5. Does it require authentication?
6. Does it integrate with Stripe (subscription limits)?

Then Claude will:

• Create the database schema
• Generate API routes with proper validation
• Build the UI components
• Wire up authentication checks
• Add subscription gating if needed
• Run database migrations

Example

> /new-feature

Claude: What feature would you like to build?

> A bookmark system where users can save articles

Claude: I'll create:
1. Database: bookmarks table (user_id, article_url, title, created_at)
2. API: /api/bookmarks (GET, POST, DELETE)
3. UI: Bookmark button component + bookmarks list page
4. Auth: Require login, scoped to user

Proceed?

/new-page

Creates a new page with proper routing, layouts, and optional authentication.

> /new-page

Claude will ask:

1. What is the page route? (e.g., /dashboard/settings, /about)
2. Is it a protected page (requires authentication)?
3. What blocks/sections should it include?
4. Does it need any data fetching?

Example

> /new-page

Claude: What page would you like to create?

> A team settings page at /dashboard/team/settings

Claude: I'll create app/dashboard/team/settings/page.tsx with:
- Authentication check (redirect if not logged in)
- Team name/description form
- Member management section
- Uses existing Card, Input, Button components

/new-api

Creates API route handlers with validation, authentication, and error handling.

> /new-api

Claude will ask:

1. What is the endpoint path? (e.g., /api/projects, /api/users/[id])
2. What HTTP methods does it need? (GET, POST, PUT, DELETE)
3. Does it require authentication?
4. What is the request/response shape?

Example

> /new-api

Claude: What API endpoint do you need?

> /api/projects/[id]/members - GET all members, POST to add a member

Claude: I'll create app/api/projects/[id]/members/route.ts with:
- GET: Returns all members for project (requires auth + project access)
- POST: Adds member by email (requires auth + project owner)
- Zod validation for request body
- Proper error responses (401, 403, 404)

/new-component

Creates React components following your project's patterns.

> /new-component

Claude will ask:

1. What is the component name?
2. Is it a UI primitive, a block (page section), or a feature component?
3. Does it need client-side interactivity?
4. What props should it accept?

Components are placed in the correct location:

• UI primitives → components/ui/
• Blocks → blocks/[category]/
• Features → components/[feature]/

Example

> /new-component

Claude: What component do you need?

> A pricing toggle that switches between monthly and yearly

Claude: I'll create components/ui/pricing-toggle.tsx:
- Client component (needs useState for toggle)
- Props: interval, onIntervalChange, monthlyPrice, yearlyPrice
- Shows savings percentage for yearly
- Uses existing Switch component from shadcn/ui

/add-table

Creates a database table with Drizzle ORM, following your schema patterns.

> /add-table

Claude will ask:

1. What is the table name?
2. What columns does it need?
3. Does it relate to users or other tables?
4. What indexes are needed?

Example

> /add-table

Claude: What table do you need?

> A feedback table for user-submitted feedback with rating and message

Claude: I'll create db/feedback.ts:
- id (text, primary key, nanoid)
- userId (text, references user.id)
- rating (integer, 1-5)
- message (text)
- createdAt (timestamp)
- Index on userId for queries

Then run pnpm db:push to sync.

/add-email

Creates email templates using React Email and adds send functions.

> /add-email

Claude will ask:

1. What is the email purpose? (e.g., welcome, invoice, notification)
2. What data does it need? (e.g., user name, URL, amount)
3. What should the subject line be?

Example

> /add-email

Claude: What email template do you need?

> A weekly digest email showing user's activity stats

Claude: I'll create:
1. components/emails/weekly-digest.tsx (React Email template)
2. Add sendWeeklyDigest() to lib/email.ts
3. Template includes: stats summary, top items, CTA button

Preview with: pnpm email

/deploy

Runs through a deployment checklist to catch common issues.

> /deploy

Claude will verify:

• All required environment variables
• Database migrations are applied
• Build succeeds without errors
• No TypeScript errors
• Stripe webhooks configured
• Analytics/monitoring set up

Tips for Using Commands

Combine Commands

Build features incrementally:

> /add-table  # First, create the database table
> /new-api    # Then, create the API routes
> /new-page   # Finally, build the UI

Be Specific

The more context you provide, the better:

# Good
> /new-api
> POST /api/teams/[id]/invite - sends email invitation,
> requires team owner role, stores pending invite in database

# Less specific
> /new-api
> team invite endpoint

Review Before Accepting

Claude shows you what it will create. Review the plan and ask for changes:

Claude: I'll create the invite API with these fields...

> Can you also add an expiration timestamp?

Claude: Updated - adding expiresAt field with 7-day default...