arn-spark-style-explore

Arness Style Explore

Explore visual style direction for the project through iterative conversation, aided by the arn-spark-ux-specialist agent (a greenfield agent in this plugin) for design guidance, optionally the arn-spark-style-capture agent for capturing reference website screenshots, and optionally the arn-spark-prototype-builder agent for sample screens. This is a conversational skill that runs in normal conversation (NOT plan mode). The primary artifact is a style brief document with implementable toolkit configuration.

This skill covers the visual identity of the product: colors, typography, spacing, component customization, and animation approach. It translates these into concrete configuration for the project's CSS framework and component library. It does not create full application screens -- that is /arn-spark-static-prototype and /arn-spark-clickable-prototype's job.

Prerequisites

A product concept document should exist for context on target users and product personality. Check in order:

1. Read the project's CLAUDE.md for a ## Arness section. If found, check the configured Vision directory for product-concept.md
2. If no ## Arness section found, check .arness/vision/product-concept.md at the project root

If a product concept is found: Read it to inform style recommendations.

If no product concept is found: Proceed with the user's description of the product. Style exploration does not hard-require a product concept.

Visual direction (recommended):

1. Check the configured Vision directory for visual-direction.md
2. If no ## Arness section found, check .arness/vision/visual-direction.md at the project root

If a visual direction is found: Read it. The visual direction provides primary visual grounding from /arn-spark-visual-sketch: selected direction characteristics (color mood, typography feel, component style, layout density), approximate color palette with hex values, CSS variables used in the sketch, screenshot paths in the visual grounding designs/ directory, creative anchors — tone commitment, differentiation anchor, and Design Thinking answers that capture the creative intent behind the direction, and animation and motion context — motion philosophy, key patterns, animation approach used, and whether animation is integral to the direction's identity. Use this as the starting point for style exploration rather than asking the user to describe a direction from scratch. The creative anchors are the direction's DNA — preserve them through token refinement rather than diluting them into generic defaults.

If no visual direction is found: Proceed normally with the user's verbal description. Visual direction is optional -- style exploration works without it.

The project should be scaffolded with a UI toolkit already configured (CSS framework and component library installed via /arn-spark-scaffold). Check:

1. Read the project's package.json to identify installed CSS framework and component library
2. Read the architecture vision for UI framework and toolkit choices

If the project is scaffolded: Use the installed toolkit for style configuration.

If the project is NOT scaffolded: Inform the user: "The project does not appear to be scaffolded yet. I can explore style direction conceptually, but the toolkit configuration section will be more useful after running /arn-spark-scaffold." Proceed with the exploration -- the style brief can be written without toolkit config and updated later.

Determine the output directory:

1. Read the project's CLAUDE.md and check for a ## Arness section
2. If found, extract the configured Vision directory path — this is the source of truth
3. If no ## Arness section exists or Arness Spark fields are missing, inform the user: "Arness Spark is not configured for this project yet. Run /arn-brainstorming to get started — it will set everything up automatically." Do not proceed without it.
4. If the output directory does not exist, create it

Determine the visual grounding directory:

1. Read the project's CLAUDE.md ## Arness section
2. If found, extract the Visual grounding directory path
3. If not found, fall back to .arness/visual-grounding
4. Create the directory and subfolders (references/, designs/, brand/) if they do not exist

Check for design tool integration:

1. Read the ## Arness section for Figma and Canva fields
2. Only offer Figma/Canva integration in Step 1 if the corresponding field is yes
3. If the field is no or missing, do not mention or attempt to use that design tool

Workflow

Step 1: Gather Context

Load available context:

• Product concept: Target users, core experience, product personality
• Architecture vision: UI framework, platform (desktop, web, mobile)
• Scaffold results: Installed CSS framework, component library, icon library
• Visual direction (if found): Selected direction characteristics, approximate color palette, CSS variables used in the sketch, screenshot paths, creative anchors (tone commitment, differentiation anchor, Design Thinking), animation context (motion philosophy, key patterns, animation approach, role)

Present the context to the user:

If a visual direction exists:

"Your project uses [UI framework] with [CSS framework] and [component library]. The product is [brief description from product concept, targeting audience].

A visual direction was established via /arn-spark-visual-sketch. The selected direction is: [summary from visual-direction.md — overall feel, color mood, typography, layout approach]. The creative anchors are: Tone: [tone commitment], Differentiation: [differentiation anchor].

[If screenshots exist:] Screenshots of the sketched screens are available at [paths].

I will use this as the starting point for the style brief."

Ask (using AskUserQuestion):

How would you like to proceed with this visual direction?

1. Proceed — Build a style proposal based on this direction

2. Adjust — Refine specific aspects before proceeding

3. Different direction — Take it in a completely different direction

If no visual direction exists:

"Your project uses [UI framework] with [CSS framework] and [component library]. The product is [brief description from product concept, targeting audience].

Adapt the context summary based on what was found. If the project is not scaffolded, omit toolkit details and present only what is known (e.g., product description and platform context).

Describe the visual feel you want. You can:

• Use words: minimal, dark, playful, professional, etc.
• Reference other apps: 'I like how Linear looks' or 'something like Discord'
• Share URLs: Paste a URL and I can capture a screenshot to analyze the design
• Share screenshots: Paste or reference image files

Some starting points if you are not sure:

• Minimal and clean -- lots of whitespace, muted colors, thin borders
• Dark with neon accents -- dark backgrounds, vibrant accent colors, tech feel
• Warm and approachable -- rounded corners, warm colors, friendly tone
• Professional and dense -- compact layout, neutral palette, data-focused

Or describe your own direction."

After the user describes their initial direction, ask about visual assets:

Ask (using AskUserQuestion):

"Do you have any visual assets to guide the style direction?"

Options:

1. Reference images — Screenshots or URLs of apps/sites you admire (inspirational)
2. Design mockups — Figma, Canva, or exported screen designs (specification)
3. Brand assets — Logos, brand guidelines, color specs (constraints)
4. None — We will work from verbal descriptions

Handle each asset type:

| User has | Action | |----------|--------| | Reference URLs | Invoke arn-spark-style-capture → save to [visual-grounding]/references/ | | Reference image files | User provides paths