hig-foundations

Solid

Apple Human Interface Guidelines design foundations. Use this skill when the user asks about "HIG color", "Apple typography", "SF Symbols", "dark mode guidelines", "accessible design", "Apple design foundations", "app icon", "layout guidelines", "materials", "motion", "privacy", "right to left", "RTL", "inclusive design", branding, images, spatial layout, or writing style. Also use when the user says "my colors look wrong in dark mode", "what font should I use", "is my app accessible enough", "how do I support Dynamic Type", "what contrast ratio do I need", "how do I pick system colors", or "my icons don't match the system style". Cross-references: hig-platforms for platform-specific guidance, hig-patterns for interaction patterns, hig-components-layout for structural components, hig-components-content for display.

AI & Automation 78 stars 9 forks Updated today MIT

Install

View on GitHub

Quality Score: 87/100

Stars 20%
63
Recency 20%
100
Frontmatter 20%
70
Documentation 15%
100
Issue Health 10%
50
License 10%
100
Description 5%
100

Skill Content

# Apple HIG: Design Foundations Check for `.claude/apple-design-context.md` before asking questions. Use existing context and only ask for information not already covered. ## Key Principles 1. **Prioritize content over chrome.** Reduce visual clutter. Use system-provided materials and subtle separators rather than heavy borders and backgrounds. 2. **Build in accessibility from the start.** Design for VoiceOver, Dynamic Type, Reduce Motion, Increase Contrast, and Switch Control from day one. Every interactive element needs an accessible label. 3. **Use system colors and materials.** System colors adapt to light/dark mode, increased contrast, and vibrancy. Prefer semantic colors (`label`, `secondaryLabel`, `systemBackground`) over hard-coded values. 4. **Use platform fonts and icons.** SF Pro, SF Compact, SF Mono by default. New York for serif. Follow the type hierarchy at recommended sizes. Use SF Symbols for iconography. 5. **Match platform conventions.** Align look and behavior with system standards. Provide direct, responsive manipulation and clear feedback for every action. 6. **Respect privacy.** Request permissions only when needed, explain why clearly, provide value before asking for data. Design for minimal data collection. 7. **Support internationalization.** Accommodate text expansion, right-to-left scripts, and varying date/number formats. Use Auto Layout for dynamic content sizing. 8. **Use motion purposefully.** Animation should communicate meaning and s...

Details

Author
raintree-technology
Repository
raintree-technology/agent-starter
Created
7 months ago
Last Updated
today
Language
JavaScript
License
MIT

Integrates with

Similar Skills

Semantically similar based on skill content — not just same category