[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6PM35TSJD7KD5G2HSTHJNHV":3,"skill-same:01M6PM35TSJD7KD5G2HSTHJNHV":92},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":16,"categories":17,"keywords":28,"publishedAt":49,"linkOnly":50,"markdownContent":51,"markdownBody":52,"frontMatter":53,"refName":57,"commitSha":58,"skillDirectory":59,"forksCount":14,"repositoryHtmlUrl":60,"repositoryHomepageUrl":6,"ownerHtmlUrl":61,"ownerBlogUrl":62,"ownerDescription":6,"updatedAt":63,"install":64,"resources":77},"01M6PM35TSJD7KD5G2HSTHJNHV","tvos-design-guidelines",null,"Apple Human Interface Guidelines for Apple TV. Use when building tvOS apps with focus-based navigation, Siri Remote input, or living room viewing experiences. Triggers on tasks involving Apple TV, tvOS, 10-foot UI, or media playback.","headmktlucca-ui\u002Fneuroads-lp","headmktlucca-ui","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F247379838?v=4","01M6PDVAV6M1W96D1SR1PDF8CS","NeuroAds","01M6PDVAZ4P281GNDKD45CYTF5",0,"MIT","https:\u002F\u002Fgithub.com\u002Fheadmktlucca-ui\u002Fneuroads-lp\u002Fblob\u002Fmain\u002F.agent\u002Fskills\u002Ftvos\u002FSKILL.md",[18,23],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000015","视觉设计","SCENARIO","使用场景",{"categoryNo":24,"categoryName":25,"taxonomyType":26,"taxonomyTypeDesc":27},"01JBSEEDCAT000000000000032","设计师","PROFESSION","适用职业",[29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48],"guidelines","design","tvos design guidelines","platform-design","for","tv","interface","with","remote","input","apps","triggers","platform","apple","human","focus","use","Media","ui","tasks","2026-11-10 10:12:30",false,"---\nname: tvos-design-guidelines\ndescription: Apple Human Interface Guidelines for Apple TV. Use when building tvOS apps with focus-based navigation, Siri Remote input, or living room viewing experiences. Triggers on tasks involving Apple TV, tvOS, 10-foot UI, or media playback.\nlicense: MIT\nmetadata:\n  author: platform-design-skills\n  version: \"1.0.0\"\n---\n\n# tvOS Design Guidelines\n\nApple TV is a living room device driven entirely by focus-based navigation and the Siri Remote. There is no pointer, no touch screen, and no mouse. Every design decision must account for the 10-foot viewing distance, the simplicity of the remote, and the lean-back nature of TV consumption.\n\n---\n\n## 1. Focus-Based Navigation (CRITICAL)\n\nThe focus system is the foundation of all tvOS interaction. There is no cursor -- users move focus between elements using the Siri Remote touch surface.\n\n### Rules\n\n**FOCUS-01: Every interactive element must have a clearly visible focus state.**\nThe focused item must be unmistakably distinguished from unfocused items. Use scaling (typically 1.05x-1.1x), elevation via shadow, brightness changes, or border highlights. Never rely on color alone.\n\n**FOCUS-02: Focus movement must be predictable and follow a logical spatial layout.**\nWhen a user swipes right, focus must move to the element visually to the right. Avoid layouts where focus jumps unexpectedly across the screen. Grid and linear layouts are safest.\n\n**FOCUS-03: Use focus guides (UIFocusGuide) to bridge gaps in layouts.**\nWhen visual gaps exist between focusable elements, add invisible focus guides so the user does not get stuck. Every swipe should move focus somewhere meaningful.\n\n**FOCUS-04: Apply the parallax effect to focused items.**\nFocused cards, posters, and icons should exhibit a subtle parallax tilt responding to touch surface movement. Use layered images (LSR format) with foreground, midground, and background layers. This communicates depth and confirms focus.\n\n**Correct:**\n```swift\n\u002F\u002F SwiftUI — custom focus engine with explicit focus state\nstruct ContentView: View {\n    @FocusState private var focusedItem: String?\n\n    var body: some View {\n        HStack(spacing: 40) {\n            ForEach(items) { item in\n                CardView(item: item)\n                    .focusable()\n                    .focused($focusedItem, equals: item.id)\n                    .scaleEffect(focusedItem == item.id ? 1.1 : 1.0)\n                    .shadow(radius: focusedItem == item.id ? 20 : 0)\n                    .animation(.easeInOut(duration: 0.15), value: focusedItem)\n            }\n        }\n    }\n}\n```\n\n**Incorrect:**\n```swift\n\u002F\u002F SwiftUI — no focus state: unfocused and focused items look identical\nstruct ContentView: View {\n    var body: some View {\n        HStack(spacing: 40) {\n            ForEach(items) { item in\n                CardView(item: item)\n                    .focusable()\n                \u002F\u002F No scale, shadow, or visual change on focus\n                \u002F\u002F User cannot tell which item is selected\n            }\n        }\n    }\n}\n```\n\n**FOCUS-05: Make focus targets large enough for comfortable navigation.**\nMinimum recommended touch target is 250x150pt for cards. Smaller elements are difficult to land on with swipe-based navigation. Group small actions under a focused parent when possible.\n\n**FOCUS-06: Provide a default focused element on every screen.**\nWhen a view appears, one element must already hold focus. Choose the most likely user intent -- typically the primary content item or the first item in a collection.\n\n**FOCUS-07: Preserve focus memory when returning to a screen.**\nIf a user navigates away and returns, focus should restore to the last focused item on that screen, not reset to the default.\n\n**FOCUS-08: Never trap focus.**\nUsers must always be able to move focus away from any element. If focus cannot leave a region, the app feels broken.\n\n**FOCUS-09: Reduce re-orientation cost.**\nKeep row order stable, restore prior focus when returning, and prefer nearby focus destinations so users do not have to rescan the entire screen after each navigation step.\n\n### Parallax Layer Reference\n\n| Layer | Purpose | Movement Amount |\n|-------|---------|-----------------|\n| Background | Static backdrop, blurred imagery | Minimal (1-2pt) |\n| Midground | Primary artwork or content image | Moderate (3-5pt) |\n| Foreground | Title text, logos, badges | Maximum (5-8pt) |\n\nUse Xcode's LSR (Layered Static Image) format for static layered images in the asset catalog — the system animates them automatically on focus. For custom programmatic parallax, stack `UIImageView` instances and use the focus engine callbacks (`didUpdateFocus(in:with:)` and `UIFocusAnimationCoordinator`) to drive layer movement during focus transitions. (`UIMotionEffect` responds only to subtle Siri Remote gyroscope micromotion and is not the mechanism for focus-driven parallax.)\n\n---\n\n## 2. Siri Remote (CRITICAL)\n\nThe Siri Remote is the primary (and often only) input device. It has a touch surface, Menu button, Play\u002FPause button, Siri\u002Fmicrophone button, volume buttons, and a power button.\n\n### Rules\n\n**REMOTE-01: Touch surface swipes control focus movement.**\nSwiping moves focus in the corresponding direction. Clicking the touch surface selects the focused item. These are the two fundamental interactions -- design everything around them.\n\n**REMOTE-02: Menu button must always navigate back.**\nPressing Menu should dismiss the current screen, close an overlay, or navigate up the hierarchy. At the top level, it returns to the Apple TV home screen. Never override this expectation.\n\n**REMOTE-03: Play\u002FPause button must control media playback.**\nIf media is playing, Play\u002FPause should toggle playback regardless of what screen is visible. Do not repurpose this button for non-media actions.\n\n**REMOTE-04: Never require complex or multi-finger gestures.**\nThe Siri Remote touch surface is small. Do not require pinch, rotate, multi-tap, or long-press gestures. Stick to single-finger swipe and click.\n\n**REMOTE-05: Swipe directions must be intuitive and consistent.**\nHorizontal swipes scroll horizontally; vertical swipes scroll vertically. Never invert axes. Diagonal content movement should follow the dominant swipe axis.\n\n**REMOTE-06: Support Siri voice input for search and text entry.**\nText input via the on-screen keyboard is tedious on tvOS. Always support dictation and Siri search as alternatives to keyboard entry.\n\n**REMOTE-07: Provide click feedback.**\nWhen the user clicks the touch surface to select an item, provide immediate visual feedback (animation, highlight change, or haptic-style visual pulse) so the click feels responsive.\n\n**REMOTE-08: Never make the on-screen keyboard the only practical text path.**\nFor search, sign-in, and setup, prefer dictation, recent queries, autofill, or short code-based flows over long remote-typed text. Remote text entry carries high motor and cognitive cost.\n\n---\n\n## 3. 10-Foot UI (HIGH)\n\nApple TV content is viewed from across a room, typically 8-12 feet (2.5-3.5 meters) from the screen. All visual design must account for this distance.\n\n### Rules\n\n**DISTANCE-01: Minimum body text size is 29pt.**\nText below 29pt becomes difficult to read at living room distances. Titles should be 48pt or larger. Use San Francisco Display or comparable high-legibility typeface.\n\n**DISTANCE-02: Maintain high contrast between text and backgrounds.**\nUse light text on dark backgrounds as the default. tvOS uses a dark theme. Contrast ratio should meet WCAG AA or higher (4.5:1 for body text, 3:1 for large text).\n\n**DISTANCE-03: Limit text per screen.**\nTV is a visual medium. Show headlines, short descriptions, and metadata -- not paragraphs. If extended text is necessary, use scrollable text overlays that the user explicitly opens.\n\n**DISTANCE-04: Use bold, clear imagery at high resolution.**\nFull-screen background images should be 1920x1080 or 3840x2160 (4K). Content artwork should be sharp and visually engaging. Avoid small, detailed illustrations that lose clarity at distance.\n\n**DISTANCE-05: Keep layouts simple and spacious.**\nGenerous margins and padding. Do not crowd the screen with many small elements. A single row of 5-7 cards is preferable to a dense grid of 20+ thumbnails.\n\n**DISTANCE-06: Use the TV-safe area.**\nKeep all critical content within the safe area (60pt inset from edges). Content near screen edges may be cropped on some TV sets due to overscan.\n\n**DISTANCE-07: Avoid thin fonts and hairline borders.**\nThin strokes disappear on TV displays, especially with motion blur and compression artifacts. Use medium or semibold weights minimum.\n\n### Text Size Reference\n\n| Element | Minimum Size | Recommended Size |\n|---------|-------------|-----------------|\n| Body text | 29pt | 31-35pt |\n| Secondary labels | 25pt | 29pt |\n| Titles | 48pt | 52-76pt |\n| Large headers | 64pt | 76-96pt |\n| Buttons | 29pt | 35-38pt |\n\n---\n\n## 4. Top Shelf (HIGH)\n\nThe Top Shelf is a prominent content area displayed when the user focuses on your app icon on the Apple TV home screen. It is prime real estate for showcasing content.\n\n### Rules\n\n**SHELF-01: Provide a Top Shelf extension.**\nApps should include a `TVTopShelfContentProvider` (tvOS 14+) that returns dynamic content. `TVTopShelfProvider` is deprecated since tvOS 14 — do not use it. A static Top Shelf is a missed opportunity for engagement.\n\n**SHELF-02: Use the correct layout style for your content.**\n- **Inset banner**: 1 large focused item with smaller items on either side. Best for featured or editorial content.\n- **Sectioned content**: Multiple scrollable rows of items grouped by category. Best for media libraries.\n\n**SHELF-03: Top Shelf items must deep-link into the app.**\nEach item must open the corresponding content when selected. Never link all items to the same generic landing page.\n\n**SHELF-04: Use high-quality, engaging imagery.**\nTop Shelf images are displayed large on the home screen. Blurry, low-resolution, or text-heavy images look unprofessional. Recommended image sizes:\n- Inset banner: 1940x624pt (@1x) or 3880x1248pt (@2x)\n- Sectioned items: 404x608pt (@1x)\n\n**SHELF-05: Keep Top Shelf content fresh.**\nUpdate Top Shelf content regularly -- ideally reflecting recently added, trending, or personalized content. Stale Top Shelf content signals an abandoned app.\n\n---\n\n## 5. Media & Playback (MEDIUM)\n\nApple TV is primarily a media consumption device. Playback interfaces must follow established TV conventions.\n\n### Rules\n\n**MEDIA-01: Use standard transport controls.**\nProvide play, pause, skip forward (10s), skip back (10s), and a scrubber timeline. Use `AVPlayerViewController` to get these for free with consistent behavior.\n\n**MEDIA-02: Show an info overlay on swipe-down during playback.**\nSwiping down during playback should reveal an info panel showing title, description, and metadata. Swiping down again or pressing Menu dismisses it.\n\n**MEDIA-03: Support scrubbing via the touch surface.**\nSwiping left\u002Fright on the touch surface during playback should scrub through the timeline. Show thumbnail previews during scrubbing when possible.\n\n**MEDIA-04: Support subtitles and alternative audio tracks.**\nProvide access to subtitle selection and audio track switching via the info overlay or the standard player controls.\n\n**MEDIA-05: Support Picture in Picture where appropriate.**\nFor video content, allow PiP so users can browse other content while watching. Implement `AVPictureInPictureController` integration.\n\n**MEDIA-06: Remember playback position.**\nWhen a user returns to previously watched content, resume from where they left off. Display a progress indicator on content thumbnails.\n\n**MEDIA-07: Handle interruptions gracefully.**\nIf the user presses the TV button or switches apps during playback, save position and pause cleanly. Resume without re-buffering when the user returns.\n\n---\n\n## 6. Tab Bar (MEDIUM)\n\nThe tvOS tab bar sits at the top of the screen, unlike iOS where it sits at the bottom. It provides primary navigation between app sections.\n\n### Rules\n\n**TAB-01: Place the tab bar at the top of the screen.**\nThis is the standard tvOS convention. Bottom tab bars are an iOS pattern and feel wrong on TV.\n\n**TAB-02: Tab bar should be translucent and overlay content.**\nThe tab bar floats over content with a blur effect. When the user focuses on the tab bar, content shifts down to make room.\n\n**TAB-03: Use 3-7 tabs.**\nFewer than 3 tabs suggests the app is too simple for tab navigation. More than 7 tabs becomes difficult to navigate with horizontal swiping.\n\n**TAB-04: Every tab must have a text label.**\nIcon-only tabs are insufficient at TV viewing distances. Text labels are required for clarity. Icons may accompany text but are not required.\n\n**TAB-05: Focus on the tab bar should feel lightweight.**\nWhen focus moves to the tab bar, it should appear smoothly. Content preview should be visible beneath the translucent bar. Switching tabs should update the content below immediately or show a loading state.\n\n**TAB-06: Remember the selected tab across app launches.**\nIf the user was on the \"Search\" tab when they left the app, return to \"Search\" when they re-open it.\n\n---\n\n## 7. Accessibility (CRITICAL)\n\nApple TV supports VoiceOver. Sighted users use focus navigation; VoiceOver users additionally hear spoken descriptions. Both must work.\n\n### Rules\n\n**ACCESS-01: Every interactive element must have a meaningful accessibility label.**\nIcon-only buttons and image cards must have labels. The focused item's name is announced by VoiceOver when focus arrives.\n\n**ACCESS-02: Provide accessibility hints for non-obvious interactions.**\nIf tapping a card does something other than opening the content (e.g., launching a trailer rather than full playback), describe this with an accessibility hint.\n\n**ACCESS-03: Ensure VoiceOver focus order matches visual focus order.**\nVoiceOver must traverse elements in the same order that focus engine navigation produces. Custom focus ordering via `UIFocusGuide` must not create discontinuities in the VoiceOver reading order.\n\n**ACCESS-04: Respect Reduce Motion.**\nParallax effects and other animations must be reduced or disabled when the user enables Reduce Motion in Accessibility settings.\n\n**ACCESS-05: Respond to Bold Text.**\nWhen the user enables Bold Text, custom-rendered text must adapt. SwiftUI dynamic type styles handle this automatically; custom text rendering must check `UIAccessibility.isBoldTextEnabled` or use `@Environment(\\.legibilityWeight)`.\n\n**ACCESS-06: Respond to Increase Contrast.**\nWhen the user enables Increase Contrast (Darker System Colors), custom colors must provide higher-contrast variants. Use `@Environment(\\.colorSchemeContrast)` in SwiftUI or `UIAccessibility.isDarkerSystemColorsEnabled` in UIKit to detect and apply appropriate values.\n\n**ACCESS-07: Respect Dynamic Type \u002F Larger Text.**\ntvOS supports the \"Larger Text\" accessibility setting via `UIContentSizeCategory`. Use SwiftUI semantic text styles (`Font.TextStyle`) so text scales automatically. For UIKit, scale custom fonts with `UIFontMetrics` relative to a base `UIFont.TextStyle`.\n\n**Correct:**\n```swift\n\u002F\u002F SwiftUI — semantic text styles scale with Larger Text automatically\nText(\"Now Playing\")\n    .font(.title2)        \u002F\u002F Scales with UIContentSizeCategory\nText(\"Episode description\")\n    .font(.body)          \u002F\u002F Scales with UIContentSizeCategory\n\n\u002F\u002F UIKit — scale custom font with UIFontMetrics\nlet baseFont = UIFont(name: \"CustomFont-Regular\", size: 29)!\nlet scaledFont = UIFontMetrics(forTextStyle: .body).scaledFont(for: baseFont)\nlabel.font = scaledFont\nlabel.adjustsFontForContentSizeCategory = true\n```\n\n**Incorrect:**\n```swift\n\u002F\u002F SwiftUI — hardcoded size ignores Larger Text preference\nText(\"Now Playing\")\n    .font(.system(size: 29)) \u002F\u002F Does not scale\n\n\u002F\u002F UIKit — hardcoded font ignores UIContentSizeCategory\nlabel.font = UIFont(name: \"CustomFont-Regular\", size: 29)\n\u002F\u002F Missing adjustsFontForContentSizeCategory = true\n```\n\n---\n\n## Evaluation Checklist\n\nUse this checklist when reviewing a tvOS app design or implementation.\n\n### Focus System\n- [ ] Every interactive element has a visible, distinct focus state\n- [ ] Focus movement is predictable in all directions\n- [ ] No focus traps exist anywhere in the app\n- [ ] Focus guides bridge layout gaps\n- [ ] Parallax effect is applied to content cards and icons\n- [ ] Default focus is set on every screen\n- [ ] Focus memory is preserved when navigating back\n\n### Siri Remote\n- [ ] Menu button navigates back on every screen\n- [ ] Play\u002FPause controls media playback globally\n- [ ] No complex gestures are required\n- [ ] Click feedback is immediate and visible\n- [ ] Siri\u002Fdictation supported for text input\n\n### 10-Foot UI\n- [ ] Body text is 29pt or larger\n- [ ] High contrast ratios on all text\n- [ ] Text content is concise, not paragraph-heavy\n- [ ] Imagery is high resolution and visually clear\n- [ ] Layout uses generous spacing with TV-safe margins\n- [ ] No thin fonts or hairline strokes\n\n### Top Shelf\n- [ ] Top Shelf extension provides dynamic content\n- [ ] All Top Shelf items deep-link correctly\n- [ ] Images are high quality and correctly sized\n- [ ] Content updates regularly\n\n### Media & Playback\n- [ ] Standard transport controls are available\n- [ ] Scrubbing works via touch surface\n- [ ] Subtitles and audio tracks are accessible\n- [ ] Playback position is remembered\n- [ ] Interruptions are handled gracefully\n\n### Tab Bar\n- [ ] Tab bar is at the top of the screen\n- [ ] Tabs have text labels\n- [ ] 3-7 tabs are used\n- [ ] Selected tab persists across launches\n\n### Accessibility\n- [ ] Every interactive element and content card has a meaningful accessibility label\n- [ ] Non-obvious interactions have accessibility hints\n- [ ] VoiceOver focus order matches the visual focus engine order\n- [ ] Parallax effects and decorative animations are disabled when Reduce Motion is enabled\n- [ ] Bold Text preference is respected (SwiftUI handles automatically; custom text checks `isBoldTextEnabled`)\n- [ ] Increase Contrast preference is respected (custom colors provide higher-contrast variants)\n- [ ] Larger Text (Dynamic Type) preference is respected (use `Font.TextStyle` in SwiftUI or `UIFontMetrics` in UIKit)\n\n---\n\n## Anti-Patterns for TV\n\n**Do not** bring mobile patterns directly to tvOS. The following are common mistakes:\n\n| Anti-Pattern | Why It Fails | Correct Approach |\n|-------------|-------------|-----------------|\n| Bottom tab bar | iOS convention; feels wrong on TV | Use top tab bar |\n| Small touch targets | Cannot precisely target with swipe navigation | Minimum 250x150pt cards |\n| Dense text screens | Unreadable at 10-foot distance | Headlines + short descriptions only |\n| Hamburger menus | No tap-to-reveal interaction on TV | Use tab bar or focus-driven menus |\n| Pull-to-refresh | No pull gesture on Siri Remote | Auto-refresh or explicit refresh button |\n| Toast notifications | Easy to miss on a large TV screen | Use modal alerts or persistent banners |\n| Scroll indicators | Thin scrollbars invisible at distance | Use content peek (partially visible next item) |\n| Pinch-to-zoom | Multi-finger gestures impossible on Siri Remote | Provide explicit zoom controls |\n| Long forms | Keyboard input is painful on tvOS | Pre-fill, use profiles, or offload to iPhone |\n| Thin\u002Flight typography | Disappears on TV displays | Medium weight minimum |\n","# tvOS Design Guidelines\n\nApple TV is a living room device driven entirely by focus-based navigation and the Siri Remote. There is no pointer, no touch screen, and no mouse. Every design decision must account for the 10-foot viewing distance, the simplicity of the remote, and the lean-back nature of TV consumption.\n\n---\n\n## 1. Focus-Based Navigation (CRITICAL)\n\nThe focus system is the foundation of all tvOS interaction. There is no cursor -- users move focus between elements using the Siri Remote touch surface.\n\n### Rules\n\n**FOCUS-01: Every interactive element must have a clearly visible focus state.**\nThe focused item must be unmistakably distinguished from unfocused items. Use scaling (typically 1.05x-1.1x), elevation via shadow, brightness changes, or border highlights. Never rely on color alone.\n\n**FOCUS-02: Focus movement must be predictable and follow a logical spatial layout.**\nWhen a user swipes right, focus must move to the element visually to the right. Avoid layouts where focus jumps unexpectedly across the screen. Grid and linear layouts are safest.\n\n**FOCUS-03: Use focus guides (UIFocusGuide) to bridge gaps in layouts.**\nWhen visual gaps exist between focusable elements, add invisible focus guides so the user does not get stuck. Every swipe should move focus somewhere meaningful.\n\n**FOCUS-04: Apply the parallax effect to focused items.**\nFocused cards, posters, and icons should exhibit a subtle parallax tilt responding to touch surface movement. Use layered images (LSR format) with foreground, midground, and background layers. This communicates depth and confirms focus.\n\n**Correct:**\n```swift\n\u002F\u002F SwiftUI — custom focus engine with explicit focus state\nstruct ContentView: View {\n    @FocusState private var focusedItem: String?\n\n    var body: some View {\n        HStack(spacing: 40) {\n            ForEach(items) { item in\n                CardView(item: item)\n                    .focusable()\n                    .focused($focusedItem, equals: item.id)\n                    .scaleEffect(focusedItem == item.id ? 1.1 : 1.0)\n                    .shadow(radius: focusedItem == item.id ? 20 : 0)\n                    .animation(.easeInOut(duration: 0.15), value: focusedItem)\n            }\n        }\n    }\n}\n```\n\n**Incorrect:**\n```swift\n\u002F\u002F SwiftUI — no focus state: unfocused and focused items look identical\nstruct ContentView: View {\n    var body: some View {\n        HStack(spacing: 40) {\n            ForEach(items) { item in\n                CardView(item: item)\n                    .focusable()\n                \u002F\u002F No scale, shadow, or visual change on focus\n                \u002F\u002F User cannot tell which item is selected\n            }\n        }\n    }\n}\n```\n\n**FOCUS-05: Make focus targets large enough for comfortable navigation.**\nMinimum recommended touch target is 250x150pt for cards. Smaller elements are difficult to land on with swipe-based navigation. Group small actions under a focused parent when possible.\n\n**FOCUS-06: Provide a default focused element on every screen.**\nWhen a view appears, one element must already hold focus. Choose the most likely user intent -- typically the primary content item or the first item in a collection.\n\n**FOCUS-07: Preserve focus memory when returning to a screen.**\nIf a user navigates away and returns, focus should restore to the last focused item on that screen, not reset to the default.\n\n**FOCUS-08: Never trap focus.**\nUsers must always be able to move focus away from any element. If focus cannot leave a region, the app feels broken.\n\n**FOCUS-09: Reduce re-orientation cost.**\nKeep row order stable, restore prior focus when returning, and prefer nearby focus destinations so users do not have to rescan the entire screen after each navigation step.\n\n### Parallax Layer Reference\n\n| Layer | Purpose | Movement Amount |\n|-------|---------|-----------------|\n| Background | Static backdrop, blurred imagery | Minimal (1-2pt) |\n| Midground | Primary artwork or content image | Moderate (3-5pt) |\n| Foreground | Title text, logos, badges | Maximum (5-8pt) |\n\nUse Xcode's LSR (Layered Static Image) format for static layered images in the asset catalog — the system animates them automatically on focus. For custom programmatic parallax, stack `UIImageView` instances and use the focus engine callbacks (`didUpdateFocus(in:with:)` and `UIFocusAnimationCoordinator`) to drive layer movement during focus transitions. (`UIMotionEffect` responds only to subtle Siri Remote gyroscope micromotion and is not the mechanism for focus-driven parallax.)\n\n---\n\n## 2. Siri Remote (CRITICAL)\n\nThe Siri Remote is the primary (and often only) input device. It has a touch surface, Menu button, Play\u002FPause button, Siri\u002Fmicrophone button, volume buttons, and a power button.\n\n### Rules\n\n**REMOTE-01: Touch surface swipes control focus movement.**\nSwiping moves focus in the corresponding direction. Clicking the touch surface selects the focused item. These are the two fundamental interactions -- design everything around them.\n\n**REMOTE-02: Menu button must always navigate back.**\nPressing Menu should dismiss the current screen, close an overlay, or navigate up the hierarchy. At the top level, it returns to the Apple TV home screen. Never override this expectation.\n\n**REMOTE-03: Play\u002FPause button must control media playback.**\nIf media is playing, Play\u002FPause should toggle playback regardless of what screen is visible. Do not repurpose this button for non-media actions.\n\n**REMOTE-04: Never require complex or multi-finger gestures.**\nThe Siri Remote touch surface is small. Do not require pinch, rotate, multi-tap, or long-press gestures. Stick to single-finger swipe and click.\n\n**REMOTE-05: Swipe directions must be intuitive and consistent.**\nHorizontal swipes scroll horizontally; vertical swipes scroll vertically. Never invert axes. Diagonal content movement should follow the dominant swipe axis.\n\n**REMOTE-06: Support Siri voice input for search and text entry.**\nText input via the on-screen keyboard is tedious on tvOS. Always support dictation and Siri search as alternatives to keyboard entry.\n\n**REMOTE-07: Provide click feedback.**\nWhen the user clicks the touch surface to select an item, provide immediate visual feedback (animation, highlight change, or haptic-style visual pulse) so the click feels responsive.\n\n**REMOTE-08: Never make the on-screen keyboard the only practical text path.**\nFor search, sign-in, and setup, prefer dictation, recent queries, autofill, or short code-based flows over long remote-typed text. Remote text entry carries high motor and cognitive cost.\n\n---\n\n## 3. 10-Foot UI (HIGH)\n\nApple TV content is viewed from across a room, typically 8-12 feet (2.5-3.5 meters) from the screen. All visual design must account for this distance.\n\n### Rules\n\n**DISTANCE-01: Minimum body text size is 29pt.**\nText below 29pt becomes difficult to read at living room distances. Titles should be 48pt or larger. Use San Francisco Display or comparable high-legibility typeface.\n\n**DISTANCE-02: Maintain high contrast between text and backgrounds.**\nUse light text on dark backgrounds as the default. tvOS uses a dark theme. Contrast ratio should meet WCAG AA or higher (4.5:1 for body text, 3:1 for large text).\n\n**DISTANCE-03: Limit text per screen.**\nTV is a visual medium. Show headlines, short descriptions, and metadata -- not paragraphs. If extended text is necessary, use scrollable text overlays that the user explicitly opens.\n\n**DISTANCE-04: Use bold, clear imagery at high resolution.**\nFull-screen background images should be 1920x1080 or 3840x2160 (4K). Content artwork should be sharp and visually engaging. Avoid small, detailed illustrations that lose clarity at distance.\n\n**DISTANCE-05: Keep layouts simple and spacious.**\nGenerous margins and padding. Do not crowd the screen with many small elements. A single row of 5-7 cards is preferable to a dense grid of 20+ thumbnails.\n\n**DISTANCE-06: Use the TV-safe area.**\nKeep all critical content within the safe area (60pt inset from edges). Content near screen edges may be cropped on some TV sets due to overscan.\n\n**DISTANCE-07: Avoid thin fonts and hairline borders.**\nThin strokes disappear on TV displays, especially with motion blur and compression artifacts. Use medium or semibold weights minimum.\n\n### Text Size Reference\n\n| Element | Minimum Size | Recommended Size |\n|---------|-------------|-----------------|\n| Body text | 29pt | 31-35pt |\n| Secondary labels | 25pt | 29pt |\n| Titles | 48pt | 52-76pt |\n| Large headers | 64pt | 76-96pt |\n| Buttons | 29pt | 35-38pt |\n\n---\n\n## 4. Top Shelf (HIGH)\n\nThe Top Shelf is a prominent content area displayed when the user focuses on your app icon on the Apple TV home screen. It is prime real estate for showcasing content.\n\n### Rules\n\n**SHELF-01: Provide a Top Shelf extension.**\nApps should include a `TVTopShelfContentProvider` (tvOS 14+) that returns dynamic content. `TVTopShelfProvider` is deprecated since tvOS 14 — do not use it. A static Top Shelf is a missed opportunity for engagement.\n\n**SHELF-02: Use the correct layout style for your content.**\n- **Inset banner**: 1 large focused item with smaller items on either side. Best for featured or editorial content.\n- **Sectioned content**: Multiple scrollable rows of items grouped by category. Best for media libraries.\n\n**SHELF-03: Top Shelf items must deep-link into the app.**\nEach item must open the corresponding content when selected. Never link all items to the same generic landing page.\n\n**SHELF-04: Use high-quality, engaging imagery.**\nTop Shelf images are displayed large on the home screen. Blurry, low-resolution, or text-heavy images look unprofessional. Recommended image sizes:\n- Inset banner: 1940x624pt (@1x) or 3880x1248pt (@2x)\n- Sectioned items: 404x608pt (@1x)\n\n**SHELF-05: Keep Top Shelf content fresh.**\nUpdate Top Shelf content regularly -- ideally reflecting recently added, trending, or personalized content. Stale Top Shelf content signals an abandoned app.\n\n---\n\n## 5. Media & Playback (MEDIUM)\n\nApple TV is primarily a media consumption device. Playback interfaces must follow established TV conventions.\n\n### Rules\n\n**MEDIA-01: Use standard transport controls.**\nProvide play, pause, skip forward (10s), skip back (10s), and a scrubber timeline. Use `AVPlayerViewController` to get these for free with consistent behavior.\n\n**MEDIA-02: Show an info overlay on swipe-down during playback.**\nSwiping down during playback should reveal an info panel showing title, description, and metadata. Swiping down again or pressing Menu dismisses it.\n\n**MEDIA-03: Support scrubbing via the touch surface.**\nSwiping left\u002Fright on the touch surface during playback should scrub through the timeline. Show thumbnail previews during scrubbing when possible.\n\n**MEDIA-04: Support subtitles and alternative audio tracks.**\nProvide access to subtitle selection and audio track switching via the info overlay or the standard player controls.\n\n**MEDIA-05: Support Picture in Picture where appropriate.**\nFor video content, allow PiP so users can browse other content while watching. Implement `AVPictureInPictureController` integration.\n\n**MEDIA-06: Remember playback position.**\nWhen a user returns to previously watched content, resume from where they left off. Display a progress indicator on content thumbnails.\n\n**MEDIA-07: Handle interruptions gracefully.**\nIf the user presses the TV button or switches apps during playback, save position and pause cleanly. Resume without re-buffering when the user returns.\n\n---\n\n## 6. Tab Bar (MEDIUM)\n\nThe tvOS tab bar sits at the top of the screen, unlike iOS where it sits at the bottom. It provides primary navigation between app sections.\n\n### Rules\n\n**TAB-01: Place the tab bar at the top of the screen.**\nThis is the standard tvOS convention. Bottom tab bars are an iOS pattern and feel wrong on TV.\n\n**TAB-02: Tab bar should be translucent and overlay content.**\nThe tab bar floats over content with a blur effect. When the user focuses on the tab bar, content shifts down to make room.\n\n**TAB-03: Use 3-7 tabs.**\nFewer than 3 tabs suggests the app is too simple for tab navigation. More than 7 tabs becomes difficult to navigate with horizontal swiping.\n\n**TAB-04: Every tab must have a text label.**\nIcon-only tabs are insufficient at TV viewing distances. Text labels are required for clarity. Icons may accompany text but are not required.\n\n**TAB-05: Focus on the tab bar should feel lightweight.**\nWhen focus moves to the tab bar, it should appear smoothly. Content preview should be visible beneath the translucent bar. Switching tabs should update the content below immediately or show a loading state.\n\n**TAB-06: Remember the selected tab across app launches.**\nIf the user was on the \"Search\" tab when they left the app, return to \"Search\" when they re-open it.\n\n---\n\n## 7. Accessibility (CRITICAL)\n\nApple TV supports VoiceOver. Sighted users use focus navigation; VoiceOver users additionally hear spoken descriptions. Both must work.\n\n### Rules\n\n**ACCESS-01: Every interactive element must have a meaningful accessibility label.**\nIcon-only buttons and image cards must have labels. The focused item's name is announced by VoiceOver when focus arrives.\n\n**ACCESS-02: Provide accessibility hints for non-obvious interactions.**\nIf tapping a card does something other than opening the content (e.g., launching a trailer rather than full playback), describe this with an accessibility hint.\n\n**ACCESS-03: Ensure VoiceOver focus order matches visual focus order.**\nVoiceOver must traverse elements in the same order that focus engine navigation produces. Custom focus ordering via `UIFocusGuide` must not create discontinuities in the VoiceOver reading order.\n\n**ACCESS-04: Respect Reduce Motion.**\nParallax effects and other animations must be reduced or disabled when the user enables Reduce Motion in Accessibility settings.\n\n**ACCESS-05: Respond to Bold Text.**\nWhen the user enables Bold Text, custom-rendered text must adapt. SwiftUI dynamic type styles handle this automatically; custom text rendering must check `UIAccessibility.isBoldTextEnabled` or use `@Environment(\\.legibilityWeight)`.\n\n**ACCESS-06: Respond to Increase Contrast.**\nWhen the user enables Increase Contrast (Darker System Colors), custom colors must provide higher-contrast variants. Use `@Environment(\\.colorSchemeContrast)` in SwiftUI or `UIAccessibility.isDarkerSystemColorsEnabled` in UIKit to detect and apply appropriate values.\n\n**ACCESS-07: Respect Dynamic Type \u002F Larger Text.**\ntvOS supports the \"Larger Text\" accessibility setting via `UIContentSizeCategory`. Use SwiftUI semantic text styles (`Font.TextStyle`) so text scales automatically. For UIKit, scale custom fonts with `UIFontMetrics` relative to a base `UIFont.TextStyle`.\n\n**Correct:**\n```swift\n\u002F\u002F SwiftUI — semantic text styles scale with Larger Text automatically\nText(\"Now Playing\")\n    .font(.title2)        \u002F\u002F Scales with UIContentSizeCategory\nText(\"Episode description\")\n    .font(.body)          \u002F\u002F Scales with UIContentSizeCategory\n\n\u002F\u002F UIKit — scale custom font with UIFontMetrics\nlet baseFont = UIFont(name: \"CustomFont-Regular\", size: 29)!\nlet scaledFont = UIFontMetrics(forTextStyle: .body).scaledFont(for: baseFont)\nlabel.font = scaledFont\nlabel.adjustsFontForContentSizeCategory = true\n```\n\n**Incorrect:**\n```swift\n\u002F\u002F SwiftUI — hardcoded size ignores Larger Text preference\nText(\"Now Playing\")\n    .font(.system(size: 29)) \u002F\u002F Does not scale\n\n\u002F\u002F UIKit — hardcoded font ignores UIContentSizeCategory\nlabel.font = UIFont(name: \"CustomFont-Regular\", size: 29)\n\u002F\u002F Missing adjustsFontForContentSizeCategory = true\n```\n\n---\n\n## Evaluation Checklist\n\nUse this checklist when reviewing a tvOS app design or implementation.\n\n### Focus System\n- [ ] Every interactive element has a visible, distinct focus state\n- [ ] Focus movement is predictable in all directions\n- [ ] No focus traps exist anywhere in the app\n- [ ] Focus guides bridge layout gaps\n- [ ] Parallax effect is applied to content cards and icons\n- [ ] Default focus is set on every screen\n- [ ] Focus memory is preserved when navigating back\n\n### Siri Remote\n- [ ] Menu button navigates back on every screen\n- [ ] Play\u002FPause controls media playback globally\n- [ ] No complex gestures are required\n- [ ] Click feedback is immediate and visible\n- [ ] Siri\u002Fdictation supported for text input\n\n### 10-Foot UI\n- [ ] Body text is 29pt or larger\n- [ ] High contrast ratios on all text\n- [ ] Text content is concise, not paragraph-heavy\n- [ ] Imagery is high resolution and visually clear\n- [ ] Layout uses generous spacing with TV-safe margins\n- [ ] No thin fonts or hairline strokes\n\n### Top Shelf\n- [ ] Top Shelf extension provides dynamic content\n- [ ] All Top Shelf items deep-link correctly\n- [ ] Images are high quality and correctly sized\n- [ ] Content updates regularly\n\n### Media & Playback\n- [ ] Standard transport controls are available\n- [ ] Scrubbing works via touch surface\n- [ ] Subtitles and audio tracks are accessible\n- [ ] Playback position is remembered\n- [ ] Interruptions are handled gracefully\n\n### Tab Bar\n- [ ] Tab bar is at the top of the screen\n- [ ] Tabs have text labels\n- [ ] 3-7 tabs are used\n- [ ] Selected tab persists across launches\n\n### Accessibility\n- [ ] Every interactive element and content card has a meaningful accessibility label\n- [ ] Non-obvious interactions have accessibility hints\n- [ ] VoiceOver focus order matches the visual focus engine order\n- [ ] Parallax effects and decorative animations are disabled when Reduce Motion is enabled\n- [ ] Bold Text preference is respected (SwiftUI handles automatically; custom text checks `isBoldTextEnabled`)\n- [ ] Increase Contrast preference is respected (custom colors provide higher-contrast variants)\n- [ ] Larger Text (Dynamic Type) preference is respected (use `Font.TextStyle` in SwiftUI or `UIFontMetrics` in UIKit)\n\n---\n\n## Anti-Patterns for TV\n\n**Do not** bring mobile patterns directly to tvOS. The following are common mistakes:\n\n| Anti-Pattern | Why It Fails | Correct Approach |\n|-------------|-------------|-----------------|\n| Bottom tab bar | iOS convention; feels wrong on TV | Use top tab bar |\n| Small touch targets | Cannot precisely target with swipe navigation | Minimum 250x150pt cards |\n| Dense text screens | Unreadable at 10-foot distance | Headlines + short descriptions only |\n| Hamburger menus | No tap-to-reveal interaction on TV | Use tab bar or focus-driven menus |\n| Pull-to-refresh | No pull gesture on Siri Remote | Auto-refresh or explicit refresh button |\n| Toast notifications | Easy to miss on a large TV screen | Use modal alerts or persistent banners |\n| Scroll indicators | Thin scrollbars invisible at distance | Use content peek (partially visible next item) |\n| Pinch-to-zoom | Multi-finger gestures impossible on Siri Remote | Provide explicit zoom controls |\n| Long forms | Keyboard input is painful on tvOS | Pre-fill, use profiles, or offload to iPhone |\n| Thin\u002Flight typography | Disappears on TV displays | Medium weight minimum |\n",{"name":5,"license":15,"metadata":54,"description":7},{"author":55,"version":56},"platform-design-skills","1.0.0","main","7a940b8e5af16c95e5c190a524421d32fc7445a9",".agent\u002Fskills\u002Ftvos","https:\u002F\u002Fgithub.com\u002Fheadmktlucca-ui\u002Fneuroads-lp","https:\u002F\u002Fgithub.com\u002Fheadmktlucca-ui","https:\u002F\u002Fneuroads.com.br","2026-08-12 00:42:44",{"source":8,"skillName":5,"commands":65,"prompt":75,"zipAvailable":76},[66,69,72],{"tool":67,"command":68},"npx","npx skills add headmktlucca-ui\u002Fneuroads-lp --skill tvos-design-guidelines",{"tool":70,"command":71},"bunx","bunx skills add headmktlucca-ui\u002Fneuroads-lp --skill tvos-design-guidelines",{"tool":73,"command":74},"pnpm","pnpm dlx skills add headmktlucca-ui\u002Fneuroads-lp --skill tvos-design-guidelines","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fheadmktlucca-ui\u002Fneuroads-lp\u002Fblob\u002Fmain\u002F.agent\u002Fskills\u002Ftvos\u002FSKILL.md",true,[78,84,88],{"path":79,"resourceType":80,"resourceTypeDesc":81,"sizeBytes":82,"sourceHtmlUrl":83},"AGENTS.md","REFERENCE","参考文档",2022,"https:\u002F\u002Fgithub.com\u002Fheadmktlucca-ui\u002Fneuroads-lp\u002Fblob\u002Fmain\u002F.agent\u002Fskills\u002Ftvos\u002FAGENTS.md",{"path":85,"resourceType":80,"resourceTypeDesc":81,"sizeBytes":86,"sourceHtmlUrl":87},"metadata.json",645,"https:\u002F\u002Fgithub.com\u002Fheadmktlucca-ui\u002Fneuroads-lp\u002Fblob\u002Fmain\u002F.agent\u002Fskills\u002Ftvos\u002Fmetadata.json",{"path":89,"resourceType":80,"resourceTypeDesc":81,"sizeBytes":90,"sourceHtmlUrl":91},"rules\u002F_sections.md",7036,"https:\u002F\u002Fgithub.com\u002Fheadmktlucca-ui\u002Fneuroads-lp\u002Fblob\u002Fmain\u002F.agent\u002Fskills\u002Ftvos\u002Frules\u002F_sections.md",[93,115,137,161,179,205],{"skillNo":94,"name":95,"nameZh":6,"description":96,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":97,"categories":98,"keywords":105,"publishedAt":49},"01M6PTDCZTXTGSTX4RFK901YSZ","xunit-skill","Generates xUnit.net tests in C#. Covers Fact\u002FTheory, constructor injection, IClassFixture, and FluentAssertions. Use when user mentions \"xUnit\", \"[Fact]\", \"[Theory]\", \"Assert.Equal\", \"C# xUnit\". Triggers on: \"xUnit\", \"[Fact]\", \"[Theory]\", \"Assert.Equal C#\", \"xUnit.net\".","https:\u002F\u002Fgithub.com\u002Fheadmktlucca-ui\u002Fneuroads-lp\u002Fblob\u002Fmain\u002F.claude\u002Fskills\u002Fxunit-skill\u002FSKILL.md",[99,102],{"categoryNo":100,"categoryName":101,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000008","测试与质量",{"categoryNo":103,"categoryName":104,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000023","Skill与智能体开发",[106,107,108,109,110,45,111,40,112,113,114],"xunit","xunit skill","testing","injection","user","tests","unit","unit-testing","C#",{"skillNo":116,"name":117,"nameZh":6,"description":118,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":119,"categories":120,"keywords":123,"publishedAt":49},"01M6PTCB59ZTG5FTMWGPYEMMBP","xcuitest-skill","Generates XCUITest UI tests for iOS\u002FiPadOS apps in Swift. Apple's native testing framework for reliable, fast UI automation. Supports local simulators and TestMu AI cloud real devices. Use when user mentions \"XCUITest\", \"XCTest\", \"iOS UI test\", \"Swift test\", \"XCUIApplication\". Triggers on: \"XCUITest\", \"XCTest UI\", \"iOS UI test\", \"Swift UI test\", \"XCUIApplication\", \"TestMu\".","https:\u002F\u002Fgithub.com\u002Fheadmktlucca-ui\u002Fneuroads-lp\u002Fblob\u002Fmain\u002F.claude\u002Fskills\u002Fxcuitest-skill\u002FSKILL.md",[121,122],{"categoryNo":100,"categoryName":101,"taxonomyType":21,"taxonomyTypeDesc":22},{"categoryNo":103,"categoryName":104,"taxonomyType":21,"taxonomyTypeDesc":22},[124,125,108,126,127,128,129,130,45,131,132,133,134,42,111,40,39,135,33,136],"xcuitest","xcuitest skill","automation","test","testing framework","ios","devices","mobile","mobile-testing","ui test","local","native","objective",{"skillNo":138,"name":139,"nameZh":6,"description":140,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":141,"categories":142,"keywords":145,"publishedAt":49},"01M6PTATMNTY9NF4J7KSR76YK6","world-builder","Create and manage generative game zones for Dorothy's Pokemon-style world. Use this skill when creating, updating, or designing game worlds via MCP tools.","https:\u002F\u002Fgithub.com\u002Fheadmktlucca-ui\u002Fneuroads-lp\u002Fblob\u002Fmain\u002F.claude\u002Fskills\u002Fworld-builder\u002FSKILL.md",[143,144],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},{"categoryNo":103,"categoryName":104,"taxonomyType":21,"taxonomyTypeDesc":22},[146,147,148,149,150,151,152,153,45,154,155,156,157,158,159,33,160],"builder","world","world builder","MCP","create","mcp tools","Tools","game","pokemon","manage","style","via","theme","zone","generative",{"skillNo":162,"name":163,"nameZh":6,"description":164,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":165,"categories":166,"keywords":169,"publishedAt":49},"01M6PT9Z92JTSQEHE1QR0NNW5F","webdriverio-skill","Generates WebdriverIO (WDIO) automation tests in JavaScript or TypeScript. Supports local and TestMu AI cloud. Use when user mentions \"WebdriverIO\", \"WDIO\", \"wdio.conf\", \"browser.url\", \"$\", \"$$\". Triggers on: \"WebdriverIO\", \"WDIO\", \"wdio\", \"browser.$\".","https:\u002F\u002Fgithub.com\u002Fheadmktlucca-ui\u002Fneuroads-lp\u002Fblob\u002Fmain\u002F.claude\u002Fskills\u002Fwebdriverio-skill\u002FSKILL.md",[167,168],{"categoryNo":100,"categoryName":101,"taxonomyType":21,"taxonomyTypeDesc":22},{"categoryNo":103,"categoryName":104,"taxonomyType":21,"taxonomyTypeDesc":22},[170,108,171,126,172,173,174,175,110,45,176,134,111,40,177,178],"webdriverio skill","typescript","javascript","browser","cloud","e2e","e2e-testing","URL","conf",{"skillNo":180,"name":181,"nameZh":6,"description":182,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":183,"categories":184,"keywords":190,"publishedAt":49},"01M6PT9NVK36ZWCQ69YXK3FR4K","web-design-guidelines","Web platform design and accessibility guidelines. Use when building web interfaces, auditing accessibility, implementing responsive layouts, or reviewing web UI code. Triggers on tasks involving HTML, CSS, web components, WCAG compliance, responsive design, or web performance.","https:\u002F\u002Fgithub.com\u002Fheadmktlucca-ui\u002Fneuroads-lp\u002Fblob\u002Fmain\u002F.claude\u002Fskills\u002Fweb\u002FSKILL.md",[185,188,189],{"categoryNo":186,"categoryName":187,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000009","前端开发",{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},{"categoryNo":24,"categoryName":25,"taxonomyType":26,"taxonomyTypeDesc":27},[30,191,29,192,193,194,195,196,197,48,198,199,47,200,201,202,203,41,40,204],"web","web design guidelines","web design","css","performance","components","web components","code","web performance","platform design","html","responsive design","responsive","implementing",{"skillNo":206,"name":207,"nameZh":6,"description":208,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":209,"categories":210,"keywords":213,"publishedAt":49},"01M6PT9A3JKRE3X34276F2FW5R","watchos-design-guidelines","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.","https:\u002F\u002Fgithub.com\u002Fheadmktlucca-ui\u002Fneuroads-lp\u002Fblob\u002Fmain\u002F.claude\u002Fskills\u002Fwatchos\u002FSKILL.md",[211,212],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},{"categoryNo":24,"categoryName":25,"taxonomyType":26,"taxonomyTypeDesc":27},[30,29,214,48,47,45,215,43,42,41,216,40,39,35,33,32,217],"watchos design guidelines","workout","watch","features"]