Flowdeck
SwiftedMind/Tessera
FlowDeck is REQUIRED for all Apple platform build/run/test/launch/debug/simulator/device/log/automation tasks.
Guides the agent to design distinctive SwiftUI interfaces for iOS and macOS, with six anti-generic rules, a design direction workflow and a five-dimension review.
$ npx skills add Wholiver/swiftui-design-skill --skill swiftui-design-skill -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install Wholiver/swiftui-design-skill swiftui-design-skill --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
Claude Code skills documentation · loads skills from .claude/skills/
Install the "swiftui-design-skill" agent skill from https://github.com/Wholiver/swiftui-design-skill/tree/main into .claude/skills/swiftui-design-skill/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "swiftui-design-skill", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add Wholiver/swiftui-design-skill --skill swiftui-design-skill -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install Wholiver/swiftui-design-skill swiftui-design-skill --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "swiftui-design-skill" agent skill from https://github.com/Wholiver/swiftui-design-skill/tree/main into .agents/skills/swiftui-design-skill/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "swiftui-design-skill", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add Wholiver/swiftui-design-skill --skill swiftui-design-skill -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install Wholiver/swiftui-design-skill swiftui-design-skill --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "swiftui-design-skill" agent skill from https://github.com/Wholiver/swiftui-design-skill/tree/main into .cursor/skills/swiftui-design-skill/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "swiftui-design-skill", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add Wholiver/swiftui-design-skill --skill swiftui-design-skill -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install Wholiver/swiftui-design-skill swiftui-design-skill --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "swiftui-design-skill" agent skill from https://github.com/Wholiver/swiftui-design-skill/tree/main into .gemini/skills/swiftui-design-skill/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "swiftui-design-skill", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install Wholiver/swiftui-design-skill swiftui-design-skillInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add Wholiver/swiftui-design-skill --skill swiftui-design-skill -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "swiftui-design-skill" agent skill from https://github.com/Wholiver/swiftui-design-skill/tree/main into .github/skills/swiftui-design-skill/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "swiftui-design-skill", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add Wholiver/swiftui-design-skill --skill swiftui-design-skill -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install Wholiver/swiftui-design-skill swiftui-design-skill --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "swiftui-design-skill" agent skill from https://github.com/Wholiver/swiftui-design-skill/tree/main into .opencode/skills/swiftui-design-skill/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "swiftui-design-skill", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
swiftui-design-skillGuides the agent to design distinctive SwiftUI interfaces for iOS and macOS, with six anti-generic rules, a design direction workflow and a five-dimension review.
This skill steers the agent toward SwiftUI screens that look deliberately designed instead of generic AI output. It rests on six principles, among them starting from context rather than a blank page (an existing design system, codebase or brand guidelines, or a brand-spec file when none exists), showing early hypotheses with placeholders, offering two or three distinct design directions rather than one final answer, and using a clean labeled placeholder in place of AI-generated SVG clipart.
A Design Direction workflow handles vague requirements, and every design must pass a five-dimension review before shipping. Reference files cover anti-generic patterns, design review, layout patterns, Swift extensions and typography and color, plus a brand-spec template. It expects Xcode 16 or newer with the iOS 18 and macOS 15 SDKs and SwiftUI rather than UIKit. Compile errors, performance work and accessibility-only tasks belong to the separate swiftui-expert-skill.
9 steps, taken from the step headings in SKILL.md.
Read from SKILL.md and the folder at commit 2c82638. It shows what the files ask for, not the result of running them.
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
No scripts in the folder and no shell commands in SKILL.md (its code samples are swift).
From the folder's file list and the shell code blocks in SKILL.md.
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
SwiftUI Design Skill loads about 2.8k tokens when it runs, and up to ~12k if it reads all its reference files. Until then it costs about 109 tokens; SKILL.md has 1,167 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.
The full file from Wholiver/swiftui-design-skill at commit 2c82638, republished under its MIT licence (© Wholiver). 1,167 words, ~2,794 tokens.
.claude/skills/swiftui-design-skill/SKILL.md (or your agent's skills folder). This skill also uses 12 other files; get the full folder from GitHub.TL;DR: Design SwiftUI apps that look intentionally crafted, not AI-generated. Follow the 6 Anti-Slop Rules, use the Design Direction workflow when requirements are vague, and always pass the 5-Dimension Review before shipping.
These 6 principles guide every design decision. They are distilled from real-world design practice and anti-patterns observed in AI-generated UI.
Before designing any screen, ask:
If no context exists, create a brand-spec.md first (see Brand Asset Protocol below).
Don't wait for the "perfect" design. Show hypotheses with placeholders early:
Always present 2-3 distinct design directions, not one "final answer." Each variation should:
If you cannot source a real asset (icon, image, illustration):
Every element must earn its place. Before adding any UI element, ask:
Whitespace is a feature, not emptiness.
These patterns are banned in production UI. See references/anti-ai-slop.md for detailed rules.
Banned visual patterns:
What to do instead:
When building UI for a specific brand, follow this 5-step hard flow:
Quality threshold: 5 real brand colors, 10 verified design tokens, 2 font families, 8pt spacing grid.
If no brand exists, create a brand-spec.md with:
When requirements are vague or the user asks "what style should we use?", follow this workflow:
Present 3 distinct design philosophies from different schools:
| School | Example Directions |
|---|---|
| Information | Clean data-first, chart-heavy, Bloomberg-style |
| Editorial | Magazine layout, serif typography, generous whitespace |
| Expressive | Bold color, asymmetric layout, motion-forward |
| Functional | Dense utility, monospace accents, minimal decoration |
| Warm Minimal | Soft neutrals, rounded shapes, subtle texture |
For each direction, describe:
Present options clearly. After choice, lock in the design system.
Create or confirm these design tokens:
// Requires: references/swift-extensions.md (Color(hex:) extension)
// DesignTokens.swift
enum DesignTokens {
// Colors
static let accent = Color(hex: "E85D3A") // Warm coral
static let background = Color(hex: "FAFAF8") // Warm white
static let textPrimary = Color(hex: "1A1A1A") // Near-black
static let textSecondary = Color(hex: "6B6B6B") // Muted gray
// Typography
static let displayFont = "New York" // Serif for headings
static let bodyFont = "SF Pro" // System default
// Spacing (8pt grid)
static let spaceXS: CGFloat = 4
static let spaceS: CGFloat = 8
static let spaceM: CGFloat = 16
static let spaceL: CGFloat = 24
static let spaceXL: CGFloat = 32
static let spaceXXL: CGFloat = 48
// Corner radius
static let radiusS: CGFloat = 8
static let radiusM: CGFloat = 12
static let radiusL: CGFloat = 16
}Follow the layout patterns in references/layout-patterns.md:
VStack for vertical flow, HStack for horizontalLazyVGrid / LazyHGrid for grid layoutsScrollView with .scrollTargetBehavior(.paging) for paged contentGeometryReader — prefer containerRelativeFrame (iOS 17+)Follow references/typography-color.md:
Each screen should have ONE element that goes 120% — a custom animation, a unique layout choice, a distinctive color moment. This is what makes the design memorable.
Examples:
Before shipping, run the 5-Dimension Review (see references/design-review.md).
| Mistake | Fix |
|---|---|
Using UIColor or NSColor | Use Color (SwiftUI native) |
UIScreen.main.bounds for sizing | Use containerRelativeFrame or geometry-based modifiers |
| Default blue tint everywhere | Define a custom accent color in design tokens |
| No spacing system (random padding values) | Use 8pt grid: 4, 8, 16, 24, 32, 48 |
| Emoji as icons | Use SF Symbols or custom icon assets |
| Purple-blue gradient background | Use solid warm neutrals |
| All content in one giant VStack | Break into semantic sections with clear hierarchy |
| No visual hierarchy (everything same size) | Use 3+ type scales (display, heading, body, caption) |
| Ignoring dark mode | Define semantic colors that adapt to appearance |
| Generic "Welcome!" hero section | Show actual content immediately |
| Topic | Reference File |
|---|---|
| Anti-AI-Slop Rules (detail) | references/anti-ai-slop.md |
| Layout Patterns & Grids | references/layout-patterns.md |
| Typography & Color Systems | references/typography-color.md |
| 5-Dimension Design Review | references/design-review.md |
| Swift Extensions (required) | references/swift-extensions.md |
| Brand Spec Template | templates/brand-spec.md |
Before considering any SwiftUI design complete, verify:
GeometryReader or UIScreen.main.bounds© Wholiver, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
SKILL.md and 12 other files (references) in the repository root of Wholiver/swiftui-design-skill.
Open the folder on GitHubat commit 2c82638
SwiftUI Design Skill next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| SwiftUI Design Skill this skillWholiver/swiftui-design-skill | 204 | — | ~2.8k | Automated safety check: Pass | MIT | |
| FlowdeckSwiftedMind/Tessera | 116 | — | ~11k | Automated safety check: Pass | MIT | |
| Bootstrap iOSRayFernando1337/rayfernando-skills | 130 | — | ~1.1k | Automated safety check: Pass | Apache-2.0 | |
| Xcstrings ManagerEslzzyl/Pixiv-SwiftUI | 111 | — | ~482 | Automated safety check: Pass | AGPL-3.0 | |
| Swiftui Animation MatchRayFernando1337/rayfernando-skills | 130 | — | ~1.3k | Automated safety check: Pass | Apache-2.0 | |
| Developing iOS Appsdaymade/claude-code-skills | 1.4k | — | ~3.2k | Automated safety check: Pass | MIT |
SwiftedMind/Tessera
FlowDeck is REQUIRED for all Apple platform build/run/test/launch/debug/simulator/device/log/automation tasks.
RayFernando1337/rayfernando-skills
Bootstrap agents for iOS, iPadOS, macOS, Swift, SwiftUI, SwiftData/Core Data, Swift Testing, Xcode build/test/debug, Simulator, App Intents, or XcodeBuildMCP work.
Eslzzyl/Pixiv-SwiftUI
Manage Xcode String Catalog (.xcstrings) localization files through a command-line interface.
RayFernando1337/rayfernando-skills
Match UI/UX interaction needs to proven SwiftUI animation patterns from curated open-source catalogs.
daymade/claude-code-skills
Builds and ships iOS/macOS apps with XcodeGen, SwiftUI and SPM: Xcode build fixes, device deployment, Apple Developer signing/notarization, CI/CD pipelines.
glebis/claude-skills
Scaffold a standalone SwiftUI app via XcodeGen — pick macOS, iOS, or iOS+watchOS; ships house conventions, a Swift Testing target, swiftformat/swiftlint, optional CloudKit/CI/Release/Push modules…
Categories
Guides the agent to design distinctive SwiftUI interfaces for iOS and macOS, with six anti-generic rules, a design direction workflow and a five-dimension review. This skill steers the agent toward SwiftUI screens that look deliberately designed instead of generic AI output. It rests on six principles, among them starting from context rather than a blank page (an existing design system, codebase or brand guidelines, or a brand-spec file when none exists), showing early hypotheses with placeholders, offering two or three distinct design directions rather than one final answer, and using a clean labeled placeholder in place of AI-generated SVG clipart.
SwiftUI Design Skill fits situations like: designing new SwiftUI views or screens from scratch; reviewing a SwiftUI interface that looks generic; creating an iOS prototype or mockup; choosing a visual style or design direction.
Run `npx skills add Wholiver/swiftui-design-skill --skill swiftui-design-skill -a claude-code`. Or copy the skill folder (the Wholiver/swiftui-design-skill repository) into .claude/skills/swiftui-design-skill in your project. Claude Code loads it when a task matches its description.
Run `npx skills add Wholiver/swiftui-design-skill --skill swiftui-design-skill -a codex`. Or copy the skill folder (the Wholiver/swiftui-design-skill repository) into .agents/skills/swiftui-design-skill in your project. Codex loads it when a task matches its description.
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add Wholiver/swiftui-design-skill --skill swiftui-design-skill -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/swiftui-design-skill, .gemini/skills/swiftui-design-skill, .github/skills/swiftui-design-skill and .opencode/skills/swiftui-design-skill in your project.
SKILL.md names no scripts, command-line tools or credentials: SwiftUI Design Skill is instructions for the agent only. Our summary lists: Xcode 16 or newer with the iOS 18 and macOS 15 SDKs; SwiftUI, not UIKit unless requested.
SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.
SwiftUI Design Skill is published under the MIT licence (declared in SKILL.md). It allows redistribution, so the full SKILL.md is shown on this page.
About 2.8k tokens (SKILL.md is roughly 11k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 9.3k tokens, read only when the agent opens those files.
Skills that share tags, products or a category with SwiftUI Design Skill: Flowdeck (SwiftedMind/Tessera, 116 stars), Bootstrap iOS (RayFernando1337/rayfernando-skills, 130 stars), Xcstrings Manager (Eslzzyl/Pixiv-SwiftUI, 111 stars) and Swiftui Animation Match (RayFernando1337/rayfernando-skills, 130 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Wholiver (a GitHub user) maintains it in Wholiver/swiftui-design-skill, which has 204 GitHub stars. The repository was last updated on May 1, 2026.
Source: Wholiver/swiftui-design-skill on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.