@juicesharp/rpiv-pi 1.2.1 → 1.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +4 -4
- package/extensions/rpiv-core/git-context.ts +1 -1
- package/extensions/rpiv-core/guidance.ts +1 -1
- package/extensions/rpiv-core/index.ts +1 -1
- package/extensions/rpiv-core/session-hooks.ts +1 -1
- package/extensions/rpiv-core/setup-command.ts +1 -1
- package/extensions/rpiv-core/siblings.test.ts +6 -2
- package/extensions/rpiv-core/siblings.ts +0 -5
- package/extensions/rpiv-core/update-agents-command.ts +1 -1
- package/package.json +2 -3
- package/skills/frontend-design/SKILL.md +247 -0
- package/skills/implement/SKILL.md +27 -6
package/README.md
CHANGED
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
[](https://www.npmjs.com/package/@juicesharp/rpiv-pi)
|
|
12
12
|
[](https://opensource.org/licenses/MIT)
|
|
13
13
|
|
|
14
|
-
> **Pi compatibility** - `rpiv-pi` `0.14.x` tracks `@
|
|
14
|
+
> **Pi compatibility** - `rpiv-pi` `0.14.x` tracks `@earendil-works/pi-coding-agent` `0.70.x` and `@tintinweb/pi-subagents` `0.6.x`. If you see peer-dep resolution issues after a Pi upgrade, open an issue.
|
|
15
15
|
|
|
16
16
|
> **⚠️ Upgrading from `0.13.x`** - `1.0.0` swaps the subagent provider from `npm:pi-subagents` (nicobailon fork) back to `npm:@tintinweb/pi-subagents` (resumed maintenance). On first launch after upgrade you'll see *"rpiv-pi requires 1 sibling extension(s): @tintinweb/pi-subagents"* - **run `/rpiv-setup` once and restart Pi**. The setup dialog previews both changes (install `@tintinweb/pi-subagents`, remove `npm:pi-subagents` from `~/.pi/agent/settings.json`) and applies them only after you confirm. After restart, run `/rpiv-update-agents` to refresh the 12 bundled specialist frontmatters. Customised `<cwd>/.pi/agents/*.md` files are not touched. The tool name reverts from `subagent` → `Agent` (param `subagent_type`/`description`/`prompt`) - only your own custom skills/agents need editing; the bundled rpiv-pi specialists are migrated in this release.
|
|
17
17
|
|
|
@@ -29,7 +29,7 @@ Skill-based development workflow for [Pi Agent](https://github.com/badlogic/pi-m
|
|
|
29
29
|
- **[Pi Agent](https://github.com/badlogic/pi-mono)** - install globally so the `pi` command is available:
|
|
30
30
|
|
|
31
31
|
```bash
|
|
32
|
-
npm install -g @
|
|
32
|
+
npm install -g @earendil-works/pi-coding-agent
|
|
33
33
|
```
|
|
34
34
|
|
|
35
35
|
- **Model provider** *(first-time Pi Agent users only - skip if `/login` already works or `~/.pi/agent/models.json` is configured)*. Pick one:
|
|
@@ -182,7 +182,7 @@ Invoke via `/skill:<name>` from inside a Pi Agent session.
|
|
|
182
182
|
| `/rpiv-setup` | Install all sibling plugins in one go |
|
|
183
183
|
| `/rpiv-update-agents` | Sync rpiv agent profiles: add new, update changed, remove stale |
|
|
184
184
|
| `/advisor` | Configure advisor model and reasoning effort |
|
|
185
|
-
| `/btw` | Ask a side question without polluting the main conversation |
|
|
185
|
+
| `/btw` | Ask a side question without polluting the main conversation _(requires `@juicesharp/rpiv-btw`, opt-in)_ |
|
|
186
186
|
| `/languages` | Pick the UI language for rpiv-* TUI strings (Deutsch / English / Español / Français / Português / Português (Brasil) / Русский / Українська) |
|
|
187
187
|
| `/todos` | Show current todo list |
|
|
188
188
|
| `/web-search-config` | Set Brave Search API key |
|
|
@@ -222,7 +222,7 @@ Pi Agent discovers extensions via `"extensions": ["./extensions"]` and skills vi
|
|
|
222
222
|
|
|
223
223
|
- **Web search** - run `/web-search-config` to set the Brave Search API key, or set the `BRAVE_SEARCH_API_KEY` environment variable
|
|
224
224
|
- **Advisor** - run `/advisor` to select a reviewer model and reasoning effort
|
|
225
|
-
- **Side questions** - type `/btw <question>` anytime (even mid-stream) to ask the primary model a one-off question; answer appears in a borderless bottom overlay and never enters the main conversation
|
|
225
|
+
- **Side questions** _(opt-in: `pi install npm:@juicesharp/rpiv-btw`)_ - type `/btw <question>` anytime (even mid-stream) to ask the primary model a one-off question; answer appears in a borderless bottom overlay and never enters the main conversation
|
|
226
226
|
- **UI language** - run `/languages` to pick the locale for rpiv-* TUI strings, or pass `pi --locale <code>` at startup. Detection priority: flag → `~/.config/rpiv-i18n/locale.json` → `LANG` / `LC_ALL` → English. LLM-facing copy stays English by design
|
|
227
227
|
- **Agent concurrency** - open the `/agents` overlay and tune `Settings → Max concurrency` to match your provider's rate limits. `@tintinweb/pi-subagents` owns this setting; rpiv-pi does not seed it.
|
|
228
228
|
- **Agent profiles** - editable at `<cwd>/.pi/agents/`; sync from bundled defaults with `/rpiv-update-agents` (overwrites rpiv-managed files, preserves your custom agents)
|
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
* redirection, so either form is worktree-safe.
|
|
9
9
|
*/
|
|
10
10
|
|
|
11
|
-
import type { ExtensionAPI } from "@
|
|
11
|
+
import type { ExtensionAPI } from "@earendil-works/pi-coding-agent";
|
|
12
12
|
|
|
13
13
|
type GitContext = { branch: string; commit: string; user: string };
|
|
14
14
|
|
|
@@ -21,7 +21,7 @@
|
|
|
21
21
|
|
|
22
22
|
import { existsSync, readFileSync } from "node:fs";
|
|
23
23
|
import { dirname, isAbsolute, join, relative, sep } from "node:path";
|
|
24
|
-
import type { ExtensionAPI } from "@
|
|
24
|
+
import type { ExtensionAPI } from "@earendil-works/pi-coding-agent";
|
|
25
25
|
import { FLAG_DEBUG, MSG_TYPE_GUIDANCE } from "./constants.js";
|
|
26
26
|
|
|
27
27
|
// ---------------------------------------------------------------------------
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
* Tool-owning plugins are siblings (see siblings.ts); install via /rpiv-setup.
|
|
8
8
|
*/
|
|
9
9
|
|
|
10
|
-
import type { ExtensionAPI } from "@
|
|
10
|
+
import type { ExtensionAPI } from "@earendil-works/pi-coding-agent";
|
|
11
11
|
import { FLAG_DEBUG } from "./constants.js";
|
|
12
12
|
import { registerSessionHooks } from "./session-hooks.js";
|
|
13
13
|
import { registerSetupCommand } from "./setup-command.js";
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
|
|
8
8
|
import { mkdirSync } from "node:fs";
|
|
9
9
|
import { join } from "node:path";
|
|
10
|
-
import { type ExtensionAPI, isToolCallEventType } from "@
|
|
10
|
+
import { type ExtensionAPI, isToolCallEventType } from "@earendil-works/pi-coding-agent";
|
|
11
11
|
import { type SyncResult, syncBundledAgents } from "./agents.js";
|
|
12
12
|
import { FLAG_DEBUG, MSG_TYPE_GIT_CONTEXT } from "./constants.js";
|
|
13
13
|
import {
|
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
* Reports succeeded/failed split; prompts the user to restart Pi on success.
|
|
9
9
|
*/
|
|
10
10
|
|
|
11
|
-
import type { ExtensionAPI } from "@
|
|
11
|
+
import type { ExtensionAPI } from "@earendil-works/pi-coding-agent";
|
|
12
12
|
import { findMissingSiblings } from "./package-checks.js";
|
|
13
13
|
import { spawnPiInstall } from "./pi-installer.js";
|
|
14
14
|
import { findLegacySiblings, pruneLegacySiblings } from "./prune-legacy-siblings.js";
|
|
@@ -2,8 +2,8 @@ import { describe, expect, it } from "vitest";
|
|
|
2
2
|
import { LEGACY_SIBLINGS, SIBLINGS } from "./siblings.js";
|
|
3
3
|
|
|
4
4
|
describe("SIBLINGS registry", () => {
|
|
5
|
-
it("contains
|
|
6
|
-
expect(SIBLINGS).toHaveLength(
|
|
5
|
+
it("contains 7 entries (pi-subagents at SIBLINGS[0] — tintinweb fork is the dispatch runtime)", () => {
|
|
6
|
+
expect(SIBLINGS).toHaveLength(7);
|
|
7
7
|
});
|
|
8
8
|
|
|
9
9
|
it("lists @tintinweb/pi-subagents at SIBLINGS[0]", () => {
|
|
@@ -14,6 +14,10 @@ describe("SIBLINGS registry", () => {
|
|
|
14
14
|
expect(SIBLINGS.find((s) => s.pkg === "npm:pi-subagents")).toBeUndefined();
|
|
15
15
|
});
|
|
16
16
|
|
|
17
|
+
it("does NOT list rpiv-btw (standalone-only — rpiv-pi has no runtime dependency on it)", () => {
|
|
18
|
+
expect(SIBLINGS.find((s) => s.pkg === "npm:@juicesharp/rpiv-btw")).toBeUndefined();
|
|
19
|
+
});
|
|
20
|
+
|
|
17
21
|
for (const s of SIBLINGS) {
|
|
18
22
|
it(`${s.pkg} — self-match against settings.json line shape`, () => {
|
|
19
23
|
expect(s.matches.test(s.pkg.replace(/^npm:/, ""))).toBe(true);
|
|
@@ -40,11 +40,6 @@ export const SIBLINGS: readonly SiblingPlugin[] = [
|
|
|
40
40
|
matches: /rpiv-advisor/i,
|
|
41
41
|
provides: "advisor tool + /advisor command",
|
|
42
42
|
},
|
|
43
|
-
{
|
|
44
|
-
pkg: "npm:@juicesharp/rpiv-btw",
|
|
45
|
-
matches: /rpiv-btw/i,
|
|
46
|
-
provides: "/btw side-question command",
|
|
47
|
-
},
|
|
48
43
|
{
|
|
49
44
|
pkg: "npm:@juicesharp/rpiv-i18n",
|
|
50
45
|
matches: /rpiv-i18n(?![-\w])/i,
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
* Adds new, overwrites changed managed files, removes stale managed files.
|
|
4
4
|
*/
|
|
5
5
|
|
|
6
|
-
import type { ExtensionAPI } from "@
|
|
6
|
+
import type { ExtensionAPI } from "@earendil-works/pi-coding-agent";
|
|
7
7
|
import { type SyncResult, syncBundledAgents } from "./agents.js";
|
|
8
8
|
|
|
9
9
|
const MSG_UP_TO_DATE = "All agents already up-to-date.";
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@juicesharp/rpiv-pi",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.3.0",
|
|
4
4
|
"description": "A skill-based development workflow for Pi Agent. Five skills (research, design, plan, implement, validate) and the shared subagents that compose its ship-loop.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"pi-package",
|
|
@@ -44,12 +44,11 @@
|
|
|
44
44
|
]
|
|
45
45
|
},
|
|
46
46
|
"peerDependencies": {
|
|
47
|
-
"@
|
|
47
|
+
"@earendil-works/pi-coding-agent": "*",
|
|
48
48
|
"@tintinweb/pi-subagents": "*",
|
|
49
49
|
"@juicesharp/rpiv-ask-user-question": "*",
|
|
50
50
|
"@juicesharp/rpiv-todo": "*",
|
|
51
51
|
"@juicesharp/rpiv-advisor": "*",
|
|
52
|
-
"@juicesharp/rpiv-btw": "*",
|
|
53
52
|
"@juicesharp/rpiv-i18n": "*",
|
|
54
53
|
"@juicesharp/rpiv-web-tools": "*",
|
|
55
54
|
"@juicesharp/rpiv-args": "*",
|
|
@@ -0,0 +1,247 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: frontend-design
|
|
3
|
+
description: "Create distinctive, production-grade frontend interfaces with high design quality. Use when the user asks to build web components, pages, or applications, or wants design guidance. Also use during frontend UI work — pass `--headless` for projects with established styles to inject guidelines without the interview checkpoint."
|
|
4
|
+
argument-hint: "[--headless]"
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
# Frontend Design
|
|
8
|
+
|
|
9
|
+
You are tasked with injecting tailored visual design guidance into the agent's context, preventing generic "AI slop" aesthetics in frontend output. The workflow has three steps: (1) scan the project for existing style context, (2) run an adaptive aesthetic checkpoint across 7 dimensions (skipping settled ones), (3) synthesize tailored guidelines + anti-slop guardrails.
|
|
10
|
+
|
|
11
|
+
Two invocation modes:
|
|
12
|
+
- **Full checkpoint** (default): scan → 7-dimension interview → inject guidelines
|
|
13
|
+
- **Headless** (`--headless`): scan → inject findings as guidelines → stop (no interview)
|
|
14
|
+
|
|
15
|
+
**How it works**:
|
|
16
|
+
- Parse input and detect invocation mode (Step 1)
|
|
17
|
+
- Scan for existing style context via codebase-locator agent (Step 2)
|
|
18
|
+
- Run adaptive aesthetic checkpoint via ask_user_question (Step 3)
|
|
19
|
+
- Synthesize and inject tailored guidelines + anti-slop list (Step 4)
|
|
20
|
+
|
|
21
|
+
## Input: `$ARGUMENTS`
|
|
22
|
+
|
|
23
|
+
## Step 1: Input Handling
|
|
24
|
+
|
|
25
|
+
1. **No argument provided** — full checkpoint mode:
|
|
26
|
+
```
|
|
27
|
+
I'll guide your frontend design direction. Provide one of:
|
|
28
|
+
|
|
29
|
+
`/skill:frontend-design` — full aesthetic checkpoint (scan + interview + guidelines)
|
|
30
|
+
`/skill:frontend-design --headless` — scan-only: inject style findings without interview
|
|
31
|
+
```
|
|
32
|
+
Then wait for input.
|
|
33
|
+
|
|
34
|
+
2. **`$ARGUMENTS` contains `--headless`** — headless mode:
|
|
35
|
+
- Set mode to `headless`. Proceed to Step 2. After Step 2, skip Step 3 and go directly to Step 4.
|
|
36
|
+
|
|
37
|
+
3. **Otherwise** — full checkpoint mode:
|
|
38
|
+
- Set mode to `full`. Proceed to Step 2.
|
|
39
|
+
|
|
40
|
+
4. **Read any context files mentioned** in the prompt (DESIGN.md, style guides, tickets) FULLY before proceeding.
|
|
41
|
+
|
|
42
|
+
**No agent dispatch in Step 1.** Only `Read` on user-named paths.
|
|
43
|
+
|
|
44
|
+
## Step 2: Style Discovery (parallel agents)
|
|
45
|
+
|
|
46
|
+
Dispatch a single codebase-locator agent to scan for existing style context.
|
|
47
|
+
|
|
48
|
+
**Agent — Style system scan:**
|
|
49
|
+
- subagent_type: `codebase-locator`
|
|
50
|
+
- description: "Scan for style systems"
|
|
51
|
+
- prompt: "Scan the project for existing style context. Look for: (1) DESIGN.md files (Google's design spec), (2) design token files (tokens.css, tokens.json, design-tokens.*), (3) Tailwind/CSS framework configs (tailwind.config.*, postcss.config.*), (4) style guide or brand guideline files, (5) CSS custom property definitions (--color-*, --font-*, --spacing-*), (6) component library setups (Storybook, component indexes). Return file paths grouped by category with line offsets."
|
|
52
|
+
|
|
53
|
+
Wait for the agent to complete before proceeding.
|
|
54
|
+
|
|
55
|
+
### Scan Findings Summary
|
|
56
|
+
|
|
57
|
+
Present findings grouped by dimension:
|
|
58
|
+
- **DESIGN.md**: found at `path/to/DESIGN.md` (or "none found")
|
|
59
|
+
- **Tokens/Variables**: found at `path/to/tokens.css` with N custom properties (or "none found")
|
|
60
|
+
- **Framework config**: found at `path/to/tailwind.config.ts` (or "none found")
|
|
61
|
+
- **Style guides**: found at `path/to/style-guide.md` (or "none found")
|
|
62
|
+
- **Component library**: found at `path/to/components/` with N files (or "none found")
|
|
63
|
+
|
|
64
|
+
### If DESIGN.md found
|
|
65
|
+
|
|
66
|
+
Read it FULLY using the Read tool. This is the primary style source — its decisions take precedence over scan findings for the checkpoint.
|
|
67
|
+
|
|
68
|
+
### Headless exit
|
|
69
|
+
|
|
70
|
+
**If mode is `headless`:**
|
|
71
|
+
1. Synthesize scan findings into concise style guidelines (respect what exists, note what's missing)
|
|
72
|
+
2. Inject as assistant message (see Step 4 output format)
|
|
73
|
+
3. **Stop — do not proceed to Step 3.**
|
|
74
|
+
|
|
75
|
+
### Full checkpoint continuation
|
|
76
|
+
|
|
77
|
+
**If mode is `full`:** Proceed to Step 3. Carry scan findings forward — they inform skip logic and pre-fill recommendations.
|
|
78
|
+
|
|
79
|
+
## Step 3: Aesthetic Checkpoint
|
|
80
|
+
|
|
81
|
+
Ask the developer about aesthetic direction across 7 dimensions. Use `ask_user_question` — one question at a time, wait for the answer before asking the next. Lead each question with the recommended option labeled `(Recommended)`.
|
|
82
|
+
|
|
83
|
+
### Skip Logic
|
|
84
|
+
|
|
85
|
+
Before asking each dimension, check if the scan (Step 2) found a **complete system** for that dimension. If yes, note the finding and skip the question. If the system is partial, still ask but pre-fill the recommendation from the scan.
|
|
86
|
+
|
|
87
|
+
**Skip thresholds by dimension** (agent judgment — these are examples, not rigid checklists):
|
|
88
|
+
- **Typography**: skip if font imports + type scale + CSS variables for font families all exist
|
|
89
|
+
- **Color**: skip if color palette tokens + theme variables + accent colors all exist
|
|
90
|
+
- **Motion**: skip if transition/animation tokens or a motion library is configured
|
|
91
|
+
- **Spatial**: skip if spacing scale tokens + layout system (grid/flex patterns) both exist
|
|
92
|
+
- **Backgrounds**: skip if texture/gradient/pattern definitions exist in the style system
|
|
93
|
+
- **Tone/Mood**: never skip — conceptual, not detectable from code
|
|
94
|
+
- **Differentiation**: never skip — conceptual, requires developer input
|
|
95
|
+
|
|
96
|
+
When skipping, record: "Dimension X: [finding from scan] — respecting existing system."
|
|
97
|
+
|
|
98
|
+
### Dimension 1: Tone & Mood
|
|
99
|
+
|
|
100
|
+
Ask via `ask_user_question`:
|
|
101
|
+
- Question: "What aesthetic tone should this interface convey?"
|
|
102
|
+
- Header: "Tone"
|
|
103
|
+
- Options (pick 3-4 that fit the project context, always include the first):
|
|
104
|
+
- "Editorial / magazine (Recommended)" (if no prior context) — refined typography, generous whitespace, content-first
|
|
105
|
+
- "Brutally minimal" — stripped to essentials, monochrome, no decoration
|
|
106
|
+
- "Playful / toy-like" — rounded shapes, bright colors, bouncy interactions
|
|
107
|
+
- "Retro-futuristic" — CRT textures, neon accents, terminal aesthetics
|
|
108
|
+
- "Luxury / refined" — dark palettes, serif fonts, gold accents, subtle motion
|
|
109
|
+
- "Brutalist / raw" — exposed structure, harsh contrasts, system fonts used intentionally
|
|
110
|
+
- "Art deco / geometric" — ornamental patterns, metallic accents, symmetrical layouts
|
|
111
|
+
- "Soft / pastel" — light tones, rounded corners, gentle gradients
|
|
112
|
+
- If the DESIGN.md or scan findings suggest a tone, make that the `(Recommended)` option.
|
|
113
|
+
|
|
114
|
+
### Dimension 2: Color Direction
|
|
115
|
+
|
|
116
|
+
Ask via `ask_user_question`:
|
|
117
|
+
- Question: "What color direction fits this interface?"
|
|
118
|
+
- Header: "Color"
|
|
119
|
+
- Options:
|
|
120
|
+
- "Dark mode, warm accents" — dark backgrounds, amber/gold/orange highlights
|
|
121
|
+
- "Dark mode, cool accents" — dark backgrounds, blue/teal/purple highlights
|
|
122
|
+
- "Light mode, muted palette" — off-white backgrounds, desaturated earth tones
|
|
123
|
+
- "Light mode, vibrant" — white/light backgrounds, bold primary colors
|
|
124
|
+
- "High contrast" — stark black/white with one accent color
|
|
125
|
+
- If scan found color tokens/theme, make the closest match the `(Recommended)` option.
|
|
126
|
+
|
|
127
|
+
### Dimension 3: Typography
|
|
128
|
+
|
|
129
|
+
Ask via `ask_user_question`:
|
|
130
|
+
- Question: "What typography direction for this interface?"
|
|
131
|
+
- Header: "Typography"
|
|
132
|
+
- Options:
|
|
133
|
+
- "Serif display + sans body" — editorial feel, character in headings
|
|
134
|
+
- "All sans-serif, distinctive pairing" — modern, clean, pair unexpected fonts
|
|
135
|
+
- "Monospace-forward" — terminal/code aesthetic, developer tools
|
|
136
|
+
- "Mixed: display serif + monospace accents" — editorial meets technical
|
|
137
|
+
- If scan found font imports/type scale, pre-fill the `(Recommended)` option from what exists.
|
|
138
|
+
|
|
139
|
+
### Dimension 4: Motion
|
|
140
|
+
|
|
141
|
+
Ask via `ask_user_question`:
|
|
142
|
+
- Question: "How much motion and animation?"
|
|
143
|
+
- Header: "Motion"
|
|
144
|
+
- Options:
|
|
145
|
+
- "Subtle micro-interactions" — hover effects, smooth transitions, gentle reveals
|
|
146
|
+
- "Bold page-load choreography" — staggered reveals, dramatic entrances, scroll-triggered
|
|
147
|
+
- "CSS-only, no JS" — pure CSS transitions and animations, lightweight
|
|
148
|
+
- "Static / minimal" — no animation, focus on typography and layout
|
|
149
|
+
- If scan found animation tokens/motion library, pre-fill the `(Recommended)` option.
|
|
150
|
+
|
|
151
|
+
### Dimension 5: Spatial Composition
|
|
152
|
+
|
|
153
|
+
Ask via `ask_user_question`:
|
|
154
|
+
- Question: "What spatial composition approach?"
|
|
155
|
+
- Header: "Spatial"
|
|
156
|
+
- Options:
|
|
157
|
+
- "Generous whitespace, asymmetric" — editorial layout, breathing room, offset elements
|
|
158
|
+
- "Dense, information-rich" — dashboard-style, maximum content per viewport
|
|
159
|
+
- "Grid-breaking, overlapping" — elements that break the grid, layered composition
|
|
160
|
+
- "Structured grid, symmetric" — traditional layout, predictable alignment
|
|
161
|
+
- If scan found spacing tokens/grid system, pre-fill the `(Recommended)` option.
|
|
162
|
+
|
|
163
|
+
### Dimension 6: Backgrounds & Texture
|
|
164
|
+
|
|
165
|
+
Ask via `ask_user_question`:
|
|
166
|
+
- Question: "What background treatment?"
|
|
167
|
+
- Header: "Backgrounds"
|
|
168
|
+
- Options:
|
|
169
|
+
- "Solid with subtle noise/grain" — flat color with texture overlay for depth
|
|
170
|
+
- "Gradient mesh" — multi-color gradients, blurred shapes, atmospheric
|
|
171
|
+
- "Geometric patterns" — repeating shapes, lines, or decorative elements
|
|
172
|
+
- "Clean solid, no texture" — pure flat color, let content be the visual
|
|
173
|
+
- If scan found background/texture definitions, pre-fill the `(Recommended)` option.
|
|
174
|
+
|
|
175
|
+
### Dimension 7: Differentiation
|
|
176
|
+
|
|
177
|
+
Ask via `ask_user_question`:
|
|
178
|
+
- Question: "What makes this interface UNFORGETTABLE? What's the one thing someone will remember?"
|
|
179
|
+
- Header: "Differentiation"
|
|
180
|
+
- Options (pick 2-3 that fit, always include an open-ended):
|
|
181
|
+
- "Typography as art" — oversized, expressive type as the primary visual element
|
|
182
|
+
- "Unexpected interaction" — a signature interaction pattern that surprises
|
|
183
|
+
- "Atmosphere" — immersive background/texture that sets a mood
|
|
184
|
+
- "Layout rebellion" — breaks every grid convention intentionally
|
|
185
|
+
- This dimension is always asked — it cannot be derived from scan findings.
|
|
186
|
+
|
|
187
|
+
### Record Checkpoint Answers
|
|
188
|
+
|
|
189
|
+
After all 7 dimensions (or all unsettled dimensions if some were skipped), compile the answers into a structured record:
|
|
190
|
+
- Each settled dimension: "Dimension: chosen option"
|
|
191
|
+
- Each skipped dimension: "Dimension: [existing finding] — respecting existing system"
|
|
192
|
+
|
|
193
|
+
Carry this record to Step 4 for guideline synthesis.
|
|
194
|
+
|
|
195
|
+
## Step 4: Guideline Synthesis
|
|
196
|
+
|
|
197
|
+
Combine scan findings (Step 2) and checkpoint answers (Step 3, or scan-only findings in headless mode) into tailored aesthetic guidelines. Emit as your own assistant message — this primes your context for all subsequent frontend code generation.
|
|
198
|
+
|
|
199
|
+
### Output Format
|
|
200
|
+
|
|
201
|
+
Structure the guidelines as a concise, actionable brief:
|
|
202
|
+
|
|
203
|
+
```markdown
|
|
204
|
+
## Frontend Design Guidelines
|
|
205
|
+
|
|
206
|
+
**Tone**: {chosen tone} — {1-sentence description of how it manifests}
|
|
207
|
+
**Color**: {chosen direction} — {specific palette suggestion: primary, accent, background}
|
|
208
|
+
**Typography**: {chosen direction} — {specific font suggestions: display + body}
|
|
209
|
+
**Motion**: {chosen level} — {specific approach: CSS transitions, scroll triggers, etc.}
|
|
210
|
+
**Spatial**: {chosen composition} — {layout approach: grid, whitespace, asymmetry}
|
|
211
|
+
**Backgrounds**: {chosen treatment} — {specific texture/gradient/solid approach}
|
|
212
|
+
**Differentiation**: {chosen differentiator} — {how to make it unforgettable}
|
|
213
|
+
|
|
214
|
+
{For each skipped dimension:}
|
|
215
|
+
**{Dimension}**: Respecting existing system — {brief description of what was found at `file:line`}
|
|
216
|
+
|
|
217
|
+
### NEVER Generate
|
|
218
|
+
|
|
219
|
+
- Overused display fonts: Inter, Roboto, Arial, system-ui as hero/display type
|
|
220
|
+
- Clichéd color schemes: purple-to-blue gradients on white backgrounds, generic "SaaS blue"
|
|
221
|
+
- Predictable layouts: centered card stacks, hero-image-then-three-columns, cookie-cutter navbars
|
|
222
|
+
- Cookie-cutter component patterns: identical rounded cards with shadow-md, every section with max-w-7xl mx-auto
|
|
223
|
+
- Generic motion: fade-in on every scroll, identical bounce animations, no intentional choreography
|
|
224
|
+
|
|
225
|
+
{If DESIGN.md was NOT found in Step 2:}
|
|
226
|
+
|
|
227
|
+
**Note**: No DESIGN.md found in this project. Consider creating one to codify these design decisions for future reference. See Google's DESIGN.md spec for format guidance.
|
|
228
|
+
```
|
|
229
|
+
|
|
230
|
+
### Injection
|
|
231
|
+
|
|
232
|
+
Emit the complete guidelines as your own assistant message. Do NOT write to a file. Do NOT use `pi.sendMessage`. The guidelines become part of the conversation transcript — they survive compaction and inform all subsequent turns.
|
|
233
|
+
|
|
234
|
+
If in headless mode, the guidelines should be briefer — focus on what the scan found and how to respect it, skip the full checkpoint synthesis.
|
|
235
|
+
|
|
236
|
+
## Important Notes
|
|
237
|
+
|
|
238
|
+
- **Frontmatter**: `allowed-tools` is intentionally omitted — the skill inherits `Agent`, `ask_user_question`, `Read`, `Write`, `Bash`, `Glob`, `Grep`. Do NOT re-add the line.
|
|
239
|
+
- **Always scan before asking**: Step 2 (style discovery) always runs before Step 3 (checkpoint). Never ask aesthetic questions without first checking what exists.
|
|
240
|
+
- **One question at a time**: Use `ask_user_question` for each dimension individually. Never batch multiple dimensions into one call.
|
|
241
|
+
- **Never ask confirmatory questions**: Do not ask "does this look good?" or "want to adjust?" at the end. The guidelines ARE the output — emit them and stop.
|
|
242
|
+
- **Skip logic is judgment, not rules**: The skip thresholds are examples. If a project has a partial system that's clearly intentional (e.g., 3 custom font variables but no full scale), skip and note it.
|
|
243
|
+
- **Headless mode exits after Step 2**: When `--headless` is passed, scan → inject findings → stop. Do not proceed to Step 3.
|
|
244
|
+
- **Anti-slop list is always included**: Every invocation (full or headless) includes the NEVER Generate list. This is not optional.
|
|
245
|
+
- **DESIGN.md takes precedence**: If a DESIGN.md file is found, its decisions override scan findings for the checkpoint. Read it fully before asking questions.
|
|
246
|
+
- **Guidelines are inline, not persisted**: The output is an assistant message, not a file. If the developer wants to persist the guidelines, they should create a DESIGN.md manually.
|
|
247
|
+
- **No template files**: This skill is a single SKILL.md. Do not create `templates/` or `examples/` subdirectories.
|
|
@@ -74,26 +74,47 @@ If the plan has existing checkmarks:
|
|
|
74
74
|
|
|
75
75
|
Remember: You're implementing a solution, not just checking boxes. Keep the end goal in mind and maintain forward momentum.
|
|
76
76
|
|
|
77
|
-
##
|
|
77
|
+
## Present and Chain
|
|
78
78
|
|
|
79
|
-
When the last in-scope phase is complete
|
|
79
|
+
When the last in-scope phase is complete, print the **completion** closing block:
|
|
80
80
|
|
|
81
81
|
```
|
|
82
|
-
Implementation
|
|
82
|
+
Implementation complete:
|
|
83
|
+
`thoughts/shared/plans/{filename}.md`
|
|
83
84
|
|
|
84
85
|
{P} phases completed, {M} files changed, {T} tests passing.
|
|
85
|
-
Outstanding:
|
|
86
|
+
Outstanding: none.
|
|
87
|
+
|
|
88
|
+
Please review the diff and let me know if anything should reopen a phase.
|
|
86
89
|
|
|
87
90
|
---
|
|
88
91
|
|
|
89
|
-
💬 Follow-up: implement
|
|
92
|
+
💬 Follow-up: surface code/plan mismatches inline via the `ask_user_question` flow ("Follow the plan / Skip this change / Update the plan") — that is implement's only in-skill follow-up surface. For plan-level changes run `/skill:revise <plan-path>`; for session pauses run `/skill:create-handoff`.
|
|
90
93
|
|
|
91
94
|
**Next step:** `/skill:validate thoughts/shared/plans/{filename}.md` — verify the implementation against the plan's success criteria before committing.
|
|
92
95
|
|
|
93
96
|
> 🆕 Tip: start a fresh session with `/new` first — chained skills work best with a clean context window.
|
|
94
97
|
```
|
|
95
98
|
|
|
96
|
-
If the run was paused mid-plan rather than completed,
|
|
99
|
+
If the run was paused mid-plan rather than completed, print the **paused** variant instead:
|
|
100
|
+
|
|
101
|
+
```
|
|
102
|
+
Implementation paused at Phase {N}:
|
|
103
|
+
`thoughts/shared/plans/{filename}.md`
|
|
104
|
+
|
|
105
|
+
{P} phases completed, {M} files changed, {T} tests passing.
|
|
106
|
+
Outstanding: {list of unchecked items, blockers}.
|
|
107
|
+
|
|
108
|
+
Please review what landed and let me know if anything needs to change before resuming.
|
|
109
|
+
|
|
110
|
+
---
|
|
111
|
+
|
|
112
|
+
💬 Follow-up: surface code/plan mismatches inline via the `ask_user_question` flow ("Follow the plan / Skip this change / Update the plan") — that is implement's only in-skill follow-up surface. For plan-level changes run `/skill:revise <plan-path>` first.
|
|
113
|
+
|
|
114
|
+
**Next step:** `/skill:create-handoff` — capture in-flight state so the next session can resume cleanly via `/skill:resume-handoff`.
|
|
115
|
+
|
|
116
|
+
> 🆕 Tip: start a fresh session with `/new` first — chained skills work best with a clean context window.
|
|
117
|
+
```
|
|
97
118
|
|
|
98
119
|
## Handle Follow-ups
|
|
99
120
|
|