bps-kit 1.0.2 → 1.0.4
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.
- package/bin/cli.js +4 -4
- package/package.json +1 -1
- package/templates/{.agents → agents-template}/rules/GEMINI.md +5 -5
- package/templates/skills_extra/nodejs-best-practices/SKILL.md +8 -2
- package/templates/skills_normal/api-patterns/SKILL.md +7 -2
- package/templates/skills_normal/app-builder/SKILL.md +8 -3
- package/templates/skills_normal/app-builder/tech-stack.md +2 -2
- package/templates/skills_normal/app-builder/templates/SKILL.md +7 -2
- package/templates/skills_normal/app-builder/templates/nextjs-fullstack/TEMPLATE.md +39 -79
- package/templates/skills_normal/app-builder/templates/nextjs-saas/TEMPLATE.md +53 -75
- package/templates/skills_normal/app-builder/templates/nextjs-static/TEMPLATE.md +56 -119
- package/templates/skills_normal/app-builder/templates/nuxt-app/TEMPLATE.md +61 -94
- package/templates/skills_normal/app-builder/templates/react-native-app/TEMPLATE.md +56 -82
- package/templates/skills_normal/behavioral-modes/SKILL.md +7 -2
- package/templates/skills_normal/brainstorming/SKILL.md +173 -104
- package/templates/skills_normal/clean-code/SKILL.md +90 -197
- package/templates/skills_normal/database-design/SKILL.md +7 -2
- package/templates/skills_normal/frontend-design/LICENSE.txt +177 -0
- package/templates/skills_normal/frontend-design/SKILL.md +172 -313
- package/templates/skills_normal/lint-and-validate/SKILL.md +7 -2
- package/templates/skills_normal/lint-and-validate/scripts/lint_runner.py +2 -14
- package/templates/skills_normal/performance-profiling/SKILL.md +7 -2
- package/templates/skills_normal/plan-writing/SKILL.md +4 -2
- package/templates/skills_normal/seo-fundamentals/SKILL.md +125 -79
- package/templates/skills_normal/systematic-debugging/CREATION-LOG.md +119 -0
- package/templates/skills_normal/systematic-debugging/SKILL.md +275 -85
- package/templates/skills_normal/systematic-debugging/condition-based-waiting-example.ts +158 -0
- package/templates/skills_normal/systematic-debugging/condition-based-waiting.md +115 -0
- package/templates/skills_normal/systematic-debugging/defense-in-depth.md +122 -0
- package/templates/skills_normal/systematic-debugging/find-polluter.sh +63 -0
- package/templates/skills_normal/systematic-debugging/root-cause-tracing.md +169 -0
- package/templates/skills_normal/systematic-debugging/test-academic.md +14 -0
- package/templates/skills_normal/systematic-debugging/test-pressure-1.md +58 -0
- package/templates/skills_normal/systematic-debugging/test-pressure-2.md +68 -0
- package/templates/skills_normal/systematic-debugging/test-pressure-3.md +69 -0
- package/templates/skills_normal/tailwind-patterns/SKILL.md +8 -2
- package/templates/skills_normal/testing-patterns/SKILL.md +212 -125
- package/templates/skills_normal/vulnerability-scanner/SKILL.md +7 -2
- package/templates/.agents/agents/backend-specialist.md +0 -263
- package/templates/.agents/agents/code-archaeologist.md +0 -106
- package/templates/.agents/agents/database-architect.md +0 -226
- package/templates/.agents/agents/debugger.md +0 -225
- package/templates/.agents/agents/devops-engineer.md +0 -242
- package/templates/.agents/agents/documentation-writer.md +0 -104
- package/templates/.agents/agents/explorer-agent.md +0 -73
- package/templates/.agents/agents/frontend-specialist.md +0 -593
- package/templates/.agents/agents/game-developer.md +0 -162
- package/templates/.agents/agents/mobile-developer.md +0 -377
- package/templates/.agents/agents/orchestrator.md +0 -416
- package/templates/.agents/agents/penetration-tester.md +0 -188
- package/templates/.agents/agents/performance-optimizer.md +0 -187
- package/templates/.agents/agents/product-manager.md +0 -112
- package/templates/.agents/agents/product-owner.md +0 -95
- package/templates/.agents/agents/project-planner.md +0 -406
- package/templates/.agents/agents/qa-automation-engineer.md +0 -103
- package/templates/.agents/agents/security-auditor.md +0 -170
- package/templates/.agents/agents/seo-specialist.md +0 -111
- package/templates/.agents/agents/test-engineer.md +0 -158
- package/templates/.agents/scripts/auto_preview.py +0 -148
- package/templates/.agents/scripts/checklist.py +0 -217
- package/templates/.agents/scripts/session_manager.py +0 -120
- package/templates/.agents/scripts/verify_all.py +0 -327
- package/templates/.agents/workflows/brainstorm.md +0 -113
- package/templates/.agents/workflows/create.md +0 -59
- package/templates/.agents/workflows/debug.md +0 -103
- package/templates/.agents/workflows/deploy.md +0 -176
- package/templates/.agents/workflows/enhance.md +0 -63
- package/templates/.agents/workflows/orchestrate.md +0 -237
- package/templates/.agents/workflows/plan.md +0 -89
- package/templates/.agents/workflows/preview.md +0 -81
- package/templates/.agents/workflows/status.md +0 -86
- package/templates/.agents/workflows/test.md +0 -144
- package/templates/.agents/workflows/ui-ux-pro-max.md +0 -296
- package/templates/skills_normal/brainstorming/dynamic-questioning.md +0 -350
- package/templates/skills_normal/frontend-design/animation-guide.md +0 -331
- package/templates/skills_normal/frontend-design/color-system.md +0 -311
- package/templates/skills_normal/frontend-design/decision-trees.md +0 -418
- package/templates/skills_normal/frontend-design/motion-graphics.md +0 -306
- package/templates/skills_normal/frontend-design/scripts/accessibility_checker.py +0 -183
- package/templates/skills_normal/frontend-design/scripts/ux_audit.py +0 -722
- package/templates/skills_normal/frontend-design/typography-system.md +0 -345
- package/templates/skills_normal/frontend-design/ux-psychology.md +0 -1116
- package/templates/skills_normal/frontend-design/visual-effects.md +0 -383
- package/templates/skills_normal/testing-patterns/scripts/test_runner.py +0 -219
- /package/templates/{.agents → agents-template}/workflows/setup-brain.md +0 -0
package/bin/cli.js
CHANGED
|
@@ -42,22 +42,22 @@ async function runInstaller() {
|
|
|
42
42
|
// 2. Copy Rule and Workflows
|
|
43
43
|
spinner.text = `Copiando rule máster (GEMINI.md) e Workflows de IA...`;
|
|
44
44
|
await fs.copy(
|
|
45
|
-
path.join(TEMPLATES_DIR, '
|
|
45
|
+
path.join(TEMPLATES_DIR, 'agents-template', 'rules'),
|
|
46
46
|
path.join(DEST_AGENTS, 'rules') // A rule já com paths relativos
|
|
47
47
|
);
|
|
48
48
|
await fs.copy(
|
|
49
|
-
path.join(TEMPLATES_DIR, '
|
|
49
|
+
path.join(TEMPLATES_DIR, 'agents-template', 'workflows'),
|
|
50
50
|
path.join(DEST_AGENTS, 'workflows')
|
|
51
51
|
);
|
|
52
52
|
|
|
53
53
|
// 2.1 Copy Agents and Scripts
|
|
54
54
|
spinner.text = `Copiando Personas de Agentes e Scripts (Validadores Python)...`;
|
|
55
55
|
await fs.copy(
|
|
56
|
-
path.join(TEMPLATES_DIR, '
|
|
56
|
+
path.join(TEMPLATES_DIR, 'agents-template', 'agents'),
|
|
57
57
|
path.join(DEST_AGENTS, 'agents')
|
|
58
58
|
);
|
|
59
59
|
await fs.copy(
|
|
60
|
-
path.join(TEMPLATES_DIR, '
|
|
60
|
+
path.join(TEMPLATES_DIR, 'agents-template', 'scripts'),
|
|
61
61
|
path.join(DEST_AGENTS, 'scripts')
|
|
62
62
|
);
|
|
63
63
|
|
package/package.json
CHANGED
|
@@ -20,7 +20,7 @@ ANTES de escrever QUALQUER código ou resposta:
|
|
|
20
20
|
□ 1. CLASSIFICAR o request (QUESTION / SIMPLE / COMPLEX / DESIGN)
|
|
21
21
|
□ 2. ROTEAR o agente correto (frontend-specialist / backend-specialist / etc)
|
|
22
22
|
□ 3. ANUNCIAR: 🤖 **Applying knowledge of `@[agent-name]`...**
|
|
23
|
-
□ 4. LER o arquivo .md do agente (ex: .
|
|
23
|
+
□ 4. LER o arquivo .md do agente (ex: .agent/agents/frontend-specialist.md)
|
|
24
24
|
□ 5. IDENTIFICAR skills relevantes no Intent → Skill Routing Map
|
|
25
25
|
□ 6. LER cada SKILL.md relevante (view_file)
|
|
26
26
|
□ 7. ANUNCIAR: 📖 Using skill: [nome] — para CADA skill usada
|
|
@@ -135,7 +135,7 @@ After invoking any skill, explicitly say: '📖 Using skill: [skill-name]' befor
|
|
|
135
135
|
| Step | Check | If Unchecked |
|
|
136
136
|
|------|-------|--------------|
|
|
137
137
|
| 1 | Identified correct agent? | → STOP. Analyze domain first. |
|
|
138
|
-
| 2 | Read agent's `.md` file? | → STOP. Open `.
|
|
138
|
+
| 2 | Read agent's `.md` file? | → STOP. Open `.agent/agents/{agent}.md` |
|
|
139
139
|
| 3 | Announced agent? | → STOP. Add announcement. |
|
|
140
140
|
| 4 | Loaded required skills? | → STOP. Check `skills:` field. |
|
|
141
141
|
|
|
@@ -205,8 +205,8 @@ Priority: Security → Lint → Schema → Tests → UX → SEO → Lighthouse/E
|
|
|
205
205
|
|
|
206
206
|
| Task | Read |
|
|
207
207
|
|---|---|
|
|
208
|
-
| Web UI/UX | `.
|
|
209
|
-
| Mobile UI/UX | `.
|
|
208
|
+
| Web UI/UX | `.agent/frontend-specialist.md` |
|
|
209
|
+
| Mobile UI/UX | `.agent/mobile-developer.md` |
|
|
210
210
|
|
|
211
211
|
> 🔴 For design work: Open and READ the agent file. Rules are there.
|
|
212
212
|
|
|
@@ -216,4 +216,4 @@ Priority: Security → Lint → Schema → Tests → UX → SEO → Lighthouse/E
|
|
|
216
216
|
|
|
217
217
|
- **Masters**: `orchestrator`, `project-planner`, `security-auditor`, `backend-specialist`, `frontend-specialist`, `mobile-developer`, `debugger`
|
|
218
218
|
- **Key Skills**: `clean-code`, `brainstorming`, `app-builder`, `frontend-design`, `mobile-design`, `plan-writing`, `behavioral-modes`
|
|
219
|
-
- **Verify**: `.
|
|
219
|
+
- **Verify**: `.agent/scripts/verify_all.py`, `.agent/scripts/checklist.py`
|
|
@@ -1,7 +1,9 @@
|
|
|
1
1
|
---
|
|
2
2
|
name: nodejs-best-practices
|
|
3
|
-
description: Node.js development principles and decision-making. Framework selection, async patterns, security, and architecture. Teaches thinking, not copying.
|
|
4
|
-
|
|
3
|
+
description: "Node.js development principles and decision-making. Framework selection, async patterns, security, and architecture. Teaches thinking, not copying."
|
|
4
|
+
risk: unknown
|
|
5
|
+
source: community
|
|
6
|
+
date_added: "2026-02-27"
|
|
5
7
|
---
|
|
6
8
|
|
|
7
9
|
# Node.js Best Practices
|
|
@@ -9,6 +11,10 @@ allowed-tools: Read, Write, Edit, Glob, Grep
|
|
|
9
11
|
> Principles and decision-making for Node.js development in 2025.
|
|
10
12
|
> **Learn to THINK, not memorize code patterns.**
|
|
11
13
|
|
|
14
|
+
## When to Use
|
|
15
|
+
|
|
16
|
+
Use this skill when making Node.js architecture decisions, choosing frameworks, designing async patterns, or applying security and deployment best practices.
|
|
17
|
+
|
|
12
18
|
---
|
|
13
19
|
|
|
14
20
|
## ⚠️ How to Use This Skill
|
|
@@ -1,7 +1,9 @@
|
|
|
1
1
|
---
|
|
2
2
|
name: api-patterns
|
|
3
|
-
description: API design principles and decision-making. REST vs GraphQL vs tRPC selection, response formats, versioning, pagination.
|
|
4
|
-
|
|
3
|
+
description: "API design principles and decision-making. REST vs GraphQL vs tRPC selection, response formats, versioning, pagination."
|
|
4
|
+
risk: unknown
|
|
5
|
+
source: community
|
|
6
|
+
date_added: "2026-02-27"
|
|
5
7
|
---
|
|
6
8
|
|
|
7
9
|
# API Patterns
|
|
@@ -79,3 +81,6 @@ Before designing an API:
|
|
|
79
81
|
|--------|---------|---------|
|
|
80
82
|
| `scripts/api_validator.py` | API endpoint validation | `python scripts/api_validator.py <project_path>` |
|
|
81
83
|
|
|
84
|
+
|
|
85
|
+
## When to Use
|
|
86
|
+
This skill is applicable to execute the workflow or actions described in the overview.
|
|
@@ -1,7 +1,9 @@
|
|
|
1
1
|
---
|
|
2
2
|
name: app-builder
|
|
3
|
-
description: Main application building orchestrator. Creates full-stack applications from natural language requests. Determines project type, selects tech stack, coordinates agents.
|
|
4
|
-
|
|
3
|
+
description: "Main application building orchestrator. Creates full-stack applications from natural language requests. Determines project type, selects tech stack, coordinates agents."
|
|
4
|
+
risk: unknown
|
|
5
|
+
source: community
|
|
6
|
+
date_added: "2026-02-27"
|
|
5
7
|
---
|
|
6
8
|
|
|
7
9
|
# App Builder - Application Building Orchestrator
|
|
@@ -15,7 +17,7 @@ allowed-tools: Read, Write, Edit, Glob, Grep, Bash, Agent
|
|
|
15
17
|
| File | Description | When to Read |
|
|
16
18
|
|------|-------------|--------------|
|
|
17
19
|
| `project-detection.md` | Keyword matrix, project type detection | Starting new project |
|
|
18
|
-
| `tech-stack.md` |
|
|
20
|
+
| `tech-stack.md` | 2025 default stack, alternatives | Choosing technologies |
|
|
19
21
|
| `agent-coordination.md` | Agent pipeline, execution order | Coordinating multi-agent work |
|
|
20
22
|
| `scaffolding.md` | Directory structure, core files | Creating project structure |
|
|
21
23
|
| `feature-building.md` | Feature analysis, error handling | Adding features to existing project |
|
|
@@ -73,3 +75,6 @@ App Builder Process:
|
|
|
73
75
|
5. Report progress
|
|
74
76
|
6. Start preview
|
|
75
77
|
```
|
|
78
|
+
|
|
79
|
+
## When to Use
|
|
80
|
+
This skill is applicable to execute the workflow or actions described in the overview.
|
|
@@ -1,7 +1,9 @@
|
|
|
1
1
|
---
|
|
2
2
|
name: templates
|
|
3
|
-
description: Project scaffolding templates for new applications. Use when creating new projects from scratch. Contains 12 templates for various tech stacks.
|
|
4
|
-
|
|
3
|
+
description: "Project scaffolding templates for new applications. Use when creating new projects from scratch. Contains 12 templates for various tech stacks."
|
|
4
|
+
risk: unknown
|
|
5
|
+
source: community
|
|
6
|
+
date_added: "2026-02-27"
|
|
5
7
|
---
|
|
6
8
|
|
|
7
9
|
# Project Templates
|
|
@@ -37,3 +39,6 @@ allowed-tools: Read, Glob, Grep
|
|
|
37
39
|
2. Match to appropriate template
|
|
38
40
|
3. Read ONLY that template's TEMPLATE.md
|
|
39
41
|
4. Follow its tech stack and structure
|
|
42
|
+
|
|
43
|
+
## When to Use
|
|
44
|
+
This skill is applicable to execute the workflow or actions described in the overview.
|
|
@@ -1,21 +1,20 @@
|
|
|
1
1
|
---
|
|
2
2
|
name: nextjs-fullstack
|
|
3
|
-
description: Next.js full-stack template principles. App Router, Prisma, Tailwind
|
|
3
|
+
description: Next.js full-stack template principles. App Router, Prisma, Tailwind.
|
|
4
4
|
---
|
|
5
5
|
|
|
6
|
-
# Next.js Full-Stack Template
|
|
6
|
+
# Next.js Full-Stack Template
|
|
7
7
|
|
|
8
8
|
## Tech Stack
|
|
9
9
|
|
|
10
|
-
| Component | Technology |
|
|
11
|
-
|
|
12
|
-
| Framework | Next.js
|
|
13
|
-
| Language | TypeScript |
|
|
14
|
-
| Database | PostgreSQL
|
|
15
|
-
| Styling | Tailwind CSS |
|
|
16
|
-
| Auth | Clerk
|
|
17
|
-
|
|
|
18
|
-
| Validation | Zod | Schema validation (API & Forms) |
|
|
10
|
+
| Component | Technology |
|
|
11
|
+
|-----------|------------|
|
|
12
|
+
| Framework | Next.js 14 (App Router) |
|
|
13
|
+
| Language | TypeScript |
|
|
14
|
+
| Database | PostgreSQL + Prisma |
|
|
15
|
+
| Styling | Tailwind CSS |
|
|
16
|
+
| Auth | Clerk (optional) |
|
|
17
|
+
| Validation | Zod |
|
|
19
18
|
|
|
20
19
|
---
|
|
21
20
|
|
|
@@ -24,40 +23,33 @@ description: Next.js full-stack template principles. App Router, Prisma, Tailwin
|
|
|
24
23
|
```
|
|
25
24
|
project-name/
|
|
26
25
|
├── prisma/
|
|
27
|
-
│ └── schema.prisma
|
|
26
|
+
│ └── schema.prisma
|
|
28
27
|
├── src/
|
|
29
28
|
│ ├── app/
|
|
30
|
-
│ │ ├──
|
|
31
|
-
│ │ ├──
|
|
32
|
-
│ │ ├──
|
|
33
|
-
│ │
|
|
34
|
-
│ │ ├── page.tsx # Landing Page
|
|
35
|
-
│ │ └── globals.css # Tailwind v4 config (@theme) lives here
|
|
29
|
+
│ │ ├── layout.tsx
|
|
30
|
+
│ │ ├── page.tsx
|
|
31
|
+
│ │ ├── globals.css
|
|
32
|
+
│ │ └── api/
|
|
36
33
|
│ ├── components/
|
|
37
|
-
│ │
|
|
38
|
-
│ │ └── forms/ # Client forms using useActionState
|
|
34
|
+
│ │ └── ui/
|
|
39
35
|
│ ├── lib/
|
|
40
|
-
│ │ ├── db.ts
|
|
41
|
-
│ │
|
|
42
|
-
│
|
|
43
|
-
|
|
44
|
-
│ └── types/ # Global TS Types
|
|
45
|
-
├── public/
|
|
46
|
-
├── next.config.ts # TypeScript Config
|
|
36
|
+
│ │ ├── db.ts # Prisma client
|
|
37
|
+
│ │ └── utils.ts
|
|
38
|
+
│ └── types/
|
|
39
|
+
├── .env.example
|
|
47
40
|
└── package.json
|
|
48
41
|
```
|
|
49
42
|
|
|
50
43
|
---
|
|
51
44
|
|
|
52
|
-
## Key Concepts
|
|
45
|
+
## Key Concepts
|
|
53
46
|
|
|
54
47
|
| Concept | Description |
|
|
55
48
|
|---------|-------------|
|
|
56
|
-
| Server Components |
|
|
57
|
-
| Server Actions |
|
|
58
|
-
|
|
|
59
|
-
|
|
|
60
|
-
| Tailwind v4 | Styling engine. No tailwind.config.js. Config directly in CSS. |
|
|
49
|
+
| Server Components | Default, fetch data |
|
|
50
|
+
| Server Actions | Form mutations |
|
|
51
|
+
| Route Handlers | API endpoints |
|
|
52
|
+
| Prisma | Type-safe ORM |
|
|
61
53
|
|
|
62
54
|
---
|
|
63
55
|
|
|
@@ -65,58 +57,26 @@ project-name/
|
|
|
65
57
|
|
|
66
58
|
| Variable | Purpose |
|
|
67
59
|
|----------|---------|
|
|
68
|
-
| DATABASE_URL |
|
|
69
|
-
| NEXT_PUBLIC_APP_URL | Public
|
|
70
|
-
| NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY | Auth (if using Clerk) |
|
|
71
|
-
| CLERK_SECRET_KEY | Auth Secret (Server only) |
|
|
60
|
+
| DATABASE_URL | Prisma connection |
|
|
61
|
+
| NEXT_PUBLIC_APP_URL | Public URL |
|
|
72
62
|
|
|
73
63
|
---
|
|
74
64
|
|
|
75
65
|
## Setup Steps
|
|
76
66
|
|
|
77
|
-
1.
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
2. Install DB & Validation:
|
|
85
|
-
```bash
|
|
86
|
-
npm install prisma @prisma/client zod
|
|
87
|
-
npm install -D ts-node # For running seed scripts
|
|
88
|
-
```
|
|
89
|
-
|
|
90
|
-
3. Configure Tailwind v4 (If missing):
|
|
91
|
-
Ensure `src/app/globals.css` uses the new import syntax instead of a config file:
|
|
92
|
-
```css
|
|
93
|
-
@import "tailwindcss";
|
|
94
|
-
|
|
95
|
-
@theme {
|
|
96
|
-
--color-primary: oklch(0.5 0.2 240);
|
|
97
|
-
--font-sans: "Inter", sans-serif;
|
|
98
|
-
}
|
|
99
|
-
```
|
|
100
|
-
|
|
101
|
-
4. Initialize Database:
|
|
102
|
-
```bash
|
|
103
|
-
npx prisma init
|
|
104
|
-
# Update schema.prisma
|
|
105
|
-
npm run db:push
|
|
106
|
-
```
|
|
107
|
-
|
|
108
|
-
5. Run Developer Server:
|
|
109
|
-
```bash
|
|
110
|
-
npm run dev --turbo
|
|
111
|
-
# --turbo to enable faster Turbopack
|
|
112
|
-
```
|
|
67
|
+
1. `npx create-next-app {{name}} --typescript --tailwind --app`
|
|
68
|
+
2. `npm install prisma @prisma/client zod`
|
|
69
|
+
3. `npx prisma init`
|
|
70
|
+
4. Configure schema
|
|
71
|
+
5. `npm run db:push`
|
|
72
|
+
6. `npm run dev`
|
|
113
73
|
|
|
114
74
|
---
|
|
115
75
|
|
|
116
|
-
## Best Practices
|
|
76
|
+
## Best Practices
|
|
117
77
|
|
|
118
|
-
-
|
|
119
|
-
-
|
|
120
|
-
-
|
|
121
|
-
-
|
|
122
|
-
-
|
|
78
|
+
- Server Components by default
|
|
79
|
+
- Server Actions for mutations
|
|
80
|
+
- Prisma for type-safe DB
|
|
81
|
+
- Zod for validation
|
|
82
|
+
- Edge runtime where possible
|
|
@@ -1,21 +1,20 @@
|
|
|
1
1
|
---
|
|
2
2
|
name: nextjs-saas
|
|
3
|
-
description: Next.js SaaS template principles
|
|
3
|
+
description: Next.js SaaS template principles. Auth, payments, email.
|
|
4
4
|
---
|
|
5
5
|
|
|
6
|
-
# Next.js SaaS Template
|
|
6
|
+
# Next.js SaaS Template
|
|
7
7
|
|
|
8
8
|
## Tech Stack
|
|
9
9
|
|
|
10
|
-
| Component | Technology |
|
|
11
|
-
|
|
12
|
-
| Framework | Next.js
|
|
13
|
-
|
|
|
14
|
-
|
|
|
15
|
-
|
|
|
16
|
-
|
|
|
17
|
-
|
|
|
18
|
-
| UI | Tailwind CSS | v4 (Oxide Engine, no config file) |
|
|
10
|
+
| Component | Technology |
|
|
11
|
+
|-----------|------------|
|
|
12
|
+
| Framework | Next.js 14 (App Router) |
|
|
13
|
+
| Auth | NextAuth.js v5 |
|
|
14
|
+
| Payments | Stripe |
|
|
15
|
+
| Database | PostgreSQL + Prisma |
|
|
16
|
+
| Email | Resend |
|
|
17
|
+
| UI | Tailwind (ASK USER: shadcn/Headless UI/Custom?) |
|
|
19
18
|
|
|
20
19
|
---
|
|
21
20
|
|
|
@@ -24,28 +23,24 @@ description: Next.js SaaS template principles (2026 Standards). React 19, Server
|
|
|
24
23
|
```
|
|
25
24
|
project-name/
|
|
26
25
|
├── prisma/
|
|
27
|
-
│ └── schema.prisma # Database Schema
|
|
28
26
|
├── src/
|
|
29
|
-
│ ├── actions/ # NEW: Server Actions (Replaces API Routes for data mutation)
|
|
30
|
-
│ │ ├── auth-actions.ts
|
|
31
|
-
│ │ ├── billing-actions.ts
|
|
32
|
-
│ │ └── user-actions.ts
|
|
33
27
|
│ ├── app/
|
|
34
|
-
│ │ ├── (auth)/ #
|
|
35
|
-
│ │ ├── (dashboard)/ #
|
|
36
|
-
│ │ ├── (marketing)/ #
|
|
37
|
-
│ │ └── api/
|
|
28
|
+
│ │ ├── (auth)/ # Login, register
|
|
29
|
+
│ │ ├── (dashboard)/ # Protected routes
|
|
30
|
+
│ │ ├── (marketing)/ # Landing, pricing
|
|
31
|
+
│ │ └── api/
|
|
32
|
+
│ │ ├── auth/[...nextauth]/
|
|
38
33
|
│ │ └── webhooks/stripe/
|
|
39
34
|
│ ├── components/
|
|
40
|
-
│ │ ├──
|
|
41
|
-
│ │ ├──
|
|
42
|
-
│ │ └──
|
|
35
|
+
│ │ ├── auth/
|
|
36
|
+
│ │ ├── billing/
|
|
37
|
+
│ │ └── dashboard/
|
|
43
38
|
│ ├── lib/
|
|
44
|
-
│ │ ├── auth.ts #
|
|
45
|
-
│ │ ├──
|
|
46
|
-
│ │ └──
|
|
47
|
-
│ └──
|
|
48
|
-
│ └──
|
|
39
|
+
│ │ ├── auth.ts # NextAuth config
|
|
40
|
+
│ │ ├── stripe.ts # Stripe client
|
|
41
|
+
│ │ └── email.ts # Resend client
|
|
42
|
+
│ └── config/
|
|
43
|
+
│ └── subscriptions.ts
|
|
49
44
|
└── package.json
|
|
50
45
|
```
|
|
51
46
|
|
|
@@ -55,22 +50,21 @@ project-name/
|
|
|
55
50
|
|
|
56
51
|
| Feature | Implementation |
|
|
57
52
|
|---------|---------------|
|
|
58
|
-
| Auth |
|
|
59
|
-
|
|
|
60
|
-
|
|
|
61
|
-
| Webhooks |
|
|
53
|
+
| Auth | NextAuth + OAuth |
|
|
54
|
+
| Subscriptions | Stripe Checkout |
|
|
55
|
+
| Billing Portal | Stripe Portal |
|
|
56
|
+
| Webhooks | Stripe events |
|
|
62
57
|
| Email | Transactional via Resend |
|
|
63
|
-
| Validation | Zod (Server-side validation) |
|
|
64
58
|
|
|
65
59
|
---
|
|
66
60
|
|
|
67
61
|
## Database Schema
|
|
68
62
|
|
|
69
|
-
| Model | Fields
|
|
70
|
-
|
|
71
|
-
| User | id, email, stripeCustomerId, subscriptionId
|
|
72
|
-
| Account | OAuth provider data
|
|
73
|
-
| Session | User sessions
|
|
63
|
+
| Model | Fields |
|
|
64
|
+
|-------|--------|
|
|
65
|
+
| User | id, email, stripeCustomerId, subscriptionId |
|
|
66
|
+
| Account | OAuth provider data |
|
|
67
|
+
| Session | User sessions |
|
|
74
68
|
|
|
75
69
|
---
|
|
76
70
|
|
|
@@ -78,45 +72,29 @@ project-name/
|
|
|
78
72
|
|
|
79
73
|
| Variable | Purpose |
|
|
80
74
|
|----------|---------|
|
|
81
|
-
| DATABASE_URL | Prisma
|
|
82
|
-
|
|
|
83
|
-
| STRIPE_SECRET_KEY | Payments
|
|
84
|
-
| STRIPE_WEBHOOK_SECRET |
|
|
85
|
-
| RESEND_API_KEY | Email
|
|
86
|
-
| NEXT_PUBLIC_APP_URL | Application Canonical URL |
|
|
75
|
+
| DATABASE_URL | Prisma |
|
|
76
|
+
| NEXTAUTH_SECRET | Auth |
|
|
77
|
+
| STRIPE_SECRET_KEY | Payments |
|
|
78
|
+
| STRIPE_WEBHOOK_SECRET | Webhooks |
|
|
79
|
+
| RESEND_API_KEY | Email |
|
|
87
80
|
|
|
88
81
|
---
|
|
89
82
|
|
|
90
83
|
## Setup Steps
|
|
91
84
|
|
|
92
|
-
1.
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
5. Sync Database:
|
|
110
|
-
```bash
|
|
111
|
-
npx prisma db push
|
|
112
|
-
```
|
|
113
|
-
|
|
114
|
-
6. Run local Webhook:
|
|
115
|
-
```bash
|
|
116
|
-
npm run stripe:listen
|
|
117
|
-
```
|
|
118
|
-
|
|
119
|
-
7. Run project:
|
|
120
|
-
```bash
|
|
121
|
-
npm run dev
|
|
122
|
-
```
|
|
85
|
+
1. `npx create-next-app {{name}} --typescript --tailwind --app`
|
|
86
|
+
2. Install: `npm install next-auth @auth/prisma-adapter stripe resend`
|
|
87
|
+
3. Setup Stripe products/prices
|
|
88
|
+
4. Configure environment
|
|
89
|
+
5. `npm run db:push`
|
|
90
|
+
6. `npm run stripe:listen` (webhooks)
|
|
91
|
+
7. `npm run dev`
|
|
92
|
+
|
|
93
|
+
---
|
|
94
|
+
|
|
95
|
+
## Best Practices
|
|
96
|
+
|
|
97
|
+
- Route groups for layout separation
|
|
98
|
+
- Stripe webhooks for subscription sync
|
|
99
|
+
- NextAuth with Prisma adapter
|
|
100
|
+
- Email templates with React Email
|