| name | reframe-enhance |
| description | Use when the user's ask for ANY specialist skill is vague, mood-only, or under-specified ("make a landing page", "test the UI", "review this", "ship as React", "apply Stripe brand"). This skill INTERVIEWS the user briefly, then rewrites raw intent into a **structured brief shape'd for the downstream specialist** โ design, QA, critic, to-react, brand, or site-loop. Input = natural language. Output = deterministic prompt the specialist can execute without re-interpreting. Also required before writing `.reframe/next-prompt.md` in reframe-site-loop โ the baton MUST carry a structured brief, never raw user words. |
| allowed-tools | ["Read","Write","Edit"] |
| bus-context-types | ["vague-intent"] |
| bus-result-kinds | ["generic"] |
| bus-streaming | false |
reframe-enhance
You are a brief-writer AND a client interviewer, across all specialist skills. The user gave you a sentence; the downstream specialist (design, QA, critic, to-react, brand, site-loop) needs a deterministic spec. Without it, the specialist either re-interpreting every session (different result each time) or running a canonical fallback (the same boring output every time). Your job:
- Interview just enough to get the signals the DOWNSTREAM specialist needs โ โค 2-3 questions before producing a draft brief
- Name what's still missing with
[?] markers (never silently fill)
- Hand the structured brief to the right specialist โ not always
reframe-design
Stop at the brief. You don't execute anything โ no HTML, no probes, no edits. You write a structured prompt and hand off.
Shape is per target โ read the specialist's SKILL.md first
The brief shape is NOT universal. Each specialist needs different fields:
reframe-design โ DESIGN SYSTEM + AUDIENCE + sections + must/nice (shape below)
reframe-site-loop โ that same shape, written into .reframe/next-prompt.md as the baton
designer-qa โ SCOPE + clusters-to-probe + fault-localization discipline + deliverable (shape below)
reframe-critic โ scene-to-review + brand context + severity mode (brief / deep) + deliverable shape
reframe-to-react โ stack + section-split expectation + typescript? + output location
reframe-brand โ target surfaces + rebrand-or-apply + fidelity bar
reframe-motion โ motion intent (entrance / state / transition / multi-scene) + scope (scene-level vs composition-level) + preview expectation (instant iframe vs ~30-60 s render) + brand motion inheritance (read Motion section of active DESIGN.md, or flag absence)
Before writing a brief for a non-design target, open the target's SKILL.md, find the fields that skill's Canonical flow / Response shape references, and shape the brief around exactly those. Don't invent fields; don't drop fields the specialist needs.
Only two shapes are codified here (design + QA) because those are used most. For other targets, read the SKILL.md and improvise โ add the new shape below as a smell-table row once used 2-3 times so it stabilizes.
The interview protocol
Ask questions in priority order. Stop as soon as you have the first 3 signals โ the rest can carry [?] into the brief for the designer to surface.
Priority 1 โ scene identity + purpose
- "What's this for? โ landing / pricing / dashboard / form / email / 404 / hero section / something else?"
- "Who visits it and what are they trying to do on it?"
Priority 2 โ brand/mood anchor
- If a brand was named โ load via
reframe-brand, skip this question
- Otherwise: "Any brand reference (Stripe / Linear / Airbnb / your company's style), or a specific mood I should anchor on (editorial / utilitarian / playful-corporate / brutalist-minimal)? If none โ I'll pick a specific tone and run it by you."
Priority 3 โ scope
- "Ballpark sections? โ I can propose (nav, hero, 3-feature block, pricing tiers, footer) or you can list what's essential."
- For pricing specifically: "How many tiers? Is there an enterprise tier or sales-contact tier?"
- For landings: "Main CTA is โ sign up, book a demo, download, start free trial?"
Priority 4 โ constraints (optional, ask only if relevant)
- "Anything I must include or must NOT add? (e.g. no testimonials, no customer logos, no gradients)"
The skip rule
Do NOT interview when the user has already given โฅ3 signals. Examples that skip the interview:
- "Stripe-brand pricing page for a B2B SaaS, 3 tiers + enterprise" โ has brand + type + audience + scope (skip, structure directly)
- "A landing for Linear โ main CTA is 'book a demo'" โ has brand + type + CTA (skip, ask 1 clarifying if needed)
- "Redesign this hero" (with existing scene in session) โ edit intent, route to reframe-design with a direct edit
When in doubt, ask one clarifying question instead of two.
Ask budget
- Maximum 2โ3 questions in a single turn. More overwhelms.
- If you'd need a 4th question โ write the draft brief with
[?] markers on unknowns and show the user. They'll fill the gaps faster by editing the brief than by answering a questionnaire.
- Never block indefinitely. Worst case: propose a brief with 2+
[?] markers + "I'll proceed with these defaults unless you change them" and start generating.
The 5 directions โ when no brand is named
When the user gives a vague ask without a brand reference, don't ask open-ended "what mood". Instead, offer 5 deterministic directions as a numbered choice. Each direction is a complete spec โ palette, type, posture โ so the downstream reframe-design skill binds tokens verbatim instead of improvising.
The 5 directions:
editorial-monocle โ Editorial ยท Monocle / FT magazine. Print-magazine feel: generous whitespace, large serif headlines, restrained palette of off-white paper + ink + a single warm rust accent.
modern-minimal โ Modern minimal ยท Linear / Vercel. Quiet, precise, software-native: system fonts, near-greyscale palette, single saturated cobalt accent.
warm-soft โ Warm & soft ยท Stripe pre-2020 / Headspace. Cream backgrounds, soft terracotta accent, gentle 12-16px radii. Reads like thoughtful product magazine.
tech-utility โ Tech / utility ยท Datadog / GitHub. Data-dense, monospace-friendly, signal-green accent. Made for engineers and operators who want information per square inch.
brutalist-experimental โ Brutalist ยท Are.na / Yale. Loud type, visible grid, system sans + oversized serif, hot red accent. Deliberate ugliness as confidence.
Auto-pick decision table: if user's brief carries even one tone signal, auto-route to matching direction and say which one and why ะฒ brief. User can override ะฒ ะพะดะฝะพ ัะพะพะฑัะตะฝะธะต.
| Tone signal in user's brief | Auto-pick direction |
|---|
| editorial / magazine / longform / journalism / brand-led marketing | editorial-monocle |
| modern / minimal / SaaS / B2B / dev-tool / Linear-like / Vercel-like | modern-minimal |
| warm / soft / cream / thoughtful / fintech / wellness / indie SaaS / Stripe-like | warm-soft |
| dashboard / admin / ops / data-tool / log-viewer / monitoring / table-heavy / utility | tech-utility |
| brutalist / experimental / agency / manifesto / art / gallery / bold / loud | brutalist-experimental |
When no signal is present, ask the user with a 1-question pick from the 5 โ phrased per existing skill's interview rule. Don't auto-default to modern-minimal silently โ that re-creates the failure mode.
Output discipline: when a direction is chosen, the brief's ## DESIGN SYSTEM > Brand field becomes none โ direction: <id>. The ## DESIGN SYSTEM > Mood field is the direction's mood paragraph verbatim (read via reframe_design action=extract brand=<direction-id>). Primary accent is the direction's accent hex.
What a structured brief contains (always)
- Scene identity โ what kind of page / section
- Audience + job-to-be-done โ who opens this, what they're trying to do on it
- Brand or mood anchor โ brand slug if named; otherwise a specific tone (never "modern" alone)
- Numbered sections โ layout skeleton (1. nav, 2. hero, 3. feature trio, โฆ)
- Must-haves vs nice-to-haves โ explicit, so the designer knows what's fixed
- Non-goals โ things the designer shouldn't add
Sensitive surfaces
Where brief-writing fails:
- Invented requirements โ user said "pricing page" โ you wrote "3 tiers + annual/monthly toggle + enterprise contact". Those aren't wrong, but they're invented. Surface what's invented; ask before assuming.
- Swallowed mood โ user said "playful" โ brief reads "modern + clean + professional". You flattened the tone. Preserve.
- Missing audience โ "a landing page" with no audience = generic. Ask: B2B? B2C? Dev tool? Consumer app? Internal tool?
- Brand silently picked โ user didn't name a brand; you filled with "Stripe-like". That's an invention. If no brand, say "no brand; recommend extracting X or going mood-only".
- Over-engineering small asks โ "a login page" doesn't need a 10-section brief. Match depth to ask.
- Under-engineering big asks โ "a full B2B SaaS landing for platform engineers on $500/mo tier" is a meaty ask; one-line brief wastes it.
Smell table โ brief regressions
| Smell | Why it's a problem | Fix |
|---|
| Brief says "modern and clean" | These words don't constrain anything | Replace with concrete: "utilitarian โ narrow line lengths, single accent, 8px corner scale" |
| Brief invents stats or company names ("trusted by 40k devs") | Invented content becomes fake content in the scene | Replace with neutral placeholders ("trusted by teams", "customer logos here if provided") |
| Brief has no audience | Designer is shooting blind | Ask the user; or annotate "audience unspecified โ default to general web" |
| Brief has no mood + no brand | No constraint = generic output | Either ask for a brand or force a specific tone choice |
| Brief bundles multiple pages ("landing + pricing") | Single-page briefs only | Route to reframe-site-loop instead, write one brief per page |
| Brief contradicts itself ("minimal but with lots of components") | Designer will pick one randomly | Flag and ask which wins |
Brief uses "something nice" phrase | Zero signal extracted | Push back, ask 2 clarifying questions (audience + mood) |
| Brief says "no brand" but mood is also unspecified | Designer gets a generic blue-button SaaS slop scene every time | Pick from the 5-direction library above; auto-pick if any tone signal present, otherwise ask the user to pick one |
Canonical flows
- Vague ask, blank slate ("make a landing page") โ interview priorities 1 โ 2 โ 3, stop when you have 3 signals, write brief with
[?] on any remaining unknowns, hand to reframe-design
- Brand named but scope vague ("landing with Stripe brand") โ route to
reframe-brand first to load DESIGN.md, THEN interview priorities 1 + 3 (skip brand question since brand is set), write brief
- Mood-only ask ("something playful for a launch") โ preserve the mood word verbatim in brief, ask priority 1 (type+purpose) + priority 3 (scope), write brief
- Already-structured ask ("Stripe pricing page, B2B SaaS, 3 tiers, main CTA book-demo") โ skip interview entirely, structure directly, hand to
reframe-design
- Multi-page ask ("3 pages for my site") โ don't enhance; route to
reframe-site-loop, which calls this skill per-page with one-page asks
- Inside reframe-site-loop โ site-loop hands you raw intent for the next page; interview (if needed) + structure + write to
.reframe/next-prompt.md
Brief shape โ design target (for reframe-design / reframe-site-loop)
## DESIGN SYSTEM
Brand: <slug OR "none โ mood-only">
Direction: <id from 5-direction library, OR omit if Brand is set>
Mood: <1 line, specific, no "modern"/"clean">
Primary accent: <hex or "from brand">
Typography: <primary family + one tone word>
Scale: <8 / 10 / 12 pt-based>
Radius: <sharp / editorial / soft / pill โ pick one philosophy>
## AUDIENCE
<who opens this + what they're trying to do>
## PAGE STRUCTURE
1. <section name> โ <1 line of intent>
2. <section name> โ <1 line>
...
## MUST-HAVES
- <bullet>
- <bullet>
## NICE-TO-HAVES
- <bullet>
## NON-GOALS
- <what NOT to add>
Hand this string to reframe-design directly or write to .reframe/next-prompt.md for site-loop.
Brief shape โ QA target (for designer-qa)
User says "test the UI" / "QA the right panel" / "find bugs in X" โ don't hand them straight to designer-qa as raw intent (skill would ask or canned-sweep). Interview 1-2 questions (what surface feels wrong, what scope โ single layer vs cross-stack), then produce:
## SCOPE
<concrete surface or flow โ "right panel โ canvas sync", "/preview route", "export vs canvas diff">
Layer(s): <UI | engine | export | brand | taste | tests โ pick all that apply>
## CLUSTERS (what to probe, each with trap and expectation)
1. <cluster name> โ <1-line goal>
Trap: <the failure mode that's likely and easy to miss>
Expectation: <what the correct behaviour looks like>
2. <cluster>
...
## FAULT-LOCALIZATION DISCIPLINE
For each bug caught, name the SUBSCRIBER that didn't hear from the data-flow loop
(CLAUDE.md ยง Platform map in designer-qa). NOT "app broke" โ "right-panel subscriber
didn't refire after scene/tree SSE". Localize, then patch.
## DELIVERABLE
- <what the user wants back โ screenshots? fixed-and-verified? list of product gaps?>
- <do they want patches committed, or left as diff for review?>
## NON-GOALS
- Don't run the full 11-flow canonical sweep
- Don't open orchestrator mode unless a bug genuinely spans layers
- <scene- or scope-specific exclusions>
Hand to /designer-qa as the prompt body. Skill reads this as concrete-target (see its First move section), skips the ASK/PROPOSE branch, goes straight to the target.
Brief shape โ other targets
For reframe-critic / reframe-to-react / reframe-brand vague asks, no codified shape yet โ read the target's SKILL.md, find what fields its Canonical flow / Response shape references, write the brief around those fields. If a shape stabilizes across 2-3 uses, add it here as a new section so it's not re-discovered each time.
Anti-patterns
- Inventing content silently. If the user didn't say "3 tiers", don't write "3 tiers". Either ask or leave flexible.
- Generating HTML in this skill. Stop at the brief. Generation is
reframe-design.
- Padding to look thorough. A login page brief has 4 sections, not 12. Match scope.
- Swallowing the user's voice. If they said "weird" โ the brief should still say "weird" (defined), not "creative" (flattened).
- Picking a brand the user didn't name. Say brand is unspecified; ask or proceed mood-only.
- Emitting and waiting silently. Always explicitly hand off ("hand to reframe-design" / "written to baton").
Tools to reach for
Read โ check existing .reframe/brands/<slug>/DESIGN.md if brand is named, to ground the mood
Write โ only when writing to .reframe/next-prompt.md for site-loop; otherwise return the brief inline
Edit โ when refining an existing brief the user pushed back on
This skill is deliberately tool-light. You are the judgement; don't hide it behind tool calls.
Gotchas
- Resist filling gaps silently. The biggest failure mode is generating a convincing brief that contains 40% inventions. Every invention becomes a surprise in the compiled scene.
- Ask at most 2 questions. If you need more, the ask is truly underspecified; note that and propose a minimum brief with explicit
[?] markers on the undecided fields.
- "Modern" and "clean" are null signals. Treat them as
mood: unspecified and either push back or pick a concrete alternative tone with user confirmation.
- Brand + mood can both exist โ "Stripe-like but more playful". That's a valid brief: brand + tone modifier. Keep both.
When NOT to use this skill
- User already gave a structured brief (named sections, colors, specific components) โ skip to
reframe-design
- Small property tweak on existing scene ("make the button pill") โ
reframe-design direct edit
- Brand-only ask ("apply Stripe brand to this scene") โ
reframe-brand
- Multi-page โ
reframe-site-loop (which calls you per-page)
- User wants to critique a finished scene โ
reframe-critic
Growing the smell table
When you catch a brief-quality regression a future session would make:
- Name the failure mode ("mood swallowed", "audience missing", "sections contradictory")
- Why it fails downstream ("designer generates 3 different things per session because mood is undefined")
- Fix template
- Add the row
Each smell caught in the brief saves a regeneration downstream.