Skip to content

/creative-spark

This skill should be used when the user asks to "brainstorm", "explore options", "get creative", "what if we...", or selects "Let's get creative" during story or cycle creation. NOT for a bare vague feature idea where generating options would mean inventing the premise first -

From plugin
craft
7311 skills27 agents77 commands7 hooks
+1

Claude Code

$ npx -y skills add drobins25/craft --skill creative-spark --agent claude-code

SKILL.md

creative-spark.SKILL.md
name: creative-spark
description: This skill should be used when the user asks to "brainstorm", "explore options", "get creative", "what if we...", or selects "Let's get creative" during story or cycle creation. NOT for a bare vague feature idea where generating options would mean inventing the premise first - that routes to /craft:riff (riff first, options after). Generates 3-4 creative options with trade-offs, visual direction for UI stories, and wireframes.
version: 1.5.0
allowed-tools: ["Read", "Glob", "Grep", "Task"]

Creative Spark Skill

You are entering the **Creative Phase** - the ideation engine of the Craft harness. Your job is to generate options that inspire, not to make decisions.

When This Activates

  • User is starting a new story or feature
  • User says "let's brainstorm", "what if", "options for"
  • User needs design direction
  • User asked for options and needs fresh perspectives

Orchestrator Context

The orchestrator may pass enriched args. Parse labeled fields if present:

  • `STORY:` story name — provides story identity
  • `PROJECT_TYPE:` web/cli/library — tailor options to project type
  • `EXISTING_PATTERNS:` key patterns in the codebase — build on what exists

**Fallback:** Args are primarily conversational context. All phases work without labeled fields.

Existing Visual Direction Check

**Before generating options, read the story file** (if one exists). If the story already has a populated `## Visual Direction` section (e.g., from `design-vibe`), ask the user before proceeding:

Use **AskUserQuestion**:

question: "This story already has visual direction ([vibe name]). How should creative exploration work?"
header: "Visual"
options:
  - label: "Build on it"
    description: "Explore functional and interaction options within the existing visual direction"
  - label: "Replace it"
    description: "Start fresh — generate new visual directions too"

**If "Build on it":** Use the existing visual direction as a constraint. Your options explore functional approaches, interaction patterns, and technical angles — not competing visual directions. Reference the existing vibe/feel/tokens so options stay aligned. Do NOT overwrite Visual Direction or Wireframe sections.

**If "Replace it":** Generate full options with new visual directions and wireframes per the output format templates. The chosen option's visual direction will replace what's there.

If the story has NO visual direction (sections are empty or placeholder comments), generate visual direction as part of each option per the output format templates. No prompt needed.

Content Direction Awareness

**Before generating options, check if the story has a `## Content Direction` section.** If it does:

  • **Read it fully.** Content Direction specifies the WHAT — display content, narrative arc, copy direction, data shape, priority/hierarchy.
  • **Treat it as a constraint, not a suggestion.** Your options explore the HOW (visual direction, interaction patterns, layout) while respecting the WHAT.
  • **Reference it in your options.** When an option's layout or flow is informed by Content Direction, say so: "The content direction specifies [X], so this layout prioritizes..."
  • **Don't re-decide content.** If Content Direction says "hero section shows streak count and today's plan," don't generate an option that replaces that with a motivational quote. Explore how to PRESENT the streak count and plan.

If no Content Direction exists, proceed normally — you may need to make content assumptions as part of your creative options.

Your Creative Process

1. Understand the Context

Before generating ideas, gather:

  • What problem are we solving?
  • Who is the user?
  • What constraints exist?
  • What's the current state?
  • Does the story already have visual direction? (Read the file first)
  • Does the story have a `## Content Direction` section? If yes, read it and use it as constraints for option generation. Content Direction tells you WHAT goes in the feature — your options should explore HOW it looks and feels, not re-decide the content.

1.5 Creative Driver (Optional)

After gathering context, offer the user a choice of creative lens. Each option brings a different agent's perspective to enrich the brief before option generation. Agents are **interrogators** - they enrich the brief, they don't replace option generation. The multi-stance tension framework stays intact; agent input makes each stance sharper.

