hig-components-content
Helps your agent follow Apple's guidelines for displaying content. It's useful for creating beautiful and easy-to-use interfaces.
What it does
This tool helps you choose the right components for displaying information in Apple apps, following design guidelines. It suggests how to present data, images, or web content clearly and accessibly.
When to use it
- ✓When deciding how to show charts in an app.
- ✓When choosing how to display a list of items.
- ✓When needing help to present web content.
Example of what to ask your AI
“I need to show a sales chart in an iPhone app. Which component should I use?”
Want more? Open the sections below.
How to use
The easiest way: copy the message below and paste it into Claude, ChatGPT, Cursor or any AI. It reads the skill and follows the instructions.
Skill link
Ready-to-paste message
How it works
The tool compares what you want to show with Apple's recommended design components. It considers the content type and platform to suggest the best option.
Installation
Easiest way: copy the skill link and paste it into Claude, ChatGPT or Cursor asking it to follow the instructions.
In the terminal (Claude Code, Codex, Cursor), in your project folder:
npx skills add sickn33/agentic-awesome-skills --skill hig-components-contentOr download just the file:
curl -L https://raw.githubusercontent.com/sickn33/agentic-awesome-skills/main/plugins/agentic-awesome-skills-claude/skills/hig-components-content/SKILL.md -o SKILL.mdTechnical content (original SKILL.md)
Original text by the author, straight from GitHub.
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
When to Use
…
FAQ
What are 'content components'?
These are the visual building blocks you use to display information in an app, like charts, image lists, or text.
Why follow Apple's guidelines?
Following the guidelines ensures your app looks familiar, is easy to use, and works well across all Apple devices.
Does the tool help me create the design?
No, it helps select the right component. The actual visual design still needs to be done by a designer or developer.
Details
Original description by the author
Apple Human Interface Guidelines for content display components.
Popularity
- GitHub stars
- 48k
- Ranking position
- #3196
- License
- MIT
- Updated
- 10/15/2026
Comments
- …
More skills from this repository
00-andruia-consultant
Helps your agent start or improve AI projects. It analyzes code, suggests tools, and creates action plans in Spanish.
sickn33/agentic-awesome-skills
007
Lets your agent perform security audits and threat modeling. It's useful for protecting projects against attacks and vulnerabilities.
sickn33/agentic-awesome-skills
10-andruia-skill-smith
Helps your agent create or improve AI tools. It defines how tools work, writes documentation, and validates the structure.
sickn33/agentic-awesome-skills
20-andruia-niche-intelligence
Lets your agent create a summary about a specific industry. It's useful for understanding the context, rules, usage patterns, and risks of a project, using reliable sources.
sickn33/agentic-awesome-skills
Similar skills
accessibility
Helps your agent create interfaces that everyone can use. Ensures websites and apps work well for people with disabilities, like those who are blind or have reduced mobility.
affaan-m/ECC
design-system
Helps your agent create a design system from existing code. It extracts visual information and checks for consistency, generating a report and an interactive preview.
affaan-m/ECC
liquid-glass-design
Helps your agent create iOS user interfaces with a 'Liquid Glass' effect. Allows adding dynamic and interactive visual effects in SwiftUI and UIKit.
affaan-m/ECC