@slamb2k/mad-skills 2.0.6
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/LICENSE +21 -0
- package/README.md +129 -0
- package/package.json +42 -0
- package/skills/brace/SKILL.md +51 -0
- package/skills/brace/assets/gitignore-template +28 -0
- package/skills/brace/assets/global-preferences-template.md +53 -0
- package/skills/brace/instructions.md +229 -0
- package/skills/brace/references/brace-workflow.md +109 -0
- package/skills/brace/references/claude-md-template.md +91 -0
- package/skills/brace/references/gotcha-principles.md +113 -0
- package/skills/brace/references/phase-prompts.md +228 -0
- package/skills/brace/references/report-template.md +38 -0
- package/skills/brace/references/scaffold-manifest.md +68 -0
- package/skills/brace/tests/evals.json +29 -0
- package/skills/build/SKILL.md +48 -0
- package/skills/build/instructions.md +293 -0
- package/skills/build/references/architecture-notes.md +34 -0
- package/skills/build/references/project-detection.md +45 -0
- package/skills/build/references/report-contracts.md +21 -0
- package/skills/build/references/stage-prompts.md +405 -0
- package/skills/build/tests/evals.json +28 -0
- package/skills/distil/SKILL.md +38 -0
- package/skills/distil/assets/DesignNav.tsx +54 -0
- package/skills/distil/instructions.md +255 -0
- package/skills/distil/references/design-guide.md +118 -0
- package/skills/distil/references/iteration-mode.md +186 -0
- package/skills/distil/references/project-setup.md +92 -0
- package/skills/distil/tests/evals.json +28 -0
- package/skills/manifest.json +76 -0
- package/skills/prime/SKILL.md +39 -0
- package/skills/prime/instructions.md +73 -0
- package/skills/prime/references/domains.md +38 -0
- package/skills/prime/tests/evals.json +28 -0
- package/skills/rig/SKILL.md +38 -0
- package/skills/rig/assets/azure-pipelines.yml +91 -0
- package/skills/rig/assets/ci.yml +104 -0
- package/skills/rig/assets/gitmessage +38 -0
- package/skills/rig/assets/lefthook.yml +29 -0
- package/skills/rig/assets/pull_request_template.md +24 -0
- package/skills/rig/instructions.md +162 -0
- package/skills/rig/references/configuration-steps.md +124 -0
- package/skills/rig/references/phase-prompts.md +180 -0
- package/skills/rig/references/report-template.md +28 -0
- package/skills/rig/tests/evals.json +29 -0
- package/skills/ship/SKILL.md +55 -0
- package/skills/ship/instructions.md +192 -0
- package/skills/ship/references/stage-prompts.md +322 -0
- package/skills/ship/tests/evals.json +30 -0
- package/skills/sync/SKILL.md +54 -0
- package/skills/sync/instructions.md +178 -0
- package/skills/sync/tests/evals.json +29 -0
- package/src/cli.js +419 -0
|
@@ -0,0 +1,405 @@
|
|
|
1
|
+
# Build Stage Prompts
|
|
2
|
+
|
|
3
|
+
Subagent prompts for each build stage. The orchestrator reads these and
|
|
4
|
+
substitutes template variables before launching each subagent.
|
|
5
|
+
|
|
6
|
+
---
|
|
7
|
+
|
|
8
|
+
## Stage 1: Explore
|
|
9
|
+
|
|
10
|
+
**Agent:** feature-dev:code-explorer (fallback: general-purpose)
|
|
11
|
+
|
|
12
|
+
```
|
|
13
|
+
You are exploring a codebase to prepare for implementing a plan.
|
|
14
|
+
Read the plan carefully, then explore the codebase to understand
|
|
15
|
+
the existing code that will be modified or extended.
|
|
16
|
+
|
|
17
|
+
Limit EXPLORE_REPORT to 30 lines maximum.
|
|
18
|
+
|
|
19
|
+
## Plan
|
|
20
|
+
|
|
21
|
+
{PLAN}
|
|
22
|
+
|
|
23
|
+
## Your Tasks
|
|
24
|
+
|
|
25
|
+
1. Read the plan and identify:
|
|
26
|
+
- Which existing files will be modified
|
|
27
|
+
- Which patterns/conventions exist in those files
|
|
28
|
+
- What dependencies and imports are used
|
|
29
|
+
- What test patterns exist for similar code
|
|
30
|
+
|
|
31
|
+
2. For each area of the plan, explore the relevant code:
|
|
32
|
+
- Use Glob to find files
|
|
33
|
+
- Use Grep to find patterns
|
|
34
|
+
- Use Read to understand implementations
|
|
35
|
+
- Trace through execution paths
|
|
36
|
+
|
|
37
|
+
3. Identify source documentation — files that define, plan, or track work:
|
|
38
|
+
- Phase plans, design docs, PRDs, manifests, READMEs with progress markers
|
|
39
|
+
- Files with checklists, status tables, task lists, or roadmaps
|
|
40
|
+
- Only include files that contain trackable progress
|
|
41
|
+
|
|
42
|
+
4. Identify potential issues:
|
|
43
|
+
- Conflicts with existing code
|
|
44
|
+
- Missing dependencies
|
|
45
|
+
- Convention mismatches
|
|
46
|
+
- Edge cases the plan doesn't address
|
|
47
|
+
|
|
48
|
+
## Output Format
|
|
49
|
+
|
|
50
|
+
EXPLORE_REPORT:
|
|
51
|
+
- files_to_modify: {list with line ranges}
|
|
52
|
+
- files_to_create: {list}
|
|
53
|
+
- patterns_found:
|
|
54
|
+
- {pattern}: {description}
|
|
55
|
+
- conventions:
|
|
56
|
+
- {convention}: {description}
|
|
57
|
+
- dependencies: {new imports/packages needed}
|
|
58
|
+
- potential_issues:
|
|
59
|
+
- {issue}: {description and resolution}
|
|
60
|
+
- questions: {ambiguities in the plan}
|
|
61
|
+
- source_docs:
|
|
62
|
+
- path: {file path}
|
|
63
|
+
type: {manifest|phase_plan|design_doc|prd|readme|changelog}
|
|
64
|
+
trackable_items:
|
|
65
|
+
- marker: {exact text of checkbox/status}
|
|
66
|
+
current_value: {current}
|
|
67
|
+
completed_value: {target}
|
|
68
|
+
description: {what it tracks}
|
|
69
|
+
```
|
|
70
|
+
|
|
71
|
+
---
|
|
72
|
+
|
|
73
|
+
## Stage 3: Architecture Design
|
|
74
|
+
|
|
75
|
+
**Agent:** feature-dev:code-architect (fallback: general-purpose)
|
|
76
|
+
|
|
77
|
+
```
|
|
78
|
+
Design the implementation architecture for a feature plan.
|
|
79
|
+
Use the exploration findings and any user clarifications to produce
|
|
80
|
+
a concrete, file-by-file implementation blueprint.
|
|
81
|
+
|
|
82
|
+
Limit ARCH_REPORT to 30 lines maximum.
|
|
83
|
+
|
|
84
|
+
## Plan
|
|
85
|
+
|
|
86
|
+
{PLAN}
|
|
87
|
+
|
|
88
|
+
## Exploration Findings
|
|
89
|
+
|
|
90
|
+
{EXPLORE_REPORT}
|
|
91
|
+
|
|
92
|
+
## User Clarifications
|
|
93
|
+
|
|
94
|
+
{CLARIFICATIONS or "None — plan is fully specified"}
|
|
95
|
+
|
|
96
|
+
## Your Tasks
|
|
97
|
+
|
|
98
|
+
1. Design the implementation approach:
|
|
99
|
+
- Decide what changes go in which files
|
|
100
|
+
- Define the order of changes (dependencies between files)
|
|
101
|
+
- Identify which changes can be parallelized
|
|
102
|
+
- Specify function signatures, class structures, data flows
|
|
103
|
+
|
|
104
|
+
2. Follow existing codebase conventions from the exploration
|
|
105
|
+
|
|
106
|
+
3. Plan the commit grouping
|
|
107
|
+
|
|
108
|
+
## Output Format
|
|
109
|
+
|
|
110
|
+
ARCH_REPORT:
|
|
111
|
+
- approach_summary: {2-3 sentences}
|
|
112
|
+
- implementation_order:
|
|
113
|
+
- step: {N}
|
|
114
|
+
files: {list}
|
|
115
|
+
description: {what to do}
|
|
116
|
+
depends_on: {step numbers or "none"}
|
|
117
|
+
- parallel_groups: {groups that can run in parallel}
|
|
118
|
+
- commit_plan:
|
|
119
|
+
- group: {name}
|
|
120
|
+
files: {list}
|
|
121
|
+
message: {proposed commit message}
|
|
122
|
+
- risks:
|
|
123
|
+
- {risk}: {mitigation}
|
|
124
|
+
```
|
|
125
|
+
|
|
126
|
+
---
|
|
127
|
+
|
|
128
|
+
## Stage 4: Implementation
|
|
129
|
+
|
|
130
|
+
**Agent:** general-purpose (default model)
|
|
131
|
+
|
|
132
|
+
```
|
|
133
|
+
Implement a feature according to a precise architecture plan.
|
|
134
|
+
Follow the plan exactly. Write clean code that follows existing
|
|
135
|
+
conventions. Do not add features, comments, or refactoring beyond
|
|
136
|
+
what the plan specifies.
|
|
137
|
+
|
|
138
|
+
Limit IMPL_REPORT to 20 lines maximum.
|
|
139
|
+
|
|
140
|
+
## Plan
|
|
141
|
+
|
|
142
|
+
{PLAN}
|
|
143
|
+
|
|
144
|
+
## Architecture
|
|
145
|
+
|
|
146
|
+
{ARCH_REPORT}
|
|
147
|
+
|
|
148
|
+
## Your Implementation Steps
|
|
149
|
+
|
|
150
|
+
{implementation_order steps assigned to this agent}
|
|
151
|
+
|
|
152
|
+
## Conventions to Follow
|
|
153
|
+
|
|
154
|
+
{conventions from EXPLORE_REPORT}
|
|
155
|
+
|
|
156
|
+
## Rules
|
|
157
|
+
|
|
158
|
+
- Read each file BEFORE editing it
|
|
159
|
+
- Follow existing code style exactly (imports, spacing, naming)
|
|
160
|
+
- Do not add docstrings or comments unless the plan specifies them
|
|
161
|
+
- Do not refactor adjacent code
|
|
162
|
+
- Do not add error handling beyond what the plan specifies
|
|
163
|
+
- After all changes, run the project's test command:
|
|
164
|
+
{PROJECT_CONFIG.test_runner}
|
|
165
|
+
Capture the last 20 lines of output.
|
|
166
|
+
|
|
167
|
+
## Output Format
|
|
168
|
+
|
|
169
|
+
IMPL_REPORT:
|
|
170
|
+
- status: success|partial|failed
|
|
171
|
+
- files_modified: {list with brief description}
|
|
172
|
+
- files_created: {list}
|
|
173
|
+
- test_result: {last 20 lines of test output}
|
|
174
|
+
- issues_encountered:
|
|
175
|
+
- {issue}: {what you did about it}
|
|
176
|
+
- errors: {any unresolved errors}
|
|
177
|
+
```
|
|
178
|
+
|
|
179
|
+
---
|
|
180
|
+
|
|
181
|
+
## Stage 5: Code Review
|
|
182
|
+
|
|
183
|
+
**Agent:** feature-dev:code-reviewer (fallback: general-purpose)
|
|
184
|
+
Launch 3 in parallel with different focuses.
|
|
185
|
+
|
|
186
|
+
### Review Focus: Simplicity & DRY
|
|
187
|
+
```
|
|
188
|
+
Review the following files for simplicity, DRY violations,
|
|
189
|
+
and unnecessary complexity. Files: {FILES}
|
|
190
|
+
Focus: code duplication, over-engineering, dead code.
|
|
191
|
+
Limit REVIEW_REPORT to 15 lines maximum.
|
|
192
|
+
|
|
193
|
+
REVIEW_REPORT:
|
|
194
|
+
- reviewer_focus: simplicity
|
|
195
|
+
- findings:
|
|
196
|
+
- severity: {critical|high|medium|low}
|
|
197
|
+
file: {path}
|
|
198
|
+
line: {number}
|
|
199
|
+
issue: {description}
|
|
200
|
+
fix: {suggested fix}
|
|
201
|
+
- summary: {1-2 sentences}
|
|
202
|
+
```
|
|
203
|
+
|
|
204
|
+
### Review Focus: Bugs & Correctness
|
|
205
|
+
```
|
|
206
|
+
Review the following files for bugs, logic errors, edge cases,
|
|
207
|
+
and security issues. Files: {FILES}
|
|
208
|
+
Focus: null handling, race conditions, error propagation, input validation.
|
|
209
|
+
Limit REVIEW_REPORT to 15 lines maximum.
|
|
210
|
+
(Same output format as above with reviewer_focus: bugs)
|
|
211
|
+
```
|
|
212
|
+
|
|
213
|
+
### Review Focus: Conventions & Integration
|
|
214
|
+
```
|
|
215
|
+
Review the following files for adherence to project conventions
|
|
216
|
+
and proper integration with existing code. Files: {FILES}
|
|
217
|
+
Conventions: {CONVENTIONS}
|
|
218
|
+
Focus: import style, naming, patterns, test coverage.
|
|
219
|
+
Limit REVIEW_REPORT to 15 lines maximum.
|
|
220
|
+
(Same output format as above with reviewer_focus: conventions)
|
|
221
|
+
```
|
|
222
|
+
|
|
223
|
+
---
|
|
224
|
+
|
|
225
|
+
## Stage 6: Fix Review Findings
|
|
226
|
+
|
|
227
|
+
**Agent:** general-purpose (default model)
|
|
228
|
+
|
|
229
|
+
```
|
|
230
|
+
Fix the following code review findings. Read each file before
|
|
231
|
+
editing. Make minimal, targeted fixes — do not refactor surrounding code.
|
|
232
|
+
|
|
233
|
+
Limit FIX_REPORT to 10 lines maximum.
|
|
234
|
+
|
|
235
|
+
FINDINGS:
|
|
236
|
+
{critical and high severity findings from Stage 5}
|
|
237
|
+
|
|
238
|
+
After fixes, run: {PROJECT_CONFIG.test_runner}
|
|
239
|
+
|
|
240
|
+
FIX_REPORT:
|
|
241
|
+
- status: fixed|partial
|
|
242
|
+
- fixes_applied: {list}
|
|
243
|
+
- test_result: {last 20 lines}
|
|
244
|
+
- remaining_issues: {any unfixed items and why}
|
|
245
|
+
```
|
|
246
|
+
|
|
247
|
+
---
|
|
248
|
+
|
|
249
|
+
## Stage 7: Verify
|
|
250
|
+
|
|
251
|
+
**Agent:** Bash (haiku)
|
|
252
|
+
|
|
253
|
+
```
|
|
254
|
+
Run the full test suite and report results.
|
|
255
|
+
|
|
256
|
+
Limit TEST_REPORT to 10 lines maximum.
|
|
257
|
+
|
|
258
|
+
Steps:
|
|
259
|
+
1. {PROJECT_CONFIG.test_setup} (if any)
|
|
260
|
+
2. {PROJECT_CONFIG.test_runner} 2>&1 | tail -30
|
|
261
|
+
|
|
262
|
+
TEST_REPORT:
|
|
263
|
+
- status: all_passed|some_failed
|
|
264
|
+
- total: {number}
|
|
265
|
+
- passed: {number}
|
|
266
|
+
- failed: {number}
|
|
267
|
+
- last_30_lines: {output}
|
|
268
|
+
```
|
|
269
|
+
|
|
270
|
+
---
|
|
271
|
+
|
|
272
|
+
## Stage 8: Update Progress Documentation
|
|
273
|
+
|
|
274
|
+
**Agent:** general-purpose (default model)
|
|
275
|
+
|
|
276
|
+
```
|
|
277
|
+
Update project documentation to reflect completed work.
|
|
278
|
+
|
|
279
|
+
Limit DOCS_REPORT to 15 lines maximum.
|
|
280
|
+
|
|
281
|
+
## What Was Built
|
|
282
|
+
|
|
283
|
+
{PLAN summary}
|
|
284
|
+
|
|
285
|
+
## Implementation Summary
|
|
286
|
+
|
|
287
|
+
{approach_summary from ARCH_REPORT}
|
|
288
|
+
|
|
289
|
+
## Files Changed
|
|
290
|
+
|
|
291
|
+
{files from IMPL_REPORT}
|
|
292
|
+
|
|
293
|
+
## Test Results
|
|
294
|
+
|
|
295
|
+
{status from TEST_REPORT}
|
|
296
|
+
|
|
297
|
+
## Source Documents to Update
|
|
298
|
+
|
|
299
|
+
{source_docs from EXPLORE_REPORT}
|
|
300
|
+
|
|
301
|
+
## Rules
|
|
302
|
+
|
|
303
|
+
- ONLY update markers for items actually completed
|
|
304
|
+
- Do NOT add new content — only update existing progress markers
|
|
305
|
+
- Read each file BEFORE editing
|
|
306
|
+
- If a marker cannot be found, skip and report
|
|
307
|
+
|
|
308
|
+
DOCS_REPORT:
|
|
309
|
+
- status: updated|no_updates|partial
|
|
310
|
+
- docs_updated:
|
|
311
|
+
- path: {file}
|
|
312
|
+
changes:
|
|
313
|
+
- marker: {what was updated}
|
|
314
|
+
from: {old}
|
|
315
|
+
to: {new}
|
|
316
|
+
- docs_skipped:
|
|
317
|
+
- path: {file}
|
|
318
|
+
reason: {why}
|
|
319
|
+
```
|
|
320
|
+
|
|
321
|
+
---
|
|
322
|
+
|
|
323
|
+
## Stage 10: Debrief — Collect Outstanding Questions
|
|
324
|
+
|
|
325
|
+
**Agent:** None (runs on primary thread)
|
|
326
|
+
|
|
327
|
+
This stage collects unresolved items from all previous stages and presents
|
|
328
|
+
them to the user via AskUserQuestion.
|
|
329
|
+
|
|
330
|
+
### Sources of Outstanding Items
|
|
331
|
+
|
|
332
|
+
Scan all stage reports for unresolved items:
|
|
333
|
+
|
|
334
|
+
1. **EXPLORE_REPORT** → `potential_issues` not addressed by implementation
|
|
335
|
+
2. **ARCH_REPORT** → `risks` with deferred mitigations
|
|
336
|
+
3. **REVIEW_REPORT** → `medium` and `low` severity findings not fixed in Stage 6
|
|
337
|
+
4. **TEST_REPORT** → warnings, skipped tests, or flaky results
|
|
338
|
+
5. **DOCS_REPORT** → `docs_skipped` items
|
|
339
|
+
6. **IMPL_REPORT** → `issues_encountered` that were worked around, not solved
|
|
340
|
+
7. **Any stage** → questions or assumptions the subagent flagged but moved past
|
|
341
|
+
|
|
342
|
+
### Compilation Format
|
|
343
|
+
|
|
344
|
+
```
|
|
345
|
+
DEBRIEF_ITEMS:
|
|
346
|
+
- id: {N}
|
|
347
|
+
source: {stage name}
|
|
348
|
+
category: {unresolved_risk|deferred_fix|open_question|assumption|tech_debt}
|
|
349
|
+
summary: {one-line summary for the AskUserQuestion list}
|
|
350
|
+
description: {2-3 sentence explanation with relevant context}
|
|
351
|
+
evidence: {specific report field, file, or line that surfaced this}
|
|
352
|
+
impact: {what happens if left unaddressed}
|
|
353
|
+
suggested_action: {specific next step}
|
|
354
|
+
effort: {quick_fix|small_task|needs_investigation}
|
|
355
|
+
```
|
|
356
|
+
|
|
357
|
+
### Presentation
|
|
358
|
+
|
|
359
|
+
If no items found, skip this stage.
|
|
360
|
+
|
|
361
|
+
If items exist, present a numbered summary grouped by category via
|
|
362
|
+
AskUserQuestion. Each item shows: `[category] summary (effort)`.
|
|
363
|
+
|
|
364
|
+
```
|
|
365
|
+
"Build complete. {count} items surfaced during the process that may
|
|
366
|
+
need attention:"
|
|
367
|
+
|
|
368
|
+
Unresolved Risks:
|
|
369
|
+
1. [risk] Summary of risk (needs_investigation)
|
|
370
|
+
2. [risk] Summary of risk (small_task)
|
|
371
|
+
|
|
372
|
+
Open Questions:
|
|
373
|
+
3. [question] Summary of question (quick_fix)
|
|
374
|
+
|
|
375
|
+
Tech Debt:
|
|
376
|
+
4. [tech_debt] Summary of debt (small_task)
|
|
377
|
+
|
|
378
|
+
"How would you like to handle them?"
|
|
379
|
+
```
|
|
380
|
+
|
|
381
|
+
Options:
|
|
382
|
+
- "Fix now"
|
|
383
|
+
→ Create a task list of resolution activities. For each item, create
|
|
384
|
+
a concrete task with the suggested_action. Present the task list
|
|
385
|
+
for user confirmation, then work through them.
|
|
386
|
+
|
|
387
|
+
- "Create goals for future sessions"
|
|
388
|
+
→ For each item, write a goal file to goals/ (if GOTCHA structure
|
|
389
|
+
exists) or append to CLAUDE.md as a "Known Issues" section.
|
|
390
|
+
Format: one goal per category grouping, not one per item.
|
|
391
|
+
|
|
392
|
+
- "Note and continue"
|
|
393
|
+
→ Acknowledge items without formal tracking. Log to memory (if memory
|
|
394
|
+
system exists) or as comments in the relevant source files. No
|
|
395
|
+
further action.
|
|
396
|
+
|
|
397
|
+
- "Let me choose per item"
|
|
398
|
+
→ Present each item individually via AskUserQuestion. Show the full
|
|
399
|
+
`description`, `evidence`, and `impact` fields so the user has
|
|
400
|
+
enough context to decide. Options per item:
|
|
401
|
+
"Fix now" / "Add to goals" / "Explain more" / "Note and continue"
|
|
402
|
+
- "Fix now": launch a general-purpose subagent to resolve
|
|
403
|
+
- "Explain more": read the relevant source files/reports cited in
|
|
404
|
+
`evidence`, summarise the context, then re-present the same item
|
|
405
|
+
with the expanded explanation
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
[
|
|
2
|
+
{
|
|
3
|
+
"name": "banner-and-tagline",
|
|
4
|
+
"prompt": "Build this: Add a dark mode toggle to the settings page",
|
|
5
|
+
"assertions": [
|
|
6
|
+
{ "type": "contains", "value": "██" },
|
|
7
|
+
{ "type": "regex", "value": "(Compiling hopes|Bob the Builder|Voltron of code|Feature factory|Hold my coffee|Some assembly|mortar, and semicolons|see what this baby)" },
|
|
8
|
+
{ "type": "semantic", "value": "The response begins with an ASCII art banner displayed BEFORE any explanation or workflow steps" }
|
|
9
|
+
]
|
|
10
|
+
},
|
|
11
|
+
{
|
|
12
|
+
"name": "lifecycle-stages",
|
|
13
|
+
"prompt": "Build: Implement user authentication with JWT tokens",
|
|
14
|
+
"assertions": [
|
|
15
|
+
{ "type": "contains", "value": "██" },
|
|
16
|
+
{ "type": "regex", "value": "(explore|architect|implement|review)", "flags": "i" },
|
|
17
|
+
{ "type": "semantic", "value": "Describes a multi-stage development lifecycle that includes exploration, architecture design, implementation, code review, and shipping, with stages running in isolated subagents" }
|
|
18
|
+
]
|
|
19
|
+
},
|
|
20
|
+
{
|
|
21
|
+
"name": "flag-handling",
|
|
22
|
+
"prompt": "Build --skip-questions --no-ship: Refactor the auth module to use middleware pattern",
|
|
23
|
+
"assertions": [
|
|
24
|
+
{ "type": "contains", "value": "██" },
|
|
25
|
+
{ "type": "semantic", "value": "Acknowledges the --skip-questions flag (skipping clarifying questions) and the --no-ship flag (stopping before committing/pushing/creating PR)" }
|
|
26
|
+
]
|
|
27
|
+
}
|
|
28
|
+
]
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: distil
|
|
3
|
+
description: >
|
|
4
|
+
Generate multiple unique web design variations for any website or web application.
|
|
5
|
+
Accepts site specifications from a file (--spec path) or pasted text block.
|
|
6
|
+
Creates a Vite + React + TypeScript + Tailwind project with Bun and produces N different
|
|
7
|
+
creative designs accessible at /1, /2, /3, etc. Use when prototyping or exploring
|
|
8
|
+
design directions for any web interface.
|
|
9
|
+
---
|
|
10
|
+
|
|
11
|
+
# Distil - Design Variation Generator
|
|
12
|
+
|
|
13
|
+
When this skill is invoked, IMMEDIATELY output the banner below before doing anything else.
|
|
14
|
+
Pick ONE tagline at random — vary your choice each time:
|
|
15
|
+
|
|
16
|
+
```
|
|
17
|
+
{tagline}
|
|
18
|
+
|
|
19
|
+
██╗██████╗ ██╗███████╗████████╗██╗██╗
|
|
20
|
+
██╔╝██╔══██╗██║██╔════╝╚══██╔══╝██║██║
|
|
21
|
+
██╔╝ ██║ ██║██║███████╗ ██║ ██║██║
|
|
22
|
+
██╔╝ ██║ ██║██║╚════██║ ██║ ██║██║
|
|
23
|
+
██╔╝ ██████╔╝██║███████║ ██║ ██║███████╗
|
|
24
|
+
╚═╝ ╚═════╝ ╚═╝╚══════╝ ╚═╝ ╚═╝╚══════╝
|
|
25
|
+
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
Taglines:
|
|
29
|
+
- Heating up the column...
|
|
30
|
+
- Fractioning the design space!
|
|
31
|
+
- Condensing pure creativity!
|
|
32
|
+
- Separating signal from noise!
|
|
33
|
+
- Extracting the essence!
|
|
34
|
+
- Refining through iteration!
|
|
35
|
+
- Distilling N variations of brilliance!
|
|
36
|
+
- From crude concept to pure design!
|
|
37
|
+
|
|
38
|
+
Follow instructions in: [instructions.md](instructions.md)
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
import { useLocation, Link } from 'react-router-dom'
|
|
2
|
+
|
|
3
|
+
interface Design {
|
|
4
|
+
id: number
|
|
5
|
+
name: string
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
interface DesignNavProps {
|
|
9
|
+
designs: Design[]
|
|
10
|
+
variant?: 'light' | 'dark' | 'glass'
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
export default function DesignNav({ designs, variant = 'dark' }: DesignNavProps) {
|
|
14
|
+
const location = useLocation()
|
|
15
|
+
const currentDesign = parseInt(location.pathname.replace('/', '')) || 1
|
|
16
|
+
|
|
17
|
+
const baseStyles = {
|
|
18
|
+
light: 'bg-white border-slate-200 text-slate-600',
|
|
19
|
+
dark: 'bg-black/80 border-white/10 text-white/60',
|
|
20
|
+
glass: 'bg-white/10 backdrop-blur-xl border-white/20 text-white/60',
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
const activeStyles = {
|
|
24
|
+
light: 'bg-slate-900 text-white',
|
|
25
|
+
dark: 'bg-white text-black',
|
|
26
|
+
glass: 'bg-white/20 text-white',
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
const hoverStyles = {
|
|
30
|
+
light: 'hover:bg-slate-100',
|
|
31
|
+
dark: 'hover:bg-white/10',
|
|
32
|
+
glass: 'hover:bg-white/10',
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
return (
|
|
36
|
+
<div className={`fixed bottom-4 left-1/2 -translate-x-1/2 z-50 flex items-center gap-1 p-1 rounded-full border ${baseStyles[variant]}`}>
|
|
37
|
+
{designs.map((design) => {
|
|
38
|
+
const isActive = currentDesign === design.id
|
|
39
|
+
return (
|
|
40
|
+
<Link
|
|
41
|
+
key={design.id}
|
|
42
|
+
to={`/${design.id}`}
|
|
43
|
+
className={`flex items-center gap-2 px-3 py-2 rounded-full text-sm font-medium transition-all ${
|
|
44
|
+
isActive ? activeStyles[variant] : hoverStyles[variant]
|
|
45
|
+
}`}
|
|
46
|
+
>
|
|
47
|
+
<span>{design.id}</span>
|
|
48
|
+
{isActive && <span className="hidden sm:inline">{design.name}</span>}
|
|
49
|
+
</Link>
|
|
50
|
+
)
|
|
51
|
+
})}
|
|
52
|
+
</div>
|
|
53
|
+
)
|
|
54
|
+
}
|