Use **AskUserQuestion**:

question: "Who should drive the creative direction?"
header: "Driver"
options:
  - label: "Standard (Recommended)"
    description: "Analyze the story and generate options directly."
  - label: "Muse"
    description: "Start from why anyone will care - find the emotional job before exploring how to build it."
  - label: "Alchemist"
    description: "Find the physical metaphor first - what does this weigh, how does it move, what does it feel like to touch?"
  - label: "Full Workshop"
    description: "Muse finds the feeling. Alchemist finds the physics. Options where both speak the same language."

**If Standard:** Skip to Step 2 (Reframe). No agent invocation. This is the current behavior, unchanged.

**If Muse, Alchemist, or Full Workshop:** Proceed to the Agent Interrogation step below before Step 2.

1.6 Agent Interrogation

This step runs only when the user selected Muse, Alchemist, or Full Workshop. The agents enrich the creative brief - they do NOT generate options. Creative-spark still generates all options in Step 3.

**Before invoking any agent, write a continuation breadcrumb:**

cat > "${CRAFT_PROJECT_ROOT:-.}/.craft/.continuation" << CRUMB
ACTION: Continue creative-spark - agent interrogation complete, proceed to Step 2 (Reframe and Find the Tension) with enriched brief
SKILL: craft:creative-spark
ARGS: Continue from agent interrogation - brief enriched, generate options
WRITTEN_BY: creative-spark
TIMESTAMP: $(date -u +%Y-%m-%dT%H:%M:%S)
CRUMB
Read more
@drobins25
Ships withcraft

Stop Vibing. Start Crafting.

7311 skills27 agents1 MCP
Get the whole plugin, auto-invoked

Stars on GitHub

Momentum

stars in total
73
Star history of drobins25/craft on GitHub, a chart by star-history.com

Other skills on craft.

adhoc
Auto-invoked

adhoc

Adhoc workflow for small targeted changes to existing behavior or appearance, without the full story ceremony. Use when the…

@drobins25@drobins25Install Skill
approve
Auto-invoked

approve

Request write permission from the user before making file changes. MUST be invoked before any write attempt when the write gate…

@drobins25@drobins25Install Skill
browser
Auto-invoked

browser

Interactive browser automation via playwright-cli. Use when you need to navigate a site, click elements, fill forms, take…

@drobins25@drobins25Install Skill
content-spark
Auto-invoked

content-spark

This skill should be used when a story has been captured but content direction is unresolved - the spark describes WHAT to build…

@drobins25@drobins25Install Skill
design-vibe
Auto-invoked

design-vibe

Use this skill when the user wants to discover, define, or refine their product's aesthetic identity. Triggers on "what should…

@drobins25@drobins25Install Skill
lock-decision
Auto-invoked

lock-decision

This skill should be used when the user says "lock it", "go with that", "approved", "that's the standard", or explicitly…

@drobins25@drobins25Install Skill

More skills from other plugins.

brainstorming
Auto-invoked

brainstorming

You MUST use this before any creative work - creating features, building components, adding functionality, modifying behavior, or…

@obra@obraInstall Skill
ask-matt

ask-matt

Ask which skill or flow fits your situation. A router over the skills in this repo.

skills10d309k
@mattpocock@mattpocockInstall Skill
accessibility
Auto-invoked

accessibility

Design, implement, and audit accessible UI to WCAG 2.2 Level AA across Web, iOS, and Android — semantic ARIA roles and labels,…

ecc12d293k
@affaan-m@affaan-mInstall Skill
compiler-commit

compiler-commit

Use when you want to verify compiler changes and commit with the correct convention. Runs tests, lint, and format, then commits…

react1d252k
@facebook@facebookInstall Skill

Questions about creative-spark.

Which coding agents can use creative-spark?
creative-spark installs in Claude Code, Codex, Cursor, Gemini CLI, GitHub Copilot, OpenCode and Windsurf with the skills CLI, using each agent's flag shown on this page. Flowy's auto-invocation, which fires a skill when your prompt matches, runs in Claude Code only.