hig-components-content
About
This Claude Skill provides Apple's Human Interface Guidelines for content display components like image views, web views, collection views, and activity views. Use it when developers ask about implementing charts, displaying media, rendering web content, or presenting collections in Apple apps. It references related skills for foundations, patterns, and platform-specific behavior.
Quick Install
Claude Code
Recommendednpx skills add raintree-technology/claude-starter -a claude-code/plugin add https://github.com/raintree-technology/claude-startergit clone https://github.com/raintree-technology/claude-starter.git ~/.claude/skills/hig-components-contentCopy and paste this command in Claude Code to install this skill
Documentation
Apple HIG: Content Components
Check for .claude/apple-design-context.md before asking questions. Use existing context and only ask for information not already covered.
Key Principles
-
Adapt to different sizes and contexts. Content components must work across screen sizes, orientations, and multitasking configurations. Use Auto Layout and size classes.
-
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.
-
Maintain visual hierarchy. Use spacing, sizing, and grouping to establish clear information hierarchy. Primary content should be visually prominent.
-
Use system components first. Evaluate UICollectionView, SwiftUI Charts, WKWebView before building custom. System components come with built-in accessibility and platform adaptation.
-
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.
-
Handle empty states. Show a meaningful empty state with guidance on how to populate it, not a blank screen.
-
Optimize for performance. Use lazy loading, cell reuse, pagination, and prefetching for large datasets.
Reference Index
| Reference | Topic | Key content |
|---|---|---|
| charts.md | Charts | Swift Charts, bar/line/area/point marks, chart accessibility, audio graphs |
| collections.md | Collections | Grid/list layouts, compositional layout, selection, reordering, diffable data sources |
| image-views.md | Image Views | Aspect ratio handling, content modes, SF Symbol images, accessibility |
| image-wells.md | Image Wells | Drag-and-drop image selection, macOS-specific, placeholder content |
| color-wells.md | Color Wells | Color selection UI, system color picker, custom color spaces |
| web-views.md | Web Views | WKWebView, SFSafariViewController, navigation controls, content restrictions |
| activity-views.md | Activity Views | Share sheets, activity items, custom activities, action extensions |
| lockups.md | Lockups | Image+text elements, tvOS card layouts, focus effects, shelf layouts |
Component Selection Guide
| Content Need | Recommended Component | Platform Notes |
|---|---|---|
| Visualizing quantitative data | Charts (Swift Charts) | iOS 16+, macOS 13+, watchOS 9+ |
| Browsing a grid or list of items | Collection View | Compositional layout for complex arrangements |
| Displaying a single image | Image View | Support aspect ratio fitting; provide accessibility description |
| Selecting an image via drag or browse | Image Well | macOS primarily; use image pickers on iOS |
| Selecting a color | Color Well | Triggers system color picker; macOS, iOS 14+ |
| Showing web content inline | Web View (WKWebView) | Use SFSafariViewController for external browsing |
| Sharing content to other apps | Activity View | System share sheet with configurable activity types |
| Content card (image + text) | Lockup | Primarily tvOS; adaptable to other platforms |
Output Format
- Component recommendation with rationale, referencing the relevant HIG reference file.
- Configuration guidance -- key properties and setup.
- Accessibility requirements for the recommended component.
- Platform-specific notes for targeted platforms.
Questions to Ask
- What type of content? (Quantitative data, images, web content, browsable collection, share action?)
- Which platforms?
- Static or dynamic content?
- How much content? (Few items vs hundreds/thousands affects component choice and optimization.)
Related Skills
- hig-foundations -- Color, typography, accessibility, and image guidelines
- hig-patterns -- Data visualization, sharing, and loading patterns
- hig-components-layout -- Structural containers (scroll views, lists, split views) hosting content
- hig-platforms -- Platform-specific component behavior (lockups on tvOS, web views on macOS)
Built by Raintree Technology · More developer tools
GitHub Repository
Frequently asked questions
What is the hig-components-content skill?
hig-components-content is a Claude Skill by raintree-technology. Skills package instructions and resources that Claude loads on demand, so Claude can perform hig-components-content-related tasks without extra prompting.
How do I install hig-components-content?
Use the install commands on this page: add hig-components-content to Claude Code as a plugin, or clone its repository into your skills directory, then restart Claude so it picks up the skill.
What category does hig-components-content belong to?
hig-components-content is in the Meta category, tagged ai, design and data.
Is hig-components-content free to use?
Yes. hig-components-content is listed on AIMCP and free to install. It runs inside Claude, so no separate service account is required to use the skill itself.
Related Skills
This skill provides a production-tested setup for Content Collections, a TypeScript-first tool that transforms Markdown/MDX files into type-safe data collections with Zod validation. Use it when building blogs, documentation sites, or content-heavy Vite + React applications to ensure type safety and automatic content validation. It covers everything from Vite plugin configuration and MDX compilation to deployment optimization and schema validation.
This skill enables developers to build applications with the Polymarket prediction markets platform, including API integration for trading and market data. It also provides real-time data streaming via WebSocket to monitor live trades and market activity. Use it for implementing trading strategies or creating tools that process live market updates.
This skill helps developers create OpenCode plugins that hook into 25+ event types like commands, files, and LSP operations. It provides the plugin structure, event API specifications, and implementation patterns for JavaScript/TypeScript modules. Use it when you need to intercept, monitor, or extend the OpenCode AI assistant's lifecycle with custom event-driven logic.
SGLang is a high-performance LLM serving framework that specializes in fast, structured generation for JSON, regex, and agentic workflows using its RadixAttention prefix caching. It delivers significantly faster inference, especially for tasks with repeated prefixes, making it ideal for complex, structured outputs and multi-turn conversations. Choose SGLang over alternatives like vLLM when you need constrained decoding or are building applications with extensive prefix sharing.