@kennethsolomon/shipkit 3.19.0 → 3.21.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 (32) hide show
  1. package/README.md +36 -4
  2. package/package.json +1 -1
  3. package/skills/sk:brainstorming/SKILL.md +19 -128
  4. package/skills/sk:debug/SKILL.md +44 -111
  5. package/skills/sk:e2e/SKILL.md +45 -97
  6. package/skills/sk:features/SKILL.md +44 -99
  7. package/skills/sk:frontend-design/SKILL.md +16 -32
  8. package/skills/sk:laravel-init/SKILL.md +8 -7
  9. package/skills/sk:laravel-new/SKILL.md +1 -0
  10. package/skills/sk:lint/SKILL.md +42 -62
  11. package/skills/sk:mvp/SKILL.md +81 -134
  12. package/skills/sk:perf/SKILL.md +24 -43
  13. package/skills/sk:review/SKILL.md +57 -93
  14. package/skills/sk:security-check/SKILL.md +37 -43
  15. package/skills/sk:seo-audit/SKILL.md +75 -96
  16. package/skills/sk:setup-claude/SKILL.md +154 -0
  17. package/skills/sk:setup-claude/references/skill-profiles.md +223 -0
  18. package/skills/sk:setup-claude/scripts/__pycache__/apply_setup_claude.cpython-314.pyc +0 -0
  19. package/skills/sk:setup-claude/scripts/apply_setup_claude.py +110 -10
  20. package/skills/sk:setup-claude/templates/.claude/rules/laravel.md.template +14 -0
  21. package/skills/sk:setup-claude/templates/CLAUDE.md.template +102 -247
  22. package/skills/sk:setup-claude/templates/commands/brainstorm.md.template +1 -1
  23. package/skills/sk:setup-claude/templates/commands/execute-plan.md.template +1 -1
  24. package/skills/sk:setup-claude/templates/commands/finish-feature.md.template +1 -1
  25. package/skills/sk:setup-claude/templates/commands/security-check.md.template +1 -1
  26. package/skills/sk:setup-claude/templates/commands/write-plan.md.template +1 -1
  27. package/skills/sk:setup-claude/tests/__pycache__/test_apply_setup_claude.cpython-314.pyc +0 -0
  28. package/skills/sk:setup-claude/tests/test_apply_setup_claude.py +267 -0
  29. package/skills/sk:setup-optimizer/SKILL.md +101 -17
  30. package/skills/sk:skill-creator/SKILL.md +115 -226
  31. package/skills/sk:website/SKILL.md +81 -149
  32. package/skills/sk:write-tests/SKILL.md +44 -110
@@ -12,13 +12,14 @@ Configure this Laravel project with production-ready conventions. Safe to run on
12
12
  Invokes the `setup-claude` skill to:
13
13
 
14
14
  1. **Detect stack** from `composer.json` + `package.json`
15
- 2. **Install missing dev tools**: PHPStan/Larastan, Rector, Pint, Pest
16
- 3. **Publish config files** (if missing): `phpstan.neon`, `rector.php`, `pint.json`
17
- 4. **Configure strict models** in `AppServiceProvider`
18
- 5. **Generate `CLAUDE.md`** stack-aware, with full workflow, conventions, and sub-agent patterns
19
- 6. **Bootstrap `tasks/`**findings, lessons, todo, progress, security-findings
20
- 7. **Generate `.claude/commands/`** — lint, test
21
- 8. **Pre-seed `tasks/findings.md`** with detected stack info
15
+ 2. **Install missing dev tools**: PHPStan/Larastan, Rector, Pint, Pest, Laravel Boost
16
+ 3. **Configure Laravel Boost MCP** in `.mcp.json` — database schema, queries, docs search, logs, browser errors
17
+ 4. **Publish config files** (if missing): `phpstan.neon`, `rector.php`, `pint.json`
18
+ 5. **Configure strict models** in `AppServiceProvider`
19
+ 6. **Generate `CLAUDE.md`**stack-aware, with full workflow, conventions, and sub-agent patterns
20
+ 7. **Bootstrap `tasks/`** — findings, lessons, todo, progress, security-findings
21
+ 8. **Generate `.claude/commands/`** lint, test
22
+ 9. **Pre-seed `tasks/findings.md`** with detected stack info
22
23
 
23
24
  ## Idempotent
24
25
 
@@ -54,6 +54,7 @@ Location: [path]
54
54
 
55
55
  Files created:
56
56
  CLAUDE.md
57
+ .mcp.json (laravel-boost MCP server)
57
58
  phpstan.neon
