UI UX Pro Max
saoudi-h/solar-icons
UI/UX design intelligence for web and mobile. An agent skill from saoudi-h/solar-icons.
UI typography on Apple platforms — text styles and Dynamic Type, the San Francisco family (Pro/Rounded/Compact/Mono/New York + width axis), optical sizes, tracking vs kerning, leading adjustments…
Install Typography
$ npx skills add rshankras/claude-code-apple-skills --skill typography -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install rshankras/claude-code-apple-skills typography --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/rshankras/claude-code-apple-skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/design/typography .claude/skills/typography && 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 "typography" agent skill from https://github.com/rshankras/claude-code-apple-skills/tree/main/skills/design/typography into .claude/skills/typography/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "typography", 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/rshankras/claude-code-apple-skills/tree/main/skills/design/typographyType 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 rshankras/claude-code-apple-skills --skill typography -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install rshankras/claude-code-apple-skills typography --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/rshankras/claude-code-apple-skills.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/design/typography .agents/skills/typography && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "typography" agent skill from https://github.com/rshankras/claude-code-apple-skills/tree/main/skills/design/typography into .agents/skills/typography/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "typography", 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 rshankras/claude-code-apple-skills --skill typography -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install rshankras/claude-code-apple-skills typography --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/rshankras/claude-code-apple-skills.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/design/typography .cursor/skills/typography && 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 "typography" agent skill from https://github.com/rshankras/claude-code-apple-skills/tree/main/skills/design/typography into .cursor/skills/typography/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "typography", 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/rshankras/claude-code-apple-skills.git --path skills/design/typography--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 rshankras/claude-code-apple-skills --skill typography -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install rshankras/claude-code-apple-skills typography --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/rshankras/claude-code-apple-skills.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/design/typography .gemini/skills/typography && 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 "typography" agent skill from https://github.com/rshankras/claude-code-apple-skills/tree/main/skills/design/typography into .gemini/skills/typography/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "typography", 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 rshankras/claude-code-apple-skills typographyInstalls 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 rshankras/claude-code-apple-skills --skill typography -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/rshankras/claude-code-apple-skills.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/design/typography .github/skills/typography && 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 "typography" agent skill from https://github.com/rshankras/claude-code-apple-skills/tree/main/skills/design/typography into .github/skills/typography/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "typography", 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 rshankras/claude-code-apple-skills --skill typography -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install rshankras/claude-code-apple-skills typography --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/rshankras/claude-code-apple-skills.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/design/typography .opencode/skills/typography && 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 "typography" agent skill from https://github.com/rshankras/claude-code-apple-skills/tree/main/skills/design/typography into .opencode/skills/typography/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "typography", 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
typography- GitHub stars
- 783
- Token cost
- ~1.7k tokens
- SKILL.md length
- 772 words
- Files
- 1
- Skills in repo
- 41
- Repo updated
- First seen
- Licence
- MIT
At a glance
UI typography on Apple platforms — text styles and Dynamic Type, the San Francisco family (Pro/Rounded/Compact/Mono/New York + width axis), optical sizes, tracking vs kerning, leading adjustments…
- Works in 4 steps: Text styles — .font(.title) /… → @ScaledMetric for the non-text riding… → Switch layout axis at accessibility… → …
- Building type hierarchy
- SKILL.md covers When This Skill Activates, Rule 1: text styles first, Rule 2: let optical sizes and… and The Dynamic Type ladder…, plus 4 more sections
- Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
What it does
Typography is an agent skill from rshankras/claude-code-apple-skills. UI typography on Apple platforms — text styles and Dynamic Type, the San Francisco family (Pro/Rounded/Compact/Mono/New York + width axis), optical sizes, tracking vs kerning, leading adjustments, and custom-font scaling. Use when choosing fonts, building type hierarchy, fixing truncation/legibility, or making custom fonts respect Dynamic Type.
Its SKILL.md is about 1.7k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.
It sits in Frontend & Design, covering Typography and iOS development. The repository describes itself as: Claude Code skills for Apple platform development (iOS, macOS, iPadOS) — product validation, code generation, App Store optimization, and more. The licence is MIT.
When your agent uses it
- Building type hierarchy
- Fixing truncation/legibility
- Making custom fonts respect Dynamic Type
Example prompts
- “/typography”
Requirements
- Pre-approved tools (allowed-tools): Read, Write, Edit, Glob, Grep
Workflow steps
4 steps, taken from the first numbered list in SKILL.md.
- Text styles — .font(.title) / preferredFont(forTextStyle:) +
- @ScaledMetric for the non-text riding alongside (icon frames, spacing); SF
- Switch layout axis at accessibility sizes — branch on
- Large Content Viewer — only for bars that legitimately can't grow: a tab bar takes
What it can do on your machine
Read from SKILL.md and the folder at commit 9ffb831. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves these tools, so the agent can use them without asking each time:
ReadWriteEditGlobGrep
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):
developer.apple.com
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
Typography loads about 1.7k tokens when it runs. Until then it costs about 89 tokens; SKILL.md has 772 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 rshankras/claude-code-apple-skills at commit 9ffb831, republished under its MIT licence (© rshankras). 772 words, ~1,659 tokens.
Download SKILL.mdSave it as
.claude/skills/typography/SKILL.md (or your agent's skills folder).- name
- typography
- description
- UI typography on Apple platforms — text styles and Dynamic Type, the San Francisco family (Pro/Rounded/Compact/Mono/New York + width axis), optical sizes, tracking vs kerning, leading adjustments, and custom-font scaling. Use when choosing fonts, building type hierarchy, fixing truncation/legibility, or making custom fonts respect Dynamic Type.
- allowed-tools
- Read, Write, Edit, Glob, Grep
- last_verified
- 2026-07-16
- review_by
- 2027-06-22
Typography
Type is most of your UI. The system does the hard parts — optical sizes, tracking tables, Dynamic Type — if you use its APIs. This skill covers when to trust the system, how to build hierarchy deliberately, and what custom fonts owe you back.
When This Skill Activates
- Choosing fonts or building a type hierarchy for a screen or app
- Text truncating, cramping, or breaking under larger Dynamic Type sizes
- Adopting a custom/brand font (and keeping accessibility)
- Display typesetting: hero numbers, stats, editorial headlines
Rule 1: text styles first
Predefined styles (Large Title → Caption 2) are weight + size + leading combos with Dynamic Type support built in — and different styles scale differently (body grows more than footnote), which manual font sizes can't replicate.
- Build hierarchy from 2–3 text styles + emphasized variants (bold trait — the actual weight varies per style: some go medium→semibold, others bold→heavy) before reaching for new fonts.
- Semantic colors + text styles together give dark mode, contrast, and Dynamic Type for free.
- macOS supports text styles (without Dynamic Type); design Mac type at 100% — no iOS-style scaling assumptions.
Rule 2: let optical sizes and tracking work
- San Francisco blends Text→Display designs continuously between 17 and 28pt (below: sturdier letterforms, looser tracking for legibility; above: tighter, more refined). System font APIs do this automatically — hardcoded single-cut fonts don't.
- Tracking, not kerning, for letterspacing — tracking is size-specific and lets the OS disable clashing features (ligatures). Override system tracking only in exceptional cases.
- Truncation pressure? Use
allowsTightening(default-tightening-for-truncation) instead of manually squeezing — and prefer wrapping to truncating (line limit 0 on labels that matter). - Line height moves only via leading traits: tight = −2pt, loose = +2pt (±1pt on watchOS); the system adds leading automatically for tall scripts (Arabic, Devanagari).
The Dynamic Type ladder (WWDC24 10074)
12 sizes: 7 default + 5 accessibility (AX1–AX5). .body runs 17pt at default up to 53pt
at AX5 — roughly 3× taller, and layouts must expect that. Escalate in order:
- Text styles —
.font(.title)/preferredFont(forTextStyle:)+ adjusts-for-content-size, line count 0 so text wraps instead of truncating. @ScaledMetricfor the non-text riding alongside (icon frames, spacing); SF Symbols scale viaUIImage.SymbolConfiguration(textStyle:). Prioritize scaling essential content over decoration.- Switch layout axis at accessibility sizes — branch on
dynamicTypeSize.isAccessibilitySizewithAnyLayout(HStackLayout())/AnyLayout(VStackLayout())(UIKit: flip the stack axis onpreferredContentSizeCategory.isAccessibilityCategory); give text the full line width and relaxlineLimit. - Large Content Viewer — only for bars that legitimately can't grow: a tab bar takes under 10% of screen height, and scaled to accessibility sizes it would eat almost a quarter (WWDC24 10074). Scaling is always preferred; the viewer is the fallback, not the fix.
Test at all 12 sizes (Xcode Previews → Variants → Dynamic Type Variants), not just the biggest — mid-range accessibility sizes catch different wrap points.
Show full SKILL.md (321 more words)Show less
The San Francisco family — pick by job
| Face | Job |
|---|---|
| SF Pro | The default; UI text everywhere |
| SF Pro Rounded | Friendlier numerals/labels — widgets, health/fitness data |
| SF Compact | watchOS (space-efficient counterpart) |
| SF Mono | Code, tabular alignment |
| New York | Serif — reading experiences, editorial contrast |
| SF Arabic / SF Arabic Rounded | Arabic script with its own optical sizes |
The width axis (Condensed / Regular / Compressed / Expanded):
- Default Regular; every non-Regular choice is a legibility decision — check it.
- Condensed: fit more text comfortably (long headlines wrap one line fewer).
- Compressed: display-only density, not body text.
- Expanded: display typesetting AND small secondary labels (wide + loose tracking).
- Width is a fourth hierarchy lever beside weight, size, color; all widths share identical vertical proportions, so mixing them never misaligns baselines. 2–3 styles are enough — pair one width with contrasting weights, one weight with contrasting widths, or oppose both for maximum display contrast.
Custom fonts: what you owe back
System fonts get Dynamic Type free; a brand font makes you the type engine:
- Scale with
UIFontMetrics(forTextStyle:).scaledFont(for:)+ adjusts-for-content-size, or SwiftUIFont.custom(_:size:relativeTo:); scale layout constants with@ScaledMetric. - Test at the largest accessibility sizes — wrap to multiple lines rather than truncate.
- Verify script coverage for your locales; have a fallback plan for writing systems the brand
font doesn't cover (the system stacks:
system-ui,ui-rounded,ui-serif,ui-monospaceon the web). - Budget for the maintenance: tracking tables, optical sizing, and weight ramps are things SF does that a licensed font usually doesn't.
❌ Anti-patterns: hardcoded point sizes on user-facing text · kerning APIs for tracking jobs ·
custom font without relativeTo: (frozen size) · Compressed body text · truncation where
wrapping was possible.
Output Format
Type review: Element | Current (font/size/style) | Issue (hierarchy/scaling/legibility) | Fix
— check Dynamic Type at XXL + AX sizes before signing off; pairs with the contrast rules in
generators/accessibility-generator.
References
- https://developer.apple.com/videos/play/wwdc2020/10175/ (The details of UI typography)
- https://developer.apple.com/videos/play/wwdc2022/110381/ (The expanded San Francisco family)
- https://developer.apple.com/fonts/ (SF + New York downloads)
- https://developer.apple.com/design/human-interface-guidelines/typography
- Related skills:
design/sf-symbols(symbols align to text styles),foundation/attributed-string(rich text mechanics),generators/accessibility-generator
© rshankras, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
Just SKILL.md in skills/design/typography of rshankras/claude-code-apple-skills.
Open the folder on GitHubat commit 9ffb831
Compare with similar skills
Typography 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 |
|---|---|---|---|---|---|---|
| Typography this skillrshankras/claude-code-apple-skills | 783 | — | ~1.7k | Automated safety check: Pass | MIT | |
| UI UX Pro Maxsaoudi-h/solar-icons | 184 | 18 repos | ~11k | Automated safety check: Notes | Custom licence | |
| Frontend UI StandardsMaxHan7/frontend-ui-standards-skill | 106 | — | ~2.4k | Automated safety check: Pass | MIT | |
| Frontend Designavibebuilder/claude-prime | 120 | — | ~2.1k | Automated safety check: Pass | MIT | |
| UI UX Pro Maxshobcoder/shob | 577 | — | ~3.7k | Automated safety check: Pass | MIT | |
| Design SystemWrongStack/WrongStack | 370 | — | ~3.9k | Automated safety check: Pass | MIT |
Similar skills
Frontend UI Standards
MaxHan7/frontend-ui-standards-skill
A skill your agent uses when implementing, refactoring, or reviewing frontend UI across SwiftUI, React, React Native, Flutter, web, or mobile apps.
Frontend Design
avibebuilder/claude-prime
Builds distinctive, production-grade UIs that avoid generic AI aesthetics.
UI UX Pro Max
shobcoder/shob
UI/UX design intelligence expert for web and mobile applications.
Design System
WrongStack/WrongStack
Use this skill BEFORE writing or restyling ANY user-facing interface.
UI UX Pro Max
majiayu000/spellbook
A skill your agent uses when planning, building, designing, code review, refactor, fixing, improving, optimizing, enhancing, or checking UI/UX work.
More from rshankras/claude-code-apple-skills
All 41 skills in this repoAccessibility Generator
rshankras/claude-code-apple-skills
Generate accessibility infrastructure for VoiceOver, Dynamic Type, and accessibility features.
Animation Patterns
rshankras/claude-code-apple-skills
SwiftUI animation patterns including springs, transitions, PhaseAnimator, KeyframeAnimator, SF Symbol effects, scroll-driven effects, mesh gradients, text renderers, and shader effects.
App Description Writer
rshankras/claude-code-apple-skills
Generate compelling App Store descriptions that convert browsers into users.
App Icon Generator
rshankras/claude-code-apple-skills
Generates an app icon for macOS or iOS — a fast CoreGraphics placeholder and/or flat layered source art to finish in Icon Composer (the Liquid Glass / iOS 26+ standard).
App Namer
rshankras/claude-code-apple-skills
Turn an app idea into validated, App-Store-ready name candidates.
Bundles And Licensing
rshankras/claude-code-apple-skills
Revenue beyond the single-app price tag — own-app bundles, Family Sharing as a conversion lever, cross-developer bundles & suites, and institutional licensing via Group Purchases / Apple School &…
Related
Categories
Questions about Typography
What does Typography do?
UI typography on Apple platforms — text styles and Dynamic Type, the San Francisco family (Pro/Rounded/Compact/Mono/New York + width axis), optical sizes, tracking vs kerning, leading adjustments…. Typography is an agent skill from rshankras/claude-code-apple-skills. UI typography on Apple platforms — text styles and Dynamic Type, the San Francisco family (Pro/Rounded/Compact/Mono/New York + width axis), optical sizes, tracking vs kerning, leading adjustments, and custom-font scaling.
When should I use Typography?
Typography fits situations like: building type hierarchy; fixing truncation/legibility; making custom fonts respect Dynamic Type.
How do I install Typography in Claude Code?
Run `npx skills add rshankras/claude-code-apple-skills --skill typography -a claude-code`. Or copy the skill folder (skills/design/typography in rshankras/claude-code-apple-skills) into .claude/skills/typography in your project. Claude Code loads it when a task matches its description.
How do I install Typography in Codex?
Run `npx skills add rshankras/claude-code-apple-skills --skill typography -a codex`. Or copy the skill folder (skills/design/typography in rshankras/claude-code-apple-skills) into .agents/skills/typography in your project. Codex loads it when a task matches its description.
Can I use Typography 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 rshankras/claude-code-apple-skills --skill typography -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/typography, .gemini/skills/typography, .github/skills/typography and .opencode/skills/typography in your project.
What does Typography need to run?
SKILL.md names no scripts, command-line tools or credentials: Typography is instructions for the agent only. Its frontmatter pre-approves these tools: Read, Write, Edit, Glob, Grep.
Does Typography access the network?
SKILL.md names 1 domain. As links in the text: developer.apple.com. This is read from the text; nothing was executed.
Is Typography 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 Typography use?
Typography 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 Typography use?
About 1.7k tokens (SKILL.md is roughly 6.6k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.
What are the alternatives to Typography?
Skills that share tags, products or a category with Typography: UI UX Pro Max (saoudi-h/solar-icons, 184 stars), Frontend UI Standards (MaxHan7/frontend-ui-standards-skill, 106 stars), Frontend Design (avibebuilder/claude-prime, 120 stars) and UI UX Pro Max (shobcoder/shob, 577 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Typography?
rshankras (a GitHub user) maintains it in rshankras/claude-code-apple-skills, which has 783 GitHub stars. The repository holds 41 skills in this directory. The repository was last updated on July 24, 2026.
Source: rshankras/claude-code-apple-skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.