@dedesfr/prompter 0.8.10 → 0.8.12
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/CHANGELOG.md +21 -0
- package/dist/cli/index.js +1 -1
- package/dist/cli/index.js.map +1 -1
- package/package.json +2 -2
- package/skills/frontend-design/LICENSE.txt +177 -0
- package/skills/frontend-design/SKILL.md +42 -0
- package/skills/ui-ux-pro-v2/SKILL.md +111 -257
- package/src/cli/index.ts +32 -32
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,26 @@
|
|
|
1
1
|
# CHANGELOG
|
|
2
2
|
|
|
3
|
+
## [0.8.12] - 2026-04-22
|
|
4
|
+
|
|
5
|
+
### 🔄 Changed
|
|
6
|
+
- **ui-ux-pro-v2 Skill**: Refactored and streamlined workflow for better clarity
|
|
7
|
+
- Simplified multi-step process into concise, actionable implementation stages
|
|
8
|
+
- Improved guidance for "Mock vs. Edit" decisions and browser verification
|
|
9
|
+
- Condensed design principles and iteration rules for faster execution
|
|
10
|
+
|
|
11
|
+
### 🗑️ Removed
|
|
12
|
+
- **Redundant Skill Directory**: Deleted accidental `mcp-builder copy/` folder and its contents
|
|
13
|
+
|
|
14
|
+
## [0.8.11] - 2026-04-22
|
|
15
|
+
|
|
16
|
+
### ✨ Added
|
|
17
|
+
- **frontend-design Skill**: Senior-level design workflow for creating distinctive, production-grade interfaces
|
|
18
|
+
- Guides the creation of visually striking, memorable, and functional frontend code
|
|
19
|
+
- Includes comprehensive guidelines for typography, color, motion, and spatial composition
|
|
20
|
+
- Focuses on intentional aesthetic directions to avoid generic "AI slop"
|
|
21
|
+
- Emphasizes production-grade implementation with meticulously refined details
|
|
22
|
+
|
|
23
|
+
|
|
3
24
|
## [0.8.10] - 2026-04-22
|
|
4
25
|
|
|
5
26
|
### ✨ Added
|
package/dist/cli/index.js
CHANGED
|
@@ -16,7 +16,7 @@ const program = new Command();
|
|
|
16
16
|
program
|
|
17
17
|
.name('prompter')
|
|
18
18
|
.description('Enhance prompts directly in your AI coding workflow')
|
|
19
|
-
.version('0.8.
|
|
19
|
+
.version('0.8.12');
|
|
20
20
|
program
|
|
21
21
|
.command('init')
|
|
22
22
|
.description('Initialize Prompter in your project')
|
package/dist/cli/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/cli/index.ts"],"names":[],"mappings":"AAAA,OAAO,GAAG,MAAM,KAAK,CAAC;AACtB,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AACtD,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAClD,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACpD,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AACxD,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AACtD,OAAO,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAC;AAC1D,OAAO,EAAE,qBAAqB,EAAE,MAAM,uBAAuB,CAAC;AAC9D,OAAO,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAC1D,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAClD,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAExD,MAAM,OAAO,GAAG,IAAI,OAAO,EAAE,CAAC;AAE9B,OAAO;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/cli/index.ts"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dedesfr/prompter",
|
|
3
|
-
"version": "0.8.
|
|
3
|
+
"version": "0.8.12",
|
|
4
4
|
"description": "Enhance prompts directly in your AI coding workflow",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/index.js",
|
|
@@ -51,4 +51,4 @@
|
|
|
51
51
|
"typescript": "^5.7.3",
|
|
52
52
|
"vitest": "^2.1.8"
|
|
53
53
|
}
|
|
54
|
-
}
|
|
54
|
+
}
|
|
@@ -0,0 +1,177 @@
|
|
|
1
|
+
|
|
2
|
+
Apache License
|
|
3
|
+
Version 2.0, January 2004
|
|
4
|
+
http://www.apache.org/licenses/
|
|
5
|
+
|
|
6
|
+
TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
|
|
7
|
+
|
|
8
|
+
1. Definitions.
|
|
9
|
+
|
|
10
|
+
"License" shall mean the terms and conditions for use, reproduction,
|
|
11
|
+
and distribution as defined by Sections 1 through 9 of this document.
|
|
12
|
+
|
|
13
|
+
"Licensor" shall mean the copyright owner or entity authorized by
|
|
14
|
+
the copyright owner that is granting the License.
|
|
15
|
+
|
|
16
|
+
"Legal Entity" shall mean the union of the acting entity and all
|
|
17
|
+
other entities that control, are controlled by, or are under common
|
|
18
|
+
control with that entity. For the purposes of this definition,
|
|
19
|
+
"control" means (i) the power, direct or indirect, to cause the
|
|
20
|
+
direction or management of such entity, whether by contract or
|
|
21
|
+
otherwise, or (ii) ownership of fifty percent (50%) or more of the
|
|
22
|
+
outstanding shares, or (iii) beneficial ownership of such entity.
|
|
23
|
+
|
|
24
|
+
"You" (or "Your") shall mean an individual or Legal Entity
|
|
25
|
+
exercising permissions granted by this License.
|
|
26
|
+
|
|
27
|
+
"Source" form shall mean the preferred form for making modifications,
|
|
28
|
+
including but not limited to software source code, documentation
|
|
29
|
+
source, and configuration files.
|
|
30
|
+
|
|
31
|
+
"Object" form shall mean any form resulting from mechanical
|
|
32
|
+
transformation or translation of a Source form, including but
|
|
33
|
+
not limited to compiled object code, generated documentation,
|
|
34
|
+
and conversions to other media types.
|
|
35
|
+
|
|
36
|
+
"Work" shall mean the work of authorship, whether in Source or
|
|
37
|
+
Object form, made available under the License, as indicated by a
|
|
38
|
+
copyright notice that is included in or attached to the work
|
|
39
|
+
(an example is provided in the Appendix below).
|
|
40
|
+
|
|
41
|
+
"Derivative Works" shall mean any work, whether in Source or Object
|
|
42
|
+
form, that is based on (or derived from) the Work and for which the
|
|
43
|
+
editorial revisions, annotations, elaborations, or other modifications
|
|
44
|
+
represent, as a whole, an original work of authorship. For the purposes
|
|
45
|
+
of this License, Derivative Works shall not include works that remain
|
|
46
|
+
separable from, or merely link (or bind by name) to the interfaces of,
|
|
47
|
+
the Work and Derivative Works thereof.
|
|
48
|
+
|
|
49
|
+
"Contribution" shall mean any work of authorship, including
|
|
50
|
+
the original version of the Work and any modifications or additions
|
|
51
|
+
to that Work or Derivative Works thereof, that is intentionally
|
|
52
|
+
submitted to Licensor for inclusion in the Work by the copyright owner
|
|
53
|
+
or by an individual or Legal Entity authorized to submit on behalf of
|
|
54
|
+
the copyright owner. For the purposes of this definition, "submitted"
|
|
55
|
+
means any form of electronic, verbal, or written communication sent
|
|
56
|
+
to the Licensor or its representatives, including but not limited to
|
|
57
|
+
communication on electronic mailing lists, source code control systems,
|
|
58
|
+
and issue tracking systems that are managed by, or on behalf of, the
|
|
59
|
+
Licensor for the purpose of discussing and improving the Work, but
|
|
60
|
+
excluding communication that is conspicuously marked or otherwise
|
|
61
|
+
designated in writing by the copyright owner as "Not a Contribution."
|
|
62
|
+
|
|
63
|
+
"Contributor" shall mean Licensor and any individual or Legal Entity
|
|
64
|
+
on behalf of whom a Contribution has been received by Licensor and
|
|
65
|
+
subsequently incorporated within the Work.
|
|
66
|
+
|
|
67
|
+
2. Grant of Copyright License. Subject to the terms and conditions of
|
|
68
|
+
this License, each Contributor hereby grants to You a perpetual,
|
|
69
|
+
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
|
|
70
|
+
copyright license to reproduce, prepare Derivative Works of,
|
|
71
|
+
publicly display, publicly perform, sublicense, and distribute the
|
|
72
|
+
Work and such Derivative Works in Source or Object form.
|
|
73
|
+
|
|
74
|
+
3. Grant of Patent License. Subject to the terms and conditions of
|
|
75
|
+
this License, each Contributor hereby grants to You a perpetual,
|
|
76
|
+
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
|
|
77
|
+
(except as stated in this section) patent license to make, have made,
|
|
78
|
+
use, offer to sell, sell, import, and otherwise transfer the Work,
|
|
79
|
+
where such license applies only to those patent claims licensable
|
|
80
|
+
by such Contributor that are necessarily infringed by their
|
|
81
|
+
Contribution(s) alone or by combination of their Contribution(s)
|
|
82
|
+
with the Work to which such Contribution(s) was submitted. If You
|
|
83
|
+
institute patent litigation against any entity (including a
|
|
84
|
+
cross-claim or counterclaim in a lawsuit) alleging that the Work
|
|
85
|
+
or a Contribution incorporated within the Work constitutes direct
|
|
86
|
+
or contributory patent infringement, then any patent licenses
|
|
87
|
+
granted to You under this License for that Work shall terminate
|
|
88
|
+
as of the date such litigation is filed.
|
|
89
|
+
|
|
90
|
+
4. Redistribution. You may reproduce and distribute copies of the
|
|
91
|
+
Work or Derivative Works thereof in any medium, with or without
|
|
92
|
+
modifications, and in Source or Object form, provided that You
|
|
93
|
+
meet the following conditions:
|
|
94
|
+
|
|
95
|
+
(a) You must give any other recipients of the Work or
|
|
96
|
+
Derivative Works a copy of this License; and
|
|
97
|
+
|
|
98
|
+
(b) You must cause any modified files to carry prominent notices
|
|
99
|
+
stating that You changed the files; and
|
|
100
|
+
|
|
101
|
+
(c) You must retain, in the Source form of any Derivative Works
|
|
102
|
+
that You distribute, all copyright, patent, trademark, and
|
|
103
|
+
attribution notices from the Source form of the Work,
|
|
104
|
+
excluding those notices that do not pertain to any part of
|
|
105
|
+
the Derivative Works; and
|
|
106
|
+
|
|
107
|
+
(d) If the Work includes a "NOTICE" text file as part of its
|
|
108
|
+
distribution, then any Derivative Works that You distribute must
|
|
109
|
+
include a readable copy of the attribution notices contained
|
|
110
|
+
within such NOTICE file, excluding those notices that do not
|
|
111
|
+
pertain to any part of the Derivative Works, in at least one
|
|
112
|
+
of the following places: within a NOTICE text file distributed
|
|
113
|
+
as part of the Derivative Works; within the Source form or
|
|
114
|
+
documentation, if provided along with the Derivative Works; or,
|
|
115
|
+
within a display generated by the Derivative Works, if and
|
|
116
|
+
wherever such third-party notices normally appear. The contents
|
|
117
|
+
of the NOTICE file are for informational purposes only and
|
|
118
|
+
do not modify the License. You may add Your own attribution
|
|
119
|
+
notices within Derivative Works that You distribute, alongside
|
|
120
|
+
or as an addendum to the NOTICE text from the Work, provided
|
|
121
|
+
that such additional attribution notices cannot be construed
|
|
122
|
+
as modifying the License.
|
|
123
|
+
|
|
124
|
+
You may add Your own copyright statement to Your modifications and
|
|
125
|
+
may provide additional or different license terms and conditions
|
|
126
|
+
for use, reproduction, or distribution of Your modifications, or
|
|
127
|
+
for any such Derivative Works as a whole, provided Your use,
|
|
128
|
+
reproduction, and distribution of the Work otherwise complies with
|
|
129
|
+
the conditions stated in this License.
|
|
130
|
+
|
|
131
|
+
5. Submission of Contributions. Unless You explicitly state otherwise,
|
|
132
|
+
any Contribution intentionally submitted for inclusion in the Work
|
|
133
|
+
by You to the Licensor shall be under the terms and conditions of
|
|
134
|
+
this License, without any additional terms or conditions.
|
|
135
|
+
Notwithstanding the above, nothing herein shall supersede or modify
|
|
136
|
+
the terms of any separate license agreement you may have executed
|
|
137
|
+
with Licensor regarding such Contributions.
|
|
138
|
+
|
|
139
|
+
6. Trademarks. This License does not grant permission to use the trade
|
|
140
|
+
names, trademarks, service marks, or product names of the Licensor,
|
|
141
|
+
except as required for reasonable and customary use in describing the
|
|
142
|
+
origin of the Work and reproducing the content of the NOTICE file.
|
|
143
|
+
|
|
144
|
+
7. Disclaimer of Warranty. Unless required by applicable law or
|
|
145
|
+
agreed to in writing, Licensor provides the Work (and each
|
|
146
|
+
Contributor provides its Contributions) on an "AS IS" BASIS,
|
|
147
|
+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
|
|
148
|
+
implied, including, without limitation, any warranties or conditions
|
|
149
|
+
of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
|
|
150
|
+
PARTICULAR PURPOSE. You are solely responsible for determining the
|
|
151
|
+
appropriateness of using or redistributing the Work and assume any
|
|
152
|
+
risks associated with Your exercise of permissions under this License.
|
|
153
|
+
|
|
154
|
+
8. Limitation of Liability. In no event and under no legal theory,
|
|
155
|
+
whether in tort (including negligence), contract, or otherwise,
|
|
156
|
+
unless required by applicable law (such as deliberate and grossly
|
|
157
|
+
negligent acts) or agreed to in writing, shall any Contributor be
|
|
158
|
+
liable to You for damages, including any direct, indirect, special,
|
|
159
|
+
incidental, or consequential damages of any character arising as a
|
|
160
|
+
result of this License or out of the use or inability to use the
|
|
161
|
+
Work (including but not limited to damages for loss of goodwill,
|
|
162
|
+
work stoppage, computer failure or malfunction, or any and all
|
|
163
|
+
other commercial damages or losses), even if such Contributor
|
|
164
|
+
has been advised of the possibility of such damages.
|
|
165
|
+
|
|
166
|
+
9. Accepting Warranty or Additional Liability. While redistributing
|
|
167
|
+
the Work or Derivative Works thereof, You may choose to offer,
|
|
168
|
+
and charge a fee for, acceptance of support, warranty, indemnity,
|
|
169
|
+
or other liability obligations and/or rights consistent with this
|
|
170
|
+
License. However, in accepting such obligations, You may act only
|
|
171
|
+
on Your own behalf and on Your sole responsibility, not on behalf
|
|
172
|
+
of any other Contributor, and only if You agree to indemnify,
|
|
173
|
+
defend, and hold each Contributor harmless for any liability
|
|
174
|
+
incurred by, or claims asserted against, such Contributor by reason
|
|
175
|
+
of your accepting any such warranty or additional liability.
|
|
176
|
+
|
|
177
|
+
END OF TERMS AND CONDITIONS
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: frontend-design
|
|
3
|
+
description: Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.
|
|
4
|
+
license: Complete terms in LICENSE.txt
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
This skill guides creation of distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. Implement real working code with exceptional attention to aesthetic details and creative choices.
|
|
8
|
+
|
|
9
|
+
The user provides frontend requirements: a component, page, application, or interface to build. They may include context about the purpose, audience, or technical constraints.
|
|
10
|
+
|
|
11
|
+
## Design Thinking
|
|
12
|
+
|
|
13
|
+
Before coding, understand the context and commit to a BOLD aesthetic direction:
|
|
14
|
+
- **Purpose**: What problem does this interface solve? Who uses it?
|
|
15
|
+
- **Tone**: Pick an extreme: brutally minimal, maximalist chaos, retro-futuristic, organic/natural, luxury/refined, playful/toy-like, editorial/magazine, brutalist/raw, art deco/geometric, soft/pastel, industrial/utilitarian, etc. There are so many flavors to choose from. Use these for inspiration but design one that is true to the aesthetic direction.
|
|
16
|
+
- **Constraints**: Technical requirements (framework, performance, accessibility).
|
|
17
|
+
- **Differentiation**: What makes this UNFORGETTABLE? What's the one thing someone will remember?
|
|
18
|
+
|
|
19
|
+
**CRITICAL**: Choose a clear conceptual direction and execute it with precision. Bold maximalism and refined minimalism both work - the key is intentionality, not intensity.
|
|
20
|
+
|
|
21
|
+
Then implement working code (HTML/CSS/JS, React, Vue, etc.) that is:
|
|
22
|
+
- Production-grade and functional
|
|
23
|
+
- Visually striking and memorable
|
|
24
|
+
- Cohesive with a clear aesthetic point-of-view
|
|
25
|
+
- Meticulously refined in every detail
|
|
26
|
+
|
|
27
|
+
## Frontend Aesthetics Guidelines
|
|
28
|
+
|
|
29
|
+
Focus on:
|
|
30
|
+
- **Typography**: Choose fonts that are beautiful, unique, and interesting. Avoid generic fonts like Arial and Inter; opt instead for distinctive choices that elevate the frontend's aesthetics; unexpected, characterful font choices. Pair a distinctive display font with a refined body font.
|
|
31
|
+
- **Color & Theme**: Commit to a cohesive aesthetic. Use CSS variables for consistency. Dominant colors with sharp accents outperform timid, evenly-distributed palettes.
|
|
32
|
+
- **Motion**: Use animations for effects and micro-interactions. Prioritize CSS-only solutions for HTML. Use Motion library for React when available. Focus on high-impact moments: one well-orchestrated page load with staggered reveals (animation-delay) creates more delight than scattered micro-interactions. Use scroll-triggering and hover states that surprise.
|
|
33
|
+
- **Spatial Composition**: Unexpected layouts. Asymmetry. Overlap. Diagonal flow. Grid-breaking elements. Generous negative space OR controlled density.
|
|
34
|
+
- **Backgrounds & Visual Details**: Create atmosphere and depth rather than defaulting to solid colors. Add contextual effects and textures that match the overall aesthetic. Apply creative forms like gradient meshes, noise textures, geometric patterns, layered transparencies, dramatic shadows, decorative borders, custom cursors, and grain overlays.
|
|
35
|
+
|
|
36
|
+
NEVER use generic AI-generated aesthetics like overused font families (Inter, Roboto, Arial, system fonts), cliched color schemes (particularly purple gradients on white backgrounds), predictable layouts and component patterns, and cookie-cutter design that lacks context-specific character.
|
|
37
|
+
|
|
38
|
+
Interpret creatively and make unexpected choices that feel genuinely designed for the context. No design should be the same. Vary between light and dark themes, different fonts, different aesthetics. NEVER converge on common choices (Space Grotesk, for example) across generations.
|
|
39
|
+
|
|
40
|
+
**IMPORTANT**: Match implementation complexity to the aesthetic vision. Maximalist designs need elaborate code with extensive animations and effects. Minimalist or refined designs need restraint, precision, and careful attention to spacing, typography, and subtle details. Elegance comes from executing the vision well.
|
|
41
|
+
|
|
42
|
+
Remember: Claude is capable of extraordinary creative work. Don't hold back, show what can truly be created when thinking outside the box and committing fully to a distinctive vision.
|
|
@@ -5,335 +5,189 @@ description: Design and revise UI/UX like a senior designer. Analyzes project co
|
|
|
5
5
|
|
|
6
6
|
# UI UX Pro v2
|
|
7
7
|
|
|
8
|
-
Act as a senior UI/UX designer. Make opinionated design decisions based on project context. Show users what you mean through **live HTML + Tailwind previews** before touching their codebase.
|
|
8
|
+
Act as a senior UI/UX designer. Make opinionated design decisions based on project context. Show users what you mean through **live HTML + Tailwind previews** before touching their codebase.
|
|
9
9
|
|
|
10
10
|
---
|
|
11
11
|
|
|
12
|
-
##
|
|
12
|
+
## Critical Rules (Read First)
|
|
13
13
|
|
|
14
|
-
|
|
15
|
-
2. **Preview before you build** — Every proposal is a real, openable HTML file. No abstract descriptions, no code dumped into the real codebase until direction is approved.
|
|
16
|
-
3. **Low-fi, then high-fi** — Two-pass rule. Confirm layout in grayscale first, then polish with real tokens. This prevents users fixating on color before structure is right.
|
|
17
|
-
4. **Recommend, don't menu** — Variations are fine (up to 3), but always mark one as recommended with a clear reason.
|
|
18
|
-
5. **Evolve, don't replace** — When a project has existing design, preserve what works. Introduce changes incrementally.
|
|
19
|
-
6. **The mock is disposable** — Previews live in `.preview/` and are not the implementation. Always tell the user this.
|
|
14
|
+
These are the most commonly violated rules — internalize before proceeding:
|
|
20
15
|
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
- **Component library** (shadcn, Radix, Material, Chakra, Mantine, etc.)
|
|
31
|
-
- **Vanilla CSS / CSS modules / CSS-in-JS**
|
|
32
|
-
3. Scan for design tokens: CSS variables, theme files, color palettes, font stacks
|
|
33
|
-
4. Note the frontend framework (React, Vue, Svelte, Next, Laravel Blade, etc.)
|
|
34
|
-
|
|
35
|
-
This context drives your design decisions. Do not ask the user to confirm what you can read from the codebase.
|
|
16
|
+
1. **Diagnose redesigns yourself** — never ask "what feels wrong?" Analyze the page, surface 3–4 findings, then build the low-fi. Users can't answer design questions in design vocabulary.
|
|
17
|
+
2. **Low-fi before high-fi, always** — get layout approval in grayscale before applying color, type, or polish. Never skip to high-fi.
|
|
18
|
+
3. **Preview before real code** — never write to the actual codebase until the user approves the preview direction.
|
|
19
|
+
4. **Tailwind CDN in previews, always** — even if the project uses shadcn/Material/etc. Previews are disposable; don't entangle them with the build system.
|
|
20
|
+
5. **Section comments required** — every major HTML block needs `<!-- Section: Name -->` so users can give spatial feedback without knowing HTML.
|
|
21
|
+
6. **Default one variant** — build one recommended design, then offer: *"I can show 1–2 alternatives if you want to compare."* Don't push a menu upfront.
|
|
22
|
+
7. **Always include a recommendation** — every choice you present must name a preferred option with a one-line reason.
|
|
23
|
+
8. **Don't delete `.preview/`** — user keeps these as reference. Never auto-clean.
|
|
24
|
+
9. **Tell user to verify in browser** — do not attempt to run the dev server yourself.
|
|
36
25
|
|
|
37
26
|
---
|
|
38
27
|
|
|
39
|
-
##
|
|
28
|
+
## Workflow
|
|
40
29
|
|
|
41
|
-
|
|
30
|
+
`Step 0: Read context → Step 1: Discovery → Step 2: Low-fi preview → [approval] → Step 3: High-fi → [approval] → Step 4: Implement → Step 5: Iterate`
|
|
42
31
|
|
|
43
|
-
|
|
44
|
-
1. **What is this for?** — Page/feature, audience, goal
|
|
45
|
-
2. **Any references?** — Sites or apps they like the feel of (optional)
|
|
32
|
+
---
|
|
46
33
|
|
|
47
|
-
|
|
48
|
-
1. **What feels wrong?** — Specific pain points
|
|
49
|
-
2. **What should stay?** — Elements to preserve
|
|
34
|
+
## Step 0: Read Project Context (Silent)
|
|
50
35
|
|
|
51
|
-
|
|
52
|
-
1. **Which pages/components?** — Scope of review
|
|
36
|
+
Before designing, silently gather — do not ask the user:
|
|
53
37
|
|
|
54
|
-
|
|
55
|
-
-
|
|
56
|
-
-
|
|
57
|
-
-
|
|
38
|
+
- Read `AGENTS.md` and `CLAUDE.md` for tech stack and conventions
|
|
39
|
+
- Detect CSS system: Tailwind, shadcn/Radix/Material/Chakra, vanilla CSS, CSS-in-JS
|
|
40
|
+
- Scan for design tokens: CSS variables, theme files, color palettes, font stacks
|
|
41
|
+
- Note the frontend framework: React, Vue, Svelte, Next, Laravel Blade, etc.
|
|
58
42
|
|
|
59
43
|
---
|
|
60
44
|
|
|
61
|
-
## Step
|
|
45
|
+
## Step 1: Discovery
|
|
46
|
+
|
|
47
|
+
### New designs
|
|
48
|
+
1. Ask: *"What is this for?"* — page/feature, audience, goal
|
|
49
|
+
2. Ask one optional: *"Any vibe or reference in mind? (totally optional)"* — proceed regardless
|
|
50
|
+
|
|
51
|
+
### Redesigns and audits
|
|
52
|
+
Do NOT ask open-ended questions. Most users cannot articulate design problems.
|
|
53
|
+
|
|
54
|
+
1. Silently analyze the existing page — read the code or screenshot
|
|
55
|
+
2. Present a short diagnostic (3–4 bullets, plain language):
|
|
56
|
+
```
|
|
57
|
+
Here's what I noticed before I start:
|
|
58
|
+
- Weak hierarchy — CTA competes with secondary content
|
|
59
|
+
- Inconsistent spacing — no clear scale
|
|
60
|
+
- Low contrast on the action button (likely fails WCAG AA)
|
|
61
|
+
- Font sizes too uniform — headlines don't feel distinct
|
|
62
|
+
```
|
|
63
|
+
3. Ask one soft optional: *"Anything to keep, or a vibe/reference in mind? (I'll proceed either way)"*
|
|
64
|
+
4. Build the low-fi immediately — with or without their answer
|
|
65
|
+
|
|
66
|
+
### Never ask:
|
|
67
|
+
- "What feels wrong?" — diagnose it yourself
|
|
68
|
+
- "What should stay?" — infer from the existing design
|
|
69
|
+
- "Which direction resonates?" — you pick
|
|
70
|
+
- "What color scheme?" — derive from brand or propose one
|
|
71
|
+
- Multiple-choice aesthetic menus — overwhelming for non-designers
|
|
62
72
|
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
### Preview Directory
|
|
73
|
+
---
|
|
66
74
|
|
|
67
|
-
|
|
75
|
+
## Step 2: Preview (REQUIRED Before Any Real Code)
|
|
68
76
|
|
|
77
|
+
### File structure
|
|
69
78
|
```
|
|
70
79
|
.preview/
|
|
71
|
-
├──
|
|
72
|
-
├──
|
|
73
|
-
├──
|
|
74
|
-
|
|
75
|
-
└── hero-v3.html # High-fi variation 3 (optional)
|
|
76
|
-
```
|
|
77
|
-
|
|
78
|
-
**Rules for `.preview/`:**
|
|
79
|
-
- Do NOT auto-delete. The user keeps these as reference.
|
|
80
|
-
- Add `.preview/` to `.gitignore` if not already ignored (ask first if repo tracks it).
|
|
81
|
-
- Each file must be standalone and openable with `file://` or a simple static server.
|
|
82
|
-
|
|
83
|
-
### Stack Decision — Which CSS to Use in the Mock
|
|
84
|
-
|
|
85
|
-
**Always use plain Tailwind via CDN in the preview, even if the project uses shadcn/Radix/Material.**
|
|
86
|
-
|
|
87
|
-
Reasoning:
|
|
88
|
-
- **Efficiency** — no build step, no dependency wiring, instant preview
|
|
89
|
-
- **Isolation** — the mock stays disposable; not entangled with the real design system
|
|
90
|
-
- **Portability** — user can open the file without running their dev server
|
|
91
|
-
|
|
92
|
-
Exceptions:
|
|
93
|
-
- If the project uses **custom CSS variables or brand tokens**, inline them in a `<style>` block in the mock so colors/fonts match
|
|
94
|
-
- If the project has **no CSS system at all**, still use Tailwind CDN — it's the fastest way to produce a quality mock
|
|
95
|
-
|
|
96
|
-
The real implementation (Step 4) uses the project's actual design system (shadcn components, Material, etc.). The mock uses plain Tailwind. Keep this separation clear.
|
|
97
|
-
|
|
98
|
-
### Preview HTML Template
|
|
99
|
-
|
|
100
|
-
```html
|
|
101
|
-
<!doctype html>
|
|
102
|
-
<html lang="en">
|
|
103
|
-
<head>
|
|
104
|
-
<meta charset="utf-8" />
|
|
105
|
-
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
106
|
-
<title>Preview — [Feature Name]</title>
|
|
107
|
-
<script src="https://cdn.tailwindcss.com"></script>
|
|
108
|
-
<style>
|
|
109
|
-
/* Inline project brand tokens here if they exist */
|
|
110
|
-
:root {
|
|
111
|
-
--brand: #0ea5e9;
|
|
112
|
-
--brand-fg: #ffffff;
|
|
113
|
-
}
|
|
114
|
-
body { font-family: ui-sans-serif, system-ui, sans-serif; }
|
|
115
|
-
</style>
|
|
116
|
-
</head>
|
|
117
|
-
<body class="bg-gray-50 text-gray-900">
|
|
118
|
-
<!-- Section: Header -->
|
|
119
|
-
<header class="...">...</header>
|
|
120
|
-
|
|
121
|
-
<!-- Section: Hero -->
|
|
122
|
-
<section class="...">...</section>
|
|
123
|
-
|
|
124
|
-
<!-- Section: Features -->
|
|
125
|
-
<section class="...">...</section>
|
|
126
|
-
|
|
127
|
-
<!-- Section: Footer -->
|
|
128
|
-
<footer class="...">...</footer>
|
|
129
|
-
</body>
|
|
130
|
-
</html>
|
|
80
|
+
├── <feature>-lowfi.html # Pass 1: grayscale layout
|
|
81
|
+
├── <feature>-v1.html # Pass 2: high-fi (recommended)
|
|
82
|
+
├── <feature>-v2.html # Optional variation
|
|
83
|
+
└── variations.html # Hub if multiple variants exist
|
|
131
84
|
```
|
|
132
85
|
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
Every major block gets an HTML comment: `<!-- Section: Hero -->`. This preserves the "point and move" feedback pattern — users can say "move the Hero below Features" without knowing HTML.
|
|
86
|
+
- Files must be standalone, openable with `file://`
|
|
87
|
+
- Add `.preview/` to `.gitignore` if not ignored (ask first if repo tracks it)
|
|
136
88
|
|
|
137
|
-
###
|
|
89
|
+
### CSS in previews
|
|
90
|
+
Always use Tailwind CDN (`<script src="https://cdn.tailwindcss.com"></script>`), even if the project uses shadcn/Material. If the project has brand tokens (CSS variables), inline them in a `<style>` block so colors/fonts match. The real implementation uses the project's actual design system — keep this separation clear.
|
|
138
91
|
|
|
139
|
-
|
|
140
|
-
-
|
|
141
|
-
- System font only
|
|
92
|
+
### Pass 1: Low-fi (grayscale, structural)
|
|
93
|
+
- Grays and neutrals only — no brand colors
|
|
94
|
+
- System font only — no custom typography
|
|
142
95
|
- No shadows, gradients, or decorative effects
|
|
143
96
|
- Focus: layout, hierarchy, spacing, content flow
|
|
144
97
|
- File: `<feature>-lowfi.html`
|
|
145
98
|
|
|
146
|
-
Present
|
|
99
|
+
Present, wait for layout approval before proceeding.
|
|
147
100
|
|
|
148
|
-
|
|
101
|
+
### Pass 2: High-fi (after low-fi is approved)
|
|
149
102
|
- Apply brand colors, typography, shadows, borders
|
|
150
|
-
- Add
|
|
151
|
-
-
|
|
152
|
-
- File: `<feature>-v1.html` (+ optional `-v2.html`, `-v3.html` for variations)
|
|
153
|
-
|
|
154
|
-
Move to Pass 2 only after the user confirms the low-fi structure.
|
|
155
|
-
|
|
156
|
-
### Variations (Optional, Max 3)
|
|
157
|
-
|
|
158
|
-
When the design direction is genuinely ambiguous, produce up to **3 variations** in the high-fi pass. Each in its own file. Create a `variations.html` hub that iframes or links to all three side-by-side for comparison:
|
|
159
|
-
|
|
160
|
-
```html
|
|
161
|
-
<!-- variations.html -->
|
|
162
|
-
<div class="grid grid-cols-1 lg:grid-cols-3 gap-4 p-4">
|
|
163
|
-
<div>
|
|
164
|
-
<h3 class="font-semibold mb-2">V1 — Minimal ⭐ Recommended</h3>
|
|
165
|
-
<iframe src="./hero-v1.html" class="w-full h-[600px] border rounded"></iframe>
|
|
166
|
-
<p class="text-sm text-gray-600 mt-2">Best because [reason].</p>
|
|
167
|
-
</div>
|
|
168
|
-
<div>
|
|
169
|
-
<h3 class="font-semibold mb-2">V2 — Bold</h3>
|
|
170
|
-
<iframe src="./hero-v2.html" class="w-full h-[600px] border rounded"></iframe>
|
|
171
|
-
<p class="text-sm text-gray-600 mt-2">Better if [scenario].</p>
|
|
172
|
-
</div>
|
|
173
|
-
<div>
|
|
174
|
-
<h3 class="font-semibold mb-2">V3 — Editorial</h3>
|
|
175
|
-
<iframe src="./hero-v3.html" class="w-full h-[600px] border rounded"></iframe>
|
|
176
|
-
<p class="text-sm text-gray-600 mt-2">Better if [scenario].</p>
|
|
177
|
-
</div>
|
|
178
|
-
</div>
|
|
179
|
-
```
|
|
103
|
+
- Add hover/focus states, responsive breakpoints
|
|
104
|
+
- File: `<feature>-v1.html`
|
|
180
105
|
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
### Delegating to `frontend-design` Skill
|
|
184
|
-
|
|
185
|
-
If a `frontend-design` skill (or similar HTML/Tailwind generation skill) is available in the current session, delegate the actual mock construction to it — pass your layout decisions and content, let it produce the markup. If not available, build the markup inline. Either way, you own the layout decisions, the stack rules above, and the section-comment convention.
|
|
186
|
-
|
|
187
|
-
### Presenting the Proposal
|
|
188
|
-
|
|
189
|
-
Structure your message as:
|
|
106
|
+
### Variations
|
|
107
|
+
Default to one. Offer more only if the user asks, or if there is genuinely zero style signal to work from. Max 3. When building multiple, create a `variations.html` hub that links or iframes all variants side-by-side. Always mark one as **Recommended ⭐** with a one-line reason.
|
|
190
108
|
|
|
109
|
+
### Proposal message format
|
|
191
110
|
```
|
|
192
111
|
## Design Proposal: [Feature Name]
|
|
193
112
|
|
|
194
113
|
**Approach:** [1-2 sentences on direction and why]
|
|
195
|
-
|
|
196
114
|
**Preview:** `.preview/<feature>-lowfi.html` (open in browser)
|
|
197
115
|
|
|
198
116
|
### Key Decisions
|
|
199
117
|
- [Decision]: [rationale]
|
|
200
|
-
- [Decision]: [rationale]
|
|
201
|
-
|
|
202
|
-
This is a throwaway mock — once you approve the direction I'll build
|
|
203
|
-
it properly in your codebase using [shadcn / Material / your design system].
|
|
204
118
|
|
|
119
|
+
This is a throwaway mock — once approved I'll build it in your codebase using [design system].
|
|
205
120
|
Does the layout work? I can adjust any section before moving to high-fi.
|
|
206
121
|
```
|
|
207
122
|
|
|
208
123
|
---
|
|
209
124
|
|
|
210
|
-
## Step 3: Mock vs. Edit
|
|
211
|
-
|
|
212
|
-
Not every request needs a standalone mock. Decide up front:
|
|
125
|
+
## Step 3: Mock vs. Edit
|
|
213
126
|
|
|
214
|
-
###
|
|
215
|
-
- New page or feature
|
|
216
|
-
- Major redesign
|
|
217
|
-
- Multiple directions are plausible
|
|
218
|
-
- User is non-technical and needs to see before
|
|
127
|
+
### Build a preview when:
|
|
128
|
+
- New page or feature
|
|
129
|
+
- Major redesign
|
|
130
|
+
- Multiple directions are plausible
|
|
131
|
+
- User is non-technical and needs to see before reacting
|
|
219
132
|
|
|
220
|
-
### Edit real code directly
|
|
221
|
-
- Small
|
|
222
|
-
- Fixing a specific
|
|
223
|
-
- Adding
|
|
133
|
+
### Edit real code directly when:
|
|
134
|
+
- Small tweak (color, spacing, copy)
|
|
135
|
+
- Fixing a specific bug the user pointed at
|
|
136
|
+
- Adding one element to an already-approved layout
|
|
224
137
|
- User is a developer who asked for a specific change
|
|
225
138
|
|
|
226
|
-
|
|
227
|
-
The cost of a disposable HTML file is low. The cost of the user rejecting a real-code change and you having to undo it is higher.
|
|
228
|
-
|
|
229
|
-
---
|
|
230
|
-
|
|
231
|
-
## Step 4: Design Analysis (For Existing Projects)
|
|
232
|
-
|
|
233
|
-
When auditing existing code, analyze yourself and present findings organized by impact.
|
|
234
|
-
|
|
235
|
-
### What to Evaluate
|
|
236
|
-
1. **Visual hierarchy** — Is important content visually dominant?
|
|
237
|
-
2. **Consistency** — Are spacing, colors, components systematic?
|
|
238
|
-
3. **Usability** — Contrast (WCAG AA minimum), touch targets (44px+), form labels, affordances
|
|
239
|
-
4. **Responsiveness** — Does it work across breakpoints?
|
|
240
|
-
5. **Interaction quality** — Transitions, loading/error/empty states
|
|
241
|
-
6. **Dark mode** — If the project supports it, does this feature work in both themes?
|
|
242
|
-
|
|
243
|
-
### Present Findings with Before/After Previews
|
|
244
|
-
|
|
245
|
-
For each high-impact issue, produce a **before/after preview** in `.preview/audit/`:
|
|
246
|
-
|
|
247
|
-
```
|
|
248
|
-
.preview/audit/
|
|
249
|
-
├── nav-before.html
|
|
250
|
-
├── nav-after.html
|
|
251
|
-
└── index.html # Side-by-side comparison
|
|
252
|
-
```
|
|
253
|
-
|
|
254
|
-
Don't just list problems — show the fix in HTML the user can open.
|
|
139
|
+
**When in doubt — mock it.** A disposable HTML file costs little; undoing rejected real-code changes costs more.
|
|
255
140
|
|
|
256
141
|
---
|
|
257
142
|
|
|
258
|
-
## Step
|
|
259
|
-
|
|
260
|
-
Once the preview is approved, implement in the project's actual stack.
|
|
261
|
-
|
|
262
|
-
### Order of Implementation
|
|
263
|
-
1. **Layout structure and spacing** — Get the bones right first
|
|
264
|
-
2. **Typography and color** — Apply the visual language
|
|
265
|
-
3. **Component details** — Buttons, forms, cards (use the project's design system — shadcn, Material, etc.)
|
|
266
|
-
4. **Interaction states** — Hover, focus, loading, error, empty
|
|
267
|
-
5. **Responsive adaptations** — Mobile/tablet breakpoints
|
|
268
|
-
6. **Dark mode** — If the project supports theming, verify both modes
|
|
269
|
-
|
|
270
|
-
After each chunk, check in: "Layout is done — moving to typography next, or want to adjust anything?"
|
|
271
|
-
|
|
272
|
-
### Browser Verification
|
|
143
|
+
## Step 4: Implementation (After Preview Approved)
|
|
273
144
|
|
|
274
|
-
|
|
145
|
+
### Order
|
|
146
|
+
1. Layout structure and spacing
|
|
147
|
+
2. Typography and color
|
|
148
|
+
3. Component details — use the project's design system (shadcn, Material, etc.)
|
|
149
|
+
4. Interaction states — hover, focus, loading, error, empty
|
|
150
|
+
5. Responsive breakpoints
|
|
151
|
+
6. Dark mode — if the project supports theming
|
|
275
152
|
|
|
276
|
-
|
|
153
|
+
Check in after each chunk: *"Layout done — moving to typography, or want to adjust anything?"*
|
|
154
|
+
When done: tell the user to open the page in their browser to verify.
|
|
277
155
|
|
|
278
|
-
|
|
156
|
+
### Rules (see [design-principles.md](references/design-principles.md) for full catalog)
|
|
279
157
|
- No gratuitous gradients, glassmorphism, or trend effects without purpose
|
|
280
|
-
- Intentional border-radius
|
|
158
|
+
- Intentional border-radius — not `rounded-full` on everything
|
|
281
159
|
- Typography does 80% of the work
|
|
282
|
-
- Color
|
|
283
|
-
-
|
|
160
|
+
- Color: 1–2 primaries, 1 accent, rest neutrals
|
|
161
|
+
- Transitions: 150–200ms for small elements, 300–400ms for layout shifts
|
|
284
162
|
- Whitespace creates hierarchy
|
|
285
163
|
|
|
286
|
-
### Adapting
|
|
164
|
+
### Adapting existing design
|
|
287
165
|
- Preserve brand colors, fonts, recognizable patterns
|
|
288
166
|
- Use existing CSS variables and design tokens
|
|
289
|
-
-
|
|
290
|
-
- Flag when a user request conflicts with their design system; recommend the best path
|
|
167
|
+
- Flag conflicts between the user's request and their design system; recommend the best path
|
|
291
168
|
|
|
292
169
|
---
|
|
293
170
|
|
|
294
|
-
## Step
|
|
295
|
-
|
|
296
|
-
### Responding to Feedback
|
|
297
|
-
- **"I like it but..."** — Targeted adjustment in the preview, preserve what works
|
|
298
|
-
- **"It's not what I imagined"** — Revise the preview before recoding
|
|
299
|
-
- **"Can you try..."** — Update the preview, re-open
|
|
300
|
-
- **"Perfect!"** — Move from preview to real implementation
|
|
301
|
-
|
|
302
|
-
### When the User is Unsure
|
|
303
|
-
1. Make the decision yourself based on best practices
|
|
304
|
-
2. Explain your reasoning in plain language
|
|
305
|
-
3. Build the preview
|
|
306
|
-
4. Say: "This is what I'd recommend. If something feels off once you see it, tell me and I'll adjust."
|
|
307
|
-
|
|
308
|
-
---
|
|
309
|
-
|
|
310
|
-
## Handling Options — The Recommendation Rule
|
|
311
|
-
|
|
312
|
-
**Every time you present a choice, you MUST include a recommendation.**
|
|
313
|
-
|
|
314
|
-
For HTML previews with variations, render all variations but mark one as recommended in the hub file and in your message. Never present more than 3 variations at once.
|
|
315
|
-
|
|
316
|
-
---
|
|
317
|
-
|
|
318
|
-
## Skill Level Adaptation
|
|
319
|
-
|
|
320
|
-
Infer from how the user communicates. Never ask.
|
|
171
|
+
## Step 5: Iteration
|
|
321
172
|
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
173
|
+
| User says | You do |
|
|
174
|
+
|---|---|
|
|
175
|
+
| "I like it but…" | Targeted tweak in preview, preserve what works |
|
|
176
|
+
| "It's not what I imagined" | Revise preview before touching real code |
|
|
177
|
+
| "Can you try…" | Update preview, re-present |
|
|
178
|
+
| "Perfect!" | Move to implementation |
|
|
179
|
+
| User is unsure | Decide yourself, explain in plain language, build it, say: *"This is what I'd recommend. Tell me if something feels off."* |
|
|
325
180
|
|
|
326
181
|
---
|
|
327
182
|
|
|
328
183
|
## Edge Cases
|
|
329
184
|
|
|
330
|
-
- **No existing design
|
|
331
|
-
- **Screenshot input
|
|
332
|
-
- **Design system conflict
|
|
333
|
-
- **Accessibility
|
|
334
|
-
- **Performance
|
|
335
|
-
- **Dark mode
|
|
336
|
-
- **No browser access**: If you can't run the dev server to verify, say so — don't claim success from a passing build alone.
|
|
185
|
+
- **No existing design** — derive from project type and stack, propose a cohesive starting point
|
|
186
|
+
- **Screenshot input** — analyze visually, recreate as HTML preview to confirm understanding before implementing
|
|
187
|
+
- **Design system conflict** — flag it, recommend extending the system vs. one-off, explain trade-off
|
|
188
|
+
- **Accessibility** — always meet WCAG AA; if a request fails it, explain and offer an accessible alternative
|
|
189
|
+
- **Performance** — flag heavy animations, large images, complex CSS; suggest alternatives
|
|
190
|
+
- **Dark mode** — if the project supports theming, include a dark-mode variant (toggle or separate file)
|
|
337
191
|
|
|
338
192
|
---
|
|
339
193
|
|
package/src/cli/index.ts
CHANGED
|
@@ -16,29 +16,29 @@ import { ArchiveCommand } from '../commands/archive.js';
|
|
|
16
16
|
const program = new Command();
|
|
17
17
|
|
|
18
18
|
program
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
19
|
+
.name('prompter')
|
|
20
|
+
.description('Enhance prompts directly in your AI coding workflow')
|
|
21
|
+
.version('0.8.12');
|
|
22
22
|
|
|
23
23
|
program
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
24
|
+
.command('init')
|
|
25
|
+
.description('Initialize Prompter in your project')
|
|
26
|
+
.option('--tools <tools...>', 'Specify AI tools to configure (antigravity, claude, codex, github-copilot, opencode, kilocode)')
|
|
27
|
+
.option('--prompts <prompts...>', 'Specify prompts to install (ai-humanizer, api-contract-generator, apply, archive, design-system, document-explainer, epic-single, epic-generator, erd-generator, fsd-generator, prd-agent-generator, prd-generator, product-brief, proposal, qa-test-scenario, skill-creator, story-single, story-generator, tdd-generator, tdd-lite-generator, wireframe-generator)')
|
|
28
|
+
.option('--skills <skills...>', 'Specify skills to install by name (e.g. laravel-code-review design-system-generator)')
|
|
29
|
+
.option('--no-interactive', 'Run without interactive prompts')
|
|
30
|
+
.action(async (options) => {
|
|
31
|
+
const initCommand = new InitCommand();
|
|
32
|
+
await initCommand.execute(options);
|
|
33
|
+
});
|
|
34
34
|
|
|
35
35
|
program
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
36
|
+
.command('update')
|
|
37
|
+
.description('Update Prompter workflow files to latest version')
|
|
38
|
+
.action(async () => {
|
|
39
|
+
const updateCommand = new UpdateCommand();
|
|
40
|
+
await updateCommand.execute();
|
|
41
|
+
});
|
|
42
42
|
|
|
43
43
|
program
|
|
44
44
|
.command('list')
|
|
@@ -73,20 +73,20 @@ program
|
|
|
73
73
|
});
|
|
74
74
|
|
|
75
75
|
program
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
76
|
+
.command('guide')
|
|
77
|
+
.description('Show setup guide for Prompter')
|
|
78
|
+
.action(async () => {
|
|
79
|
+
const guideCommand = new GuideCommand();
|
|
80
|
+
await guideCommand.execute();
|
|
81
|
+
});
|
|
82
82
|
|
|
83
83
|
program
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
84
|
+
.command('upgrade')
|
|
85
|
+
.description('Upgrade Prompter to the latest version')
|
|
86
|
+
.action(async () => {
|
|
87
|
+
const upgradeCommand = new UpgradeCommand();
|
|
88
|
+
await upgradeCommand.execute();
|
|
89
|
+
});
|
|
90
90
|
|
|
91
91
|
// Change command with subcommands
|
|
92
92
|
const changeCmd = program
|
|
@@ -208,7 +208,7 @@ program
|
|
|
208
208
|
.option('-r, --requirement <id>', 'JSON only: Show specific requirement by ID (1-based)')
|
|
209
209
|
// allow unknown options to pass-through to underlying command implementation
|
|
210
210
|
.allowUnknownOption(true)
|
|
211
|
-
.action(async (itemName?: string, options?: { json?: boolean; type?: string; noInteractive?: boolean;
|
|
211
|
+
.action(async (itemName?: string, options?: { json?: boolean; type?: string; noInteractive?: boolean;[k: string]: any }) => {
|
|
212
212
|
try {
|
|
213
213
|
const showCommand = new ShowCommand();
|
|
214
214
|
await showCommand.execute(itemName, options ?? {});
|