{"id":"e21fa9ae-da55-49dd-82e3-77f0ece17ac1","shortId":"fH37tX","kind":"skill","title":"hig-components-content","tagline":">-","description":"# Apple HIG: Content Components\n\nCheck for `.claude/apple-design-context.md` before asking questions. Use existing context and only ask for information not already covered.\n\n## Key Principles\n\n1. **Adapt to different sizes and contexts.** Content components must work across screen sizes, orientations, and multitasking configurations. Use Auto Layout and size classes.\n\n2. **Make content accessible.** Charts need audio graph support. Images need alt text. Collections need proper VoiceOver navigation order. All content components need labels and descriptions.\n\n3. **Maintain visual hierarchy.** Use spacing, sizing, and grouping to establish clear information hierarchy. Primary content should be visually prominent.\n\n4. **Use system components first.** Evaluate UICollectionView, SwiftUI Charts, WKWebView before building custom. System components come with built-in accessibility and platform adaptation.\n\n5. **Respect platform conventions.** A collection on tvOS uses large lockups with parallax. The same collection on iOS uses compact cells with touch targets. On visionOS, content gains depth and hover effects.\n\n6. **Handle empty states.** Show a meaningful empty state with guidance on how to populate it, not a blank screen.\n\n7. **Optimize for performance.** Use lazy loading, cell reuse, pagination, and prefetching for large datasets.\n\n## Reference Index\n\n| Reference | Topic | Key content |\n|---|---|---|\n| [charts.md](references/charts.md) | Charts | Swift Charts, bar/line/area/point marks, chart accessibility, audio graphs |\n| [collections.md](references/collections.md) | Collections | Grid/list layouts, compositional layout, selection, reordering, diffable data sources |\n| [image-views.md](references/image-views.md) | Image Views | Aspect ratio handling, content modes, SF Symbol images, accessibility |\n| [image-wells.md](references/image-wells.md) | Image Wells | Drag-and-drop image selection, macOS-specific, placeholder content |\n| [color-wells.md](references/color-wells.md) | Color Wells | Color selection UI, system color picker, custom color spaces |\n| [web-views.md](references/web-views.md) | Web Views | WKWebView, SFSafariViewController, navigation controls, content restrictions |\n| [activity-views.md](references/activity-views.md) | Activity Views | Share sheets, activity items, custom activities, action extensions |\n| [lockups.md](references/lockups.md) | Lockups | Image+text elements, tvOS card layouts, focus effects, shelf layouts |\n\n## Component Selection Guide\n\n| Content Need | Recommended Component | Platform Notes |\n|---|---|---|\n| Visualizing quantitative data | Charts (Swift Charts) | iOS 16+, macOS 13+, watchOS 9+ |\n| Browsing a grid or list of items | Collection View | Compositional layout for complex arrangements |\n| Displaying a single image | Image View | Support aspect ratio fitting; provide accessibility description |\n| Selecting an image via drag or browse | Image Well | macOS primarily; use image pickers on iOS |\n| Selecting a color | Color Well | Triggers system color picker; macOS, iOS 14+ |\n| Showing web content inline | Web View (WKWebView) | Use SFSafariViewController for external browsing |\n| Sharing content to other apps | Activity View | System share sheet with configurable activity types |\n| Content card (image + text) | Lockup | Primarily tvOS; adaptable to other platforms |\n\n## Output Format\n\n1. **Component recommendation with rationale**, referencing the relevant HIG reference file.\n2. **Configuration guidance** -- key properties and setup.\n3. **Accessibility requirements** for the recommended component.\n4. **Platform-specific notes** for targeted platforms.\n\n## Questions to Ask\n\n1. What type of content? (Quantitative data, images, web content, browsable collection, share action?)\n2. Which platforms?\n3. Static or dynamic content?\n4. How much content? (Few items vs hundreds/thousands affects component choice and optimization.)\n\n## Related Skills\n\n- **hig-foundations** -- Color, typography, accessibility, and image guidelines\n- **hig-patterns** -- Data visualization, sharing, and loading patterns\n- **hig-components-layout** -- Structural containers (scroll views, lists, split views) hosting content\n- **hig-platforms** -- Platform-specific component behavior (lockups on tvOS, web views on macOS)\n\n---\n\n*Built by [Raintree Technology](https://raintree.technology) · [More developer tools](https://raintree.technology)*","tags":["hig","components","content","doctor","raintree-technology","accessibility","agent-skills","ai-agents","apple","apple-design","audit","claude-code"],"capabilities":["skill","source-raintree-technology","skill-hig-components-content","topic-accessibility","topic-agent-skills","topic-ai-agents","topic-apple","topic-apple-design","topic-audit","topic-claude-code","topic-cursor","topic-hig","topic-ios","topic-macos","topic-skills"],"categories":["hig-doctor"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/raintree-technology/hig-doctor/hig-components-content","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add raintree-technology/hig-doctor","source_repo":"https://github.com/raintree-technology/hig-doctor","install_from":"skills.sh"}},"qualityScore":"0.472","qualityRationale":"deterministic score 0.47 from registry signals: · indexed on github topic:agent-skills · 45 github stars · SKILL.md body (4,423 chars)","verified":false,"liveness":"unknown","lastLivenessCheck":null,"agentReviews":{"count":0,"score_avg":null,"cost_usd_avg":null,"success_rate":null,"latency_p50_ms":null,"narrative_summary":null,"summary_updated_at":null},"enrichmentModel":"deterministic:skill-github:v1","enrichmentVersion":1,"enrichedAt":"2026-05-02T00:57:09.056Z","embedding":null,"createdAt":"2026-04-18T22:18:03.806Z","updatedAt":"2026-05-02T00:57:09.056Z","lastSeenAt":"2026-05-02T00:57:09.056Z","tsv":"'1':28,409,445 '13':312 '14':369 '16':310 '2':52,420,459 '3':78,427,462 '4':98,434,467 '5':122 '6':154 '7':174 '9':314 'access':55,118,203,230,340,428,487 'across':39 'action':279,458 'activ':271,275,278,387,394 'activity-views.md':269 'adapt':29,121,403 'affect':475 'alreadi':24 'alt':63 'app':386 'appl':5 'arrang':328 'ask':13,20,444 'aspect':222,336 'audio':58,204 'auto':47 'bar/line/area/point':200 'behavior':520 'blank':172 'brows':315,348,381 'browsabl':455 'build':109 'built':116,528 'built-in':115 'card':288,397 'cell':142,181 'chart':56,106,197,199,202,306,308 'charts.md':195 'check':9 'choic':477 'class':51 'claude/apple-design-context.md':11 'clear':89 'collect':65,127,137,208,322,456 'collections.md':206 'color':248,250,254,257,360,361,365,485 'color-wells.md':246 'come':113 'compact':141 'complex':327 'compon':3,8,36,73,101,112,294,300,410,433,476,502,519 'composit':211,324 'configur':45,393,421 'contain':505 'content':4,7,35,54,72,93,148,194,225,245,267,297,372,383,396,449,454,466,470,512 'context':17,34 'control':266 'convent':125 'cover':25 'custom':110,256,277 'data':216,305,451,494 'dataset':188 'depth':150 'descript':77,341 'develop':534 'diffabl':215 'differ':31 'display':329 'drag':236,346 'drag-and-drop':235 'drop':238 'dynam':465 'effect':153,291 'element':286 'empti':156,161 'establish':88 'evalu':103 'exist':16 'extens':280 'extern':380 'file':419 'first':102 'fit':338 'focus':290 'format':408 'foundat':484 'gain':149 'graph':59,205 'grid':317 'grid/list':209 'group':86 'guid':296 'guidanc':164,422 'guidelin':490 'handl':155,224 'hierarchi':81,91 'hig':2,6,417,483,492,501,514 'hig-components-cont':1 'hig-components-layout':500 'hig-found':482 'hig-pattern':491 'hig-platform':513 'host':511 'hover':152 'hundreds/thousands':474 'imag':61,220,229,233,239,284,332,333,344,349,354,398,452,489 'image-views.md':218 'image-wells.md':231 'index':190 'inform':22,90 'inlin':373 'io':139,309,357,368 'item':276,321,472 'key':26,193,423 'label':75 'larg':131,187 'layout':48,210,212,289,293,325,503 'lazi':179 'list':319,508 'load':180,498 'lockup':132,283,400,521 'lockups.md':281 'maco':242,311,351,367,527 'macos-specif':241 'maintain':79 'make':53 'mark':201 'meaning':160 'mode':226 'much':469 'multitask':44 'must':37 'navig':69,265 'need':57,62,66,74,298 'note':302,438 'optim':175,479 'order':70 'orient':42 'output':407 'pagin':183 'parallax':134 'pattern':493,499 'perform':177 'picker':255,355,366 'placehold':244 'platform':120,124,301,406,436,441,461,515,517 'platform-specif':435,516 'popul':168 'prefetch':185 'primari':92 'primarili':352,401 'principl':27 'promin':97 'proper':67 'properti':424 'provid':339 'quantit':304,450 'question':14,442 'raintre':530 'raintree.technology':532,536 'ratio':223,337 'rational':413 'recommend':299,411,432 'refer':189,191,418 'referenc':414 'references/activity-views.md':270 'references/charts.md':196 'references/collections.md':207 'references/color-wells.md':247 'references/image-views.md':219 'references/image-wells.md':232 'references/lockups.md':282 'references/web-views.md':260 'relat':480 'relev':416 'reorder':214 'requir':429 'respect':123 'restrict':268 'reus':182 'screen':40,173 'scroll':506 'select':213,240,251,295,342,358 'setup':426 'sf':227 'sfsafariviewcontrol':264,378 'share':273,382,390,457,496 'sheet':274,391 'shelf':292 'show':158,370 'singl':331 'size':32,41,50,84 'skill':481 'skill-hig-components-content' 'sourc':217 'source-raintree-technology' 'space':83,258 'specif':243,437,518 'split':509 'state':157,162 'static':463 'structur':504 'support':60,335 'swift':198,307 'swiftui':105 'symbol':228 'system':100,111,253,364,389 'target':145,440 'technolog':531 'text':64,285,399 'tool':535 'topic':192 'topic-accessibility' 'topic-agent-skills' 'topic-ai-agents' 'topic-apple' 'topic-apple-design' 'topic-audit' 'topic-claude-code' 'topic-cursor' 'topic-hig' 'topic-ios' 'topic-macos' 'topic-skills' 'touch':144 'trigger':363 'tvos':129,287,402,523 'type':395,447 'typographi':486 'ui':252 'uicollectionview':104 'use':15,46,82,99,130,140,178,353,377 'via':345 'view':221,262,272,323,334,375,388,507,510,525 'visiono':147 'visual':80,96,303,495 'voiceov':68 'vs':473 'watcho':313 'web':261,371,374,453,524 'web-views.md':259 'well':234,249,350,362 'wkwebview':107,263,376 'work':38","prices":[{"id":"d3610148-1c8a-44a3-8627-e62d84929125","listingId":"e21fa9ae-da55-49dd-82e3-77f0ece17ac1","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"raintree-technology","category":"hig-doctor","install_from":"skills.sh"},"createdAt":"2026-04-18T22:18:03.806Z"}],"sources":[{"listingId":"e21fa9ae-da55-49dd-82e3-77f0ece17ac1","source":"github","sourceId":"raintree-technology/hig-doctor/hig-components-content","sourceUrl":"https://github.com/raintree-technology/hig-doctor/tree/main/skills/hig-components-content","isPrimary":false,"firstSeenAt":"2026-04-18T22:18:03.806Z","lastSeenAt":"2026-05-02T00:57:09.056Z"}],"details":{"listingId":"e21fa9ae-da55-49dd-82e3-77f0ece17ac1","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"raintree-technology","slug":"hig-components-content","github":{"repo":"raintree-technology/hig-doctor","stars":45,"topics":["accessibility","agent-skills","ai-agents","apple","apple-design","audit","claude-code","cursor","hig","human-interface-guidelines","ios","macos","skills","swiftui","tvos","uikit","visionos","watchos"],"license":"other","html_url":"https://github.com/raintree-technology/hig-doctor","pushed_at":"2026-04-28T22:36:54Z","description":"Apple HIG audit CLI + 14 agent skills for AI coding assistants — score any project for HIG compliance across 12 frameworks","skill_md_sha":"2f653f1f624105c8f0b919cb7cf373d848bdafb9","skill_md_path":"skills/hig-components-content/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/raintree-technology/hig-doctor/tree/main/skills/hig-components-content"},"layout":"multi","source":"github","category":"hig-doctor","frontmatter":{"name":"hig-components-content","description":">-"},"skills_sh_url":"https://skills.sh/raintree-technology/hig-doctor/hig-components-content"},"updatedAt":"2026-05-02T00:57:09.056Z"}}