UX Design Setup

<aside>

Create design system in Storybook with:

• Color palette (primary/secondary/error)
• Typography scale (h1-h6, body)
• Spacing system (4px base)
• Breakpoints (mobile/tablet/desktop)
• Motion guidelines (duration/easing)
• Icon library (Lucide react)
• Form states (hover/focus/disabled)
• Dark/light theming
• Accessibility audit tools </aside>

Supabase-related Prompts

Supabase Env File Creation

<aside>

Create .env.local file with:

• VITE_SUPABASE_URL
• VITE_SUPABASE_ANON_KEY
• VITE_SUPABASE_SERVICE_ROLE_KEY (server-side only)

Add detailed comments explaining where to find each value in Supabase dashboard including:

1. Exact navigation path (Settings > API)
2. Security warnings about exposure
3. Recommended permissions for each key </aside>

Supabase Table Creation

<aside>

Create products table with SQL:

• id (UUID primary key)
• name (text)
• price (numeric)
• inventory (int)
• created_at (timestamp)
• updated_at (timestamp)

Generate migration file named 20240527_create_products.sql Add RLS policies:

• Public read access
• Admin-only write access
• Inventory visibility based on user role Include indexes for common search fields" </aside>

Real-time Query Setup

<aside>

Implement real-time product updates using:

• Supabase Realtime
• React Query subscriptions
• Optimistic UI updates
• Connection status indicators
• Error recovery flow
• Backoff retry strategy
• Browser focus reconnection

Add channel configuration with:

• Broadcast options
• Presence tracking
• Payload filtering </aside>

Persistent Error Resolution

<aside>

Fix infinite migration loop for 'on_auth_user_created':

1. Check for existing trigger
2. Conditional DROP/CREATE
3. Atomic transaction
4. Idempotent SQL
5. Verify in Supabase CLI
6. Add migration test cases
7. Document trigger lifecycle </aside>

Stripe-related Prompts

Stripe Integration

<aside>

Implement Stripe checkout with:

• Client-side elements
• Webhook verification
• Payment intent tracking
• 3D Secure
• Error recovery
• Receipt generation
• Tax calculation
• Currency conversion
• Dispute handling
• Test mode toggles Use environment variables for:
• STRIPE_PUBLIC_KEY
• STRIPE_SECRET_KEY
• WEBHOOK_SIGNING_SECRET </aside>

Stripe Integration (Detailed)