[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6FEC6M340909BCENY4XHTPW":3,"skill-same:01M6FEC6M340909BCENY4XHTPW":58},{"skillNo":4,"name":5,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":15,"categories":16,"keywords":27,"publishedAt":31,"linkOnly":32,"markdownContent":33,"markdownBody":33,"frontMatter":34,"refName":35,"commitSha":36,"skillDirectory":37,"forksCount":38,"repositoryHtmlUrl":39,"repositoryHomepageUrl":40,"ownerHtmlUrl":41,"ownerBlogUrl":6,"ownerDescription":42,"updatedAt":43,"install":44,"resources":57},"01M6FEC6M340909BCENY4XHTPW","ios-design",null,"ComeOnOliver\u002Fskillshub","ComeOnOliver","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F43215937?v=4","01M6E5JNFECJAAVFE0W7SMWWD2","Haoran Shu","01M6E5JNNDQS7AJZDYFQ8TPZCK",67,"MIT","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fpproenca\u002Fdot-skills\u002Fios-design\u002FSKILL.md",[17,22],{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000015","视觉设计","SCENARIO","使用场景",{"categoryNo":23,"categoryName":24,"taxonomyType":25,"taxonomyTypeDesc":26},"01JBSEEDCAT000000000000032","设计师","PROFESSION","适用职业",[28,29,30],"design","ios","ios design","2026-11-10 10:12:30",false,"# Apple SwiftUI iOS Design Best Practices\n\nA builder's guide for implementing Apple-quality iOS interfaces in SwiftUI, grounded in two foundational design texts:\n\n- **Ken Kocienda** — *Creative Selection* (empathy for the user, craft in coding, taste in choosing the best solution, demo culture of iterative refinement)\n- **John Edson** — *Design Like Apple* (systems thinking, the product is the marketing, design out loud, design with conviction)\n\nContains 62 rules across 8 principle-based categories. Each rule identifies a specific anti-pattern, grounds the fix in a named principle, and provides the correct iOS 26 \u002F Swift 6.2 SwiftUI implementation.\n\n## Scope & Relationship to Sibling Skills\n\nThis skill is the **building and implementation guide** — it teaches how to construct new SwiftUI interfaces from scratch using Apple-quality patterns. When loaded alongside `ios-ui-refactor` (reviewing\u002Frefactoring existing UI), this skill covers the greenfield implementation that `ios-ui-refactor` later audits. Use this skill for building new screens; use the sibling for evaluating and improving existing ones.\n\n\n## Clinic Architecture Contract (iOS 26 \u002F Swift 6.2)\n\nAll guidance in this skill assumes the clinic modular MVVM-C architecture:\n\n- Feature modules import `Domain` + `DesignSystem` only (never `Data`, never sibling features)\n- App target is the convergence point and owns `DependencyContainer`, concrete coordinators, and Route Shell wiring\n- `Domain` stays pure Swift and defines models plus repository, `*Coordinating`, `ErrorRouting`, and `AppError` contracts\n- `Data` owns SwiftData\u002Fnetwork\u002Fsync\u002Fretry\u002Fbackground I\u002FO and implements Domain protocols\n- Read\u002Fwrite flow defaults to stale-while-revalidate reads and optimistic queued writes\n- ViewModels call repository protocols directly (no default use-case\u002Finteractor layer)\n\n## When to Apply\n\nReference these guidelines when:\n- Building new SwiftUI views and screens from scratch\n- Choosing between semantic colors, system typography, and spacing grids (Edson's Systems Thinking)\n- Managing state with @State, @Binding, @Observable, @Environment (Kocienda's Craft)\n- Selecting the right component: List vs LazyVStack, Sheet vs FullScreenCover (Kocienda's Taste)\n- Composing views with @ViewBuilder, custom modifiers, and value types (Kocienda's Creative Selection)\n- Implementing navigation with NavigationStack, TabView, sheets (Edson's Conversation)\n- Laying out content with stacks, grids, frames, and adaptive layouts (Edson's Design Out Loud)\n- Ensuring VoiceOver, touch targets, Dark Mode, and reduce motion support (Kocienda's Empathy)\n- Adding transitions, loading states, and animation polish (Edson's Product Is the Marketing)\n\n## Rule Categories by Priority\n\n| Priority | Category | Principle | Impact | Prefix | Rules |\n|----------|----------|-----------|--------|--------|-------|\n| 1 | Empathy in Every Pixel | Kocienda \"Empathy\" · Edson \"Design Is About People\" | CRITICAL | `empathy-` | 8 |\n| 2 | The Visual System | Edson \"Systems Thinking\" · Kocienda \"Convergence\" | CRITICAL | `system-` | 8 |\n| 3 | Craft: State as Foundation | Kocienda \"Craft\" | CRITICAL | `craft-` | 7 |\n| 4 | Creative Composition | Kocienda \"Creative Selection\" | HIGH | `compose-` | 6 |\n| 5 | Taste: The Right Choice | Kocienda \"Taste\" · Edson \"Design with Conviction\" | HIGH | `taste-` | 8 |\n| 6 | Navigation as Conversation | Edson \"Design Is a Conversation\" · Kocienda \"The Demo\" | HIGH | `converse-` | 9 |\n| 7 | Design Out Loud: Layout | Edson \"Design Out Loud\" · Kocienda \"Intersection\" | HIGH | `layout-` | 8 |\n| 8 | The Product Speaks | Edson \"Product Is the Marketing\" · Kocienda \"Demo Culture\" | MEDIUM | `product-` | 8 |\n\n## Quick Reference\n\n### 1. Empathy in Every Pixel (CRITICAL)\n\nKocienda: \"Empathy — trying to see the world from other people's perspectives.\" Edson: design begins with the person holding the device.\n\n- [`empathy-semantic-colors`](references\u002Fempathy-semantic-colors.md) - Use semantic colors, never hard-coded values\n- [`empathy-dark-mode`](references\u002Fempathy-dark-mode.md) - Support Dark Mode from day one\n- [`empathy-foreground-style`](references\u002Fempathy-foreground-style.md) - Use foregroundStyle over foregroundColor\n- [`empathy-safe-areas`](references\u002Fempathy-safe-areas.md) - Always respect safe areas for content\n- [`empathy-voiceover-labels`](references\u002Fempathy-voiceover-labels.md) - Add VoiceOver labels to every interactive element\n- [`empathy-touch-targets`](references\u002Fempathy-touch-targets.md) - Ensure 44x44 point minimum touch targets\n- [`empathy-reduce-motion`](references\u002Fempathy-reduce-motion.md) - Always provide reduce motion fallback\n- [`empathy-readable-width`](references\u002Fempathy-readable-width.md) - Constrain text to readable width on iPad\n\n### 2. The Visual System (CRITICAL)\n\nEdson: \"Zoom out to see relationships between objects.\" Kocienda: convergence — many decisions narrowing toward one coherent whole.\n\n- [`system-typography`](references\u002Fsystem-typography.md) - Use system typography styles, never fixed sizes\n- [`system-visual-hierarchy`](references\u002Fsystem-visual-hierarchy.md) - Establish clear visual hierarchy through size, weight, and color\n- [`system-spacing-grid`](references\u002Fsystem-spacing-grid.md) - Use a 4pt base unit for all spacing\n- [`system-material-backgrounds`](references\u002Fsystem-material-backgrounds.md) - Use material backgrounds for depth and layering\n- [`system-sf-symbols`](references\u002Fsystem-sf-symbols.md) - Use SF Symbols for consistent iconography\n- [`system-gradients`](references\u002Fsystem-gradients.md) - Apply gradients for visual depth, not decoration\n- [`system-standard-margins`](references\u002Fsystem-standard-margins.md) - Use system standard margins consistently\n- [`system-stack-config`](references\u002Fsystem-stack-config.md) - Configure stack alignment and spacing explicitly\n\n### 3. Craft: State as Foundation (CRITICAL)\n\nKocienda: \"Craft — applying skill to achieve a high-quality result.\"\n\n- [`craft-state-local`](references\u002Fcraft-state-local.md) - Use @State for view-local value types\n- [`craft-state-binding`](references\u002Fcraft-state-binding.md) - Use @Binding for child view mutations\n- [`craft-state-environment`](references\u002Fcraft-state-environment.md) - Use @Environment for shared app-wide data\n- [`craft-state-observable`](references\u002Fcraft-state-observable.md) - Use @Observable for model classes\n- [`craft-avoid-body-state`](references\u002Fcraft-avoid-body-state.md) - Never create state inside the view body\n- [`craft-minimize-scope`](references\u002Fcraft-minimize-scope.md) - Minimize state scope to reduce re-renders\n- [`craft-state-bindable`](references\u002Fcraft-state-bindable.md) - Use @Bindable for @Observable bindings\n\n### 4. Creative Composition (HIGH)\n\nKocienda: \"Creative selection — great software is built through composition and recombination.\"\n\n- [`compose-body-some-view`](references\u002Fcompose-body-some-view.md) - Return some View from body, never concrete types\n- [`compose-custom-properties`](references\u002Fcompose-custom-properties.md) - Use properties to make views configurable\n- [`compose-modifier-order`](references\u002Fcompose-modifier-order.md) - Apply view modifiers in the correct order\n- [`compose-viewbuilder`](references\u002Fcompose-viewbuilder.md) - Use @ViewBuilder for flexible slot-based composition\n- [`compose-prefer-value-types`](references\u002Fcompose-prefer-value-types.md) - Prefer value types for view data\n- [`compose-prefer-composition`](references\u002Fcompose-prefer-composition.md) - Prefer composition over inheritance for view reuse\n\n### 5. Taste: The Right Choice (HIGH)\n\nKocienda: \"Taste — refined judgment, the ability to choose the one right solution.\" Edson: commit to one approach and perfect it.\n\n- [`taste-list-vs-lazyvstack`](references\u002Ftaste-list-vs-lazyvstack.md) - Choose List for system features, LazyVStack for custom layouts\n- [`taste-sheet-vs-fullscreen`](references\u002Ftaste-sheet-vs-fullscreen.md) - Choose sheet for tasks, fullScreenCover for immersion\n- [`taste-picker`](references\u002Ftaste-picker.md) - Choose the right picker style for the data type\n- [`taste-grid-vs-lazygrid`](references\u002Ftaste-grid-vs-lazygrid.md) - Choose Grid for aligned data, LazyVGrid for scrollable collections\n- [`taste-button`](references\u002Ftaste-button.md) - Use button styles that match the action's importance\n- [`taste-textfield`](references\u002Ftaste-textfield.md) - Configure text input with the right keyboard and content type\n- [`taste-alerts`](references\u002Ftaste-alerts.md) - Use alerts only for critical, blocking information\n- [`taste-action-sheets`](references\u002Ftaste-action-sheets.md) - Use confirmation dialogs for contextual multi-choice actions\n\n### 6. Navigation as Conversation (HIGH)\n\nEdson: \"Design is a conversation between the product and the person.\" Kocienda: demos as conversations about whether the interface speaks clearly.\n\n- [`converse-navigationstack`](references\u002Fconverse-navigationstack.md) - Use NavigationStack for programmatic, type-safe navigation\n- [`converse-tabview`](references\u002Fconverse-tabview.md) - Organize app sections with TabView for parallel navigation\n- [`converse-sheet-item`](references\u002Fconverse-sheet-item.md) - Use item binding for data-driven sheet presentation\n- [`converse-dismiss`](references\u002Fconverse-dismiss.md) - Use environment dismiss for modal closure\n- [`converse-toolbar`](references\u002Fconverse-toolbar.md) - Place toolbar items in the correct semantic positions\n- [`converse-tab-bar`](references\u002Fconverse-tab-bar.md) - Use tab bar for top-level section navigation\n- [`converse-nav-bar`](references\u002Fconverse-nav-bar.md) - Configure navigation bar to communicate context\n- [`converse-hierarchy`](references\u002Fconverse-hierarchy.md) - Design clear navigation hierarchy before writing code\n- [`converse-search`](references\u002Fconverse-search.md) - Integrate search with the searchable modifier\n\n### 7. Design Out Loud: Layout (HIGH)\n\nEdson: \"Design Out Loud — prototype relentlessly until layout feels inevitable.\" Kocienda: the intersection of technology and liberal arts.\n\n- [`layout-stacks`](references\u002Flayout-stacks.md) - Use stacks instead of manual positioning\n- [`layout-spacer`](references\u002Flayout-spacer.md) - Use Spacer for flexible space distribution\n- [`layout-frame-sizing`](references\u002Flayout-frame-sizing.md) - Use frame() for explicit size constraints\n- [`layout-zstack`](references\u002Flayout-zstack.md) - Use ZStack for purposeful layered composition\n- [`layout-grid`](references\u002Flayout-grid.md) - Use Grid for aligned non-scrolling tabular content\n- [`layout-lazy-grids`](references\u002Flayout-lazy-grids.md) - Use LazyVGrid for scrollable multi-column layouts\n- [`layout-adaptive`](references\u002Flayout-adaptive.md) - Use adaptive layouts for different size classes\n- [`layout-scroll-indicators`](references\u002Flayout-scroll-indicators.md) - Show scroll indicators for long scrollable content\n\n### 8. The Product Speaks (MEDIUM)\n\nEdson: \"The product itself is the marketing.\" Kocienda: every animation and loading state built to survive Steve Jobs' scrutiny.\n\n- [`product-transitions`](references\u002Fproduct-transitions.md) - Use semantic transitions for appearing views\n- [`product-loading-states`](references\u002Fproduct-loading-states.md) - Show honest loading states, not indefinite spinners\n- [`product-with-animation`](references\u002Fproduct-with-animation.md) - Use withAnimation for explicit state-driven animation\n- [`product-matched-geometry`](references\u002Fproduct-matched-geometry.md) - Use matchedGeometryEffect for contextual origin transitions\n- [`product-list-cells`](references\u002Fproduct-list-cells.md) - Design list cells with standard layouts\n- [`product-content-unavailable`](references\u002Fproduct-content-unavailable.md) - Use ContentUnavailableView for empty and error states\n- [`product-segmented`](references\u002Fproduct-segmented.md) - Use segmented controls for visible, mutually exclusive options\n- [`product-menus`](references\u002Fproduct-menus.md) - Use menus for secondary actions without cluttering the interface\n\n## How to Use\n\nRead individual reference files for detailed explanations and code examples:\n\n- [Section definitions](references\u002F_sections.md) - Category structure, principle sources, and impact levels\n- [Rule template](assets\u002Ftemplates\u002F_template.md) - Template for adding new rules\n\n## Reference Files\n\n| File | Description |\n|------|-------------|\n| [references\u002F_sections.md](references\u002F_sections.md) | Category definitions and principle grounding |\n| [assets\u002Ftemplates\u002F_template.md](assets\u002Ftemplates\u002F_template.md) | Template for new rules |\n| [metadata.json](metadata.json) | Version and reference information |\n",{},"main","def8531e65114c0fca8fb8551c1871ee0eed705c","skills\u002Fpproenca\u002Fdot-skills\u002Fios-design",24,"https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub","https:\u002F\u002Fskillshub.wtf","https:\u002F\u002Fgithub.com\u002FComeOnOliver","AI & Blockchain Engineer\r\n","2026-06-24 22:07:19",{"source":7,"skillName":5,"commands":45,"prompt":55,"zipAvailable":56},[46,49,52],{"tool":47,"command":48},"npx","npx skills add ComeOnOliver\u002Fskillshub --skill ios-design",{"tool":50,"command":51},"bunx","bunx skills add ComeOnOliver\u002Fskillshub --skill ios-design",{"tool":53,"command":54},"pnpm","pnpm dlx skills add ComeOnOliver\u002Fskillshub --skill ios-design","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fpproenca\u002Fdot-skills\u002Fios-design\u002FSKILL.md",true,[],[59,71,81,90,96,103],{"skillNo":60,"name":61,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":62,"categories":63,"keywords":67,"publishedAt":31},"01M6FKJN13GMG4KY57J3QD8GY5","model-hierarchy-skill","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzscole\u002Fmodel-hierarchy-skill\u002Fmodel-hierarchy-skill\u002FSKILL.md",[64],{"categoryNo":65,"categoryName":66,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000023","Skill与智能体开发",[68,69,70],"model","model hierarchy","model hierarchy skill",{"skillNo":72,"name":73,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":74,"categories":75,"keywords":77,"publishedAt":31},"01M6FKJJJ6GCAMR4PPPRD12M5X","zoom-mcp","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fzoom-mcp\u002FSKILL.md",[76],{"categoryNo":65,"categoryName":66,"taxonomyType":20,"taxonomyTypeDesc":21},[78,79,80],"MCP","zoom","zoom mcp",{"skillNo":82,"name":83,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":84,"categories":85,"keywords":86,"publishedAt":31},"01M6FKJE3KYT3KPEZMEEHYKA6K","zoom-apps-sdk","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fzoom-apps-sdk\u002FSKILL.md",[],[87,88,89,79],"sdk","zoom apps sdk","apps",{"skillNo":91,"name":92,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":93,"categories":94,"keywords":95,"publishedAt":31},"01M6FKJ9EDH9Q5VWDF8HAJRSP0","windows","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwindows\u002FSKILL.md",[],[92],{"skillNo":97,"name":98,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":99,"categories":100,"keywords":102,"publishedAt":31},"01M6FKJ666BEEFC3AE9GJ72Q93","whiteboard","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwhiteboard\u002FSKILL.md",[101],{"categoryNo":65,"categoryName":66,"taxonomyType":20,"taxonomyTypeDesc":21},[98],{"skillNo":104,"name":105,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":106,"categories":107,"keywords":108,"publishedAt":31},"01M6FKJ21WFCDGTJQ2Q91T9DVW","websockets","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwebsockets\u002FSKILL.md",[],[105]]