Design System
WrongStack/WrongStack
Use this skill BEFORE writing or restyling ANY user-facing interface.
Clinic-architecture-aligned iOS design system engineering for SwiftUI (iOS 26 / Swift 6.2) covering token architecture, color/typography/spacing systems, component style libraries, asset governance…
$ npx skills add pproenca/dot-skills --skill ios-design-system -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install pproenca/dot-skills ios-design-system --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/pproenca/dot-skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/.experimental/ios-design-system .claude/skills/ios-design-system && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "ios-design-system" agent skill from https://github.com/pproenca/dot-skills/tree/master/skills/.experimental/ios-design-system into .claude/skills/ios-design-system/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ios-design-system", 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.
$skill-installer install https://github.com/pproenca/dot-skills/tree/master/skills/.experimental/ios-design-systemType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add pproenca/dot-skills --skill ios-design-system -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install pproenca/dot-skills ios-design-system --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/pproenca/dot-skills.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/.experimental/ios-design-system .agents/skills/ios-design-system && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "ios-design-system" agent skill from https://github.com/pproenca/dot-skills/tree/master/skills/.experimental/ios-design-system into .agents/skills/ios-design-system/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ios-design-system", 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 pproenca/dot-skills --skill ios-design-system -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install pproenca/dot-skills ios-design-system --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/pproenca/dot-skills.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/.experimental/ios-design-system .cursor/skills/ios-design-system && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "ios-design-system" agent skill from https://github.com/pproenca/dot-skills/tree/master/skills/.experimental/ios-design-system into .cursor/skills/ios-design-system/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ios-design-system", 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.
$ gemini skills install https://github.com/pproenca/dot-skills.git --path skills/.experimental/ios-design-system--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add pproenca/dot-skills --skill ios-design-system -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install pproenca/dot-skills ios-design-system --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/pproenca/dot-skills.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/.experimental/ios-design-system .gemini/skills/ios-design-system && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "ios-design-system" agent skill from https://github.com/pproenca/dot-skills/tree/master/skills/.experimental/ios-design-system into .gemini/skills/ios-design-system/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ios-design-system", 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 pproenca/dot-skills ios-design-systemInstalls 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 pproenca/dot-skills --skill ios-design-system -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/pproenca/dot-skills.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/.experimental/ios-design-system .github/skills/ios-design-system && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "ios-design-system" agent skill from https://github.com/pproenca/dot-skills/tree/master/skills/.experimental/ios-design-system into .github/skills/ios-design-system/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ios-design-system", 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 pproenca/dot-skills --skill ios-design-system -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install pproenca/dot-skills ios-design-system --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/pproenca/dot-skills.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/.experimental/ios-design-system .opencode/skills/ios-design-system && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "ios-design-system" agent skill from https://github.com/pproenca/dot-skills/tree/master/skills/.experimental/ios-design-system into .opencode/skills/ios-design-system/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ios-design-system", 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.
ios-design-systemClinic-architecture-aligned iOS design system engineering for SwiftUI (iOS 26 / Swift 6.2) covering token architecture, color/typography/spacing systems, component style libraries, asset governance…
iOS Design System is an agent skill from pproenca/dot-skills. Clinic-architecture-aligned iOS design system engineering for SwiftUI (iOS 26 / Swift 6.2) covering token architecture, color/typography/spacing systems, component style libraries, asset governance, and theming. Enforces @Equatable on views and keeps design-system usage compatible with Feature-to-Domain+DesignSystem boundaries. Use when building or refactoring DesignSystem infrastructure for the clinic modular MVVM-C stack.
Its SKILL.md is about 2.7k tokens, which your agent loads only when the skill is triggered. The skill folder holds 56 other files, including reference files and assets (for example `assets/templates/_template.md`, `metadata.json` and `references/_sections.md`).
It sits in Frontend & Design, covering Design systems, iOS development and Typography. It works with iOS, Swift and SwiftUI. The repository describes itself as: A collection of AI agent skills following the Agent Skills open format. The licence is MIT.
8 steps, taken from the step headings in SKILL.md.
Read from SKILL.md and the folder at commit cf93c57. 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.
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.
iOS Design System loads about 2.7k tokens when it runs, and up to ~58k if it reads all its reference files. Until then it costs about 111 tokens; SKILL.md has 905 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 pproenca/dot-skills at commit cf93c57, republished under its MIT licence (© pproenca). 905 words, ~2,744 tokens.
.claude/skills/ios-design-system/SKILL.md (or your agent's skills folder). This skill also uses 53 other files; get the full folder from GitHub.Opinionated, strict design system engineering for SwiftUI iOS 26 / Swift 6.2 apps. Contains 50 rules across 8 categories, prioritized by impact. Derived from Airbnb's Design Language System (DLS), Airbnb Swift Style Guide, Apple Human Interface Guidelines, and WWDC sessions. Mandates @Equatable on every view, @Observable for state, and style protocols as the primary component API.
This skill is designed to work alongside swift-ui-architect. All code examples follow the same non-negotiable constraints:
Domain + DesignSystem; no direct Data dependency@Observable for mutable UI state, ObservableObject / @Published never@Equatable macro on every viewThis skill is the infrastructure layer — it teaches how to BUILD the design system itself. When loaded alongside sibling skills:
| Sibling Skill | Its Focus | This Skill's Focus |
|---|---|---|
swift-ui-architect | Architecture (modular MVVM-C, route shells, protocol boundaries) | Design system infrastructure (tokens, styles, governance) |
ios-design | Using design primitives (semantic colors, typography) | Engineering the token system that provides those primitives |
ios-ui-refactor | Auditing/fixing visual quality issues | Preventing those issues via governance and automation |
ios-hig | HIG compliance patterns | Asset and component infrastructure that makes compliance easy |
All guidance in this skill assumes the clinic modular MVVM-C architecture:
Domain + DesignSystem only (never Data, never sibling features)DependencyContainer, concrete coordinators, and Route Shell wiringDomain stays pure Swift and defines models plus repository, *Coordinating, ErrorRouting, and AppError contractsData owns SwiftData/network/sync/retry/background I/O and implements Domain protocolsReference these guidelines when:
| Priority | Category | Impact | Prefix | Rules |
|---|---|---|---|---|
| 1 | Token Architecture | CRITICAL | token- | 6 |
| 2 | Color System Engineering | CRITICAL | color- | 7 |
| 3 | Component Style Library | CRITICAL | style- | 10 |
| 4 | Typography Scale | HIGH | type- | 5 |
| 5 | Spacing & Sizing System | HIGH | space- | 5 |
| 6 | Consistency & Governance | HIGH | govern- | 7 |
| 7 | Asset Management | MEDIUM-HIGH | asset- | 5 |
| 8 | Theme & Brand Infrastructure | MEDIUM | theme- | 5 |
token-three-layer-hierarchy - Use Raw → Semantic → Component token layerstoken-enum-over-struct - Use caseless enums for token namespacestoken-single-file-per-domain - One token file per design domaintoken-shapestyle-extensions - Extend ShapeStyle for dot-syntax colorstoken-asset-catalog-source - Source color tokens from asset catalogtoken-avoid-over-abstraction - Avoid over-abstracting beyond three layerscolor-organized-xcassets - Organize color assets with folder groups by rolecolor-complete-pairs - Define both appearances for every custom colorcolor-limit-palette - Limit custom colors to under 20 semantic tokenscolor-no-hex-in-views - Never use Color literals or hex in view codecolor-system-first - Prefer system colors before custom tokenscolor-tint-not-brand-everywhere - Set brand color as app tint, don't scatter itcolor-audit-script - Audit for ungoverned colors with a build scriptstyle-dls-protocol-pattern - Define custom style protocols for complex DLS componentsstyle-equatable-views - Apply @Equatable to every design system viewstyle-accessibility-first - Build accessibility into style protocols, not individual viewsstyle-protocol-over-wrapper - Use Style protocols instead of wrapper viewsstyle-static-member-syntax - Provide static member syntax for custom stylesstyle-environment-awareness - Make styles responsive to environment valuesstyle-view-for-containers-modifier-for-styling - Views for containers, modifiers for stylingstyle-catalog-file - One style catalog file per component typestyle-configuration-over-parameters - Prefer configuration structs over many parametersstyle-preview-catalog - Create a preview catalog for all stylestype-scale-enum - Define a type scale enum wrapping system stylestype-system-styles-first - Use system text styles before custom onestype-custom-font-registration - Register custom fonts with a centralized extensiontype-max-styles-per-screen - Limit typography variations to 3-4 per screentype-avoid-font-design-mixing - Use one font design per appspace-token-enum - Define spacing tokens as a caseless enumspace-radius-tokens - Define corner radius tokens by component typespace-no-magic-numbers - Zero hardcoded numbers in view layout codespace-insets-pattern - Use EdgeInsets constants for composite paddingspace-size-tokens - Define size tokens for common dimensionsgovern-naming-conventions - Enforce consistent naming conventions across all tokensgovern-spm-package-boundary - Isolate the design system as a local SPM packagegovern-single-source-of-truth - Every visual value has one definition pointgovern-lint-for-tokens - Use SwiftLint rules to enforce token usagegovern-design-system-directory - Isolate tokens in a dedicated directorygovern-migration-incremental - Migrate to tokens incrementallygovern-prevent-local-tokens - Prevent feature modules from defining local tokensasset-separate-catalogs - Separate asset catalogs for colors, images, iconsasset-sf-symbols-first - Use SF Symbols before custom iconsasset-icon-export-format - Use PDF/SVG vectors, never multiple PNGsasset-image-optimization - Use compression and on-demand resourcesasset-naming-convention - Consistent naming convention for all assetstheme-environment-key - Use EnvironmentKey for theme propagationtheme-dont-over-theme - Avoid building a theme system unless neededtheme-tint-for-brand - Use .tint() as primary brand expressiontheme-light-dark-only - Use ColorScheme for light/dark, not custom themingtheme-brand-layer-separation - Separate brand identity from system mechanicsRead individual reference files for detailed explanations and code examples:
| File | Description |
|---|---|
| references/_sections.md | Category definitions and ordering |
| assets/templates/_template.md | Template for new rules |
| metadata.json | Version and reference information |
© pproenca, 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 53 other files (references, assets) in skills/.experimental/ios-design-system of pproenca/dot-skills.
Open the folder on GitHubat commit cf93c57
iOS Design System 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 |
|---|---|---|---|---|---|---|
| iOS Design System this skillpproenca/dot-skills | 214 | — | ~2.7k | Automated safety check: Pass | MIT | |
| Design SystemWrongStack/WrongStack | 368 | — | ~3.9k | Automated safety check: Pass | MIT | |
| Cometchat iOS Customizationcometchat/cometchat-skills | 129 | — | ~1.1k | Automated safety check: Pass | MIT | |
| Frontend UI StandardsMaxHan7/frontend-ui-standards-skill | 106 | — | ~2.4k | Automated safety check: Pass | MIT | |
| Frontend Designavibebuilder/claude-prime | 120 | — | ~2.1k | Automated safety check: Pass | MIT | |
| Refactoring UIwondelai/skills | 2.4k | — | ~3.9k | Automated safety check: Pass | MIT |
WrongStack/WrongStack
Use this skill BEFORE writing or restyling ANY user-facing interface.
cometchat/cometchat-skills
Brand and restyle the CometChat iOS UI Kit — theme colours, typography, per-component styles, localisation and sounds.
MaxHan7/frontend-ui-standards-skill
A skill your agent uses when implementing, refactoring, or reviewing frontend UI across SwiftUI, React, React Native, Flutter, web, or mobile apps.
avibebuilder/claude-prime
Builds distinctive, production-grade UIs that avoid generic AI aesthetics.
wondelai/skills
Audit and fix visual hierarchy, spacing, color, and depth in web UIs.
axiaoge2/Apple-Hig-Designer
Design Apple-style iOS/macOS interfaces following Human Interface Guidelines.
pproenca/dot-skills
Audio forensics and voice recovery guidelines for CSI-level audio analysis.
pproenca/dot-skills
Guided, scripted pipeline for running JSX/TSX/React codemods safely across large legacy codebases.
pproenca/dot-skills
Create well-structured RFCs and technical proposals for software projects.
pproenca/dot-skills
Developer-experience friction auditing and fixing — slow onboarding, repeated manual setup steps, missing bootstrap/reset/seed scripts, undiscoverable conventions.
pproenca/dot-skills
Turn a rough idea for a language into a complete, implementable specification — a DSL, query, config/data, template, or protocol language — by interviewing the author dimension by dimension until…
pproenca/dot-skills
Drafting Python Enhancement Proposals (PEPs) — proposing a Python language feature, a standard library change, an interoperability standard, or an informational/process document for the Python…
Categories
Clinic-architecture-aligned iOS design system engineering for SwiftUI (iOS 26 / Swift 6.2) covering token architecture, color/typography/spacing systems, component style libraries, asset governance…. iOS Design System is an agent skill from pproenca/dot-skills.2) covering token architecture, color/typography/spacing systems, component style libraries, asset governance, and theming.
iOS Design System fits situations like: refactoring DesignSystem infrastructure for the clinic modular MVVM-C stack; tasks that involve Design systems; tasks that involve iOS development.
Run `npx skills add pproenca/dot-skills --skill ios-design-system -a claude-code`. Or copy the skill folder (skills/.experimental/ios-design-system in pproenca/dot-skills) into .claude/skills/ios-design-system in your project. Claude Code loads it when a task matches its description.
Run `npx skills add pproenca/dot-skills --skill ios-design-system -a codex`. Or copy the skill folder (skills/.experimental/ios-design-system in pproenca/dot-skills) into .agents/skills/ios-design-system 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 pproenca/dot-skills --skill ios-design-system -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/ios-design-system, .gemini/skills/ios-design-system, .github/skills/ios-design-system and .opencode/skills/ios-design-system in your project.
SKILL.md names no scripts, command-line tools or credentials: iOS Design System is instructions for the agent only.
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.
iOS Design System is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
About 2.7k 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 55k tokens, read only when the agent opens those files.
Skills that share tags, products or a category with iOS Design System: Design System (WrongStack/WrongStack, 368 stars), Cometchat iOS Customization (cometchat/cometchat-skills, 129 stars), Frontend UI Standards (MaxHan7/frontend-ui-standards-skill, 106 stars) and Frontend Design (avibebuilder/claude-prime, 120 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
pproenca (a GitHub user) maintains it in pproenca/dot-skills, which has 214 GitHub stars. The repository holds 182 skills in this directory. The repository was last updated on August 15, 2026.
Source: pproenca/dot-skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.