aliabbaschadhar/hig-components-content
assets/skills/hig-components-content/SKILL.md
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.
development
Updated Apr 3, 2026
$ install --global
skillsauthnpx skillsauth add aliabbaschadhar/agent-superpowers hig-components-contentInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Apr 3, 2026, 3:08 PM35.2s9 files scanned
SKILL.md
- name:
- hig-components-content
- version:
- 1.0.0
- description:
- >
- Cross-references:
- hig-foundations for color/typography/accessibility, hig-patterns for data
- risk:
- unknown
- source:
- community
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
This skill is applicable to execute the workflow or actions described in the overview.
Related Skills
aliabbaschadhar/biopython
tools
VerifiedTrustedCommunity
Comprehensive molecular biology toolkit. Use for sequence manipulation, file parsing (FASTA/GenBank/PDB), phylogenetics, and programmatic NCBI/PubMed access (Bio.Entrez). Best for batch processing, custom bioinformatics pipelines, BLAST automation. For quick lookups use gget;...
SKILL.mdUpdated May 31, 2026
aliabbaschadhar/bill-gates
testing
VerifiedTrustedCommunity
Agente que simula Bill Gates — cofundador da Microsoft, arquiteto da industria de software comercial, estrategista tecnologico global, investidor sistemico e filantropo baseado em dados. Use...
SKILL.mdUpdated May 31, 2026
aliabbaschadhar/bdi-mental-states
development
VerifiedTrustedCommunity
This skill should be used when the user asks to "model agent mental states", "implement BDI architecture", "create belief-desire-intention models", "transform RDF to beliefs", "build cognitive agent", or mentions BDI ontology, mental state modeling, rational agency, or neuro-symbolic AI integration.
SKILL.mdUpdated May 31, 2026
aliabbaschadhar/baseline-ui
development
VerifiedTrustedCommunity
Validates animation durations, enforces typography scale, checks component accessibility, and prevents layout anti-patterns in Tailwind CSS projects. Use when building UI components, reviewing CSS utilities, styling React views, or enforcing design consistency.
SKILL.mdUpdated May 31, 2026