Vibe Coding Workflow Prompt Pack

Build a complete page for my [Next.js / React] application.
 
**Page purpose:** [what the page does — e.g., "settings page where users manage their profile and subscription"]
 
**Visual design:**
- Theme: dark, zinc/emerald palette (or describe your theme)
- Layout: [sidebar + content / single column / two-panel / etc.]
- Style: [minimal, clean lines, no decorative elements]
 
**Sections (top to bottom):**
1. [Section 1: describe what it shows and what users can do]
2. [Section 2: describe content and interactions]
3. [Section 3: etc.]
 

Build a React component that does this:
 
[Describe the component in plain language. Be specific about what it shows, what users can interact with, and what happens when they do. Example: "A notification dropdown that shows a list of unread notifications with timestamps, grouped by today/earlier. Each notification has a blue dot if unread. Clicking a notification marks it as read and navigates to the relevant page. The dropdown shows a count badge on the bell icon."]
 
**Tech constraints:**
- Use shadcn/ui components where possible
- Tailwind CSS for styling
- TypeScript with proper types for props
- [Client / Server] Component
 
**Props the component receives:**
- [prop 1: type and purpose]
- [prop 2: type and purpose]
 
**States it needs to handle:**
- Empty state: [what to show when there's no data]
- Loading state: [skeleton / spinner / etc.]
- Error state: [what to show on failure]
 
Build the complete component. No stubs or TODOs.

The [component/page/feature] you just built works, but I want these changes:
 
**Keep:**
- [thing that works well — be specific]
- [another thing to preserve]
 
**Change:**
- [specific change 1: "make the cards 2-column on tablet, 3-column on desktop instead of the current layout"]
- [specific change 2: "the submit button should be disabled until all required fields are filled"]
- [specific change 3]
 
**Remove:**
- [element or behavior to remove]
 
**Add:**
- [new element or behavior]
 
Apply these changes to the existing code. Don't rewrite from scratch — modify what's there. Show me only the changed parts unless the changes are so extensive that showing the full file is clearer.

I want to build [feature name] for my [project description] in one session. Let's do this in passes:
 
**Pass 1 — Data model:**
Define the types/schemas needed. [Drizzle schema / Zod types / TypeScript interfaces].
 
**Pass 2 — Backend:**
[Server Actions / API routes] for CRUD operations. Include validation and error handling.
 
**Pass 3 — UI:**
Build the page(s) and components using shadcn/ui + Tailwind.
 
**Pass 4 — Wiring:**
Connect the UI to the backend. Add loading states, error handling, optimistic updates if applicable.
 
**Feature requirements:**
- [Requirement 1]
- [Requirement 2]
- [Requirement 3]
 
Start with Pass 1. After each pass, I'll confirm or request changes before you move to the next pass. Don't skip ahead.
 
**Tech stack:** [your stack details]

Take this working [component/page] and make it production-ready:
 
```typescript
[paste current code]