Design Mockup Ios

Output directory: ~/.agentic-workflow/<repo-slug>/

Codebase Navigation

Prefer Serena for all code exploration — LSP-based symbol lookup is faster and more precise than file scanning.

Preamble — Bootstrap Check

Before running this skill, verify the environment is set up:

# Derive repo slug
REMOTE_URL=$(git remote get-url origin 2>/dev/null || echo "")
if [ -n "$REMOTE_URL" ]; then
  REPO_SLUG=$(echo "$REMOTE_URL" | sed 's|.*[:/]\([^/]*/[^/]*\)\.git$|\1|;s|.*[:/]\([^/]*/[^/]*\)$|\1|' | tr '/' '-')
else
  REPO_SLUG=$(basename "$(pwd)")
fi
echo "repo-slug: $REPO_SLUG"

# Check bootstrap status
SKILLS_OK=true
for s in review postReview addressReview enhancePrompt bootstrap rootCause bugHunt bugReport shipRelease syncDocs weeklyRetro officeHours productReview archReview withInterview design-analyze design-analyze-web design-analyze-ios design-language design-evolve design-evolve-web design-evolve-ios design-mockup design-mockup-web design-mockup-ios design-implement design-implement-web design-implement-ios design-refine design-verify design-verify-web design-verify-ios verify-app verify-web verify-ios; do
  [ -d "$HOME/.claude/skills/$s" ] || SKILLS_OK=false
done

BRIDGE_OK=false
lsof -i TCP:3100 -sTCP:LISTEN &>/dev/null && BRIDGE_OK=true

RULES_OK=false
[ -d ".claude/rules" ] && [ -n "$(ls -A .claude/rules/ 2>/dev/null)" ] && RULES_OK=true

echo "skills-symlinked: $SKILLS_OK"
echo "bridge-running: $BRIDGE_OK"
echo "rules-directory: $RULES_OK"

Domain rules in .claude/rules/ load automatically per glob — no action needed if rules-directory: true.

If SKILLS_OK=false or BRIDGE_OK=false, ask the user via AskUserQuestion:

"Agentic Workflow is not fully set up. Run setup.sh now? (yes/no)"

If yes: run bash <path-to-agentic-workflow>/setup.sh (resolve path from the review skill symlink target). If no: warn that some features may not work, then continue.

If RULES_OK=false (and SKILLS_OK and BRIDGE_OK are both true), do not offer setup.sh. Instead, show:

"Domain rules not found — run /bootstrap to generate .claude/rules/ for this repo."

Create the output directory for this repo:

mkdir -p "$HOME/.agentic-workflow/$REPO_SLUG"

Session Context

Load prior work state for this repo from prism-mcp before starting.

1. Derive a topic string — synthesize 3–5 words from the skill argument and task intent:

• /officeHours add dark mode → "dark mode UI feature"
• /rootCause TypeError cannot read properties → "TypeError cannot read properties"
• /review 42 → use the PR title once fetched: "PR {title} review"
• No argument → use the most specific descriptor available: "{REPO_SLUG} {skill-name}"

2. Load context from prism-mcp:

mcp__prism-mcp__session_load_context — project: REPO_SLUG, level: "standard",
  toolAction: "Loading session context", toolSummary: "<skill-name> context recovery"

Store the returned expected_version — you will need it at Session Close.

3. Surface results:

• If the response contains a non-empty summary or prior decisions:

  Prior context: {summary} Use this to inform your approach before continuing.

• If prism-mcp returns an error, surface it and stop:

  "prism-mcp unavailable: {error}. Ensure prism-mcp is running and registered."

Session Close

Run at the end of every skill, after all work is complete and the report has been shown to the user.

Save a structured ledger entry and update the live handoff state for this repo.

1. Save ledger entry (immutable audit trail):

mcp__prism-mcp__session_save_ledger — project: REPO_SLUG,
  conversation_id: "<skill-name>-<ISO-timestamp, e.g. 2026-04-08T14:32:00Z>",
  summary: "<one paragraph describing what was accomplished this session>",
  todos: ["<any open items left incomplete>", ...],
  files_changed: ["<paths of files created or modified>", ...],
  decisions: ["<key decisions made during this skill run>", ...]

2. Update handoff state (mutable live state for next session):

mcp__prism-mcp__session_save_handoff — project: REPO_SLUG,
  expected_version: <value returned by session_load_context>,
  open_todos: ["<open items not yet completed>", ...],
  active_branch: "<current git branch from: git branch --show-current>",
  last_summary: "<one sentence: what this skill just did>",
  key_context: "<critical facts the next session must know — constraints, decisions, blockers>"

If either call fails, surface the error:

"prism-mcp session save failed: {error}. Context may not persist to next session."

Design Context — Load Design Language

Block 1: Load design language

1. Read .impeccable.md if it exists:
   • Note the brand personality and aesthetic direction
   • Note the ## Sources section: the URLs used to build the design tokens
2. Read design-tokens.json if it exists (W3C DTCG: colors, typography, spacing)
3. Read planning/DESIGN_SYSTEM.md if it exists (component catalog, design principles)

If none exist and this skill requires design context:

"No design language found. Run /design-language [url1 url2...] to synthesize from reference materials, then retry."

Block 2: Dynamic component inventory

Run the following scan and surface results as context before proceeding with the skill's own steps.

Part A: Component library detection

Read package.json (if it exists) and check dependencies + devDependencies for known libraries:

Cross-reference with the ## Sources URLs from .impeccable.md — if a source URL matches a known component library's docs site (e.g., ui.shadcn.com, radix-ui.com, mantine.dev), note it as the detected library even if package.json doesn't yet include it.

For iOS: check Swift files for import SwiftUI (standard) or third-party component libs.

Part B: Repo primitive scan

Glob("src/components/**/*.{tsx,jsx,ts,js}")
Glob("components/**/*.{tsx,jsx,ts,js}")
Glob("app/components/**/*.{tsx,jsx,ts,js}")
Glob("ui/src/components/**/*.{tsx,jsx,ts,js}")
Glob("**/*.swift", limit to top 2 directory levels)

Collect file names (not contents), deduplicate, and derive component names from filenames (e.g., button.tsx → Button, card-header.tsx → CardHeader).

Surface as a context note before proceeding:

Component context:
  Library:    shadcn/ui (detected from package.json + impeccable.md sources)
  Primitives: Button, Card, Input, Dialog, Badge, Separator (+7 more)

  Use these components in mockups and implementations before inventing new ones.

If no library and no primitives found: note "No component library or repo primitives detected — generate from scratch using design tokens."

Block 3: Orchestration overview

Design pipeline:
  /design-language [urls]  →  synthesize tokens + brand personality
  /design-mockup <screen>  →  HTML (web) or SwiftUI (iOS) mockup
  /design-implement        →  production code from approved mockup
  /design-refine           →  Impeccable polish pass
  /design-verify           →  screenshot diff vs mockup baseline

  /design-evolve  can run anytime to merge new reference materials.

Design Mockup iOS — SwiftUI Preview Mockup Generator

Generates a Mockup.swift SwiftUI preview file from design tokens, builds on simulator, and captures a baseline screenshot for verification.

Step 1: Validate Prerequisites

design-tokens.json must exist. If missing:

"No design tokens found. Run /design-analyze-ios first to extract tokens from your Xcode assets."

Step 2: Read Design Context

Read design-tokens.json and (if present) .impeccable.md to understand:

• Color palette
• Typography scale
• Spacing system
• Brand personality

Step 3: Generate Mockup.swift

Create a Mockup.swift SwiftUI preview file at the project root (or in the main app target folder if detected):

// Mockup.swift — generated by /design-mockup-ios
// This file is a design mockup preview — not production code.
import SwiftUI

// MARK: - Design Tokens (inline for preview isolation)
private enum MockupTokens {
    enum Color {
        static let primary = SwiftUI.Color(hex: "<primary from design-tokens.json>")
        static let background = SwiftUI.Color(hex: "<background from design-tokens.json>")
        // ... all color tokens
    }
    enum Spacing {
        static let sm: CGFloat = <sm value>
        static let md: CGFloat = <md value>
        // ... all spacing tokens
    }
    enum Typography {
        static let heading = Font.system(size: <heading size>, weight: .bold)
        // ... all typography tokens
    }
}

// MARK: - Mockup View
struct MockupView: View {
    var body: some View {
        // Generate a representative view using the design tokens
        // Use realistic placeholder content (not "Lorem ipsum")
        // Follow iOS HIG: safe areas, standard navigation, system fonts as fallback
    }
}

#Preview {
    MockupView()
}

The mockup should use ALL color, spacing, and typography tokens to demonstrate the full design language.

Step 4: Acquire Simulator Lock

Acquire the simulator lock to prevent concurrent sessions from corrupting screenshots:

SHARED_DIR="$(dirname "$(readlink -f "$HOME/.claude/skills/design-mockup-ios/SKILL.md")")/../_shared"
LOCK_NAME=ios-sim
source "$SHARED_DIR/skill-lock.sh"
acquire_lock || { echo "Could not acquire simulator lock — another skill may be using the simulator"; exit 1; }

On any failure in subsequent steps, call release_lock before stopping.

Step 5: Build on Simulator

Build the project on simulator: