Ui brainstorm preamble

Skill tyroneross/interface-built-right/skills/ui-brainstorm-preamble

Use at the start of /ibr:build to capture UI context before Design Director and brainstorming. Captures platform, scope, design mode, archetype, references, optional imagegen concept need, gallery target roles, density, and ask gates. Writes preamble.json.From its SKILL.md

Install

npx -y skills add tyroneross/interface-built-right --skill ui-brainstorm-preamble

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

1 stars1 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

SKILL.md

5.2 KB, as published. Nobody here has run it

UI Brainstorm Preamble

Capture the minimum UI context needed before Design Director planning. The preamble should narrow the design problem without pretending the design is already solved.

When To Activate

/ibr:build <topic> starts in standalone mode
User wants a new UI build, redesign, page, flow, app, or design-from-scratch plan
The build has references, Mockup Gallery selections, or platform choices that need target roles

Questions

Ask one at a time. Use choices where possible.

Platform — web / iOS / macOS / cross-platform
Scope — component / page / flow / app
Design mode — scratch / wireframe / hi-fi / implementation-only
Primary user goal — what should the user accomplish first?
UI guidance template — list via ui-guidance-library; user picks one by name, or "new"
External references — URLs/images/files to capture now? If yes, run /ibr:capture per URL
Imagegen concept need — if no approved visual target exists, ask whether generated visual concepts would help: none / inspiration / visual-target candidate
Mockup Gallery selection — if mockup-gallery-bridge reports present: true, show approved/selected candidates and target roles
Density/intent — compact-dense / balanced / spacious-marketing

Do not ask all nine when the user already supplied the answer. Capture known values and ask only for missing decisions that affect navigation, target role, generated concept use, or validation.

Platform Routing

After platform is known, load the matching platform skill:

Platform	Skill to load
web	`web-design-router` plus `mobile-web-ui` when responsive behavior matters
iOS	`ios-design` + `ios-design-router` + `apple-platform`
macOS	`macos-ui` + `apple-platform`
cross-platform	load dominant runtime first; record secondary constraints

Archetype Capture

Web

When Platform = web and Scope = page / flow / app, load web-design-router and classify:

saas-dashboard
data-research-tool
editor-workbench
ai-agent-chat
commerce-checkout
content-publication
internal-admin

Store the classified archetype and defaults from web-design-router.

iOS

When Platform = iOS and Scope = app / flow, load ios-design-router and classify:

Utility
Content/Feed
Productivity
Consumer/Habit
Editorial
Tool/Pro

Store the classified archetype and defaults from the router.

Mockup Gallery Capture

Use mockup-gallery-bridge when .mockup-gallery/ exists. Capture:

approved selected mockup, if present
rating status
changeNote, if present
target role: wireframe-target, visual-target, inspiration, or data-reference

If the selected item is unrated or rejected, do not make it binding. Record an ask gate for Design Director.

Imagegen Concept Capture

Use imagegen only as an optional upstream concept source. It is useful for mood, visual style, hero/product imagery, and hi-fi direction variants. It is not a substitute for wireframes, text-accurate UI specs, accessibility semantics, or scan validation.

Capture:

requested: whether the user wants concepts
purpose: inspiration or visual-target-candidate
promptBrief: concise visual brief derived from user intent
destination: .ibr/builds/<topic>/references/imagegen/ for project-bound concepts
approvalRequired: always true before any generated image becomes a binding visual-target

If the user has not approved a generated concept, record it as inspiration and add an ask gate for Design Director.

Output

Write .ibr/builds/<topic>/preamble.json:

{
  "topic": "...",
  "platform": "web|iOS|macOS|cross-platform",
  "scope": "component|page|flow|app",
  "designMode": "scratch|wireframe|hifi|implementation",
  "primaryUserGoal": "...",
  "webArchetype": "saas-dashboard|data-research-tool|editor-workbench|ai-agent-chat|commerce-checkout|content-publication|internal-admin",
  "webDefaults": {},
  "iosArchetype": "utility|content|productivity|consumer|editorial|tool",
  "iosDefaults": {},
  "template": {"name": "...", "source": "central|project|new"},
  "references": [],
  "imagegenConcepts": {"requested": false, "purpose": "none|inspiration|visual-target-candidate", "approved": []},
  "mockupSelection": null,
  "targetRoles": [],
  "density": "compact-dense|balanced|spacious-marketing",
  "askGates": [],
  "capturedAt": "ISO8601"
}

Only include platform-specific archetype fields when they apply.

Handoff

After capturing, invoke design-director first. Then invoke superpowers:brainstorming with the preamble and design intent as locked context:

Here is the UI context already locked for this build: [preamble summary].
Here is IBR's design intent contract: [design-intent summary].
What is still open about goals, edge cases, content, architecture, or validation?

Redirect spec output to .ibr/builds/<topic>/spec.md.