Generate a Mockup.swift SwiftUI preview file from design tokens, build and run on simulator via XcodeBuildMCP, capture a screenshot as the baseline for /design-verify-ios.
<!-- === PREAMBLE END === --> <!-- === DESIGN PREAMBLE START === --> <!-- === DESIGN PREAMBLE END === -->Agentic Workflow — 35 skills available. Run any as
/<name>.
Skill Purpose /reviewMulti-agent PR code review /postReviewPublish review findings to GitHub /addressReviewImplement review fixes in parallel /enhancePromptContext-aware prompt rewriter /bootstrapGenerate repo planning docs + CLAUDE.md /rootCause4-phase systematic debugging /bugHuntFix-and-verify loop with regression tests /bugReportStructured bug report with health scores /shipReleaseSync, test, push, open PR
/syncDocs | Post-ship doc updater |
/weeklyRetro | Weekly retrospective with shipping streaks |
/officeHours | Spec-driven brainstorming → EARS requirements + design doc |
/productReview | Founder/product lens plan review |
/archReview | Engineering architecture plan review |
/withInterview | Interview user to clarify requirements before executing |
/design-analyze | Detect web vs iOS, extract design tokens (dispatcher) |
/design-analyze-web | Extract design tokens from reference URLs (web) |
/design-analyze-ios | Extract design tokens from Swift/Xcode assets |
/design-language | Define brand personality and aesthetic direction |
/design-evolve | Detect web vs iOS, merge new reference into design language (dispatcher) |
/design-evolve-web | Merge new URL into design language (web) |
/design-evolve-ios | Merge Swift reference into design language (iOS) |
/design-mockup | Detect web vs iOS, generate mockup (dispatcher) |
/design-mockup-web | Generate HTML mockup from design language |
/design-mockup-ios | Generate SwiftUI preview mockup |
/design-implement | Detect web vs iOS, generate production code (dispatcher) |
/design-implement-web | Generate web production code (CSS/Tailwind/Next.js) |
/design-implement-ios | Generate SwiftUI components from design tokens |
/design-refine | Dispatch Impeccable refinement commands |
/design-verify | Detect web vs iOS, screenshot diff vs mockup (dispatcher) |
/design-verify-web | Playwright screenshot diff vs mockup (web) |
/design-verify-ios | Simulator screenshot diff vs mockup (iOS) |
/verify-app | Detect web vs iOS, verify running app (dispatcher) |
/verify-web | Playwright browser verification of running web app |
/verify-ios | XcodeBuildMCP simulator verification of iOS app |
Output directory: ~/.agentic-workflow/<repo-slug>/
Prefer Serena for all code exploration — LSP-based symbol lookup is faster and more precise than file scanning.
| Task | Tool |
|---|---|
| Find a function, class, or symbol | serena: find_symbol |
| What references symbol X? | serena: find_referencing_symbols |
| Module/file structure overview | serena: get_symbols_overview |
| Search for a string or pattern | Grep (fallback) |
| Read a full file | Read (fallback) |
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
/bootstrapto generate.claude/rules/for this repo."
Create the output directory for this repo:
mkdir -p "$HOME/.agentic-workflow/$REPO_SLUG"
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""{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:
Prior context: {summary} Use this to inform your approach before continuing.
"prism-mcp unavailable: {error}. Ensure prism-mcp is running and registered."
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."
.impeccable.md if it exists:
## Sources section: the URLs used to build the design tokensdesign-tokens.json if it exists (W3C DTCG: colors, typography, spacing)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."
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:
| Package pattern | Library |
|---|---|
@radix-ui/* | Radix UI |
shadcn-ui, @shadcn/* | shadcn/ui |
@headlessui/* | Headless UI |
react-aria, @react-aria/* | React Aria |
@mui/* | Material UI |
@chakra-ui/* | Chakra UI |
@mantine/* | Mantine |
antd | Ant Design |
@nextui-org/* | NextUI |
daisyui | daisyUI |
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."
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.
Generates a Mockup.swift SwiftUI preview file from design tokens, builds on simulator, and captures a baseline screenshot for verification.
design-tokens.json must exist. If missing:
"No design tokens found. Run
/design-analyze-iosfirst to extract tokens from your Xcode assets."
Read design-tokens.json and (if present) .impeccable.md to understand:
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.
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.
Build the project on simulator: