ultra-dex 1.7.3 → 1.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (81) hide show
  1. package/README.md +16 -2
  2. package/assets/agents/0-orchestration/orchestrator.md +225 -0
  3. package/assets/agents/00-AGENT_INDEX.md +138 -0
  4. package/assets/agents/1-leadership/cto.md +186 -0
  5. package/assets/agents/1-leadership/planner.md +205 -0
  6. package/assets/agents/1-leadership/research.md +285 -0
  7. package/assets/agents/2-development/backend.md +472 -0
  8. package/assets/agents/2-development/database.md +516 -0
  9. package/assets/agents/2-development/frontend.md +144 -0
  10. package/assets/agents/3-security/auth.md +168 -0
  11. package/assets/agents/3-security/security.md +335 -0
  12. package/assets/agents/4-devops/devops.md +587 -0
  13. package/assets/agents/5-quality/debugger.md +188 -0
  14. package/assets/agents/5-quality/documentation.md +167 -0
  15. package/assets/agents/5-quality/reviewer.md +213 -0
  16. package/assets/agents/5-quality/testing.md +280 -0
  17. package/assets/agents/6-specialist/performance.md +323 -0
  18. package/assets/agents/6-specialist/refactoring.md +343 -0
  19. package/assets/agents/AGENT-INSTRUCTIONS.md +315 -0
  20. package/assets/agents/README.md +232 -0
  21. package/assets/cursor-rules/00-ultra-dex-core.mdc +48 -0
  22. package/assets/cursor-rules/01-database.mdc +50 -0
  23. package/assets/cursor-rules/02-api.mdc +81 -0
  24. package/assets/cursor-rules/03-auth.mdc +70 -0
  25. package/assets/cursor-rules/04-frontend.mdc +92 -0
  26. package/assets/cursor-rules/05-payments.mdc +88 -0
  27. package/assets/cursor-rules/06-testing.mdc +104 -0
  28. package/assets/cursor-rules/07-security.mdc +94 -0
  29. package/assets/cursor-rules/08-deployment.mdc +92 -0
  30. package/assets/cursor-rules/09-error-handling.mdc +137 -0
  31. package/assets/cursor-rules/10-performance.mdc +123 -0
  32. package/assets/cursor-rules/11-nextjs-v15.mdc +307 -0
  33. package/assets/cursor-rules/12-multi-tenancy.mdc +282 -0
  34. package/assets/cursor-rules/README.md +78 -0
  35. package/assets/cursor-rules/load.ps1 +108 -0
  36. package/assets/cursor-rules/load.sh +102 -0
  37. package/assets/docs/BUILD-AUTH-30M.md +113 -0
  38. package/assets/docs/CHECKLIST-21-STEP.md +86 -0
  39. package/assets/docs/CODEMAP.md +229 -0
  40. package/assets/docs/CUSTOMIZATION.md +127 -0
  41. package/assets/docs/LAUNCH-POSTS.md +238 -0
  42. package/assets/docs/QUICK-REFERENCE.md +338 -0
  43. package/assets/docs/README.md +21 -0
  44. package/assets/docs/ROADMAP.md +480 -0
  45. package/assets/docs/TROUBLESHOOTING.md +148 -0
  46. package/assets/docs/TUTORIAL.md +182 -0
  47. package/assets/docs/VERIFICATION.md +108 -0
  48. package/assets/docs/VISION-V2.md +187 -0
  49. package/assets/docs/WORKFLOW-DIAGRAMS.md +463 -0
  50. package/assets/docs/index.html +550 -0
  51. package/assets/live-templates/next15-prisma-clerk/.env.example +3 -0
  52. package/assets/live-templates/next15-prisma-clerk/README.md +10 -0
  53. package/assets/live-templates/next15-prisma-clerk/app/layout.tsx +7 -0
  54. package/assets/live-templates/next15-prisma-clerk/app/page.tsx +8 -0
  55. package/assets/live-templates/next15-prisma-clerk/next.config.js +6 -0
  56. package/assets/live-templates/next15-prisma-clerk/package.json +22 -0
  57. package/assets/live-templates/next15-prisma-clerk/prisma/schema.prisma +34 -0
  58. package/assets/live-templates/remix-supabase/.env.example +2 -0
  59. package/assets/live-templates/remix-supabase/README.md +9 -0
  60. package/assets/live-templates/remix-supabase/app/root.tsx +19 -0
  61. package/assets/live-templates/remix-supabase/app/routes/_index.tsx +8 -0
  62. package/assets/live-templates/remix-supabase/app/utils/supabase.server.ts +6 -0
  63. package/assets/live-templates/remix-supabase/package.json +20 -0
  64. package/assets/live-templates/remix-supabase/remix.config.js +6 -0
  65. package/assets/live-templates/sveltekit-drizzle/.env.example +1 -0
  66. package/assets/live-templates/sveltekit-drizzle/README.md +9 -0
  67. package/assets/live-templates/sveltekit-drizzle/drizzle/schema.ts +7 -0
  68. package/assets/live-templates/sveltekit-drizzle/drizzle.config.ts +5 -0
  69. package/assets/live-templates/sveltekit-drizzle/package.json +21 -0
  70. package/assets/live-templates/sveltekit-drizzle/src/lib/db.ts +5 -0
  71. package/assets/live-templates/sveltekit-drizzle/src/routes/+page.svelte +2 -0
  72. package/assets/live-templates/sveltekit-drizzle/svelte.config.js +5 -0
  73. package/assets/live-templates/sveltekit-drizzle/vite.config.js +5 -0
  74. package/assets/saas-plan/04-Imp-Template.md +5546 -0
  75. package/assets/templates/CASE-STUDY-TEMPLATE.md +139 -0
  76. package/assets/templates/MASTER-PLAN-TEMPLATE.md +647 -0
  77. package/assets/templates/ORDER-TRACKER-TEMPLATE.md +731 -0
  78. package/assets/templates/PHASE-TRACKER-TEMPLATE.md +577 -0
  79. package/assets/templates/README.md +419 -0
  80. package/bin/ultra-dex.js +459 -31
  81. package/package.json +3 -3
@@ -0,0 +1,232 @@
1
+ # Ultra-Dex AI Agents
2
+
3
+ > 15 specialized AI agent prompts organized by production tier
4
+
5
+ ---
6
+
7
+ ## What Are Agents?
8
+
9
+ Agents are specialized AI prompts that you copy into your AI tool (Cursor, Claude, ChatGPT, etc.). Each agent has a specific role in the production pipeline and knows how to coordinate with other agents.
10
+
11
+ ---
12
+
13
+ ## Quick Reference
14
+
15
+ See [00-AGENT_INDEX.md](./00-AGENT_INDEX.md) for complete agent directory with "when to use" guidance.
16
+
17
+ ---
18
+
19
+ ## Agent Organization
20
+
21
+ Agents are organized into **6 tiers** representing the production pipeline:
22
+
23
+ ### 1. Leadership Tier (`1-leadership/`)
24
+ **Strategic planning and architecture decisions**
25
+
26
+ - **[@CTO](./1-leadership/cto.md)** - Architecture & tech stack decisions
27
+ - Use for: Major features, system design, technology choices
28
+ - Example: "Should we use Next.js or separate React + Express?"
29
+
30
+ - **[@Planner](./1-leadership/planner.md)** - Task breakdown & sprint planning
31
+ - Use for: Starting any feature, breaking down complex work
32
+ - Example: "Break down 'user authentication' into implementation tasks"
33
+
34
+ - **[@Research](./1-leadership/research.md)** - Technology evaluation & comparison
35
+ - Use for: Choosing frameworks, libraries, comparing approaches
36
+ - Example: "Compare Prisma vs Drizzle ORM for PostgreSQL"
37
+
38
+ ### 2. Development Tier (`2-development/`)
39
+ **Core feature implementation**
40
+
41
+ - **[@Backend](./2-development/backend.md)** - API & server logic
42
+ - Use for: Building endpoints, business logic, server code
43
+ - Example: "Build REST API for user authentication"
44
+
45
+ - **[@Database](./2-development/database.md)** - Schema & queries
46
+ - Use for: Database changes, migrations, query optimization
47
+ - Example: "Create User and Post tables with relationships"
48
+
49
+ - **[@Frontend](./2-development/frontend.md)** - UI & components
50
+ - Use for: Building pages, components, user flows
51
+ - Example: "Build login page with form validation"
52
+
53
+ ### 3. Security Tier (`3-security/`)
54
+ **Authentication, authorization, and security audits**
55
+
56
+ - **[@Auth](./3-security/auth.md)** - Auth flows & permissions
57
+ - Use for: Login, permissions, user management
58
+ - Example: "Implement JWT authentication with refresh tokens"
59
+
60
+ - **[@Security](./3-security/security.md)** - Vulnerability audits
61
+ - Use for: Before deployment, security reviews, OWASP checks
62
+ - Example: "Audit authentication system for security vulnerabilities"
63
+
64
+ ### 4. DevOps Tier (`4-devops/`)
65
+ **Deployment and infrastructure management**
66
+
67
+ - **[@DevOps](./4-devops/devops.md)** - CI/CD & deployment
68
+ - Use for: Shipping to production, deployment pipelines
69
+ - Example: "Deploy to Vercel with PostgreSQL on Railway"
70
+
71
+ ### 5. Quality Tier (`5-quality/`)
72
+ **Testing, debugging, code review, and documentation**
73
+
74
+ - **[@Debugger](./5-quality/debugger.md)** - Bug investigation
75
+ - Use for: When something breaks, troubleshooting issues
76
+ - Example: "Fix: Login endpoint returns 500 error"
77
+
78
+ - **[@Documentation](./5-quality/documentation.md)** - Technical writing & docs maintenance
79
+ - Use for: Updating docs, API documentation, user guides
80
+ - Example: "Document API endpoints with examples"
81
+
82
+ - **[@Reviewer](./5-quality/reviewer.md)** - Code review
83
+ - Use for: Before merging, final approval, quality checks
84
+ - Example: "Review authentication implementation for best practices"
85
+
86
+ - **[@Testing](./5-quality/testing.md)** - Test automation
87
+ - Use for: Writing tests, ensuring coverage, QA
88
+ - Example: "Write unit tests for auth API (80% coverage)"
89
+
90
+ ### 6. Specialist Tier (`6-specialist/`)
91
+ **Advanced optimization and code improvement**
92
+
93
+ - **[@Performance](./6-specialist/performance.md)** - Performance optimization
94
+ - Use for: Slow pages/APIs, optimization needed
95
+ - Example: "Optimize user list page (currently 5s load time)"
96
+
97
+ - **[@Refactoring](./6-specialist/refactoring.md)** - Code quality improvement
98
+ - Use for: Cleaning up code, reducing complexity, applying patterns
99
+ - Example: "Refactor authentication code to use strategy pattern"
100
+
101
+ ---
102
+
103
+ ## How to Use
104
+
105
+ ### Single Agent (Simple Tasks)
106
+
107
+ ```
108
+ 1. Open your AI tool (Cursor, Claude, ChatGPT)
109
+ 2. Copy contents of an agent file (e.g., backend.md)
110
+ 3. Paste into chat
111
+ 4. Say: "Build the user authentication API"
112
+ 5. AI follows agent instructions + your project plan
113
+ ```
114
+
115
+ ### Multi-Agent Workflow (Complex Features)
116
+
117
+ For complex features, use multiple agents in sequence:
118
+
119
+ ```
120
+ 1. @Planner → Break down feature into tasks
121
+ 2. @CTO → Review architecture
122
+ 3. @Backend → Build API
123
+ 4. @Frontend → Build UI
124
+ 5. @Testing → Write tests
125
+ 6. @Reviewer → Code review
126
+ 7. @DevOps → Deploy
127
+ ```
128
+
129
+ See [Project Orchestration Guide](../guides/PROJECT-ORCHESTRATION.md) for complete multi-agent workflows.
130
+
131
+ ---
132
+
133
+ ## Multi-Agent Orchestration
134
+
135
+ For coordinating multiple agents on complex features, see:
136
+
137
+ **Production Guides:**
138
+ - **[Project Orchestration](../guides/PROJECT-ORCHESTRATION.md)** - Step-by-step multi-agent workflows
139
+ - **[Advanced Workflows](../guides/ADVANCED-WORKFLOWS.md)** - Stripe, emails, migrations, real-time
140
+ - **[Multi-Tool Workflow](../guides/MULTI-TOOL-WORKFLOW.md)** - Coordinate multiple AI tools
141
+
142
+ **Examples:**
143
+ - **[Orchestration Examples](../Orchestration/EXAMPLES.md)** - Real-world workflow examples
144
+ - **[Orchestration README](../Orchestration/README.md)** - Pattern overview
145
+
146
+ ---
147
+
148
+ ## Integration with Ultra-Dex
149
+
150
+ All agents are designed to work with:
151
+ - `IMPLEMENTATION-PLAN.md` - Your 34-section project plan
152
+ - `CONTEXT.md` - Project background and decisions
153
+ - `QUICK-START.md` - Core project summary
154
+ - `.cursor/rules/` - AI coding patterns (if installed)
155
+
156
+ Agents reference these files to stay aligned with your project vision.
157
+
158
+ ---
159
+
160
+ ## Customization
161
+
162
+ These are YOUR files after installing Ultra-Dex. Feel free to:
163
+
164
+ - **Modify** - Change instructions to fit your workflow
165
+ - **Delete** - Remove agents you don't need
166
+ - **Add new** - Create custom agents in appropriate tier
167
+ - **Reorganize** - Adjust tier structure as needed
168
+
169
+ ---
170
+
171
+ ## Creating Custom Agents
172
+
173
+ Follow this template:
174
+
175
+ ```markdown
176
+ # [Role Name] Agent
177
+
178
+ You are a [role description] for this project.
179
+
180
+ ## Your Context
181
+ - Read `IMPLEMENTATION-PLAN.md` for full specification
182
+ - Read `CONTEXT.md` for project background
183
+
184
+ ## Your Responsibilities
185
+ - [List specific tasks]
186
+
187
+ ## Works With
188
+ - Request review from: @[OtherAgent]
189
+ - Hand off to: @[NextAgent]
190
+
191
+ ## Quality Checklist
192
+ Before handing off work, verify:
193
+ - [ ] [Criterion 1]
194
+ - [ ] [Criterion 2]
195
+
196
+ ## Handoff Protocol
197
+ [Use standardized handoff format from other agents]
198
+ ```
199
+
200
+ ---
201
+
202
+ ## Multi-Tool Support
203
+
204
+ Ultra-Dex agents work with **ANY AI tool**:
205
+
206
+ - **Claude Code** (best for complex reasoning)
207
+ - **Cursor** (fast coding)
208
+ - **GitHub Copilot** (inline suggestions)
209
+ - **ChatGPT** (research & planning)
210
+ - **Gemini** (free alternative)
211
+
212
+ See [Multi-Tool Workflow Guide](../guides/MULTI-TOOL-WORKFLOW.md) for details.
213
+
214
+ ---
215
+
216
+ ## CLI Usage
217
+
218
+ ```bash
219
+ # List all agents
220
+ npx ultra-dex agents
221
+
222
+ # Show specific agent
223
+ npx ultra-dex agent backend
224
+
225
+ # Include agents when initializing project
226
+ npx ultra-dex init
227
+ # Answer "yes" to "Include AI agent prompts?"
228
+ ```
229
+
230
+ ---
231
+
232
+ *Part of [Ultra-Dex v1.7.0](https://github.com/Srujan0798/Ultra-Dex) - Professional AI Orchestration Meta Layer*
@@ -0,0 +1,48 @@
1
+ # Ultra-Dex Core Rules
2
+
3
+ > Load this as your base ruleset. Add domain-specific rules as needed.
4
+
5
+ ## Project Philosophy
6
+
7
+ - Build production-ready from day 1
8
+ - Every task: 4-9 hours with clear acceptance criteria
9
+ - 21-step verification for features (simplified for fixes)
10
+ - Code > Documentation (but document decisions)
11
+
12
+ ## Code Standards
13
+
14
+ - TypeScript strict mode always
15
+ - Zod validation at all API boundaries
16
+ - Error handling: never swallow errors silently
17
+ - Logging: structured JSON, include request IDs
18
+ - Tests: minimum 80% coverage for business logic
19
+
20
+ ## Architecture Defaults
21
+
22
+ - Next.js App Router (or specified framework)
23
+ - PostgreSQL with Prisma ORM
24
+ - NextAuth.js for authentication
25
+ - Stripe for payments
26
+ - Vercel for deployment
27
+
28
+ ## Task Completion Checklist (Quick 5-Step)
29
+
30
+ 1. Does it work? (Manual test)
31
+ 2. Are there tests? (Automated)
32
+ 3. Is it secure? (No secrets exposed, inputs validated)
33
+ 4. Is it documented? (Code comments for complex logic)
34
+ 5. Is it deployable? (No breaking changes)
35
+
36
+ ## When to Use Full 21-Step
37
+
38
+ - New features affecting multiple files
39
+ - Security-sensitive changes
40
+ - Database schema changes
41
+ - API contract changes
42
+
43
+ ## File Naming
44
+
45
+ - Components: PascalCase (`UserProfile.tsx`)
46
+ - Utilities: camelCase (`formatDate.ts`)
47
+ - API routes: kebab-case (`/api/user-profile`)
48
+ - Database: snake_case (`user_profiles`)
@@ -0,0 +1,50 @@
1
+ # Database Rules
2
+
3
+ ## Schema Design
4
+
5
+ - Use UUIDs for primary keys (not auto-increment)
6
+ - Always include: `id`, `createdAt`, `updatedAt`
7
+ - Soft delete with `deletedAt` for user data
8
+ - Foreign keys with `ON DELETE CASCADE` or `SET NULL` (explicit)
9
+
10
+ ## Prisma Conventions
11
+
12
+ ```prisma
13
+ model User {
14
+ id String @id @default(cuid())
15
+ email String @unique
16
+ name String?
17
+ createdAt DateTime @default(now())
18
+ updatedAt DateTime @updatedAt
19
+ deletedAt DateTime?
20
+
21
+ // Relations
22
+ posts Post[]
23
+
24
+ @@map("users")
25
+ }
26
+ ```
27
+
28
+ ## Indexes
29
+
30
+ - Always index foreign keys
31
+ - Index frequently queried fields
32
+ - Composite indexes for common query patterns
33
+
34
+ ## Migrations
35
+
36
+ - Never edit existing migrations
37
+ - Test migrations on staging before production
38
+ - Include rollback strategy for destructive changes
39
+
40
+ ## Query Patterns
41
+
42
+ - Use `select` to limit returned fields
43
+ - Paginate all list queries (default: 20 items)
44
+ - Use transactions for multi-table updates
45
+
46
+ ## Security
47
+
48
+ - Never expose internal IDs in URLs (use slugs or public IDs)
49
+ - Validate ownership before update/delete
50
+ - Rate limit database-heavy operations
@@ -0,0 +1,81 @@
1
+ # API Rules
2
+
3
+ ## Route Structure
4
+
5
+ ```
6
+ /api/
7
+ ├── auth/ # Authentication endpoints
8
+ ├── users/ # User CRUD
9
+ ├── [resource]/ # Resource CRUD
10
+ └── webhooks/ # External service webhooks
11
+ ```
12
+
13
+ ## Request Validation
14
+
15
+ ALWAYS validate with Zod at the API boundary:
16
+
17
+ ```typescript
18
+ import { z } from 'zod';
19
+
20
+ const createUserSchema = z.object({
21
+ email: z.string().email(),
22
+ name: z.string().min(1).max(100),
23
+ });
24
+
25
+ export async function POST(req: Request) {
26
+ const body = await req.json();
27
+ const data = createUserSchema.parse(body); // Throws on invalid
28
+ // ... proceed with validated data
29
+ }
30
+ ```
31
+
32
+ ## Response Format
33
+
34
+ ```typescript
35
+ // Success
36
+ { data: T, meta?: { page, total } }
37
+
38
+ // Error
39
+ { error: { code: string, message: string, details?: any } }
40
+ ```
41
+
42
+ ## HTTP Status Codes
43
+
44
+ - 200: Success (GET, PUT, PATCH)
45
+ - 201: Created (POST)
46
+ - 204: No Content (DELETE)
47
+ - 400: Bad Request (validation error)
48
+ - 401: Unauthorized (not logged in)
49
+ - 403: Forbidden (logged in, no permission)
50
+ - 404: Not Found
51
+ - 429: Rate Limited
52
+ - 500: Server Error
53
+
54
+ ## Rate Limiting
55
+
56
+ - Auth endpoints: 5 req/min
57
+ - Write endpoints: 30 req/min
58
+ - Read endpoints: 100 req/min
59
+
60
+ Use `@upstash/ratelimit` or similar.
61
+
62
+ ## Error Handling
63
+
64
+ ```typescript
65
+ try {
66
+ // operation
67
+ } catch (error) {
68
+ if (error instanceof ZodError) {
69
+ return Response.json({ error: { code: 'VALIDATION_ERROR', message: error.message } }, { status: 400 });
70
+ }
71
+ console.error('API Error:', error);
72
+ return Response.json({ error: { code: 'INTERNAL_ERROR', message: 'Something went wrong' } }, { status: 500 });
73
+ }
74
+ ```
75
+
76
+ ## Security
77
+
78
+ - Validate auth on every protected route
79
+ - Check resource ownership
80
+ - Sanitize user input
81
+ - Never expose stack traces in production
@@ -0,0 +1,70 @@
1
+ # Authentication Rules
2
+
3
+ ## Provider: NextAuth.js (Auth.js)
4
+
5
+ ## Configuration
6
+
7
+ ```typescript
8
+ // auth.ts
9
+ import NextAuth from 'next-auth';
10
+ import { PrismaAdapter } from '@auth/prisma-adapter';
11
+ import Google from 'next-auth/providers/google';
12
+ import { prisma } from '@/lib/prisma';
13
+
14
+ export const { handlers, auth, signIn, signOut } = NextAuth({
15
+ adapter: PrismaAdapter(prisma),
16
+ providers: [Google],
17
+ callbacks: {
18
+ session: ({ session, user }) => ({
19
+ ...session,
20
+ user: { ...session.user, id: user.id },
21
+ }),
22
+ },
23
+ });
24
+ ```
25
+
26
+ ## Protected Routes
27
+
28
+ ```typescript
29
+ // Server Component
30
+ import { auth } from '@/auth';
31
+ import { redirect } from 'next/navigation';
32
+
33
+ export default async function DashboardPage() {
34
+ const session = await auth();
35
+ if (!session) redirect('/login');
36
+
37
+ return <Dashboard user={session.user} />;
38
+ }
39
+ ```
40
+
41
+ ## API Route Protection
42
+
43
+ ```typescript
44
+ import { auth } from '@/auth';
45
+
46
+ export async function GET() {
47
+ const session = await auth();
48
+ if (!session) {
49
+ return Response.json({ error: { code: 'UNAUTHORIZED' } }, { status: 401 });
50
+ }
51
+ // ... proceed
52
+ }
53
+ ```
54
+
55
+ ## Role-Based Access
56
+
57
+ ```typescript
58
+ // Check role in session callback or middleware
59
+ if (session.user.role !== 'ADMIN') {
60
+ return Response.json({ error: { code: 'FORBIDDEN' } }, { status: 403 });
61
+ }
62
+ ```
63
+
64
+ ## Security Checklist
65
+
66
+ - [ ] Session expiry configured (default: 30 days)
67
+ - [ ] CSRF protection enabled (NextAuth default)
68
+ - [ ] Secure cookies in production
69
+ - [ ] Rate limit login attempts
70
+ - [ ] Log authentication events
@@ -0,0 +1,92 @@
1
+ # Frontend Rules
2
+
3
+ ## Component Structure
4
+
5
+ ```
6
+ src/
7
+ ├── app/ # Next.js App Router pages
8
+ ├── components/
9
+ │ ├── ui/ # Reusable UI (Button, Input, Modal)
10
+ │ ├── features/ # Feature-specific (TaskCard, UserAvatar)
11
+ │ └── layout/ # Layout (Header, Footer, Sidebar)
12
+ ├── hooks/ # Custom React hooks
13
+ ├── lib/ # Utilities (api, utils, constants)
14
+ └── types/ # TypeScript types
15
+ ```
16
+
17
+ ## Component Patterns
18
+
19
+ ### Server vs Client Components
20
+
21
+ ```typescript
22
+ // Default: Server Component (no 'use client')
23
+ // Use for: data fetching, SEO, static content
24
+
25
+ // Client Component
26
+ 'use client';
27
+ // Use for: interactivity, useState, useEffect, event handlers
28
+ ```
29
+
30
+ ### Props Interface
31
+
32
+ ```typescript
33
+ interface ButtonProps {
34
+ variant?: 'primary' | 'secondary' | 'danger';
35
+ size?: 'sm' | 'md' | 'lg';
36
+ loading?: boolean;
37
+ children: React.ReactNode;
38
+ onClick?: () => void;
39
+ }
40
+
41
+ export function Button({ variant = 'primary', size = 'md', ...props }: ButtonProps) {
42
+ // ...
43
+ }
44
+ ```
45
+
46
+ ## State Management
47
+
48
+ - Local state: `useState`
49
+ - Form state: `react-hook-form` + Zod
50
+ - Server state: `@tanstack/react-query` or Server Components
51
+ - Global state: Zustand (if needed)
52
+
53
+ ## Data Fetching
54
+
55
+ ```typescript
56
+ // Server Component (preferred)
57
+ async function TaskList() {
58
+ const tasks = await prisma.task.findMany();
59
+ return <ul>{tasks.map(t => <li key={t.id}>{t.title}</li>)}</ul>;
60
+ }
61
+
62
+ // Client Component with React Query
63
+ const { data, isLoading } = useQuery({
64
+ queryKey: ['tasks'],
65
+ queryFn: () => fetch('/api/tasks').then(r => r.json()),
66
+ });
67
+ ```
68
+
69
+ ## Forms
70
+
71
+ ```typescript
72
+ import { useForm } from 'react-hook-form';
73
+ import { zodResolver } from '@hookform/resolvers/zod';
74
+
75
+ const form = useForm({
76
+ resolver: zodResolver(taskSchema),
77
+ defaultValues: { title: '', description: '' },
78
+ });
79
+ ```
80
+
81
+ ## Loading & Error States
82
+
83
+ - Always show loading indicator
84
+ - Always handle error state
85
+ - Use Suspense boundaries for streaming
86
+
87
+ ## Accessibility
88
+
89
+ - Semantic HTML (button, nav, main, article)
90
+ - ARIA labels for icons
91
+ - Keyboard navigation support
92
+ - Focus management in modals
@@ -0,0 +1,88 @@
1
+ # Payments Rules (Stripe)
2
+
3
+ ## Setup
4
+
5
+ ```typescript
6
+ // lib/stripe.ts
7
+ import Stripe from 'stripe';
8
+
9
+ export const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!, {
10
+ apiVersion: '2023-10-16',
11
+ });
12
+ ```
13
+
14
+ ## Checkout Flow
15
+
16
+ ```typescript
17
+ // Create checkout session
18
+ const session = await stripe.checkout.sessions.create({
19
+ customer_email: user.email,
20
+ line_items: [{ price: priceId, quantity: 1 }],
21
+ mode: 'subscription', // or 'payment'
22
+ success_url: `${baseUrl}/success?session_id={CHECKOUT_SESSION_ID}`,
23
+ cancel_url: `${baseUrl}/pricing`,
24
+ metadata: { userId: user.id },
25
+ });
26
+
27
+ return Response.json({ url: session.url });
28
+ ```
29
+
30
+ ## Webhook Handling
31
+
32
+ ```typescript
33
+ // api/webhooks/stripe/route.ts
34
+ import { headers } from 'next/headers';
35
+
36
+ export async function POST(req: Request) {
37
+ const body = await req.text();
38
+ const signature = headers().get('stripe-signature')!;
39
+
40
+ let event: Stripe.Event;
41
+ try {
42
+ event = stripe.webhooks.constructEvent(body, signature, process.env.STRIPE_WEBHOOK_SECRET!);
43
+ } catch (err) {
44
+ return Response.json({ error: 'Invalid signature' }, { status: 400 });
45
+ }
46
+
47
+ switch (event.type) {
48
+ case 'checkout.session.completed':
49
+ await handleCheckoutComplete(event.data.object);
50
+ break;
51
+ case 'customer.subscription.updated':
52
+ await handleSubscriptionUpdate(event.data.object);
53
+ break;
54
+ case 'customer.subscription.deleted':
55
+ await handleSubscriptionCancel(event.data.object);
56
+ break;
57
+ }
58
+
59
+ return Response.json({ received: true });
60
+ }
61
+ ```
62
+
63
+ ## Database Schema
64
+
65
+ ```prisma
66
+ model Subscription {
67
+ id String @id @default(cuid())
68
+ userId String @unique
69
+ stripeCustomerId String @unique
70
+ stripeSubscriptionId String @unique
71
+ stripePriceId String
72
+ status String // active, canceled, past_due
73
+ currentPeriodEnd DateTime
74
+ user User @relation(fields: [userId], references: [id])
75
+ }
76
+ ```
77
+
78
+ ## Security
79
+
80
+ - Verify webhook signatures
81
+ - Use metadata to link Stripe to your users
82
+ - Never trust client-side payment data
83
+ - Log all payment events
84
+
85
+ ## Testing
86
+
87
+ - Use Stripe CLI for local webhooks: `stripe listen --forward-to localhost:3000/api/webhooks/stripe`
88
+ - Test cards: `4242424242424242` (success), `4000000000000002` (decline)