/arn-code-sketch

name: arn-code-sketch
description: >-
  This skill should be used when the user says "sketch", "arness code sketch",
  "preview this", "show me what this looks like", "UI preview",
  "sketch the feature", "visual preview", "sketch this page",
  "what will this look like", "mock this up", "prototype this UI",
  "preview the design", "sketch the UI",
  "preview this command", "show me what the output looks like",
  "sketch the TUI", "what will the CLI look like",
  "mock up the terminal output",
  or wants to see a working interface preview of a feature in the context of
  their existing application before committing to full implementation.
  Creates real, runnable artifacts using the project's actual framework
  and conventions, rendered in a dedicated sketch namespace.
version: 1.0.0

Arness Sketch

Create a working interface preview of a feature using the project's actual framework, conventions, and styling system. The sketch renders the new feature in context -- showing it within the real application where it will live, not in isolation. This lets the user see and interact with a preview before committing to the full implementation pipeline.

Sketches are real code: runnable artifacts written with the project's conventions, served from a dedicated `arness-sketches/` namespace. They can be iterated on via feedback, promoted into the real codebase, or cleaned up when no longer needed.

This is a conversational skill. It runs in normal conversation (NOT plan mode).

Prerequisites

1. **Arness must be configured.** Read the project's CLAUDE.md and check for a `## Arness` section. If missing, inform the user: "Arness is not configured for this project yet. Run `/arn-implementing` to get started — it will set everything up automatically." Do not proceed without it.

2. **Sketch strategy must exist.** Read `ui-patterns.md` from the project's code patterns directory (the path under **Code patterns:** in the `## Arness` config). Look for a `## Sketch Strategy` section. If absent, halt with:

"No sketch strategy found. Run `/arn-implementing` to get started — pattern documentation will be generated on first use, including the sketch strategy if your project has a UI framework."

Do not proceed without a sketch strategy.

Pipeline Position

Entry points:
  - Direct: user says "sketch this" / "preview this"
  - From feature-spec: proactively offered after initial proposal when UI is involved
  - From feature-spec-teams: proactively offered after debate converges when UI is involved
  - From swift: after swift assessment, offered for interface changes above threshold

                    arn-code-sketch (this skill)
                    =========================
                    For interface preview before implementation

  Input:  Feature description (from spec, swift, or direct)
            |
            v
  Load:    Sketch strategy + paradigm reference from pattern docs
            |
            v
  Assess:  Should this be sketched? (threshold rules)
            |
            +--- Below threshold --> "This change is small enough to implement
            |                         directly. Proceed with /arn-code-swift or
            |                         /arn-code-feature-spec instead."
            |
            +--- Above threshold --> Continue
            |
            v
  Create:  arness-sketches/[feature-name]/ artifact namespace
            |
            v
  Build:   Spawn arn-code-sketch-builder agent
            |
            v
  Present: Show preview instructions, iterate on feedback
            |
            v
  Finish:  Promote to real codebase OR clean up

Workflow

Step 1: Load Sketch Strategy and Paradigm Reference

Load the sketch setup and paradigm routing rules:

> Read `${CLAUDE_PLUGIN_ROOT}/skills/arn-code-sketch/references/sketch-setup.md`

Follow the setup sequence:

1. **Read `ui-patterns.md`** from the project's code patterns directory (already read in Prerequisites). Parse the `## Sketch Strategy` section to extract:

• **Paradigm** -- the interface type (e.g., `web`, `cli`, `tui`, `desktop`, `mobile`)
• **Artifact structure** -- what sketch files to create and where
• **Preview mechanism** -- how the user previews the sketch (browser URL, terminal command, etc.)
• **Promotion rules** -- how sketch artifacts move into the real codebase

2. **Read `architecture.md`** from the code patterns directory for Technology Stack confirmation (framework, language, key libraries).

3. **Load paradigm reference** -- based on the paradigm extracted from the sketch strategy:

> Read `${CLAUDE_PLUGIN_ROOT}/skills/arn-code-sketch/references/paradigm-<paradigm>.md`

If the paradigm-specific reference file does not exist, fall back to:

> Read `${CLAUDE_PLUGIN_ROOT}/skills/arn-code-sketch/references/paradigm-stub.md`

4. Hold the sketch strategy context (paradigm, artifact structure, preview mechanism) and paradigm reference for use by the builder agent.

Step 2: Read Feature Context

Determine what to sketch from one of these sources (check in order):

1. **From conversation context** -- if invoked after `/arn-code-feature-spec` or `/arn-code-swift`, the feature description and architectural decisions are already in the conversation. Extract the interface-relevant portions.

2. **From a spec file** -- if the user references a spec (e.g., "sketch F-001" or "sketch the auth feature"), read the spec file from the project's specs directory.

3. **From direct description** -- if the user describes what they want directly (e.g., "sketch a settings page with a profile form and notification preferences"), use that description.

If the feature description is vague, ask one clarifying question focused on what the user wants to SEE:

"What should I show in the preview? For example: 'a settings page with profile form and notification toggles', 'the new dashboard widget showing recent activity', 'the deploy command with its subcommands a