solo-swiftui-design-system

Solid

Build and hold a SwiftUI design system — a 12-column grid, spacing/type/radius/motion scales, surface levels, a component gallery, and the guards that stop it drifting back. Use when the user says "сделай по сетке", "дизайн-система", "разъезжается вёрстка", "магические числа в padding", "design tokens", "grid 12", "нужен storybook/каталог компонентов", or when a screen's spacing and fonts were each chosen once and never against each other. Do NOT use for SwiftUI correctness, state flow or Instruments profiling (that is the swiftui-expert skill), or for shipping to TestFlight (solo-ios-release).

Web & Frontend 18 stars 2 forks Updated today MIT

Install

View on GitHub

Quality Score: 84/100

Stars 20%
43
Recency 20%
100
Frontmatter 20%
70
Documentation 15%
100
Issue Health 10%
80
License 10%
100
Description 5%
100

Skill Content

# swiftui-design-system — one scale, and the guards that keep it A design system is not a colour file. It is **four scales, one grid, one catalogue and one tripwire** — and the tripwire is what makes it survive the next feature. Everything here is native SwiftUI: no design-system framework is worth taking on, because the platform is already built for this (Environment + style protocols + `containerRelativeFrame`). **Apple ships its own SwiftUI skills inside Xcode 27** — invalidation, `ForEach` identity, `@Observable`, Liquid Glass — as plain markdown any agent can read with no Xcode running. On anything about correctness or update cost they outrank this file, and they say so in their own header. Where they are, what they cover, and the rules that most often hit real code: **`references/apple-xcode-skills.md`**. Reach for this when the symptom is *"the screens look related and never line up"*. Measure before you believe it — see step 1. ## Workflow ### 1. Count what is actually there Never start from taste. Start from the inventory, because the number is the argument: ```bash V=path/to/Views grep -rhoE '\.padding\((\.[a-z]+, )?[0-9]+(\.[0-9])?\)' $V | grep -oE '[0-9.]+' | sort -n | uniq -c | sort -rn grep -rhoE 'spacing: [0-9]+(\.[0-9])?' $V | sort | uniq -c | sort -rn grep -rhoE 'cornerRadius: [0-9]+(\.[0-9])?' $V | sort | uniq -c | sort -rn grep -rhoE '\.font\(\.[a-zA-Z0-9]+\)|\.font\(\.system\([^)]*\)\)' $V | sort | uniq -c | sort -rn grep -rhoE '\.spring\(response: ...

Details

Author
fortunto2
Repository
fortunto2/solo-factory
Created
7 months ago
Last Updated
today
Language
Shell
License
MIT

Bundled in these plugins

Similar Skills

Semantically similar based on skill content — not just same category

Web & Frontend Solid

design-system

Build and maintain cohesive design systems and component libraries with tokens, theming, and documented variants. Use when the user says "design system", "component library", "design tokens", "theming", "consistent styling", "reusable components", or "variant props". Produces token files, component specs, and usage guidelines. Pairs with design-frontend, audit-uiux-design-system. Do NOT use for one-off component styling.

9 Updated yesterday
kensaurus
Web & Frontend Listed

designing-consistently

Keeps UI work consistent with the design system an app actually has — discovering what already governs when no DESIGN.md exists, reading a bounded slice of the decision log however large the app is, and repairing that record as the work proves it. Use when building or modifying UI in any repo, whether its system lives in a DESIGN.md or only in tokens, context-file gotchas and prose docs, when new screens must match existing ones, when an app has too many surfaces to read its whole decision log in one session, when buttons or patterns come out different every session, or when design decisions get lost between sessions.

0 Updated 3 weeks ago
bygama
Web & Frontend Listed

ui-designer

Expert visual design craft, UI systems, and pixel-perfect implementation. Activates when building, styling, reviewing, or polishing any interface -- websites, apps, dashboards, component libraries, design systems, landing pages, or any screen needing visual polish. Triggers on: CSS styling, component design, layout, spacing, typography, color, dark mode, responsive design, design tokens, Figma, UI audits, visual hierarchy, icons, shadows, border-radius, animations. Also activates on: 'make it look good', 'improve the design', 'it looks off', 'spacing', 'colors', 'typography', 'design system', 'component library', 'pixel perfect', 'modern design', 'layout', 'responsive', 'dark mode', 'style this'. Applies whenever a visual interface is created or refined, even without saying 'UI'. Hands off to ux-designer for flow strategy and to ux-copywriter for interface text. Do NOT activate for user research methodology, psychology theory, backend logic, database schemas, API design without UI, or DevOps.

0 Updated 1 months ago
sonkd