58
59
  rector.php
59
60
  pint.json
@@ -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
- - For `composer.json`: read `require-dev` keys for `laravel/pint`, `phpstan/phpstan`, `rector/rector`
34
- - For `package.json`: read `devDependencies` keys for `eslint`, `prettier`
35
- - For `pyproject.toml`: check `[tool.ruff]` section or `ruff` in `[project.optional-dependencies]` / `[build-system]`
36
- - For `go.mod` / `Cargo.toml`: presence of file is sufficient
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
- Formatters modify files, so run them one at a time in this order:
42
+ Run in this order (formatters modify files must not run in parallel):
43
43
 
44
- 1. **Pint** (if detected): `vendor/bin/pint --dirty`
45
- 2. **Prettier** (if detected): `npx prettier --write .`
46
- 3. **ruff format** (if detected): `ruff format .`
47
- 4. **gofmt** (if detected): `gofmt -w .`
48
- 5. **cargo fmt** (if detected): `cargo fmt`
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
- After each formatter, note which files changed. All formatters must finish before step 4.
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
- - **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`
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
- Example with PHPStan + Rector + ESLint detected:
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 (`composer audit` has no severity filter) |
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
- For each detected package manager, run the audit command and capture output.
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
- Skip stacks not present in the project.
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
- If any analyzer reports errors or the dep audit blocks:
81
+ **Classify each issue before fixing:**
95
82
 
96
- **Before fixing, classify each issue by scope:**
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
- - If the issue is in a file **in** the branch diff (in-scope), fix it.
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 (fixes may need formatting)
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. Re-run from step 3 until every tool exits clean
116
- 6. Once all tools pass clean, make ONE squash commit: `fix(lint): resolve lint and dep audit issues` — do NOT ask the user
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
- When this gate requires a fix, classify it before committing:
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 `/sk:lint`. Never a logic change — bypass protocol.
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 type error, Rector suggestion, ESLint error, ruff violation) classify each fix:
151
- - Type annotation, import order, unused var, style rule → **style fix** → auto-commit and re-run
152
- - New guard clause, changed condition, extracted function, modified data flow → **logic change** → trigger protocol:
153
- 1. Update or add failing unit tests for the new behavior
154
- 2. Re-run `/sk:test` — must pass at 100% coverage
155
- 3. Auto-commit (tests + fix together in one commit)
156
- 4. Re-run `/sk:lint` from scratch
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** (composer audit / npm audit finding) → classify:
159
- - Version bump with no API change → **style fix** → auto-commit and re-run
160
- - Version bump with API/behavior change → **logic change** → trigger protocol
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 in this protocol are automatic — do not prompt the user for commit approval.
142
+ All commits are automatic — do not prompt the user.
163
143
 
164
144
  ---
165
145
 
@@ -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 the user to describe their product idea. If not already provided, 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
- > **What's your product idea? Describe it in 1-3 sentences — what does it do and who is it for?**
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 for the app)
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 these preset options:
36
+ Present options:
41
37
 
42
- > **Pick a tech stack:**
43
- >
44
- > 1. **Next.js + Tailwind** React ecosystem, SSR, API routes built-in
45
- > 2. **Nuxt + Tailwind** Vue ecosystem, SSR, server routes built-in
46
- > 3. **Laravel + Blade + Tailwind** PHP ecosystem, full backend, Blade templates
47
- > 4. **React + Vite + Tailwind** Lightweight SPA, no backend (waitlist via Formspree)
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
- Once the user picks, note the selection and load the corresponding reference file in Step 6.
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 if the user invoked with `--pencil` flag or ask:
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
- Follow this flow (adapted from sk:frontend-design):
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. Load design context**
73
- 1. `get_guidelines(topic='landing-page')` — load landing page design rules.
74
- 2. `get_style_guide_tags` → `get_style_guide(tags)` — pick tags matching the product's tone (e.g., modern, SaaS, minimal, bold).
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. Set color palette as variables**
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. Build mockup screens**
88
- Use `batch_design` to create:
89
- 1. Landing page framehero, features, pricing, waitlist section
90
- 2. App main screen frame dashboard or primary view
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 screendashboard or primary view
74
+ 3. App secondary screen — detail view or key interaction
92
75
 
93
- Work one frame per `batch_design` call. Apply the color variables and typography.
76
+ **3e.** After each frame: `get_screenshot` → if off, `snapshot_layout` fix iterate until correct.
94
77
 
95
- **3e. Validate and iterate**
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
- **3f. Get user approval**
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 the aesthetic guidelines from `references/design-system.md` to make distinctive design choices automatically. Briefly state the design direction chosen (color scheme, typography, layout style) so the user knows what to expect.
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. Then customize the Tailwind config with the chosen color palette and typography.
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` for section patterns and structure.
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/product name + nav links (Features, Pricing, Waitlist) + CTA button
132
- 2. **Hero** — headline (benefit-driven) + subheadline + primary CTA + hero visual/illustration area
133
- 3. **Social proof bar** — "Trusted by X+" or logo strip (use placeholder logos)
134
- 4. **Features grid** — 3-6 feature cards with icons, titles, descriptions (based on the key features from Step 1)
135
- 5. **How it works** — 3-step process with numbered steps and descriptions
136
- 6. **Pricing** — 2-3 tier cards (Free / Pro / Enterprise) with fake but realistic pricing
137
- 7. **Testimonials** — 2-3 fake testimonial cards with names, roles, photos (use placeholder avatars)
138
- 8. **Waitlist / CTA section** — email input + submit button + success message + form validation
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
- **For stacks with backend (Next.js, Nuxt, Laravel):**
144
- - Create an API route that accepts POST `{ email }`.
145
- - Validate the email format server-side.
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
- **For static stacks (React + Vite):**
152
- - Use Formspree: form action points to `https://formspree.io/f/{form_id}`.
153
- - Add a comment/note telling the user to create a free Formspree account and replace `{form_id}`.
154
- - Handle success/error states client-side.
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 with links to all pages. Active state highlighting.
163
- 2. **Dashboard / Home** — summary cards, charts (use simple CSS/SVG charts or placeholder), recent activity list. All fake data.
164
- 3. **Primary feature page** — the main thing the product does. Functional UI with fake data. Buttons, modals, forms all work (client-side only).
165
- 4. **Secondary feature page** — a supporting feature. Table or list view with filtering/sorting (client-side).
166
- 5. **Settings / Profile page** — simple form with fake prefilled data. Save button shows a toast/notification.
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 (apply to every page)
137
+ ### Design Standards (every page)
169
138
 
