skills.rest
rshankras
rshankrasCOMMUNITY
Explore all skills by this author →
Website𝕏@rshankraGitHub

ui-prototyping

Generates divergent SwiftUI preview variations of a screen, remixes them, and tunes animations with a debug panel.

696|66|Updated Oct 29, 2025
Search Tags:#SwiftUI#Xcode#previews#ios design#sample data#ui prototyping#animation tuning
One-click install
npx skills add https://github.com/rshankras/claude-code-apple-skills --skill ui-prototyping
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-prototyping
Source: https://github.com/rshankras/claude-code-apple-skills/tree/main/skills/design/ui-prototyping
Command: npx skills add https://github.com/rshankras/claude-code-apple-skills --skill ui-prototyping

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Task lists and specs commit you to one arbitrary layout before you have seen alternatives, anchoring the whole UI phase on a first guess. This Skill front-loads divergent exploration so the layout carried into planning is one you deliberately chose, not defaulted into.

Core Features & Use Cases

  • Divergent variation generation: Produces 6-10 genuinely different SwiftUI layouts of one screen as named #Previews, varying organizing metaphor, navigation shape, typography, density, and mood.
  • Remix and lived-in content: Combines the strongest elements from named variations into hybrids, fills them with plausible sample data, and adds edge-case previews for empty states, unbounded growth, and long input.
  • Animation tuning panel: Builds a DEBUG-guarded side-by-side panel to tune springs, easings, and phased transitions live on device.
  • Use Case: After defining a book club app's features, generate named preview variations like "Cozy" and "Club Hub", remix the standings board into the chosen direction, and record the decision in .planning/PROTOTYPE.md for the planning phase.

Quick Start

Ask the agent to prototype the main screen of your app with several divergent SwiftUI variations before committing to a layout in the plan.

Frequently Asked Questions about ui-prototyping

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I prototype multiple SwiftUI layout variations before committing to a design?▼

Generate 6-10 divergent variations of one screen, each as its own named #Preview with a distinct organizing metaphor such as tab bar, grid-to-detail, or single scroll. Flip between them in Xcode's canvas, then remix the strongest elements into hybrids.

When should I run UI prototyping in an app development workflow?▼

Run it early, once per signature screen, after defining app features and before the planning phase locks a layout. Exploration is cheapest before the real screen exists, and the winning variation is real SwiftUI you carry forward.

How do I tune SwiftUI animations and spring parameters interactively?▼

Build a DEBUG-guarded tuning panel laid out side-by-side with the content, with controls per animation phase for duration, stiffness, and damping. Tune on a physical device, since feel parameters like springs and haptics are only judgeable while running live.

What edge cases should SwiftUI preview states cover?▼

Cover at minimum empty or blank-slate states with a call-to-action, unbounded growth such as long lists and long titles with truncation or expand controls, and long text input. Use plausible, messy sample data rather than idealized placeholders.

What are the limitations of AI-generated UI prototypes?▼

Agents propose variations but cannot judge which is best; that decision is the design work. Divergent does not mean good, some variations will fail, and lived-in sample content is no substitute for testing with real users and their own content.

Related Skills

Explore More Design & Creative Skills→
Rune-kitRune-kit
82

ba

Elicit user needs through structured questioning and produce a formal Requirements Document.

Official
Advanced
kay6198835kay6198835

reverse-document

Analyze existing code and prototypes to generate design documents or Architecture Decision Records.

Community
Advanced
hack-dancehack-dance
8

swiftui-animation

Implement advanced SwiftUI animations, transitions, and Metal shader integration.

Official
Advanced
HonigbartHonigbart
1

quick-plan

Write executable plans to .ai/plans/<slug>/final_plan.md.

Community
Basic