/arn-spark-style-explore

name: arn-spark-style-explore
description: >-
  This skill should be used when the user says "style explore", "arn style",
  "visual style", "explore styles", "UI style", "look and feel",
  "design direction", "pick a style", "choose colors", "theme the app",
  "visual direction", "style guide", or wants to explore and define the visual
  design direction for their project through guided conversation, producing a
  style brief document with implementable toolkit configuration.
version: 1.0.0

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 establ