hig-components-content

Solid

Apple Human Interface Guidelines for content display components. Use this skill when the user asks about charts component, collection view, image view, web view, color well, image well, activity view, lockup, data visualization, content display, displaying images, rendering web content, color pickers, or presenting collections of items in Apple apps. Also use when the user says how should I display charts, what's the best way to show images, should I use a web view, how do I build a grid of items, what component shows media, or how do I present a share sheet. Cross-references: hig-foundations for color/typography/accessibility, hig-patterns for data visualization patterns, hig-components-layout for structural containers, hig-platforms for platform-specific component behavior.

Web & Frontend 335 stars 29 forks Updated today

Install

View on GitHub

Quality Score: 85/100

Stars 20%
84
Recency 20%
100
Frontmatter 20%
70
Documentation 15%
100
Issue Health 10%
80
License 10%
0
Description 5%
100

Skill Content

# 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 1. **Adapt to different sizes and contexts.** Content components must work across screen sizes, orientations, and multitasking configurations. Use Auto Layout and size classes. 2. **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. 3. **Maintain visual hierarchy.** Use spacing, sizing, and grouping to establish clear information hierarchy. Primary content should be visually prominent. 4. **Use system components first.** Evaluate UICollectionView, SwiftUI Charts, WKWebView before building custom. System components come with built-in accessibility and platform adaptation. 5. **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. 6. **Handle empty states.** Show a meaningful empty state with guidance on how to populate it, not a blank screen. 7. **Optimize for performance.** Use lazy loading, cell reuse, pagination, and prefetching for large datasets. ## Reference Index | Reference | Topic | Key content | |---|---|---| | [charts.md](references/charts.md) | Charts | Swift Charts, bar/line/area/point...

Details

Author
aiskillstore
Repository
aiskillstore/marketplace
Created
5 months ago
Last Updated
today
Language
Python
License
None

Similar Skills

Semantically similar based on skill content — not just same category

AI & Automation Featured

hig-components-content

Apple Human Interface Guidelines for content display components.

39,350 Updated today
sickn33
Web & Frontend Solid

hig-components-layout

Apple Human Interface Guidelines for layout and navigation components. Use this skill when the user asks about sidebar, split view, tab bar, tab view, scroll view, window design, panel, list view, table view, column view, outline view, navigation structure, app layout, boxes, ornaments, or organizing content hierarchically in Apple apps. Also use when the user says how should I organize my app, what navigation pattern should I use, my layout breaks on iPad, how do I build a sidebar, should I use tabs or a sidebar, or my app doesn't adapt to different screen sizes. Cross-references: hig-foundations for layout/spacing principles, hig-platforms for platform-specific navigation, hig-patterns for multitasking and full-screen, hig-components-content for content display.

335 Updated today
aiskillstore
Web & Frontend Featured

hig-components-layout

Apple Human Interface Guidelines for layout and navigation components.

39,350 Updated today
sickn33
Web & Frontend Solid

hig-patterns

Apple Human Interface Guidelines interaction and UX patterns. Use this skill when the user asks about onboarding flow, user onboarding, app launch, loading state, drag and drop, search pattern, settings design, notifications, modality, multitasking, feedback pattern, haptics, undo redo, file management, data entry, sharing, collaboration, full screen, audio, video, haptic feedback, ratings, printing, help, or account management in Apple apps. Also use when the user says how should onboarding work, my app takes too long to load, should I use a modal here, how do I handle errors, when should I ask for permissions, how to show progress, or what's the right way to confirm a delete. Cross-references hig-foundations for underlying principles, hig-platforms for platform specifics, hig-components-layout for navigation, hig-components-content for data display.

335 Updated today
aiskillstore
Web & Frontend Solid

hig-foundations

Apple Human Interface Guidelines design foundations. Use when users ask about HIG colors, typography, SF Symbols, dark mode, accessibility, app icons, layout, materials, motion, privacy, RTL support, or inclusive design.

335 Updated today
aiskillstore