Apple Human Interface Guidelines quick reference. Use when needing iOS design guidelines, HIG rules, or Apple design best practices.
/plugin marketplace add beshkenadze/claude-skills-marketplace/plugin install beshkenadze-skills-marketplace@beshkenadze/claude-skills-marketplaceThis skill inherits all available tools. When active, it can use any tool Claude has access to.
references/detailed-guidelines.mdQuick reference for Apple Human Interface Guidelines (iOS/iPadOS).
| Type | Light | Dark | Usage |
|---|---|---|---|
| systemBackground | White | Black | Primary background |
| secondarySystemBackground | Gray6 | Gray5 | Grouped content |
| label | Black | White | Primary text |
| secondaryLabel | Gray | Gray | Secondary text |
| separator | Gray4 | Gray4 | Dividers |
| systemBlue | #007AFF | #0A84FF | Links, actions |
| Style | Size | Weight | Usage |
|---|---|---|---|
| largeTitle | 34pt | Regular | Screen titles |
| title | 28pt | Regular | Section headers |
| title2 | 22pt | Regular | Subsections |
| title3 | 20pt | Regular | Minor headers |
| headline | 17pt | Semibold | Emphasis |
| body | 17pt | Regular | Main content |
| callout | 16pt | Regular | Secondary info |
| subheadline | 15pt | Regular | Captions |
| footnote | 13pt | Regular | Small text |
| caption | 12pt | Regular | Labels |
| caption2 | 11pt | Regular | Tiny labels |
Tab Bar
Navigation Bar
Buttons
Text Fields
Toggles
Standard
Swipe Actions
| Feature | Requirement |
|---|---|
| VoiceOver | Labels for all interactive elements |
| Dynamic Type | Support 200% text scaling |
| Color Contrast | 4.5:1 (normal), 7:1 (small text) |
| Motion | Respect reduce motion preference |
| Touch | 44×44pt minimum targets |
// Icon-only button
Button { } label: { Image(systemName: "trash") }
.accessibilityLabel("Delete")
// Combined elements
HStack { Image(...); Text(...) }
.accessibilityElement(children: .combine)
// Decorative
Image("decoration")
.accessibilityHidden(true)
| Mode | Usage |
|---|---|
| Monochrome | Single color, default |
| Hierarchical | Depth through opacity |
| Palette | 2-3 custom colors |
| Multicolor | Predefined colors |
| Category | Symbols |
|---|---|
| Navigation | house, magnifyingglass, person, gear |
| Actions | plus, minus, xmark, checkmark |
| Status | star, heart, bookmark, bell |
| Media | play, pause, forward, backward |
| Editing | pencil, trash, square.and.arrow.up |
ios-swiftui-generator — Generate HIG-compliant codeios-design-review — Validate HIG complianceCreating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code, generative art, algorithmic art, flow fields, or particle systems. Create original algorithmic art rather than copying existing artists' work to avoid copyright violations.
Applies Anthropic's official brand colors and typography to any sort of artifact that may benefit from having Anthropic's look-and-feel. Use it when brand colors or style guidelines, visual formatting, or company design standards apply.
Create beautiful visual art in .png and .pdf documents using design philosophy. You should use this skill when the user asks to create a poster, piece of art, design, or other static piece. Create original visual designs, never copying existing artists' work to avoid copyright violations.