170
- Read `references/design-system.md` and apply:
171
- - Distinctive color palette — never default Tailwind. Custom `tailwind.config` colors.
172
- - Thoughtful typography — use Google Fonts. Pair a display font with a body font.
173
- - Consistent spacing scale — use a rhythm (e.g., 4/8/12/16/24/32/48).
174
- - Polished components — rounded corners, shadows, hover states, transitions.
175
- - Responsive — must look good on mobile and desktop.
176
- - Fake data should feel realistic — use real-sounding names, numbers, dates.
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
- After code generation is complete, validate the output visually.
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 is available:**
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
- If visual validation found issues:
209
-
210
- 1. Fix the identified issues.
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 lightweight documentation files in `docs/` from information already gathered in Steps 1-2. No new questions — use the product name, value prop, audience, features, and tech stack already captured.
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 from Step 1]
180
+ [One-line value prop]
230
181
 
231
182
  ## Target Audience
232
- [Target audience from Step 1]
183
+ [Target audience]
233
184
 
234
185
  ## Key Features
235
- [Bullet list of 3-5 features from Step 1]
186
+ [Bullet list of 3-5 features]
236
187
 
237
188
  ## North Star Metric
238
- [Suggest one metric that measures core value — e.g., "weekly active waitlist signups" or "daily feature usage"]
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 product description]
197
+ [1-2 sentence description]
247
198
 
248
199
  ## User Stories
249
- [For each key feature from Step 1, write a user story: "As a [audience], I want to [feature] so that [benefit]"]
200
+ [Per key feature: "As a [audience], I want to [feature] so that [benefit]"]
250
201
 
251
202
  ## Feature Acceptance Criteria
252
- [For each feature, list 2-3 concrete acceptance criteria]
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 from Step 2]
217
+ - **Framework:** [chosen stack]
267
218
  - **Styling:** Tailwind CSS
268
219
  - **Fonts:** [chosen fonts]
269
220
 
270
221
  ## Project Structure
271
- [List the key directories and files generated during scaffolding]
222
+ [Key directories and files from scaffolding]
272
223
 
273
224
  ## Component Map
274
225
  ### Landing Page
275
- [List all 9 sections and their components]
226
+ [All 9 sections and their components]
276
227
 
277
228
  ### App Pages
278
- [List each page and its key components]
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
- [List the fake data structures used in the app]
237
+ [Fake data structures used in the app]
287
238
  ```
288
239
 
289
- After generating the docs, output:
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