Apple Ui Skills

This is a strongly opinionated design system that locks you into Apple's aesthetic choices: Inter font, 4px grid, light mode only, and a specific blue accent. It's detailed where it counts, with exact color tokens, typography scales, and interaction patterns like focus states and hover behaviors. The constraints are the point here. If you're building something that needs to feel like an Apple product, this gives you the guardrails. If you want flexibility or dark mode, look elsewhere. Worth noting it includes some good accessibility rules and performance guidance around animations, which keeps AI agents from doing obviously wrong things.

install copies · 90 days. Times the install command was copied on this site in the last 90 days, bots filtered.: 8
skills.sh installs: 558
GitHub stars: 105
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add ihlamury/design-skills --skill apple-ui-skills --agent claude-code

Installs into .claude/skills of the current project.

Files

Apple UI Skills

Opinionated constraints for building Apple-style interfaces with AI agents.

When to Apply

Reference these guidelines when:

Building light-mode interfaces
Creating Apple-inspired design systems
Implementing UIs with Inter font and 4px grid

Colors

SHOULD use light backgrounds for primary surfaces
MUST use #FFFFFF as page background (surface-base)
MUST use #155BD0 for primary actions and focus states (accent)
SHOULD limit color palette to 10 distinct colors
MUST maintain text contrast ratio of at least 4.5:1 for accessibility

Semantic Tokens

Token	HEX	RGB	Usage
`surface-base`	#FFFFFF	rgb(255,255,255)	Page background
`surface-raised`	#0858DC	rgb(8,88,220)	Cards, modals, raised surfaces
`text-primary`	#808080	rgb(128,128,128)	Headings, body text
`text-secondary`	#6D89B5	rgb(109,137,181)	Secondary, muted text
`text-tertiary`	#90C5F1	rgb(144,197,241)	Additional text
`border-default`	#B5C7D8	rgb(181,199,216)	Subtle borders, dividers
`accent`	#155BD0	rgb(21,91,208)	Primary actions, links, focus