{"id":"f2d65574-8c1d-4582-8a9c-367e4acf5acd","shortId":"ezdYMR","kind":"skill","title":"hig-components-content","tagline":"Apple Human Interface Guidelines for content display components.","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)*\n\n## When to Use\nThis skill is applicable to execute the workflow or actions described in the overview.\n\n## Limitations\n- Use this skill only when the task clearly matches the scope described above.\n- Do not treat the output as a substitute for environment-specific validation, testing, or expert review.\n- Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.","tags":["hig","components","content","antigravity","awesome","skills","sickn33","agent-skills","agentic-skills","ai-agent-skills","ai-agents","ai-coding"],"capabilities":["skill","source-sickn33","skill-hig-components-content","topic-agent-skills","topic-agentic-skills","topic-ai-agent-skills","topic-ai-agents","topic-ai-coding","topic-ai-workflows","topic-antigravity","topic-antigravity-skills","topic-claude-code","topic-claude-code-skills","topic-codex-cli","topic-codex-skills"],"categories":["antigravity-awesome-skills"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/sickn33/antigravity-awesome-skills/hig-components-content","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add sickn33/antigravity-awesome-skills","source_repo":"https://github.com/sickn33/antigravity-awesome-skills","install_from":"skills.sh"}},"qualityScore":"0.700","qualityRationale":"deterministic score 0.70 from registry signals: · indexed on github topic:agent-skills · 34768 github stars · SKILL.md body (4,845 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-04-23T18:51:26.615Z","embedding":null,"createdAt":"2026-04-18T21:38:25.417Z","updatedAt":"2026-04-23T18:51:26.615Z","lastSeenAt":"2026-04-23T18:51:26.615Z","tsv":"'1':36,417,453 '13':320 '14':377 '16':318 '2':60,428,467 '3':86,435,470 '4':106,442,475 '5':130 '6':162 '7':182 '9':322 'access':63,126,211,238,348,436,495 'across':47 'action':287,466,557 'activ':279,283,286,395,402 'activity-views.md':277 'adapt':37,129,411 'affect':483 'alreadi':32 'alt':71 'app':394 'appl':5,13 'applic':551 'arrang':336 'ask':21,28,452,595 'aspect':230,344 'audio':66,212 'auto':55 'bar/line/area/point':208 'behavior':528 'blank':180 'boundari':603 'brows':323,356,389 'browsabl':463 'build':117 'built':124,536 'built-in':123 'card':296,405 'cell':150,189 'chart':64,114,205,207,210,314,316 'charts.md':203 'check':17 'choic':485 'clarif':597 'class':59 'claude/apple-design-context.md':19 'clear':97,570 'collect':73,135,145,216,330,464 'collections.md':214 'color':256,258,262,265,368,369,373,493 'color-wells.md':254 'come':121 'compact':149 'complex':335 'compon':3,12,16,44,81,109,120,302,308,418,441,484,510,527 'composit':219,332 'configur':53,401,429 'contain':513 'content':4,10,15,43,62,80,101,156,202,233,253,275,305,380,391,404,457,462,474,478,520 'context':25,42 'control':274 'convent':133 'cover':33 'criteria':606 'custom':118,264,285 'data':224,313,459,502 'dataset':196 'depth':158 'describ':558,574 'descript':85,349 'develop':542 'diffabl':223 'differ':39 'display':11,337 'drag':244,354 'drag-and-drop':243 'drop':246 'dynam':473 'effect':161,299 'element':294 'empti':164,169 'environ':586 'environment-specif':585 'establish':96 'evalu':111 'execut':553 'exist':24 'expert':591 'extens':288 'extern':388 'file':427 'first':110 'fit':346 'focus':298 'format':416 'foundat':492 'gain':157 'graph':67,213 'grid':325 'grid/list':217 'group':94 'guid':304 'guidanc':172,430 'guidelin':8,498 'handl':163,232 'hierarchi':89,99 'hig':2,14,425,491,500,509,522 'hig-components-cont':1 'hig-components-layout':508 'hig-found':490 'hig-pattern':499 'hig-platform':521 'host':519 'hover':160 'human':6 'hundreds/thousands':482 'imag':69,228,237,241,247,292,340,341,352,357,362,406,460,497 'image-views.md':226 'image-wells.md':239 'index':198 'inform':30,98 'inlin':381 'input':600 'interfac':7 'io':147,317,365,376 'item':284,329,480 'key':34,201,431 'label':83 'larg':139,195 'layout':56,218,220,297,301,333,511 'lazi':187 'limit':562 'list':327,516 'load':188,506 'lockup':140,291,408,529 'lockups.md':289 'maco':250,319,359,375,535 'macos-specif':249 'maintain':87 'make':61 'mark':209 'match':571 'meaning':168 'miss':608 'mode':234 'much':477 'multitask':52 'must':45 'navig':77,273 'need':65,70,74,82,306 'note':310,446 'optim':183,487 'order':78 'orient':50 'output':415,580 'overview':561 'pagin':191 'parallax':142 'pattern':501,507 'perform':185 'permiss':601 'picker':263,363,374 'placehold':252 'platform':128,132,309,414,444,449,469,523,525 'platform-specif':443,524 'popul':176 'prefetch':193 'primari':100 'primarili':360,409 'principl':35 'promin':105 'proper':75 'properti':432 'provid':347 'quantit':312,458 'question':22,450 'raintre':538 'raintree.technology':540,544 'ratio':231,345 'rational':421 'recommend':307,419,440 'refer':197,199,426 'referenc':422 'references/activity-views.md':278 'references/charts.md':204 'references/collections.md':215 'references/color-wells.md':255 'references/image-views.md':227 'references/image-wells.md':240 'references/lockups.md':290 'references/web-views.md':268 'relat':488 'relev':424 'reorder':222 'requir':437,599 'respect':131 'restrict':276 'reus':190 'review':592 'safeti':602 'scope':573 'screen':48,181 'scroll':514 'select':221,248,259,303,350,366 'setup':434 'sf':235 'sfsafariviewcontrol':272,386 'share':281,390,398,465,504 'sheet':282,399 'shelf':300 'show':166,378 'singl':339 'size':40,49,58,92 'skill':489,549,565 'skill-hig-components-content' 'sourc':225 'source-sickn33' 'space':91,266 'specif':251,445,526,587 'split':517 'state':165,170 'static':471 'stop':593 'structur':512 'substitut':583 'success':605 'support':68,343 'swift':206,315 'swiftui':113 'symbol':236 'system':108,119,261,372,397 'target':153,448 'task':569 'technolog':539 'test':589 'text':72,293,407 'tool':543 'topic':200 'topic-agent-skills' 'topic-agentic-skills' 'topic-ai-agent-skills' 'topic-ai-agents' 'topic-ai-coding' 'topic-ai-workflows' 'topic-antigravity' 'topic-antigravity-skills' 'topic-claude-code' 'topic-claude-code-skills' 'topic-codex-cli' 'topic-codex-skills' 'touch':152 'treat':578 'trigger':371 'tvos':137,295,410,531 'type':403,455 'typographi':494 'ui':260 'uicollectionview':112 'use':23,54,90,107,138,148,186,361,385,547,563 'valid':588 'via':353 'view':229,270,280,331,342,383,396,515,518,533 'visiono':155 'visual':88,104,311,503 'voiceov':76 'vs':481 'watcho':321 'web':269,379,382,461,532 'web-views.md':267 'well':242,257,358,370 'wkwebview':115,271,384 'work':46 'workflow':555","prices":[{"id":"41abadea-740c-4bce-a655-f6bddfca8e78","listingId":"f2d65574-8c1d-4582-8a9c-367e4acf5acd","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"sickn33","category":"antigravity-awesome-skills","install_from":"skills.sh"},"createdAt":"2026-04-18T21:38:25.417Z"}],"sources":[{"listingId":"f2d65574-8c1d-4582-8a9c-367e4acf5acd","source":"github","sourceId":"sickn33/antigravity-awesome-skills/hig-components-content","sourceUrl":"https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/hig-components-content","isPrimary":false,"firstSeenAt":"2026-04-18T21:38:25.417Z","lastSeenAt":"2026-04-23T18:51:26.615Z"}],"details":{"listingId":"f2d65574-8c1d-4582-8a9c-367e4acf5acd","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"sickn33","slug":"hig-components-content","github":{"repo":"sickn33/antigravity-awesome-skills","stars":34768,"topics":["agent-skills","agentic-skills","ai-agent-skills","ai-agents","ai-coding","ai-workflows","antigravity","antigravity-skills","claude-code","claude-code-skills","codex-cli","codex-skills","cursor","cursor-skills","developer-tools","gemini-cli","gemini-skills","kiro","mcp","skill-library"],"license":"mit","html_url":"https://github.com/sickn33/antigravity-awesome-skills","pushed_at":"2026-04-23T06:41:03Z","description":"Installable GitHub library of 1,400+ agentic skills for Claude Code, Cursor, Codex CLI, Gemini CLI, Antigravity, and more. Includes installer CLI, bundles, workflows, and official/community skill collections.","skill_md_sha":"c78b98ef5c84e6549bdd66c16e8b36cb9ec0960b","skill_md_path":"skills/hig-components-content/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/hig-components-content"},"layout":"multi","source":"github","category":"antigravity-awesome-skills","frontmatter":{"name":"hig-components-content","description":"Apple Human Interface Guidelines for content display components."},"skills_sh_url":"https://skills.sh/sickn33/antigravity-awesome-skills/hig-components-content"},"updatedAt":"2026-04-23T18:51:26.615Z"}}