Charts 3D
rshankras/claude-code-apple-skills
3D chart visualization with Swift Charts using Chart3D, SurfacePlot, interactive pose control, and surface styling — plus a 2D Swift Charts construction reference (marks, axes, selection…
Apple Human Interface Guidelines for content display components.
Install Hig Components Content
$ npx skills add raintree-technology/hig-doctor --skill hig-components-content -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install raintree-technology/hig-doctor hig-components-content --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/raintree-technology/hig-doctor.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/hig-components-content .claude/skills/hig-components-content && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "hig-components-content" agent skill from https://github.com/raintree-technology/hig-doctor/tree/main/skills/hig-components-content into .claude/skills/hig-components-content/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "hig-components-content", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/raintree-technology/hig-doctor/tree/main/skills/hig-components-contentType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add raintree-technology/hig-doctor --skill hig-components-content -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install raintree-technology/hig-doctor hig-components-content --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/raintree-technology/hig-doctor.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/hig-components-content .agents/skills/hig-components-content && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "hig-components-content" agent skill from https://github.com/raintree-technology/hig-doctor/tree/main/skills/hig-components-content into .agents/skills/hig-components-content/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "hig-components-content", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add raintree-technology/hig-doctor --skill hig-components-content -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install raintree-technology/hig-doctor hig-components-content --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/raintree-technology/hig-doctor.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/hig-components-content .cursor/skills/hig-components-content && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "hig-components-content" agent skill from https://github.com/raintree-technology/hig-doctor/tree/main/skills/hig-components-content into .cursor/skills/hig-components-content/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "hig-components-content", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/raintree-technology/hig-doctor.git --path skills/hig-components-content--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add raintree-technology/hig-doctor --skill hig-components-content -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install raintree-technology/hig-doctor hig-components-content --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/raintree-technology/hig-doctor.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/hig-components-content .gemini/skills/hig-components-content && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "hig-components-content" agent skill from https://github.com/raintree-technology/hig-doctor/tree/main/skills/hig-components-content into .gemini/skills/hig-components-content/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "hig-components-content", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install raintree-technology/hig-doctor hig-components-contentInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add raintree-technology/hig-doctor --skill hig-components-content -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/raintree-technology/hig-doctor.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/hig-components-content .github/skills/hig-components-content && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "hig-components-content" agent skill from https://github.com/raintree-technology/hig-doctor/tree/main/skills/hig-components-content into .github/skills/hig-components-content/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "hig-components-content", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add raintree-technology/hig-doctor --skill hig-components-content -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install raintree-technology/hig-doctor hig-components-content --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/raintree-technology/hig-doctor.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/hig-components-content .opencode/skills/hig-components-content && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "hig-components-content" agent skill from https://github.com/raintree-technology/hig-doctor/tree/main/skills/hig-components-content into .opencode/skills/hig-components-content/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "hig-components-content", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
hig-components-content- GitHub stars
- 143
- Used in
- 5 other repos
- Token cost
- ~1.3k tokens
- SKILL.md length
- 501 words
- Files
- 9 (incl. references)
- Skills in repo
- 15
- Repo updated
- First seen
- Licence
- MIT
At a glance
Apple Human Interface Guidelines for content display components.
- Works in 7 steps: Adapt to different sizes and contexts.… → Make content accessible. Charts need… → Maintain visual hierarchy. Use spacing,… → …
- The user asks about charts component
- SKILL.md covers Key Principles, Reference Index, Component Selection Guide and Output Format, plus 2 more sections
- Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
What it does
Hig Components Content is an agent skill from raintree-technology/hig-doctor. 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…
Its SKILL.md is about 1.3k tokens, which your agent loads only when the skill is triggered. The skill folder holds 9 other files, including reference files (for example `references/activity-views.md`, `references/charts.md` and `references/collections.md`).
It sits in Mobile, covering iOS development, Data visualization and Accessibility. It works with SwiftUI, iOS and macOS. The repository describes itself as: Apple HIG reference and cross-framework UI audit tooling for agents. The licence is MIT.
When your agent uses it
- The user asks about charts component
- Collection view
- Data visualization
- Content display
Example prompts
- “charts component”
- “collection view”
- “image view”
- “/hig-components-content”
Workflow steps
7 steps, taken from the first numbered list in SKILL.md.
- Adapt to different sizes and contexts. Content components must work across screen sizes, orientations, and multitasking configurations…
- Make content accessible. Charts need audio graph support. Images need alt text. Collections need proper VoiceOver navigation order. All…
- Maintain visual hierarchy. Use spacing, sizing, and grouping to establish clear information hierarchy. Primary content should be visually…
- Use system components first. Evaluate UICollectionView, SwiftUI Charts, WKWebView before building custom. System components come with…
- Respect platform conventions. A collection on tvOS uses large lockups with parallax. The same collection on iOS uses compact cells with…
- 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.
What it can do on your machine
Read from SKILL.md and the folder at commit 3ec08f5. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
No scripts in the folder and no shell commands in SKILL.md.
From the folder's file list and the shell code blocks in SKILL.md.
Network
Links to these hosts (documentation or services it may open):
raintree.technology
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
Hig Components Content loads about 1.3k tokens when it runs, and up to ~4.5k if it reads all its reference files. Until then it costs about 210 tokens; SKILL.md has 501 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
Safety
Auto-check passed
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.
SKILL.md
The full file from raintree-technology/hig-doctor at commit 3ec08f5, republished under its MIT licence (© raintree-technology). 501 words, ~1,333 tokens.
Download SKILL.mdSave it as
.claude/skills/hig-components-content/SKILL.md (or your agent's skills folder). This skill also uses 8 other files; get the full folder from GitHub.- name
- hig-components-content
- description
- 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.
- version
- 1.0.0
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 |
Show full SKILL.md (228 more words)Show less
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
© raintree-technology, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
SKILL.md and 8 other files (references) in skills/hig-components-content of raintree-technology/hig-doctor.
- SKILL.md
- references/activity-views.md
- references/charts.md
- references/collections.md
- references/color-wells.md
- references/image-views.md
- references/image-wells.md
- references/lockups.md
- references/web-views.md
Open the folder on GitHubat commit 3ec08f5
Used in 5 other repositories
We found 14 copies of this SKILL.md (exact, near-identical or edited) in other folders, from 5 other GitHub owners. This page covers the copy in raintree-technology/hig-doctor, which our catalogue first saw on October 7, 2026.
- aiskillstore/marketplaceskills/sickn33/hig-components-content
- sickn33/agentic-awesome-skillsskills/hig-components-contentplugins/agentic-awesome-skills/skills/hig-components-content+1 more
- lingxling/awesome-skills-cnantigravity-awesome-skills/skills/hig-components-contentantigravity-awesome-skills/plugins/agentic-awesome-skills/skills/hig-components-content+1 more
- benjaminasterA/antigravity-awesome-skillsskills/hig-components-content
- henryalouf/ruflow.agents/skills/hig-components-content.agents/skills/antigravity-awesome-skills/skills/hig-components-content+4 more
Compare with similar skills
Hig Components Content next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Hig Components Content this skillraintree-technology/hig-doctor | 143 | 5 repos | ~1.3k | Automated safety check: Pass | MIT | |
| Charts 3Drshankras/claude-code-apple-skills | 785 | — | ~5.4k | Automated safety check: Pass | MIT | |
| iOS Accessibilitydpearson2699/swift-ios-skills | 1.2k | — | ~4.6k | Automated safety check: Pass | Custom licence | |
| Native App Designercuriositech/some_claude_skills | 243 | — | ~1.9k | Automated safety check: Notes | MIT | |
| SwiftUI Design SkillWholiver/swiftui-design-skill | 213 | — | ~2.8k | Automated safety check: Pass | MIT | |
| Accessible Mobile DeveloperFerroxLabs/wayland | 608 | — | ~3.6k | Automated safety check: Pass | Apache-2.0 |
Similar skills
iOS Accessibility
dpearson2699/swift-ios-skills
Build and audit SwiftUI, UIKit, and AppKit accessibility for VoiceOver, Voice Control, Switch Control, Full Keyboard Access, Dynamic Type, focus restoration, labels/traits/actions, traversal, custom…
Native App Designer
curiositech/some_claude_skills
Creates breathtaking iOS/Mac and web apps with organic, non-AI aesthetic.
SwiftUI Design Skill
Wholiver/swiftui-design-skill
Guides the agent to design distinctive SwiftUI interfaces for iOS and macOS, with six anti-generic rules, a design direction workflow and a five-dimension review.
Accessible Mobile Developer
FerroxLabs/wayland
Mobile accessibility development expertise covering iOS VoiceOver and Android TalkBack integration, accessibility APIs for SwiftUI and Jetpack Compose, touch target sizing, gesture alternatives…
Swiftui Expert Skill
omarshahine/HomeClaw
A skill your agent uses when writing, reviewing, or refactoring SwiftUI code for iOS or macOS, including state management, view composition, performance, Liquid Glass adoption, or Instruments .trace…
More from raintree-technology/hig-doctor
All 15 skills in this repoHig Project Context
raintree-technology/hig-doctor
Create or update a shared Apple design context document that other HIG skills use to tailor guidance.
Hig Components Controls
raintree-technology/hig-doctor
Apple HIG guidance for selection and input controls including pickers, toggles, sliders, steppers, segmented controls, combo boxes, text fields, text views, labels, token fields, virtual keyboards…
Hig Components Dialogs
raintree-technology/hig-doctor
Apple HIG guidance for presentation components including alerts, action sheets, popovers, sheets, and digit entry views.
Hig Components Layout
raintree-technology/hig-doctor
Apple Human Interface Guidelines for layout and navigation components.
Hig Components Menus
raintree-technology/hig-doctor
Apple HIG guidance for menu and button components including menus, context menus, dock menus, edit menus, the menu bar, toolbars, action buttons, pop-up buttons, pull-down buttons, disclosure…
Hig Components Search
raintree-technology/hig-doctor
Apple HIG guidance for navigation-related components including search fields, page controls, and path controls.
Related
Categories
Questions about Hig Components Content
What does Hig Components Content do?
Apple Human Interface Guidelines for content display components. Hig Components Content is an agent skill from raintree-technology/hig-doctor. Apple Human Interface Guidelines for content display components.
When should I use Hig Components Content?
Hig Components Content fits situations like: the user asks about charts component; collection view; data visualization; content display.
How do I install Hig Components Content in Claude Code?
Run `npx skills add raintree-technology/hig-doctor --skill hig-components-content -a claude-code`. Or copy the skill folder (skills/hig-components-content in raintree-technology/hig-doctor) into .claude/skills/hig-components-content in your project. Claude Code loads it when a task matches its description.
How do I install Hig Components Content in Codex?
Run `npx skills add raintree-technology/hig-doctor --skill hig-components-content -a codex`. Or copy the skill folder (skills/hig-components-content in raintree-technology/hig-doctor) into .agents/skills/hig-components-content in your project. Codex loads it when a task matches its description.
Can I use Hig Components Content in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add raintree-technology/hig-doctor --skill hig-components-content -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/hig-components-content, .gemini/skills/hig-components-content, .github/skills/hig-components-content and .opencode/skills/hig-components-content in your project.
What does Hig Components Content need to run?
SKILL.md names no scripts, command-line tools or credentials: Hig Components Content is instructions for the agent only.
Does Hig Components Content access the network?
SKILL.md names 1 domain. As links in the text: raintree.technology. This is read from the text; nothing was executed.
Is Hig Components Content safe to install?
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.
What licence does Hig Components Content use?
Hig Components Content is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does Hig Components Content use?
About 1.3k tokens (SKILL.md is roughly 5.3k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 3.2k tokens, read only when the agent opens those files.
What are the alternatives to Hig Components Content?
Skills that share tags, products or a category with Hig Components Content: Charts 3D (rshankras/claude-code-apple-skills, 785 stars), iOS Accessibility (dpearson2699/swift-ios-skills, 1.2k stars), Native App Designer (curiositech/some_claude_skills, 243 stars) and SwiftUI Design Skill (Wholiver/swiftui-design-skill, 213 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Hig Components Content?
raintree-technology (a GitHub organization) maintains it in raintree-technology/hig-doctor, which has 143 GitHub stars. The repository holds 15 skills in this directory. The repository was last updated on September 11, 2026.
Source: raintree-technology/hig-doctor on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.