[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6DEH69K009YZCEZM2ZXHNDF":3,"skill-same:01M6DEH69K009YZCEZM2ZXHNDF":84},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":9,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":15,"categories":16,"keywords":27,"publishedAt":40,"linkOnly":41,"markdownContent":42,"markdownBody":43,"frontMatter":44,"refName":48,"commitSha":49,"skillDirectory":50,"forksCount":13,"repositoryHtmlUrl":51,"repositoryHomepageUrl":6,"ownerHtmlUrl":52,"ownerBlogUrl":53,"ownerDescription":54,"updatedAt":55,"install":56,"resources":69},"01M6DEH69K009YZCEZM2ZXHNDF","watchos-design-guidelines",null,"Apple Human Interface Guidelines for Apple Watch. Use when building watchOS apps, complications, or workout features. Triggers on tasks involving Watch UI, Digital Crown, glanceable interfaces, or wrist-based interactions.","salexandr0s\u002Fai-config","salexandr0s","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F250535030?v=4","01M6DE8DS7P9KZ6AVRN7WXK5WK","01M6DE8DWSYWNVD11C554MAK2J",0,"MIT","https:\u002F\u002Fgithub.com\u002Fsalexandr0s\u002Fai-config\u002Fblob\u002Fmain\u002Fcodex\u002Fskills\u002Fhig-watchos\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,31,32,33,34,35,36,37,38,39],"design","guidelines","watchos design guidelines","tasks","ui","use","workout","human","apple","platform","watch","triggers","2026-11-10 10:12:30",false,"---\nname: watchos-design-guidelines\ndescription: Apple Human Interface Guidelines for Apple Watch. Use when building watchOS apps, complications, or workout features. Triggers on tasks involving Watch UI, Digital Crown, glanceable interfaces, or wrist-based interactions.\nlicense: MIT\nmetadata:\n  author: platform-design-skills\n  version: \"1.0.0\"\n---\n\n# watchOS Design Guidelines\n\nApple Watch is a personal, glanceable device worn on the wrist. Interactions are measured in seconds, not minutes. Every design decision must prioritize speed of comprehension and brevity of interaction.\n\n---\n\n## 1. Glanceable Design (CRITICAL)\n\nThe defining constraint of watchOS. If a user cannot extract the key information within 2 seconds of raising their wrist, the design has failed.\n\n### Rules\n\n- **W-GL-01**: Primary information must be visible without scrolling. The first screen is the only guaranteed screen.\n- **W-GL-02**: Target interaction sessions of 5 seconds or less. Design for raise-glance-lower.\n- **W-GL-03**: Use large, high-contrast text. Minimum effective body text is 16pt (system font). Titles should be 18pt or larger.\n- **W-GL-04**: Limit text to essential content. Truncate or abbreviate aggressively. Use SF Symbols instead of text labels where meaning is unambiguous.\n- **W-GL-05**: Respect wrist-down time. When the wrist lowers, the app enters an inactive state. Do not assume continuous user attention.\n- **W-GL-06**: Prioritize a single piece of information per screen. If showing multiple data points, establish clear visual hierarchy with size, weight, and color.\n\n### Screen Dimensions Reference\n\n| Device           | Screen Width | Screen Height | Corner Radius |\n| ---------------- | ------------ | ------------- | ------------- |\n| 41mm (Series 9)  | 176px        | 215px         | 36px          |\n| 45mm (Series 9)  | 198px        | 242px         | 39px          |\n| 42mm (Series 10) | 180px        | 220px         | 37px          |\n| 46mm (Series 10) | 205px        | 251px         | 40px          |\n| 49mm (Ultra 2)   | 205px        | 251px         | 40px          |\n\n### Anti-Patterns\n\n- Walls of text requiring scroll to understand context\n- Small, dense data tables\n- Requiring multiple taps before showing useful information\n- Replicating an iPhone screen layout on Watch\n\n---\n\n## 2. Digital Crown (HIGH)\n\nThe Digital Crown is the primary physical input for scrolling and precise value selection. It provides haptic feedback and should feel purposeful.\n\n### Rules\n\n- **W-DC-01**: Use the Digital Crown as the primary scroll mechanism for vertical content. Do not rely solely on swipe gestures for scrolling.\n- **W-DC-02**: For value pickers (time, quantity, sliders), bind the Crown to precise adjustments with haptic detents at each discrete value.\n- **W-DC-03**: Do not override or conflict with system Crown behaviors. The system uses the Crown for volume control during media playback, scrolling in system UI, and Time Travel in complications.\n- **W-DC-04**: Provide visual feedback synchronized with Crown rotation. The UI must respond frame-by-frame to Crown input with no perceptible lag.\n- **W-DC-05**: Update on each Crown increment. Values, selection, and highlight states should move with each detent. Do not debounce Crown input until the gesture ends.\n\n**Correct — Crown binding with haptic detents:**\n\n```swift\nstruct VolumePickerView: View {\n    @State private var volume: Double = 0.5\n\n    var body: some View {\n        VStack {\n            Text(\"\\(Int(volume * 100))%\")\n                .font(.title.bold())\n            Image(systemName: \"speaker.wave.3\")\n        }\n        .focusable()\n        .digitalCrownRotation(\n            $volume,\n            from: 0.0,\n            through: 1.0,\n            by: 0.05,\n            sensitivity: .medium,\n            isContinuous: false,\n            isHapticFeedbackEnabled: true\n        )\n    }\n}\n```\n\n**Incorrect — ignoring the Crown and forcing touch-only interaction:**\n\n```swift\nstruct VolumePickerView: View {\n    @State private var volume: Double = 0.5\n\n    var body: some View {\n        Slider(value: $volume)\n        \u002F\u002F No .digitalCrownRotation — Crown input is ignored\n        \u002F\u002F Users must use touch-only, which is imprecise and frustrating on Watch\n    }\n}\n```\n\n### Anti-Patterns\n\n- Ignoring the Crown and forcing all interaction through touch\n- Custom Crown behaviors that conflict with system expectations\n- Missing haptic feedback on discrete value changes\n- Laggy or batched responses to Crown rotation\n\n---\n\n## 3. Navigation (HIGH)\n\nWatch navigation must be shallow and predictable. Users should never feel lost or unable to return to a known state.\n\n### Rules\n\n- **W-NV-01**: Use vertical page scrolling as the default content navigation pattern. Pages scroll top-to-bottom with the Digital Crown.\n- **W-NV-02**: Use `TabView` for top-level sections (max 5 tabs). Swipe horizontally between tabs. Each tab is a distinct functional area.\n- **W-NV-03**: Use `NavigationStack` for hierarchical drill-down. Limit hierarchy to 2-3 levels maximum. Every pushed view must have a back button (provided automatically by the system).\n- **W-NV-04**: Avoid modal sheets for primary flows. Modals should be reserved for focused, single-purpose tasks (e.g., confirmation, quick input).\n- **W-NV-05**: The app's most important action should be reachable within 1 tap from launch. Do not bury primary functionality behind menus or navigation.\n\n### Navigation Pattern Reference\n\n| Pattern                    | Use Case                               | Gesture                                                      |\n| -------------------------- | -------------------------------------- | ------------------------------------------------------------ |\n| Vertical scroll            | Long-form content within a single view | Digital Crown \u002F swipe up-down                                |\n| TabView (horizontal pages) | Top-level app sections                 | Swipe left-right                                             |\n| NavigationStack (push\u002Fpop) | Hierarchical drill-down                | Tap to push, swipe right or back button to pop               |\n| Modal sheet                | Confirmation, focused input            | Presented programmatically, dismiss via button or swipe down |\n\n### Anti-Patterns\n\n- Deep navigation hierarchies (4+ levels)\n- Hamburger menus or hidden navigation drawers\n- Tab bars with more than 5 items\n- Forcing users to scroll through long lists to find key actions\n\n---\n\n## 4. Complications (HIGH)\n\nComplications are the most visible surface of a Watch app. They live on the watch face and provide at-a-glance data without launching the app.\n\n### Rules\n\n- **W-CP-01**: Support multiple complication families to maximize watch face compatibility. At minimum support `accessoryCircular`, `accessoryCorner`, and `accessoryRectangular` (WidgetKit, watchOS 9+).\n- **W-CP-02**: Provide both tinted (single-color) and full-color variants. Tinted complications must remain legible when the system applies a single tint color.\n- **W-CP-03**: Update complications via `TimelineProvider`. Provide future timeline entries when data is predictable (e.g., next calendar event, weather forecast). Keep data fresh -- stale complications erode trust.\n- **W-CP-04**: Complication content must be meaningful without context. A user glancing at their watch face should immediately understand the data (e.g., \"72F\" not \"72\").\n- **W-CP-05**: Tapping a complication must launch the app to a relevant context, not just the app's root view.\n\n**Correct — WidgetKit TimelineProvider for an accessoryCircular complication:**\n\n```swift\nstruct StepCountProvider: TimelineProvider {\n    func placeholder(in context: Context) -> StepEntry {\n        StepEntry(date: Date(), steps: 5000)\n    }\n\n    func getSnapshot(in context: Context, completion: @escaping (StepEntry) -> Void) {\n        completion(StepEntry(date: Date(), steps: HealthStore.shared.todaySteps))\n    }\n\n    func getTimeline(in context: Context, completion: @escaping (Timeline\u003CStepEntry>) -> Void) {\n        let entry = StepEntry(date: Date(), steps: HealthStore.shared.todaySteps)\n        \u002F\u002F Refresh in 15 minutes\n        let nextUpdate = Calendar.current.date(byAdding: .minute, value: 15, to: Date())!\n        completion(Timeline(entries: [entry], policy: .after(nextUpdate)))\n    }\n}\n\nstruct StepCountComplicationView: View {\n    let entry: StepEntry\n\n    var body: some View {\n        Gauge(value: Double(entry.steps), in: 0...10000) {\n            Image(systemName: \"figure.walk\")\n        } currentValueLabel: {\n            Text(\"\\(entry.steps \u002F 1000)k\")\n        }\n        .gaugeStyle(.accessoryCircular)\n    }\n}\n```\n\n### Complication Family Reference\n\nUse `WidgetFamily` values:\n\n| Family                 | Shape               | Typical Content                          |\n| ---------------------- | ------------------- | ---------------------------------------- |\n| `accessoryCircular`    | Small circle        | Single value, icon, or gauge             |\n| `accessoryCorner`      | Curved, top corners | Gauge with label, or text with icon      |\n| `accessoryRectangular` | Wide rectangle      | Multi-line text, chart, or detailed view |\n| `accessoryInline`      | Text row            | Short label or value                     |\n\n### Anti-Patterns\n\n- Supporting only one complication family\n- Stale data that does not update for hours\n- Complication tap landing on generic app home instead of relevant content\n- Illegible complications in tinted mode (insufficient contrast)\n\n---\n\n## 5. Always On Display (MEDIUM)\n\nWhen the user's wrist is down, watchOS enters an Always On state showing a dimmed version of the current app. This must be handled intentionally.\n\n### Rules\n\n- **W-AO-01**: Reduce visual complexity in the Always On state. Remove animations, secondary UI elements, and non-essential detail. Keep only the most critical information visible.\n- **W-AO-02**: Hide sensitive or private data (e.g., message content, health details, financial information) in the dimmed state. Use redacted or placeholder content.\n- **W-AO-03**: Reduce update frequency in Always On. Update the display no more than once per minute. Use `TimelineView` with a `.everyMinute` schedule for time-sensitive content.\n- **W-AO-04**: Use the system-provided dimming behaviors. Do not implement custom dimming. The system automatically reduces brightness and can apply a tint. Ensure your content remains legible at reduced brightness.\n- **W-AO-05**: Test both active and Always On states. The transition between states must feel seamless -- layout should not shift or jump when the wrist raises.\n\n### Anti-Patterns\n\n- Showing identical UI in active and Always On states (wastes battery, may expose private data)\n- Animations or frequent updates in Always On state\n- Layout shifts when transitioning between active and dimmed states\n- Forgetting to redact sensitive information\n\n---\n\n## 6. Workouts & Health (MEDIUM)\n\nWorkout and health apps have unique requirements: extended sessions, live metrics, and body-awareness features.\n\n### Rules\n\n- **W-WK-01**: Display live workout metrics in large, high-contrast text. Heart rate, duration, distance, and calories should be readable mid-exercise without stopping.\n- **W-WK-02**: Use haptic feedback for milestones (lap completed, goal reached, heart rate zone change). Haptics are essential because users may not be looking at the screen during exercise.\n- **W-WK-03**: Support auto-pause detection for relevant workout types (running, walking). Users expect the workout to pause when they stop moving and resume when they start again.\n- **W-WK-04**: Enable WaterLock during swimming workouts. This disables the touchscreen to prevent water interaction. The Digital Crown is used to eject water and unlock.\n- **W-WK-05**: Show a clear summary screen at workout completion with key metrics. Allow the user to save or discard the workout with a single action.\n\n### Anti-Patterns\n\n- Small metric text that requires squinting or stopping to read\n- Missing haptic feedback for important workout events\n- No auto-pause support for outdoor workouts\n- Requiring complex interaction to end or save a workout\n\n---\n\n## 7. Notifications (MEDIUM)\n\nWatch notifications must be brief and actionable. The user's wrist is raised for only a moment.\n\n### Rules\n\n- **W-NT-01**: Design Short Look notifications with only a title, app icon, and app name. This is what the user sees on initial wrist raise. It must communicate the notification's purpose instantly.\n- **W-NT-02**: Design Long Look notifications with full content and up to 4 action buttons. The user reaches Long Look by continuing to look at the notification. Include the most useful actions inline.\n- **W-NT-03**: Use appropriate haptic notification types. Match the urgency: `.notification` for standard alerts, `.directionUp` for positive events, `.directionDown` for negative events, `.success`\u002F`.failure`\u002F`.retry` for outcomes.\n- **W-NT-04**: Do not over-notify. Excessive notifications cause users to disable them entirely. Batch non-urgent updates. Reserve Watch notifications for time-sensitive or actionable information.\n\n### Haptic Type Reference\n\n| Haptic           | Use Case                                     |\n| ---------------- | -------------------------------------------- |\n| `.notification`  | General alerts                               |\n| `.directionUp`   | Positive event (goal reached, stock up)      |\n| `.directionDown` | Negative event (stock down, weather warning) |\n| `.success`       | Action completed successfully                |\n| `.failure`       | Action failed                                |\n| `.retry`         | Try again prompt                             |\n| `.start`         | Activity beginning                           |\n| `.stop`          | Activity ending                              |\n| `.click`         | Discrete selection (Crown detent, picker)    |\n\n### Anti-Patterns\n\n- Sending every iPhone notification to the Watch\n- Notifications without actionable buttons (forcing app launch)\n- Using the same haptic type for all notifications regardless of content\n- Long notification text that requires extensive scrolling\n\n---\n\n## 8. Accessibility (CRITICAL)\n\nApple Watch supports VoiceOver and other assistive technologies. Complications and app UI must be accessible.\n\n### Rules\n\n- **W-AC-01**: Every interactive element must have a meaningful accessibility label. SF Symbol names are not sufficient labels. Use `.accessibilityLabel()` on image-only buttons.\n- **W-AC-02**: VoiceOver must be able to navigate all app content. Do not hide essential information from the accessibility hierarchy.\n- **W-AC-03**: Provide accessibility values and hints for custom controls (e.g., gauges, progress indicators, custom pickers). Use `.accessibilityValue()` and `.accessibilityHint()`.\n- **W-AC-04**: Respect Reduce Motion. Disable or substitute decorative animations when enabled. Use `@Environment(\\.accessibilityReduceMotion)`.\n- **W-AC-05**: Respond to Bold Text. When the user enables Bold Text, custom text must adapt. SwiftUI dynamic type handles this automatically; custom-drawn text must check `@Environment(\\.legibilityWeight)`.\n- **W-AC-06**: Respond to Increase Contrast. When the user enables Increase Contrast, custom colors must provide higher-contrast variants. Use `@Environment(\\.colorSchemeContrast)` to detect the user's preference.\n\n**Correct:**\n\n```swift\nButton(action: startWorkout) {\n    Image(systemName: \"play.fill\")\n}\n.accessibilityLabel(\"Start workout\")\n```\n\n**Incorrect:**\n\n```swift\nButton(action: startWorkout) {\n    Image(systemName: \"play.fill\")\n}\n\u002F\u002F VoiceOver reads \"play\" — not clear what action this performs\n```\n\n### Anti-Patterns\n\n- Image-only buttons with no accessibility label\n- Custom controls with no accessibility value or hint\n- Animations that do not respect Reduce Motion\n- Hiding content from the accessibility tree that sighted users can see\n\n---\n\n## Evaluation Checklist\n\nUse this checklist when reviewing a watchOS design or implementation.\n\n### Glanceability\n\n- [ ] Can the user understand the primary content within 2 seconds?\n- [ ] Is the most important information visible without scrolling?\n- [ ] Is body text at least 16pt with sufficient contrast?\n- [ ] Are interactions completable in under 5 seconds?\n\n### Digital Crown\n\n- [ ] Does the Crown scroll vertical content?\n- [ ] Do value pickers provide haptic detents?\n- [ ] Are there no conflicts with system Crown behaviors?\n\n### Navigation\n\n- [ ] Is the primary action reachable within 1 tap from launch?\n- [ ] Is the navigation hierarchy 3 levels or fewer?\n- [ ] Does every pushed view have a back button?\n- [ ] Are top-level sections organized in a TabView (if applicable)?\n\n### Complications\n\n- [ ] Are multiple complication families supported?\n- [ ] Do complications work in both tinted and full-color modes?\n- [ ] Is complication data updated via TimelineProvider?\n- [ ] Does tapping a complication open relevant context?\n\n### Always On\n\n- [ ] Is sensitive data hidden in the dimmed state?\n- [ ] Is visual complexity reduced when inactive?\n- [ ] Is the update frequency limited to once per minute or less?\n- [ ] Is the transition between active and dimmed seamless (no layout shift)?\n\n### Workouts\n\n- [ ] Are live metrics displayed in large, high-contrast text?\n- [ ] Are haptics used for milestones?\n- [ ] Is auto-pause supported for applicable workout types?\n- [ ] Is the workout summary accessible with a single action?\n\n### Notifications\n\n- [ ] Is the Short Look meaningful (title + icon)?\n- [ ] Does the Long Look include inline actions?\n- [ ] Are haptic types matched to notification urgency?\n- [ ] Is notification frequency appropriate (not excessive)?\n\n### Accessibility\n\n- [ ] All interactive elements have meaningful accessibility labels (no raw SF Symbol names)\n- [ ] Custom controls provide accessibility values and hints via `.accessibilityValue()` \u002F `.accessibilityHint()`\n- [ ] VoiceOver can navigate all app content — no essential content hidden from the accessibility tree\n- [ ] Animations respect Reduce Motion (`@Environment(\\.accessibilityReduceMotion)`)\n- [ ] Bold Text preference is respected (SwiftUI handles automatically; custom text checks `@Environment(\\.legibilityWeight)`)\n- [ ] Increase Contrast preference is respected (custom colors provide higher-contrast variants)\n","# watchOS Design Guidelines\n\nApple Watch is a personal, glanceable device worn on the wrist. Interactions are measured in seconds, not minutes. Every design decision must prioritize speed of comprehension and brevity of interaction.\n\n---\n\n## 1. Glanceable Design (CRITICAL)\n\nThe defining constraint of watchOS. If a user cannot extract the key information within 2 seconds of raising their wrist, the design has failed.\n\n### Rules\n\n- **W-GL-01**: Primary information must be visible without scrolling. The first screen is the only guaranteed screen.\n- **W-GL-02**: Target interaction sessions of 5 seconds or less. Design for raise-glance-lower.\n- **W-GL-03**: Use large, high-contrast text. Minimum effective body text is 16pt (system font). Titles should be 18pt or larger.\n- **W-GL-04**: Limit text to essential content. Truncate or abbreviate aggressively. Use SF Symbols instead of text labels where meaning is unambiguous.\n- **W-GL-05**: Respect wrist-down time. When the wrist lowers, the app enters an inactive state. Do not assume continuous user attention.\n- **W-GL-06**: Prioritize a single piece of information per screen. If showing multiple data points, establish clear visual hierarchy with size, weight, and color.\n\n### Screen Dimensions Reference\n\n| Device           | Screen Width | Screen Height | Corner Radius |\n| ---------------- | ------------ | ------------- | ------------- |\n| 41mm (Series 9)  | 176px        | 215px         | 36px          |\n| 45mm (Series 9)  | 198px        | 242px         | 39px          |\n| 42mm (Series 10) | 180px        | 220px         | 37px          |\n| 46mm (Series 10) | 205px        | 251px         | 40px          |\n| 49mm (Ultra 2)   | 205px        | 251px         | 40px          |\n\n### Anti-Patterns\n\n- Walls of text requiring scroll to understand context\n- Small, dense data tables\n- Requiring multiple taps before showing useful information\n- Replicating an iPhone screen layout on Watch\n\n---\n\n## 2. Digital Crown (HIGH)\n\nThe Digital Crown is the primary physical input for scrolling and precise value selection. It provides haptic feedback and should feel purposeful.\n\n### Rules\n\n- **W-DC-01**: Use the Digital Crown as the primary scroll mechanism for vertical content. Do not rely solely on swipe gestures for scrolling.\n- **W-DC-02**: For value pickers (time, quantity, sliders), bind the Crown to precise adjustments with haptic detents at each discrete value.\n- **W-DC-03**: Do not override or conflict with system Crown behaviors. The system uses the Crown for volume control during media playback, scrolling in system UI, and Time Travel in complications.\n- **W-DC-04**: Provide visual feedback synchronized with Crown rotation. The UI must respond frame-by-frame to Crown input with no perceptible lag.\n- **W-DC-05**: Update on each Crown increment. Values, selection, and highlight states should move with each detent. Do not debounce Crown input until the gesture ends.\n\n**Correct — Crown binding with haptic detents:**\n\n```swift\nstruct VolumePickerView: View {\n    @State private var volume: Double = 0.5\n\n    var body: some View {\n        VStack {\n            Text(\"\\(Int(volume * 100))%\")\n                .font(.title.bold())\n            Image(systemName: \"speaker.wave.3\")\n        }\n        .focusable()\n        .digitalCrownRotation(\n            $volume,\n            from: 0.0,\n            through: 1.0,\n            by: 0.05,\n            sensitivity: .medium,\n            isContinuous: false,\n            isHapticFeedbackEnabled: true\n        )\n    }\n}\n```\n\n**Incorrect — ignoring the Crown and forcing touch-only interaction:**\n\n```swift\nstruct VolumePickerView: View {\n    @State private var volume: Double = 0.5\n\n    var body: some View {\n        Slider(value: $volume)\n        \u002F\u002F No .digitalCrownRotation — Crown input is ignored\n        \u002F\u002F Users must use touch-only, which is imprecise and frustrating on Watch\n    }\n}\n```\n\n### Anti-Patterns\n\n- Ignoring the Crown and forcing all interaction through touch\n- Custom Crown behaviors that conflict with system expectations\n- Missing haptic feedback on discrete value changes\n- Laggy or batched responses to Crown rotation\n\n---\n\n## 3. Navigation (HIGH)\n\nWatch navigation must be shallow and predictable. Users should never feel lost or unable to return to a known state.\n\n### Rules\n\n- **W-NV-01**: Use vertical page scrolling as the default content navigation pattern. Pages scroll top-to-bottom with the Digital Crown.\n- **W-NV-02**: Use `TabView` for top-level sections (max 5 tabs). Swipe horizontally between tabs. Each tab is a distinct functional area.\n- **W-NV-03**: Use `NavigationStack` for hierarchical drill-down. Limit hierarchy to 2-3 levels maximum. Every pushed view must have a back button (provided automatically by the system).\n- **W-NV-04**: Avoid modal sheets for primary flows. Modals should be reserved for focused, single-purpose tasks (e.g., confirmation, quick input).\n- **W-NV-05**: The app's most important action should be reachable within 1 tap from launch. Do not bury primary functionality behind menus or navigation.\n\n### Navigation Pattern Reference\n\n| Pattern                    | Use Case                               | Gesture                                                      |\n| -------------------------- | -------------------------------------- | ------------------------------------------------------------ |\n| Vertical scroll            | Long-form content within a single view | Digital Crown \u002F swipe up-down                                |\n| TabView (horizontal pages) | Top-level app sections                 | Swipe left-right                                             |\n| NavigationStack (push\u002Fpop) | Hierarchical drill-down                | Tap to push, swipe right or back button to pop               |\n| Modal sheet                | Confirmation, focused input            | Presented programmatically, dismiss via button or swipe down |\n\n### Anti-Patterns\n\n- Deep navigation hierarchies (4+ levels)\n- Hamburger menus or hidden navigation drawers\n- Tab bars with more than 5 items\n- Forcing users to scroll through long lists to find key actions\n\n---\n\n## 4. Complications (HIGH)\n\nComplications are the most visible surface of a Watch app. They live on the watch face and provide at-a-glance data without launching the app.\n\n### Rules\n\n- **W-CP-01**: Support multiple complication families to maximize watch face compatibility. At minimum support `accessoryCircular`, `accessoryCorner`, and `accessoryRectangular` (WidgetKit, watchOS 9+).\n- **W-CP-02**: Provide both tinted (single-color) and full-color variants. Tinted complications must remain legible when the system applies a single tint color.\n- **W-CP-03**: Update complications via `TimelineProvider`. Provide future timeline entries when data is predictable (e.g., next calendar event, weather forecast). Keep data fresh -- stale complications erode trust.\n- **W-CP-04**: Complication content must be meaningful without context. A user glancing at their watch face should immediately understand the data (e.g., \"72F\" not \"72\").\n- **W-CP-05**: Tapping a complication must launch the app to a relevant context, not just the app's root view.\n\n**Correct — WidgetKit TimelineProvider for an accessoryCircular complication:**\n\n```swift\nstruct StepCountProvider: TimelineProvider {\n    func placeholder(in context: Context) -> StepEntry {\n        StepEntry(date: Date(), steps: 5000)\n    }\n\n    func getSnapshot(in context: Context, completion: @escaping (StepEntry) -> Void) {\n        completion(StepEntry(date: Date(), steps: HealthStore.shared.todaySteps))\n    }\n\n    func getTimeline(in context: Context, completion: @escaping (Timeline\u003CStepEntry>) -> Void) {\n        let entry = StepEntry(date: Date(), steps: HealthStore.shared.todaySteps)\n        \u002F\u002F Refresh in 15 minutes\n        let nextUpdate = Calendar.current.date(byAdding: .minute, value: 15, to: Date())!\n        completion(Timeline(entries: [entry], policy: .after(nextUpdate)))\n    }\n}\n\nstruct StepCountComplicationView: View {\n    let entry: StepEntry\n\n    var body: some View {\n        Gauge(value: Double(entry.steps), in: 0...10000) {\n            Image(systemName: \"figure.walk\")\n        } currentValueLabel: {\n            Text(\"\\(entry.steps \u002F 1000)k\")\n        }\n        .gaugeStyle(.accessoryCircular)\n    }\n}\n```\n\n### Complication Family Reference\n\nUse `WidgetFamily` values:\n\n| Family                 | Shape               | Typical Content                          |\n| ---------------------- | ------------------- | ---------------------------------------- |\n| `accessoryCircular`    | Small circle        | Single value, icon, or gauge             |\n| `accessoryCorner`      | Curved, top corners | Gauge with label, or text with icon      |\n| `accessoryRectangular` | Wide rectangle      | Multi-line text, chart, or detailed view |\n| `accessoryInline`      | Text row            | Short label or value                     |\n\n### Anti-Patterns\n\n- Supporting only one complication family\n- Stale data that does not update for hours\n- Complication tap landing on generic app home instead of relevant content\n- Illegible complications in tinted mode (insufficient contrast)\n\n---\n\n## 5. Always On Display (MEDIUM)\n\nWhen the user's wrist is down, watchOS enters an Always On state showing a dimmed version of the current app. This must be handled intentionally.\n\n### Rules\n\n- **W-AO-01**: Reduce visual complexity in the Always On state. Remove animations, secondary UI elements, and non-essential detail. Keep only the most critical information visible.\n- **W-AO-02**: Hide sensitive or private data (e.g., message content, health details, financial information) in the dimmed state. Use redacted or placeholder content.\n- **W-AO-03**: Reduce update frequency in Always On. Update the display no more than once per minute. Use `TimelineView` with a `.everyMinute` schedule for time-sensitive content.\n- **W-AO-04**: Use the system-provided dimming behaviors. Do not implement custom dimming. The system automatically reduces brightness and can apply a tint. Ensure your content remains legible at reduced brightness.\n- **W-AO-05**: Test both active and Always On states. The transition between states must feel seamless -- layout should not shift or jump when the wrist raises.\n\n### Anti-Patterns\n\n- Showing identical UI in active and Always On states (wastes battery, may expose private data)\n- Animations or frequent updates in Always On state\n- Layout shifts when transitioning between active and dimmed states\n- Forgetting to redact sensitive information\n\n---\n\n## 6. Workouts & Health (MEDIUM)\n\nWorkout and health apps have unique requirements: extended sessions, live metrics, and body-awareness features.\n\n### Rules\n\n- **W-WK-01**: Display live workout metrics in large, high-contrast text. Heart rate, duration, distance, and calories should be readable mid-exercise without stopping.\n- **W-WK-02**: Use haptic feedback for milestones (lap completed, goal reached, heart rate zone change). Haptics are essential because users may not be looking at the screen during exercise.\n- **W-WK-03**: Support auto-pause detection for relevant workout types (running, walking). Users expect the workout to pause when they stop moving and resume when they start again.\n- **W-WK-04**: Enable WaterLock during swimming workouts. This disables the touchscreen to prevent water interaction. The Digital Crown is used to eject water and unlock.\n- **W-WK-05**: Show a clear summary screen at workout completion with key metrics. Allow the user to save or discard the workout with a single action.\n\n### Anti-Patterns\n\n- Small metric text that requires squinting or stopping to read\n- Missing haptic feedback for important workout events\n- No auto-pause support for outdoor workouts\n- Requiring complex interaction to end or save a workout\n\n---\n\n## 7. Notifications (MEDIUM)\n\nWatch notifications must be brief and actionable. The user's wrist is raised for only a moment.\n\n### Rules\n\n- **W-NT-01**: Design Short Look notifications with only a title, app icon, and app name. This is what the user sees on initial wrist raise. It must communicate the notification's purpose instantly.\n- **W-NT-02**: Design Long Look notifications with full content and up to 4 action buttons. The user reaches Long Look by continuing to look at the notification. Include the most useful actions inline.\n- **W-NT-03**: Use appropriate haptic notification types. Match the urgency: `.notification` for standard alerts, `.directionUp` for positive events, `.directionDown` for negative events, `.success`\u002F`.failure`\u002F`.retry` for outcomes.\n- **W-NT-04**: Do not over-notify. Excessive notifications cause users to disable them entirely. Batch non-urgent updates. Reserve Watch notifications for time-sensitive or actionable information.\n\n### Haptic Type Reference\n\n| Haptic           | Use Case                                     |\n| ---------------- | -------------------------------------------- |\n| `.notification`  | General alerts                               |\n| `.directionUp`   | Positive event (goal reached, stock up)      |\n| `.directionDown` | Negative event (stock down, weather warning) |\n| `.success`       | Action completed successfully                |\n| `.failure`       | Action failed                                |\n| `.retry`         | Try again prompt                             |\n| `.start`         | Activity beginning                           |\n| `.stop`          | Activity ending                              |\n| `.click`         | Discrete selection (Crown detent, picker)    |\n\n### Anti-Patterns\n\n- Sending every iPhone notification to the Watch\n- Notifications without actionable buttons (forcing app launch)\n- Using the same haptic type for all notifications regardless of content\n- Long notification text that requires extensive scrolling\n\n---\n\n## 8. Accessibility (CRITICAL)\n\nApple Watch supports VoiceOver and other assistive technologies. Complications and app UI must be accessible.\n\n### Rules\n\n- **W-AC-01**: Every interactive element must have a meaningful accessibility label. SF Symbol names are not sufficient labels. Use `.accessibilityLabel()` on image-only buttons.\n- **W-AC-02**: VoiceOver must be able to navigate all app content. Do not hide essential information from the accessibility hierarchy.\n- **W-AC-03**: Provide accessibility values and hints for custom controls (e.g., gauges, progress indicators, custom pickers). Use `.accessibilityValue()` and `.accessibilityHint()`.\n- **W-AC-04**: Respect Reduce Motion. Disable or substitute decorative animations when enabled. Use `@Environment(\\.accessibilityReduceMotion)`.\n- **W-AC-05**: Respond to Bold Text. When the user enables Bold Text, custom text must adapt. SwiftUI dynamic type handles this automatically; custom-drawn text must check `@Environment(\\.legibilityWeight)`.\n- **W-AC-06**: Respond to Increase Contrast. When the user enables Increase Contrast, custom colors must provide higher-contrast variants. Use `@Environment(\\.colorSchemeContrast)` to detect the user's preference.\n\n**Correct:**\n\n```swift\nButton(action: startWorkout) {\n    Image(systemName: \"play.fill\")\n}\n.accessibilityLabel(\"Start workout\")\n```\n\n**Incorrect:**\n\n```swift\nButton(action: startWorkout) {\n    Image(systemName: \"play.fill\")\n}\n\u002F\u002F VoiceOver reads \"play\" — not clear what action this performs\n```\n\n### Anti-Patterns\n\n- Image-only buttons with no accessibility label\n- Custom controls with no accessibility value or hint\n- Animations that do not respect Reduce Motion\n- Hiding content from the accessibility tree that sighted users can see\n\n---\n\n## Evaluation Checklist\n\nUse this checklist when reviewing a watchOS design or implementation.\n\n### Glanceability\n\n- [ ] Can the user understand the primary content within 2 seconds?\n- [ ] Is the most important information visible without scrolling?\n- [ ] Is body text at least 16pt with sufficient contrast?\n- [ ] Are interactions completable in under 5 seconds?\n\n### Digital Crown\n\n- [ ] Does the Crown scroll vertical content?\n- [ ] Do value pickers provide haptic detents?\n- [ ] Are there no conflicts with system Crown behaviors?\n\n### Navigation\n\n- [ ] Is the primary action reachable within 1 tap from launch?\n- [ ] Is the navigation hierarchy 3 levels or fewer?\n- [ ] Does every pushed view have a back button?\n- [ ] Are top-level sections organized in a TabView (if applicable)?\n\n### Complications\n\n- [ ] Are multiple complication families supported?\n- [ ] Do complications work in both tinted and full-color modes?\n- [ ] Is complication data updated via TimelineProvider?\n- [ ] Does tapping a complication open relevant context?\n\n### Always On\n\n- [ ] Is sensitive data hidden in the dimmed state?\n- [ ] Is visual complexity reduced when inactive?\n- [ ] Is the update frequency limited to once per minute or less?\n- [ ] Is the transition between active and dimmed seamless (no layout shift)?\n\n### Workouts\n\n- [ ] Are live metrics displayed in large, high-contrast text?\n- [ ] Are haptics used for milestones?\n- [ ] Is auto-pause supported for applicable workout types?\n- [ ] Is the workout summary accessible with a single action?\n\n### Notifications\n\n- [ ] Is the Short Look meaningful (title + icon)?\n- [ ] Does the Long Look include inline actions?\n- [ ] Are haptic types matched to notification urgency?\n- [ ] Is notification frequency appropriate (not excessive)?\n\n### Accessibility\n\n- [ ] All interactive elements have meaningful accessibility labels (no raw SF Symbol names)\n- [ ] Custom controls provide accessibility values and hints via `.accessibilityValue()` \u002F `.accessibilityHint()`\n- [ ] VoiceOver can navigate all app content — no essential content hidden from the accessibility tree\n- [ ] Animations respect Reduce Motion (`@Environment(\\.accessibilityReduceMotion)`)\n- [ ] Bold Text preference is respected (SwiftUI handles automatically; custom text checks `@Environment(\\.legibilityWeight)`)\n- [ ] Increase Contrast preference is respected (custom colors provide higher-contrast variants)\n",{"name":5,"license":14,"metadata":45,"description":7},{"author":46,"version":47},"platform-design-skills","1.0.0","main","a89fc2a3b8e6ab97687f1f5aeb08d4983afec872","codex\u002Fskills\u002Fhig-watchos","https:\u002F\u002Fgithub.com\u002Fsalexandr0s\u002Fai-config","https:\u002F\u002Fgithub.com\u002Fsalexandr0s","https:\u002F\u002Fsavorg.xyz\u002F","Solo building with agents since 2025. Learning as i do. Do not blindly trust my code.","2026-10-20 08:45:44",{"source":8,"skillName":5,"commands":57,"prompt":67,"zipAvailable":68},[58,61,64],{"tool":59,"command":60},"npx","npx skills add salexandr0s\u002Fai-config --skill watchos-design-guidelines",{"tool":62,"command":63},"bunx","bunx skills add salexandr0s\u002Fai-config --skill watchos-design-guidelines",{"tool":65,"command":66},"pnpm","pnpm dlx skills add salexandr0s\u002Fai-config --skill watchos-design-guidelines","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fsalexandr0s\u002Fai-config\u002Fblob\u002Fmain\u002Fcodex\u002Fskills\u002Fhig-watchos\u002FSKILL.md",true,[70,76,80],{"path":71,"resourceType":72,"resourceTypeDesc":73,"sizeBytes":74,"sourceHtmlUrl":75},"AGENTS.md","REFERENCE","参考文档",2873,"https:\u002F\u002Fgithub.com\u002Fsalexandr0s\u002Fai-config\u002Fblob\u002Fmain\u002Fcodex\u002Fskills\u002Fhig-watchos\u002FAGENTS.md",{"path":77,"resourceType":72,"resourceTypeDesc":73,"sizeBytes":78,"sourceHtmlUrl":79},"metadata.json",640,"https:\u002F\u002Fgithub.com\u002Fsalexandr0s\u002Fai-config\u002Fblob\u002Fmain\u002Fcodex\u002Fskills\u002Fhig-watchos\u002Fmetadata.json",{"path":81,"resourceType":72,"resourceTypeDesc":73,"sizeBytes":82,"sourceHtmlUrl":83},"rules\u002F_sections.md",7276,"https:\u002F\u002Fgithub.com\u002Fsalexandr0s\u002Fai-config\u002Fblob\u002Fmain\u002Fcodex\u002Fskills\u002Fhig-watchos\u002Frules\u002F_sections.md",[85,119,150,167,181,191],{"skillNo":86,"name":87,"nameZh":6,"description":88,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":9,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":89,"categories":90,"keywords":100,"publishedAt":40},"01M6DENC8E8KC8YVPM0P7P2MRR","avoid-ai-writing","Use whenever drafting or editing copy, prose, UI text, titles, headings, or subject lines. Review generic AI writing patterns while preserving facts, voice, uncertainty, protected content, and the requested scope.","https:\u002F\u002Fgithub.com\u002Fsalexandr0s\u002Fai-config\u002Fblob\u002Fmain\u002Fshared\u002Fskills\u002Favoid-ai-writing\u002FSKILL.md",[91,94,97],{"categoryNo":92,"categoryName":93,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000018","写作与文案",{"categoryNo":95,"categoryName":96,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000023","Skill与智能体开发",{"categoryNo":98,"categoryName":99,"taxonomyType":25,"taxonomyTypeDesc":26},"01JBSEEDCAT000000000000036","内容创作者",[101,102,103,104,105,106,107,33,108,109,110,111,112,113,114,32,115,116,117,118],"writing","avoid ai writing","hermes","external tools","io","prose","ai coding","cursor","editing","openhands","hermes agent","text","format","voice","code","copilot","review","assistant",{"skillNo":120,"name":121,"nameZh":6,"description":122,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":9,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":123,"categories":124,"keywords":131,"publishedAt":40},"01M6DEN6VQ0BJK95QMV8GDWC0E","visual-explainer","Generate beautiful, self-contained HTML pages that visually explain systems, code changes, plans, and data. Use when the user asks for a diagram, architecture overview, diff review, plan review, project recap, comparison table, or any visual explanation of technical concepts. Also use proactively when you are about to render a complex ASCII table (4+ rows or 3+ columns) — present it as a styled HTML page instead.","https:\u002F\u002Fgithub.com\u002Fsalexandr0s\u002Fai-config\u002Fblob\u002Fmain\u002Fcodex\u002Fskills\u002Fvisual-explainer\u002FSKILL.md",[125,128],{"categoryNo":126,"categoryName":127,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000009","前端开发",{"categoryNo":129,"categoryName":130,"taxonomyType":25,"taxonomyTypeDesc":26},"01JBSEEDCAT000000000000033","数据分析师",[132,133,134,135,136,137,115,138,139,140,141,142,143,144,145,146,147,117,148,149],"visual","explainer","visual explainer","browser","project","generate","self","files","data","html","generated","diagram","plan","recap","present","cli","image","architecture",{"skillNo":151,"name":152,"nameZh":6,"description":153,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":9,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":154,"categories":155,"keywords":156,"publishedAt":40},"01M6DEJJDNE7NW9H3HBPJY75ZC","openspec-propose","Propose a new change end to end. Use when the user wants one-step generation of a proposal, design, spec, and task list for implementation.","https:\u002F\u002Fgithub.com\u002Fsalexandr0s\u002Fai-config\u002Fblob\u002Fmain\u002Fcodex\u002Fskills\u002Fopenspec-propose\u002FSKILL.md",[],[157,158,159,160,161,162,163,33,164,165,166,147,28],"openspec propose","openspec","task","user","end","generation","implementation","list","change","spec",{"skillNo":168,"name":169,"nameZh":6,"description":170,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":9,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":171,"categories":172,"keywords":173,"publishedAt":40},"01M6DEJFB71DXH9315KWCD5GTJ","openspec-explore","Enter explore mode for idea exploration, problem investigation, and requirement clarification. Use before or during a change when the user wants to think, not implement.","https:\u002F\u002Fgithub.com\u002Fsalexandr0s\u002Fai-config\u002Fblob\u002Fmain\u002Fcodex\u002Fskills\u002Fopenspec-explore\u002FSKILL.md",[],[158,174,175,160,176,165,177,147,33,178,179,180],"explore","openspec explore","investigation","implement","exploration","idea","think",{"skillNo":182,"name":183,"nameZh":6,"description":184,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":9,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":185,"categories":186,"keywords":187,"publishedAt":40},"01M6DEJD13P4G244JEJ2BSV3H1","openspec-archive-change","Archive a completed change in the experimental workflow. Use when the user wants to finalize and archive a change after implementation is complete.","https:\u002F\u002Fgithub.com\u002Fsalexandr0s\u002Fai-config\u002Fblob\u002Fmain\u002Fcodex\u002Fskills\u002Fopenspec-archive-change\u002FSKILL.md",[],[188,158,189,165,147,163,33,160,190],"openspec archive change","archive","workflow",{"skillNo":192,"name":193,"nameZh":6,"description":194,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":9,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":195,"categories":196,"keywords":197,"publishedAt":40},"01M6DEJAGA1Q94SCY3TWB56TC2","openspec-apply-change","Implement tasks from an OpenSpec change. Use when the user wants to start implementing, continue implementation, or work through tasks.","https:\u002F\u002Fgithub.com\u002Fsalexandr0s\u002Fai-config\u002Fblob\u002Fmain\u002Fcodex\u002Fskills\u002Fopenspec-apply-change\u002FSKILL.md",[],[165,198,158,163,33,160,199,200,201,31,177,147],"openspec apply change","work","continue","start"]