skills.rest
astroville
astrovilleOFFICIAL
Explore all skills by this author →
GitHub

swiftui-mockup-renderer

Generates SwiftUI mockups, compiles them with swiftc, and captures light and dark mode screenshots.

Updated Apr 20, 2026
Search Tags:#macos#ui design#swiftui#screenshot#mockup#swiftc#imagerenderer
One-click install
npx skills add https://github.com/astroville/sprout --skill swiftui-mockup-renderer-astroville
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: swiftui-mockup-renderer
Source: https://github.com/astroville/sprout/tree/main/.claude/skills/swiftui-mockup-renderer
Command: npx skills add https://github.com/astroville/sprout --skill swiftui-mockup-renderer-astroville

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? HTML-based UI mockups only approximate native Apple platform interfaces, so teams working on Swift apps cannot preview real system controls, SF Pro typography, and platform spacing before implementation. This Skill produces pixel-accurate native mockups by compiling actual SwiftUI code and rendering real screenshots. ## Core Features & Use Cases - Native SwiftUI Generation: Produces a self-contained MockView.swift using real components like NavigationStack, List, Form, Toggle, and SF Symbols with system semantic colors and typography. - Compile and Capture Pipeline: Compiles the source with swiftc, renders headlessly via ImageRenderer, and captures PNG screenshots in both light and dark mode at configurable sizes and scale factors. - Self-Contained Viewer and Spec Write-back: Builds a single-file HTML viewer with base64-embedded screenshots and a light/dark toggle, then appends a Mockups entry to the originating spec file. - Use Case: When planning a new iOS settings screen, run this Skill to get real rendered screenshots of the proposed layout in both appearance modes, linked directly from the feature spec for stakeholder review. ## Quick Start Ask the agent to generate a SwiftUI mockup of the settings screen for the current spec and capture light and dark screenshots.

Frequently Asked Questions about swiftui-mockup-renderer

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

FAQPage Schema
How do I generate a native SwiftUI mockup with real screenshots?▼

Generate a self-contained MockView.swift with an @main capture entry point, compile it with swiftc against SwiftUI and AppKit, then run the binary to render via ImageRenderer. Run it again with --dark to capture the dark mode screenshot.

What tool renders SwiftUI views to PNG without a simulator?▼

ImageRenderer renders SwiftUI views headlessly on macOS 13+ without a simulator. Wrap the view with a fixed frame and color scheme, set the renderer scale, then convert the resulting NSImage to PNG data.

Does SwiftUI mockup rendering work without Xcode installed?▼

No, it requires macOS with Xcode command-line tools so swiftc is available on PATH. When swiftc is missing, the pipeline detects this and falls back to generating an HTML mockup instead.

Can I use UIKit or iOS-only APIs in rendered mockups?▼

No, the capture runs on macOS via AppKit, so UIKit types like UIScreen and UIDevice are unavailable. Use NavigationStack, system semantic colors, and SF Symbols, which render correctly on macOS even when mocking an iOS layout.

What happens when SwiftUI mockup compilation fails?▼

The pipeline reads the compiler error, attempts one automatic fix of the Swift source, and retries compilation. If the retry also fails or the render crashes, it falls back to HTML mockup generation and reports the error.

Related Skills

Explore More Design & Creative Skills→
labs21-devlabs21-dev
28

feature-spec

Draft PRD-style feature specifications with goals, metrics, and open questions.

Official
Advanced
thrawn01thrawn01
11

spec-review

Analyze tech specs to surface gaps and produce implementable updates.

Community
Advanced
garrytangarrytan
127.1k

design-consultation

Generate a design system proposal with typography, color, layout, and motion elements.

Community
Advanced
oligamiqoligamiq

fixing-accessibility

Audit and fix HTML accessibility issues against WCAG rules.

Community
Intermediate