@kennethsolomon/shipkit 3.18.0 → 3.20.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.
- package/README.md +25 -3
- package/package.json +1 -1
- package/skills/sk:brainstorming/SKILL.md +19 -128
- package/skills/sk:debug/SKILL.md +44 -111
- package/skills/sk:e2e/SKILL.md +45 -97
- package/skills/sk:features/SKILL.md +44 -99
- package/skills/sk:frontend-design/SKILL.md +16 -32
- package/skills/sk:laravel-deploy/SKILL.md +112 -0
- package/skills/sk:laravel-init/SKILL.md +18 -0
- package/skills/sk:lint/SKILL.md +42 -62
- package/skills/sk:mvp/SKILL.md +81 -134
- package/skills/sk:perf/SKILL.md +24 -43
- package/skills/sk:review/SKILL.md +57 -93
- package/skills/sk:security-check/SKILL.md +37 -43
- package/skills/sk:seo-audit/SKILL.md +75 -96
- package/skills/sk:setup-claude/SKILL.md +148 -0
- package/skills/sk:setup-claude/references/skill-profiles.md +201 -0
- package/skills/sk:setup-claude/templates/.claude/agents/debugger.md +7 -0
- package/skills/sk:setup-claude/templates/.claude/agents/qa-engineer.md +8 -0
- package/skills/sk:setup-claude/templates/.claude/agents/tech-writer.md +7 -0
- package/skills/sk:setup-claude/templates/.claude/rules/laravel.md.template +11 -0
- package/skills/sk:setup-claude/templates/CLAUDE.md.template +102 -244
- package/skills/sk:setup-claude/templates/commands/brainstorm.md.template +1 -1
- package/skills/sk:setup-claude/templates/commands/execute-plan.md.template +1 -1
- package/skills/sk:setup-claude/templates/commands/finish-feature.md.template +1 -1
- package/skills/sk:setup-claude/templates/commands/security-check.md.template +1 -1
- package/skills/sk:setup-claude/templates/commands/write-plan.md.template +1 -1
- package/skills/sk:setup-optimizer/SKILL.md +85 -14
- package/skills/sk:skill-creator/SKILL.md +115 -226
- package/skills/sk:website/SKILL.md +81 -149
- package/skills/sk:write-tests/SKILL.md +44 -110
|
@@ -0,0 +1,112 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: sk:laravel-deploy
|
|
3
|
+
description: "Deploy a Laravel application to Laravel Cloud via the `cloud` CLI. Requires /sk:gates to pass before deploying."
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
# /sk:laravel-deploy
|
|
7
|
+
|
|
8
|
+
Deploy the current Laravel application to Laravel Cloud.
|
|
9
|
+
|
|
10
|
+
## Pre-Deploy Gate Check
|
|
11
|
+
|
|
12
|
+
**Gates must pass before any deploy.** If `/sk:gates` has not been run since the last code change, run it first:
|
|
13
|
+
|
|
14
|
+
```
|
|
15
|
+
/sk:gates
|
|
16
|
+
```
|
|
17
|
+
|
|
18
|
+
All quality checks (lint, tests, security, review) must be green before deploying to any environment.
|
|
19
|
+
|
|
20
|
+
## Setup (First Time)
|
|
21
|
+
|
|
22
|
+
Install the Laravel Cloud CLI if missing:
|
|
23
|
+
```bash
|
|
24
|
+
composer global require laravel/cloud-cli
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
Authenticate:
|
|
28
|
+
```bash
|
|
29
|
+
cloud auth -n
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
## CLI Rules
|
|
33
|
+
|
|
34
|
+
Never hardcode command signatures — always run `cloud <command> -h` to discover options at runtime.
|
|
35
|
+
|
|
36
|
+
| Operation | Flags |
|
|
37
|
+
|-----------|-------|
|
|
38
|
+
| Read | `--json -n` |
|
|
39
|
+
| Create | `--json -n` |
|
|
40
|
+
| Update | `--json -n --force` |
|
|
41
|
+
| Delete | `-n --force` (no `--json`) |
|
|
42
|
+
| Deploy | `-n` with all options explicitly |
|
|
43
|
+
|
|
44
|
+
## Deployment Workflow
|
|
45
|
+
|
|
46
|
+
### First Deploy
|
|
47
|
+
```bash
|
|
48
|
+
cloud ship -n
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
### Existing App
|
|
52
|
+
```bash
|
|
53
|
+
cloud repo:config
|
|
54
|
+
cloud deploy {app} {env} -n --open
|
|
55
|
+
cloud deploy:monitor -n
|
|
56
|
+
```
|
|
57
|
+
|
|
58
|
+
### Environment Variables
|
|
59
|
+
```bash
|
|
60
|
+
cloud environment:variables -n --force
|
|
61
|
+
```
|
|
62
|
+
|
|
63
|
+
### Infrastructure
|
|
64
|
+
|
|
65
|
+
**Database:**
|
|
66
|
+
```bash
|
|
67
|
+
cloud database-cluster:create --json -n
|
|
68
|
+
cloud database:create --json -n
|
|
69
|
+
```
|
|
70
|
+
|
|
71
|
+
**Cache:**
|
|
72
|
+
```bash
|
|
73
|
+
cloud cache:create --json -n
|
|
74
|
+
```
|
|
75
|
+
|
|
76
|
+
**Custom Domain:**
|
|
77
|
+
```bash
|
|
78
|
+
cloud domain:create --json -n
|
|
79
|
+
cloud domain:verify -n
|
|
80
|
+
```
|
|
81
|
+
|
|
82
|
+
## Sub-Agent Delegation
|
|
83
|
+
|
|
84
|
+
Delegate to background agents (non-blocking):
|
|
85
|
+
- `deploy:monitor` — watch deployment progress
|
|
86
|
+
- `deployment:get` — fetch deployment status
|
|
87
|
+
- `resource:list` — list infrastructure resources
|
|
88
|
+
|
|
89
|
+
Keep in main context:
|
|
90
|
+
- `cloud deploy` (need deployment ID immediately)
|
|
91
|
+
- Short status commands
|
|
92
|
+
|
|
93
|
+
## Troubleshooting
|
|
94
|
+
|
|
95
|
+
Inspect current infrastructure state:
|
|
96
|
+
```bash
|
|
97
|
+
cloud <resource>:list --json -n
|
|
98
|
+
```
|
|
99
|
+
|
|
100
|
+
Check deployment logs:
|
|
101
|
+
```bash
|
|
102
|
+
cloud deployment:get {id} --json -n
|
|
103
|
+
```
|
|
104
|
+
|
|
105
|
+
## Official Plugin
|
|
106
|
+
|
|
107
|
+
For richer guidance with checklists for complex multi-step infrastructure operations, install the official plugin:
|
|
108
|
+
```
|
|
109
|
+
/plugin install laravel-cloud@laravel
|
|
110
|
+
```
|
|
111
|
+
|
|
112
|
+
Docs: https://cloud.laravel.com/docs
|
|
@@ -32,6 +32,24 @@ Behavior depends on who owns the file:
|
|
|
32
32
|
- **Generated** (has `<!-- Generated by /laravel-init -->` marker): safe to edit directly with section-level updates using `<!-- BEGIN/END -->` markers
|
|
33
33
|
- **User-owned** (no marker): never edit — create `CLAUDE-sub-agents.md` alongside it and let the user copy what they want
|
|
34
34
|
|
|
35
|
+
## Optional: Official Laravel Plugins
|
|
36
|
+
|
|
37
|
+
After setup completes, suggest the two official Laravel plugins from Taylor Otwell:
|
|
38
|
+
|
|
39
|
+
> "Install official Laravel plugins? (`laravel-simplifier` for code refinement + `laravel-cloud` for deployments) [y/n]"
|
|
40
|
+
|
|
41
|
+
If yes, install each:
|
|
42
|
+
```bash
|
|
43
|
+
/plugin install laravel-simplifier@laravel
|
|
44
|
+
/plugin install laravel-cloud@laravel
|
|
45
|
+
```
|
|
46
|
+
|
|
47
|
+
**What each adds:**
|
|
48
|
+
- `laravel-simplifier` — an Opus-powered agent that reviews recently modified PHP/Laravel code and refines it for PSR-12 compliance, Laravel conventions, and readability without changing behavior. Invoke after `/sk:execute-plan`: "Review recent changes using the laravel-simplifier agent"
|
|
49
|
+
- `laravel-cloud` — guides deployment and infrastructure management on Laravel Cloud via the `cloud` CLI. Triggers automatically when you ask about deploying. Or use `/sk:laravel-deploy` for a gate-enforced deploy workflow.
|
|
50
|
+
|
|
51
|
+
If no, skip — plugins can be installed manually at any time.
|
|
52
|
+
|
|
35
53
|
## After Running
|
|
36
54
|
|
|
37
55
|
Start with `/sk:brainstorm` to plan your feature.
|
package/skills/sk:lint/SKILL.md
CHANGED
|
@@ -30,97 +30,77 @@ Scan the project root for config files. Enable every matching stack:
|
|
|
30
30
|
| `Cargo.toml` | Rust | `cargo fmt` | `cargo clippy` |
|
|
31
31
|
|
|
32
32
|
Detection logic:
|
|
33
|
-
-
|
|
34
|
-
-
|
|
35
|
-
-
|
|
36
|
-
-
|
|
33
|
+
- `composer.json`: read `require-dev` keys for `laravel/pint`, `phpstan/phpstan`, `rector/rector`
|
|
34
|
+
- `package.json`: read `devDependencies` keys for `eslint`, `prettier`
|
|
35
|
+
- `pyproject.toml`: check `[tool.ruff]` section or `ruff` in `[project.optional-dependencies]` / `[build-system]`
|
|
36
|
+
- `go.mod` / `Cargo.toml`: presence of file is sufficient
|
|
37
37
|
|
|
38
38
|
Print detected stacks and tools before running anything.
|
|
39
39
|
|
|
40
40
|
### 3. Run Formatters — Sequential
|
|
41
41
|
|
|
42
|
-
|
|
42
|
+
Run in this order (formatters modify files — must not run in parallel):
|
|
43
43
|
|
|
44
|
-
1.
|
|
45
|
-
2.
|
|
46
|
-
3.
|
|
47
|
-
4.
|
|
48
|
-
5.
|
|
44
|
+
1. Pint: `vendor/bin/pint --dirty`
|
|
45
|
+
2. Prettier: `npx prettier --write .`
|
|
46
|
+
3. ruff format: `ruff format .`
|
|
47
|
+
4. gofmt: `gofmt -w .`
|
|
48
|
+
5. cargo fmt: `cargo fmt`
|
|
49
49
|
|
|
50
|
-
|
|
50
|
+
Note which files changed. All formatters must finish before step 4.
|
|
51
51
|
|
|
52
52
|
### 4. Run Analyzers — Parallel Sub-Agents
|
|
53
53
|
|
|
54
54
|
Launch all detected analyzers in parallel using the Agent tool in a single message:
|
|
55
55
|
|
|
56
|
-
-
|
|
57
|
-
-
|
|
58
|
-
-
|
|
59
|
-
-
|
|
60
|
-
-
|
|
61
|
-
-
|
|
56
|
+
- PHPStan: `vendor/bin/phpstan analyse --memory-limit=512M`
|
|
57
|
+
- Rector: `vendor/bin/rector --dry-run`
|
|
58
|
+
- ESLint: `npx eslint .`
|
|
59
|
+
- ruff check: `ruff check .`
|
|
60
|
+
- golangci-lint: `golangci-lint run`
|
|
61
|
+
- cargo clippy: `cargo clippy`
|
|
62
62
|
|
|
63
|
-
|
|
64
|
-
```
|
|
65
|
-
Agent 1: "Run vendor/bin/phpstan analyse --memory-limit=512M. Report all errors with file:line."
|
|
66
|
-
Agent 2: "Run vendor/bin/rector --dry-run. Report all suggested changes with file:line."
|
|
67
|
-
Agent 3: "Run npx eslint . Report all errors with file:line."
|
|
68
|
-
```
|
|
63
|
+
Each agent: "Run `<command>`. Report all errors/changes with file:line."
|
|
69
64
|
|
|
70
65
|
### 5. Run Dependency Audit
|
|
71
66
|
|
|
72
|
-
Run dependency vulnerability checks for detected stacks:
|
|
73
|
-
|
|
74
67
|
| Stack | Command | Block on |
|
|
75
68
|
|-------|---------|----------|
|
|
76
|
-
| PHP (composer.json) | `composer audit` | any severity with fix available
|
|
69
|
+
| PHP (composer.json) | `composer audit` | any severity with fix available |
|
|
77
70
|
| Node (package.json) | `npm audit --audit-level=high` | high or critical |
|
|
78
71
|
| Node (yarn.lock) | `yarn audit --level high` | high or critical |
|
|
79
72
|
| Node (pnpm-lock.yaml) | `pnpm audit --audit-level high` | high or critical |
|
|
80
73
|
| Python (pyproject.toml / requirements.txt) | `pip-audit` | high or critical |
|
|
81
74
|
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
**Block (fail this gate):**
|
|
85
|
-
- PHP: any vulnerability that has a fix available (`composer audit` exits non-zero for all severities — no filtering option exists)
|
|
86
|
-
- Node/Python: critical or high severity vulnerabilities that have a fix available
|
|
87
|
-
|
|
88
|
-
**Warn (pass with note):** medium/low severity for Node/Python, or any severity with no available fix — note in report but do not block.
|
|
75
|
+
**Block (fail this gate):** PHP: any vuln with fix available (`composer audit` exits non-zero for all severities). Node/Python: critical or high with fix available.
|
|
89
76
|
|
|
90
|
-
|
|
77
|
+
**Warn (pass with note):** medium/low for Node/Python, or any severity with no fix — log but do not block.
|
|
91
78
|
|
|
92
79
|
### 6. Fix and Re-run
|
|
93
80
|
|
|
94
|
-
|
|
81
|
+
**Classify each issue before fixing:**
|
|
95
82
|
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
- Run `git diff main..HEAD --name-only` to get the current branch diff.
|
|
99
|
-
- If the issue is in a file **not** in that list (pre-existing issue outside the current branch), do **not** fix it inline. Log it to `tasks/tech-debt.md` in this format and move on:
|
|
83
|
+
Run `git diff main..HEAD --name-only` to get branch diff.
|
|
100
84
|
|
|
85
|
+
- **Out-of-scope** (file not in branch diff): do NOT fix inline. Log to `tasks/tech-debt.md`:
|
|
101
86
|
```
|
|
102
87
|
### [YYYY-MM-DD] Found during: sk:lint
|
|
103
88
|
File: path/to/file.ext:line
|
|
104
89
|
Issue: description of the problem
|
|
105
90
|
Severity: high | medium | low
|
|
106
91
|
```
|
|
92
|
+
- **In-scope** (file in branch diff): fix it.
|
|
107
93
|
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
**Fix loop (in-scope issues only):**
|
|
94
|
+
**Fix loop (in-scope only):**
|
|
111
95
|
1. Fix all in-scope issues
|
|
112
|
-
2. Re-run formatters
|
|
96
|
+
2. Re-run formatters
|
|
113
97
|
3. Re-launch all analyzers in parallel
|
|
114
98
|
4. Re-run dep audit if any dependency was fixed
|
|
115
|
-
5.
|
|
116
|
-
6.
|
|
117
|
-
|
|
118
|
-
> Squash gate commits — collect all fixes for the pass, then one commit. Do not commit after each individual fix.
|
|
99
|
+
5. Repeat from step 3 until all tools exit clean
|
|
100
|
+
6. Make ONE squash commit: `fix(lint): resolve lint and dep audit issues` — do NOT ask the user
|
|
119
101
|
|
|
120
102
|
### 7. Report Results
|
|
121
103
|
|
|
122
|
-
Print one line per tool:
|
|
123
|
-
|
|
124
104
|
```
|
|
125
105
|
Pint: X files formatted / clean
|
|
126
106
|
Prettier: X files formatted / clean
|
|
@@ -143,23 +123,23 @@ Only include lines for detected tools. All must show "clean" before this skill p
|
|
|
143
123
|
|
|
144
124
|
## Fix & Retest Protocol
|
|
145
125
|
|
|
146
|
-
|
|
126
|
+
Classify every fix before committing:
|
|
147
127
|
|
|
148
|
-
**a. Formatter auto-fix** (Pint, Prettier, gofmt, cargo fmt changed whitespace/style) → auto-commit and re-run
|
|
128
|
+
**a. Formatter auto-fix** (Pint, Prettier, gofmt, cargo fmt changed whitespace/style) → auto-commit and re-run. Never a logic change — bypass protocol.
|
|
149
129
|
|
|
150
|
-
**b. Analyzer fix** (PHPStan
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
130
|
+
**b. Analyzer fix** (PHPStan, Rector, ESLint, ruff) — classify:
|
|
131
|
+
- Type annotation, import order, unused var, style rule → **style fix** → auto-commit and re-run
|
|
132
|
+
- New guard clause, changed condition, extracted function, modified data flow → **logic change** → protocol:
|
|
133
|
+
1. Update or add failing unit tests for the new behavior
|
|
134
|
+
2. Re-run `/sk:test` — must pass at 100% coverage
|
|
135
|
+
3. Auto-commit (tests + fix together)
|
|
136
|
+
4. Re-run `/sk:lint` from scratch
|
|
157
137
|
|
|
158
|
-
**c. Dependency vulnerability fix**
|
|
159
|
-
|
|
160
|
-
|
|
138
|
+
**c. Dependency vulnerability fix** — classify:
|
|
139
|
+
- Version bump, no API change → **style fix** → auto-commit and re-run
|
|
140
|
+
- Version bump with API/behavior change → **logic change** → trigger protocol
|
|
161
141
|
|
|
162
|
-
All commits
|
|
142
|
+
All commits are automatic — do not prompt the user.
|
|
163
143
|
|
|
164
144
|
---
|
|
165
145
|
|
package/skills/sk:mvp/SKILL.md
CHANGED
|
@@ -21,60 +21,44 @@ Generate a complete, aesthetically polished MVP from a single idea prompt. Outpu
|
|
|
21
21
|
|
|
22
22
|
## Step 1 — Gather the Idea
|
|
23
23
|
|
|
24
|
-
Ask
|
|
24
|
+
Ask: **"What's your product idea? Describe it in 1-3 sentences — what does it do and who is it for?"**
|
|
25
25
|
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
Extract from their answer:
|
|
26
|
+
Extract and confirm before proceeding:
|
|
29
27
|
- **Product name** (or ask them to pick one)
|
|
30
28
|
- **One-line value proposition**
|
|
31
29
|
- **Target audience**
|
|
32
|
-
- **Key features** (3-5 core features
|
|
33
|
-
|
|
34
|
-
Confirm your understanding before proceeding.
|
|
30
|
+
- **Key features** (3-5 core features)
|
|
35
31
|
|
|
36
32
|
---
|
|
37
33
|
|
|
38
34
|
## Step 2 — Pick a Tech Stack
|
|
39
35
|
|
|
40
|
-
Present
|
|
36
|
+
Present options:
|
|
41
37
|
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
>
|
|
49
|
-
> Or type your own stack (I'll adapt).
|
|
38
|
+
| # | Stack | Notes |
|
|
39
|
+
|---|-------|-------|
|
|
40
|
+
| 1 | **Next.js + Tailwind** | React, SSR, API routes built-in |
|
|
41
|
+
| 2 | **Nuxt + Tailwind** | Vue, SSR, server routes built-in |
|
|
42
|
+
| 3 | **Laravel + Blade + Tailwind** | PHP, full backend, Blade templates |
|
|
43
|
+
| 4 | **React + Vite + Tailwind** | Lightweight SPA, no backend (waitlist via Formspree) |
|
|
50
44
|
|
|
51
|
-
|
|
45
|
+
Or accept a custom stack. Note the selection for Step 6.
|
|
52
46
|
|
|
53
47
|
---
|
|
54
48
|
|
|
55
49
|
## Step 3 — Optional Design Phase (Pencil MCP)
|
|
56
50
|
|
|
57
|
-
Check
|
|
58
|
-
|
|
59
|
-
> **Would you like to design the UI visually in Pencil before coding? (Requires Pencil app + MCP) (y/n)**
|
|
60
|
-
>
|
|
61
|
-
> If no, I'll go straight to code generation with a great default design.
|
|
51
|
+
Check for `--pencil` flag or ask: **"Design UI visually in Pencil before coding? (y/n)"**
|
|
62
52
|
|
|
63
53
|
### If YES — Pencil MCP Design Phase
|
|
64
54
|
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
**3a. Find or create .pen file**
|
|
68
|
-
- Check `docs/design/` for existing `.pen` file matching this MVP.
|
|
69
|
-
- Existing: `open_document(filePath)` → skip to 3c.
|
|
70
|
-
- None: `open_document('new')` → save to `docs/design/{product-slug}.pen`.
|
|
55
|
+
**3a.** Check `docs/design/` for existing `.pen` file. If found: `open_document(filePath)` → skip to 3c. If not: `open_document('new')` → save to `docs/design/{product-slug}.pen`.
|
|
71
56
|
|
|
72
|
-
**3b
|
|
73
|
-
1. `get_guidelines(topic='landing-page')`
|
|
74
|
-
2. `get_style_guide_tags` → `get_style_guide(tags)` — pick tags matching
|
|
57
|
+
**3b.** Load design context:
|
|
58
|
+
1. `get_guidelines(topic='landing-page')`
|
|
59
|
+
2. `get_style_guide_tags` → `get_style_guide(tags)` — pick tags matching product tone.
|
|
75
60
|
|
|
76
|
-
**3c
|
|
77
|
-
Decide a distinctive color palette based on the product's tone and audience. Call `set_variables` with the palette:
|
|
61
|
+
**3c.** Set color palette via `set_variables`:
|
|
78
62
|
```json
|
|
79
63
|
{
|
|
80
64
|
"color-bg": "#xxxxxx",
|
|
@@ -84,29 +68,20 @@ Decide a distinctive color palette based on the product's tone and audience. Cal
|
|
|
84
68
|
}
|
|
85
69
|
```
|
|
86
70
|
|
|
87
|
-
**3d
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
3. App secondary screen frame — detail view or key interaction
|
|
71
|
+
**3d.** Use `batch_design` (one frame per call) to create:
|
|
72
|
+
1. Landing page — hero, features, pricing, waitlist section
|
|
73
|
+
2. App main screen — dashboard or primary view
|
|
74
|
+
3. App secondary screen — detail view or key interaction
|
|
92
75
|
|
|
93
|
-
|
|
76
|
+
**3e.** After each frame: `get_screenshot` → if off, `snapshot_layout` → fix → iterate until correct.
|
|
94
77
|
|
|
95
|
-
**
|
|
96
|
-
After each frame: `get_screenshot` to inspect. If off: `snapshot_layout` → fix with `batch_design`. Iterate until the design matches the vision.
|
|
78
|
+
**3f.** Ask: **"Does this design direction look good? Any changes before I start coding?"** Wait for explicit approval before proceeding.
|
|
97
79
|
|
|
98
|
-
**
|
|
99
|
-
Present screenshots and ask:
|
|
100
|
-
> **Does this design direction look good? Any changes before I start coding?**
|
|
101
|
-
|
|
102
|
-
Wait for approval. Apply feedback if given. Do not proceed to code without explicit approval.
|
|
103
|
-
|
|
104
|
-
**3g. Record the design**
|
|
105
|
-
Note the `.pen` file path. The design decisions (colors, typography, layout) carry forward into code generation.
|
|
80
|
+
**3g.** Note the `.pen` file path. Design decisions (colors, typography, layout) carry forward into code.
|
|
106
81
|
|
|
107
82
|
### If NO — Skip to Step 4
|
|
108
83
|
|
|
109
|
-
Use
|
|
84
|
+
Use `references/design-system.md` for design choices. State the chosen direction (color scheme, typography, layout style) briefly.
|
|
110
85
|
|
|
111
86
|
---
|
|
112
87
|
|
|
@@ -118,124 +93,100 @@ Read the stack-specific reference file:
|
|
|
118
93
|
- Laravel → `references/stacks/laravel.md`
|
|
119
94
|
- React + Vite → `references/stacks/react-vite.md`
|
|
120
95
|
|
|
121
|
-
Run the scaffold command from the reference file.
|
|
96
|
+
Run the scaffold command from the reference file. Customize Tailwind config with the chosen color palette and typography.
|
|
122
97
|
|
|
123
98
|
---
|
|
124
99
|
|
|
125
100
|
## Step 5 — Generate the Landing Page
|
|
126
101
|
|
|
127
|
-
Read `references/landing-page.md
|
|
128
|
-
|
|
129
|
-
Generate a complete landing page with these sections (all mandatory):
|
|
102
|
+
Read `references/landing-page.md`. Generate all 9 mandatory sections:
|
|
130
103
|
|
|
131
|
-
1. **Navbar** — logo
|
|
132
|
-
2. **Hero** —
|
|
133
|
-
3. **Social proof bar** — "Trusted by X+" or logo strip (
|
|
134
|
-
4. **Features grid** — 3-6
|
|
135
|
-
5. **How it works** — 3-step
|
|
136
|
-
6. **Pricing** — 2-3 tier cards (Free / Pro / Enterprise) with fake
|
|
137
|
-
7. **Testimonials** — 2-3 fake
|
|
138
|
-
8. **Waitlist / CTA
|
|
104
|
+
1. **Navbar** — logo + nav links (Features, Pricing, Waitlist) + CTA button
|
|
105
|
+
2. **Hero** — benefit-driven headline + subheadline + primary CTA + hero visual
|
|
106
|
+
3. **Social proof bar** — "Trusted by X+" or logo strip (placeholders)
|
|
107
|
+
4. **Features grid** — 3-6 cards with icons, titles, descriptions (from Step 1 features)
|
|
108
|
+
5. **How it works** — 3-step numbered process
|
|
109
|
+
6. **Pricing** — 2-3 tier cards (Free / Pro / Enterprise) with fake realistic pricing
|
|
110
|
+
7. **Testimonials** — 2-3 fake cards with names, roles, placeholder avatars
|
|
111
|
+
8. **Waitlist / CTA** — email input + submit + success message + validation
|
|
139
112
|
9. **Footer** — product name, links, copyright
|
|
140
113
|
|
|
141
114
|
### Waitlist Email Collection
|
|
142
115
|
|
|
143
|
-
**
|
|
144
|
-
-
|
|
145
|
-
-
|
|
146
|
-
- Read existing `waitlist.json`, append the new entry with timestamp, write back.
|
|
147
|
-
- Return success/error JSON response.
|
|
148
|
-
- Wire the landing page form to POST to this route via fetch.
|
|
149
|
-
- Show success state ("You're on the list!") and error state on the form.
|
|
116
|
+
**Stacks with backend (Next.js, Nuxt, Laravel):**
|
|
117
|
+
- API route: POST `{ email }` → validate server-side → read `waitlist.json` → append `{ email, timestamp }` → write back → return JSON.
|
|
118
|
+
- Wire form to POST via fetch. Show success ("You're on the list!") and error states.
|
|
150
119
|
|
|
151
|
-
**
|
|
152
|
-
- Use Formspree:
|
|
153
|
-
- Add
|
|
154
|
-
- Handle success/error
|
|
120
|
+
**Static stacks (React + Vite):**
|
|
121
|
+
- Use Formspree: `action="https://formspree.io/f/{form_id}"`.
|
|
122
|
+
- Add comment instructing user to create a free Formspree account and replace `{form_id}`.
|
|
123
|
+
- Handle success/error client-side.
|
|
155
124
|
|
|
156
125
|
---
|
|
157
126
|
|
|
158
127
|
## Step 6 — Generate the App
|
|
159
128
|
|
|
160
|
-
Generate a working multi-page app with:
|
|
129
|
+
Generate a working multi-page app with these 5 pages:
|
|
161
130
|
|
|
162
|
-
1. **Navigation** — sidebar or top nav
|
|
163
|
-
2. **Dashboard / Home** — summary cards,
|
|
164
|
-
3. **Primary feature page** —
|
|
165
|
-
4. **Secondary feature page** —
|
|
166
|
-
5. **Settings / Profile
|
|
131
|
+
1. **Navigation** — sidebar or top nav, links to all pages, active state highlighting.
|
|
132
|
+
2. **Dashboard / Home** — summary cards, simple CSS/SVG charts, recent activity list (fake data).
|
|
133
|
+
3. **Primary feature page** — main product function, functional UI, client-side only (buttons, modals, forms work).
|
|
134
|
+
4. **Secondary feature page** — supporting feature, table/list with client-side filtering/sorting.
|
|
135
|
+
5. **Settings / Profile** — form with fake prefilled data, save button shows toast.
|
|
167
136
|
|
|
168
|
-
### Design Standards (
|
|
137
|
+
### Design Standards (every page)
|
|
169
138
|
|
|
170
|
-
Read `references/design-system.md
|
|
171
|
-
-
|
|
172
|
-
-
|
|
173
|
-
- Consistent spacing
|
|
174
|
-
-
|
|
175
|
-
- Responsive —
|
|
176
|
-
- Fake data
|
|
139
|
+
Read `references/design-system.md`:
|
|
140
|
+
- Custom Tailwind colors — never defaults.
|
|
141
|
+
- Google Fonts — pair display + body font.
|
|
142
|
+
- Consistent spacing rhythm (e.g., 4/8/12/16/24/32/48).
|
|
143
|
+
- Rounded corners, shadows, hover states, transitions.
|
|
144
|
+
- Responsive — mobile and desktop.
|
|
145
|
+
- Fake data must feel realistic (real-sounding names, numbers, dates).
|
|
177
146
|
|
|
178
147
|
---
|
|
179
148
|
|
|
180
149
|
## Step 7 — Visual Validation (Playwright MCP)
|
|
181
150
|
|
|
182
|
-
|
|
151
|
+
**If Playwright MCP available:**
|
|
152
|
+
1. Start dev server (stack's dev command from reference file).
|
|
153
|
+
2. Navigate to each page: `/`, `/dashboard`, each app page.
|
|
154
|
+
3. Screenshot at desktop (1280px) and mobile (375px).
|
|
155
|
+
4. Check for: broken layouts, missing content, non-functional interactions, visual inconsistency.
|
|
156
|
+
5. Fix issues and re-validate.
|
|
183
157
|
|
|
184
|
-
**If Playwright MCP
|
|
185
|
-
|
|
186
|
-
1. Start the dev server (use the stack's dev command from the reference file).
|
|
187
|
-
2. Use Playwright MCP to navigate to each page:
|
|
188
|
-
- Landing page (`/`)
|
|
189
|
-
- Dashboard (`/dashboard`)
|
|
190
|
-
- Each app page
|
|
191
|
-
3. Take screenshots of each page at desktop (1280px) and mobile (375px) widths.
|
|
192
|
-
4. Check for:
|
|
193
|
-
- Broken layouts (overlapping elements, overflow, misaligned sections)
|
|
194
|
-
- Missing content (empty sections, broken images, placeholder text not filled)
|
|
195
|
-
- Non-functional interactions (click buttons, submit forms, open modals)
|
|
196
|
-
- Visual consistency (colors match palette, typography is consistent)
|
|
197
|
-
5. If issues found: fix them and re-validate.
|
|
198
|
-
|
|
199
|
-
**If Playwright MCP is NOT available:**
|
|
200
|
-
|
|
201
|
-
Tell the user:
|
|
202
|
-
> Playwright MCP is not connected — skipping visual validation. Start the dev server with `{dev command}` and check the pages manually.
|
|
158
|
+
**If Playwright MCP NOT available:**
|
|
159
|
+
Tell user: `"Playwright MCP not connected — start the dev server with {dev command} and check pages manually."`
|
|
203
160
|
|
|
204
161
|
---
|
|
205
162
|
|
|
206
163
|
## Step 8 — Quality Loop
|
|
207
164
|
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
2. Re-run Playwright validation (Step 7).
|
|
212
|
-
3. Repeat until all pages pass — no broken layouts, all interactions work, design is consistent.
|
|
213
|
-
|
|
214
|
-
Maximum 3 loop iterations. If issues persist after 3 loops, present remaining issues to the user and ask how to proceed.
|
|
165
|
+
1. Fix issues found in Step 7.
|
|
166
|
+
2. Re-run Playwright validation.
|
|
167
|
+
3. Repeat until all pages pass. Max 3 iterations — if issues persist, present remaining issues and ask how to proceed.
|
|
215
168
|
|
|
216
169
|
---
|
|
217
170
|
|
|
218
171
|
## Step 9 — Generate Project Context Docs
|
|
219
172
|
|
|
220
|
-
Generate 3
|
|
221
|
-
|
|
222
|
-
### Files to Generate
|
|
173
|
+
Generate 3 files in `docs/` using information from Steps 1-2. No new questions.
|
|
223
174
|
|
|
224
175
|
**`docs/vision.md`**
|
|
225
176
|
```markdown
|
|
226
177
|
# [Product Name]
|
|
227
178
|
|
|
228
179
|
## Value Proposition
|
|
229
|
-
[One-line value prop
|
|
180
|
+
[One-line value prop]
|
|
230
181
|
|
|
231
182
|
## Target Audience
|
|
232
|
-
[Target audience
|
|
183
|
+
[Target audience]
|
|
233
184
|
|
|
234
185
|
## Key Features
|
|
235
|
-
[Bullet list of 3-5 features
|
|
186
|
+
[Bullet list of 3-5 features]
|
|
236
187
|
|
|
237
188
|
## North Star Metric
|
|
238
|
-
[
|
|
189
|
+
[One metric measuring core value]
|
|
239
190
|
```
|
|
240
191
|
|
|
241
192
|
**`docs/prd.md`**
|
|
@@ -243,13 +194,13 @@ Generate 3 lightweight documentation files in `docs/` from information already g
|
|
|
243
194
|
# PRD — [Product Name]
|
|
244
195
|
|
|
245
196
|
## Overview
|
|
246
|
-
[1-2 sentence
|
|
197
|
+
[1-2 sentence description]
|
|
247
198
|
|
|
248
199
|
## User Stories
|
|
249
|
-
[
|
|
200
|
+
[Per key feature: "As a [audience], I want to [feature] so that [benefit]"]
|
|
250
201
|
|
|
251
202
|
## Feature Acceptance Criteria
|
|
252
|
-
[
|
|
203
|
+
[Per feature: 2-3 concrete criteria]
|
|
253
204
|
|
|
254
205
|
## Out of Scope (MVP)
|
|
255
206
|
- Real authentication
|
|
@@ -263,19 +214,19 @@ Generate 3 lightweight documentation files in `docs/` from information already g
|
|
|
263
214
|
# Tech Design — [Product Name]
|
|
264
215
|
|
|
265
216
|
## Stack
|
|
266
|
-
- **Framework:** [chosen stack
|
|
217
|
+
- **Framework:** [chosen stack]
|
|
267
218
|
- **Styling:** Tailwind CSS
|
|
268
219
|
- **Fonts:** [chosen fonts]
|
|
269
220
|
|
|
270
221
|
## Project Structure
|
|
271
|
-
[
|
|
222
|
+
[Key directories and files from scaffolding]
|
|
272
223
|
|
|
273
224
|
## Component Map
|
|
274
225
|
### Landing Page
|
|
275
|
-
[
|
|
226
|
+
[All 9 sections and their components]
|
|
276
227
|
|
|
277
228
|
### App Pages
|
|
278
|
-
[
|
|
229
|
+
[Each page and its key components]
|
|
279
230
|
|
|
280
231
|
## Data Model
|
|
281
232
|
### Waitlist
|
|
@@ -283,19 +234,15 @@ Generate 3 lightweight documentation files in `docs/` from information already g
|
|
|
283
234
|
- timestamp: ISO 8601 string
|
|
284
235
|
|
|
285
236
|
### Fake Data Entities
|
|
286
|
-
[
|
|
237
|
+
[Fake data structures used in the app]
|
|
287
238
|
```
|
|
288
239
|
|
|
289
|
-
|
|
290
|
-
> **Context docs generated:** `docs/vision.md`, `docs/prd.md`, `docs/tech-design.md`
|
|
291
|
-
> These persist context for future sessions. Run `/sk:context` to load `docs/vision.md` into the session brief, or read the others directly.
|
|
240
|
+
Output after generating: `"Context docs generated: docs/vision.md, docs/prd.md, docs/tech-design.md — Run /sk:context to load vision.md into the session brief."`
|
|
292
241
|
|
|
293
242
|
---
|
|
294
243
|
|
|
295
244
|
## Step 10 — Present the Output
|
|
296
245
|
|
|
297
|
-
Summarize what was generated:
|
|
298
|
-
|
|
299
246
|
```
|
|
300
247
|
## MVP Generated
|
|
301
248
|
|