hig-foundations
Skill153 starsChanged 9 months agoMITView on GitHub
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.
2 other projects use a version of this, 1 of them edited.
Adopted by
Most recently taken up by
- elbionredenica/consumer-app-starteredited, first seen Nov 8, 2026
- ozgurakkaya90/claude-skillsword for word, first seen Aug 2, 2026
Other versions2 projects use a version of this.
Word for word · 1
- ozgurakkaya90/claude-skills★ 0100% same
Edited · 1
- elbionredenica/consumer-app-starter★ 094% same
Wrote their own version · 0
None found.
How matches are found. Word for word: the exact same text. Edited: shares passages with this file (“99% same” means 99% of its five-word phrases also appear here; 10% or more counts). Their own version: similar meaning, or, weakest, the same name. We can’t tell which project had it first. Projects are counted among the 200 most-starred candidates, and mentions are links to the repository we found, up to 50 per site, so both counts are a floor.
In this repository14 other files it gives its agents.
- AGENTS.mdAGENTS.md
- hig-components-contentSkill
- hig-components-controlsSkill
- hig-components-dialogsSkill
- hig-components-layoutSkill
- hig-components-menusSkill
- hig-components-searchSkill
- hig-components-statusSkill
- hig-components-systemSkill
- hig-inputsSkill
- hig-patternsSkill
- hig-platformsSkill
- hig-project-contextSkill
- hig-technologiesSkill
The file
We split this skill into the rules it gives an agent
3 rules. About 0 are common, 2 are distinctive, and 1 is very specific to this project.
≈0
Common · estimate
Many files like this have a rule of this kind.
≈2
Distinctive · estimate
This author's own choices. Worth a look.
1
Very specific
Tied to their project's names, files or tools. Probably skip.
- Common
- Distinctive
- Very specific
- Very specific: line 18
Check for .claude/apple-design-context.md before asking questions.
- Distinctive: line 63
Consider how principles interact:
- Distinctive: line 85
Do you have existing brand guidelines?
≈ “Common” is an estimate: at least 1 in 5 of the 350,495 skill files we read have a rule of the same kind, not the same words. “Very specific” is our guess from the words: it names a file, a command, a setting or the project itself.
Files
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
- Prioritize content over chrome. Reduce visual clutter. Use system-provided materials and subtle separators rather than heavy borders and backgrounds.
- 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.
- 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. - 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.
- Match platform conventions. Align look and behavior with system standards. Provide direct, responsive manipulation and clear feedback for every action.
- Respect privacy. Request permissions only when needed, explain why clearly, provide value before asking for data. Design for minimal data collection.
- Support internationalization. Accommodate text expansion, right-to-left scripts, and varying date/number formats. Use Auto Layout for dynamic content sizing.
- Use motion purposefully. Animation should communicate meaning and spatial relationships. Honor Reduce Motion by providing crossfade alternatives.
Reference Index
| Reference | Topic | Key content |
| accessibility.md | Accessibility | VoiceOver, Dynamic Type, color contrast, motor accessibility, Switch Control, audio descriptions |
| app-icons.md | App Icons | Icon grid, platform-specific sizes, single focal point, no transparency |
| branding.md | Branding | Integrating brand identity within Apple's design language, subtle branding, custom tints |
| color.md | Color | System colors, Dynamic Colors, semantic colors, custom palettes, contrast ratios |
| dark-mode.md | Dark Mode | Elevated surfaces, semantic colors, adapted palettes, vibrancy, testing in both modes |
| icons.md | Icons | Glyph icons, SF Symbols integration, custom icon design, icon weights, optical alignment |
| images.md | Images | Image resolution, @2x/@3x assets, vector assets, image accessibility |
| immersive-experiences.md | Immersive Experiences | AR/VR design, spatial immersion, comfort zones, progressive immersion levels |
| inclusion.md | Inclusion | Diverse representation, non-gendered language, cultural sensitivity, inclusive defaults |
| layout.md | Layout | Margins, spacing, alignment, safe areas, adaptive layouts, readable content guides |
| materials.md | Materials | Vibrancy, blur, translucency, system materials, material thickness |
| motion.md | Motion | Animation curves, transitions, continuity, Reduce Motion support, physics-based motion |
| privacy.md | Privacy | Permission requests, usage descriptions, privacy nutrition labels, minimal data collection |
| right-to-left.md | Right-to-Left | RTL layout mirroring, bidirectional text, icons that flip, exceptions |
| sf-symbols.md | SF Symbols | Symbol categories, rendering modes, variable color, custom symbols, weight matching |
| spatial-layout.md | Spatial Layout | visionOS window placement, depth, ergonomic zones, Z-axis design |
| typography.md | Typography | SF Pro, Dynamic Type sizes, text styles, custom fonts, font weight hierarchy, line spacing |
| writing.md | Writing | UI copy guidelines, tone, capitalization rules, error messages, button labels, conciseness |
Applying Foundations Together
Consider how principles interact:
- Color + Dark Mode + Accessibility -- Custom palettes must work in both modes while maintaining WCAG contrast ratios. Start with system semantic colors.
- Typography + Accessibility + Layout -- Dynamic Type must scale without breaking layouts. Use text styles and Auto Layout for the full range of type sizes.
- Icons + Branding + SF Symbols -- Custom icons should match SF Symbols weight and optical sizing. Brand elements should integrate without overriding system conventions.
- Motion + Accessibility + Feedback -- Every animation must have a Reduce Motion alternative. Motion should reinforce spatial relationships, not decorate.
- Privacy + Writing + Onboarding -- Permission requests need clear, specific usage descriptions. Time them to when the user will understand the benefit.
Output Format
- Cite the specific HIG foundation with file and section.
- Note platform differences for the user's target platforms.
- Provide concrete code patterns (SwiftUI/UIKit/AppKit).
- Explain accessibility impact (contrast ratios, Dynamic Type scaling, VoiceOver behavior).
Questions to Ask
- Which platforms are you targeting?
- Do you have existing brand guidelines?
- What accessibility level are you targeting? (WCAG AA, AAA, Apple baseline?)
- System colors or custom?
Related Skills
- hig-platforms -- How foundations apply per platform (e.g., type scale differences on watchOS vs macOS)
- hig-patterns -- Interaction patterns where foundations like writing and accessibility are critical
- hig-components-layout -- Structural components implementing layout principles
- hig-components-content -- Content display using color, typography, and images
Built by Raintree Technology · More developer tools
Does it work?
Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.
No reviews yet
People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.
- It worked
- Partly
- It didn't
Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.
Your trail
Files you open will collect here, so you can find them again.
Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.
Now do this for your own.
Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.