Create Your Own Prompt Recipes
Write custom Prompt Recipes tailored to your project's specific needs.
Recipe template
Every Prompt Recipe follows the same structure. Start with this template:
# Task: [Clear, one-line description of what this recipe does]
## Context
You are working on a Next.js SaaS application. Read CLAUDE.md for full project context.
[Add any task-specific context here — what part of the codebase is involved,
what the current state is, what constraints exist.]
## Instructions
1. [First step — be specific about files and patterns]
2. [Second step — reference existing code when possible]
3. [Third step — include validation and error handling]
4. [Continue with as many steps as needed]
## Constraints
- [Coding standards to follow]
- [Patterns to use or avoid]
- [Performance requirements]
- [Security requirements]
## Output
- [What files should be created or modified]
- [What the end result should look like]
- [How to verify it works]Best practices
Be specific, not generic
# Bad — too vague
Create a new feature for the app.
# Good — specific and actionable
Create a webhook handler for Stripe events at src/app/api/webhook/stripe/route.ts.
Verify the webhook signature using the STRIPE_WEBHOOK_SECRET env var.
Handle these events: checkout.session.completed, customer.subscription.updated,
customer.subscription.deleted.
Update the subscriptions table in the database for each event.Reference existing patterns
Point the AI to existing code it should follow:
## Context
Look at src/app/api/webhook/dodo/route.ts for the webhook pattern.
Follow the same structure: verify signature, parse event, switch on event type,
update database.
Look at src/lib/payments/webhook.ts for how webhook handlers are organized.Include file paths
Always tell the AI where to put files:
## Output
Create these files:
- src/app/api/teams/route.ts — GET (list) and POST (create) handlers
- src/app/api/teams/[id]/route.ts — GET, PATCH, DELETE handlers
- src/lib/teams/service.ts — business logic
- src/db/schema/teams.ts — database table definition
- src/components/dashboard/team-list.tsx — team list componentAdd constraints
Prevent common mistakes:
## Constraints
- Use server components by default, "use client" only when needed
- Validate all inputs with zod schemas
- Return proper HTTP status codes (201 for created, 404 for not found)
- Never expose internal error messages to the client
- Use the existing auth middleware pattern from src/lib/auth/middleware.ts
- Follow the immutable data pattern — never mutate objectsExample: Custom recipe for adding a notification system
# Task: Add an in-app notification system
## Context
You are working on a Next.js SaaS application. Read CLAUDE.md for full project context.
The app currently has auth (Better Auth), payments (DodoPayments), and email (Resend).
We want to add in-app notifications that appear in the dashboard header.
## Instructions
1. Create the database schema:
- Add a `notifications` table in src/db/schema/notifications.ts
- Fields: id, userId, title, message, type (info/success/warning/error),
read (boolean), createdAt
- Add proper indexes on userId and createdAt
2. Create the notification service:
- Add src/lib/notifications/service.ts
- Functions: createNotification, getUserNotifications, markAsRead, markAllAsRead
- Follow the pattern in src/lib/payments/dodo.ts for database queries
3. Create API routes:
- GET src/app/api/notifications/route.ts — list user notifications (paginated)
- PATCH src/app/api/notifications/[id]/route.ts — mark as read
- POST src/app/api/notifications/mark-all-read/route.ts — mark all as read
- All routes require authentication (check session like src/app/api/checkout/route.ts)
4. Create the UI:
- Add src/components/dashboard/notification-bell.tsx — bell icon with unread count
- Add src/components/dashboard/notification-dropdown.tsx — dropdown list
- Add the bell to the dashboard header in src/components/dashboard/header.tsx
- Use shadcn/ui Popover for the dropdown
5. Add notification triggers:
- After successful payment: "Your subscription is now active"
- After plan change: "Your plan has been updated to {plan}"
- Wire these into the existing webhook handler
## Constraints
- Notifications are fetched client-side with SWR or React Query
- The bell component must be a client component ("use client")
- Limit to 50 notifications per fetch, ordered by createdAt desc
- Unread count should update without full page refresh
- Follow existing component patterns in src/components/dashboard/
## Output
Files created:
- src/db/schema/notifications.ts
- src/lib/notifications/service.ts
- src/app/api/notifications/route.ts
- src/app/api/notifications/[id]/route.ts
- src/app/api/notifications/mark-all-read/route.ts
- src/components/dashboard/notification-bell.tsx
- src/components/dashboard/notification-dropdown.tsx
Files modified:
- src/components/dashboard/header.tsx (add notification bell)
- src/lib/payments/webhook.ts (add notification triggers)
- src/db/schema/index.ts (export new table)
Verify by:
1. Run pnpm db:push to create the table
2. Log in and check the dashboard header for the bell icon
3. Trigger a payment webhook and verify the notification appearsOrganizing your recipes
As your project grows, organize recipes by domain:
prompts/
├── implement.md # General: build a feature
├── review.md # General: code review
├── fix-bug.md # General: debug
├── add-api.md # General: API endpoint
├── add-page.md # General: new page
├── add-component.md # General: UI component
├── refactor.md # General: refactor
├── test.md # General: write tests
├── deploy.md # General: deployment
├── security.md # General: security audit
├── performance.md # General: performance
├── document.md # General: documentation
└── custom/ # Your project-specific recipes
├── add-notifications.md
├── add-team-feature.md
└── migrate-to-v2.mdNext steps
- Recipe List — see all 12 built-in recipes for inspiration
- How to Use — run your new recipe with Claude Code or Cursor