# axiom-design

Guides Apple UI decisions across Human Interface Guidelines, Liquid Glass effects, SF Symbols rendering, typography, and app entry points.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 1400 installs · ★ 1229
- Author: CharlesWiltgen
- License: MIT · policy=mirror · the beginning of the file is at the end of this page
- Source: https://github.com/CharlesWiltgen/Axiom/tree/HEAD/axiom-codex/skills/axiom-design/SKILL.md
- Updated: 2026-10-20
- HTML: https://affpapa.org/en/nevibecode/skills/axiom-design

## What it does

The skill provides reference trees for Apple interfaces. It covers HIG spacing standards and semantic color palettes. For modern surfaces, it guides migration from blurs to Liquid Glass, comparing Regular and Clear variants alongside the `UIDesignRequiresCompatibility` opt-out key.

Typography rules cover San Francisco text styles and Dynamic Type. When working with icons, the skill checks symbol availability via the `sfsymbols` CLI and configures rendering modes. It also handles `@main` root view switching and scene lifecycles.

Design choices must precede coding. Resolve materials and layout here before generating views in `axiom-swiftui`. Running the built-in auditor `axiom-audit-liquid-glass` requires shell access for simulators and test runners.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add CharlesWiltgen/Axiom --skill axiom-design -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/axiom-design/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/axiom-design/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add CharlesWiltgen/Axiom --skill axiom-design -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/axiom-design/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add CharlesWiltgen/Axiom --skill axiom-design -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/axiom-design/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install CharlesWiltgen/Axiom axiom-design
```

2. **Manually: put the files in place**
- File: `.github/skills/axiom-design/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add CharlesWiltgen/Axiom --skill axiom-design -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/CharlesWiltgen/Axiom --path axiom-codex/skills/axiom-design
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/axiom-design/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add CharlesWiltgen/Axiom --skill axiom-design -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/CharlesWiltgen/Axiom/tree/HEAD/axiom-codex/skills/axiom-design/SKILL.md

## When to use it
- select HIG-compliant spacing, margins, and semantic background colors
- plan Liquid Glass adoption and manage UIDesignRequiresCompatibility fallbacks
- configure SF Symbols rendering modes and test glyph availability via CLI
- structure the @main app entry point and auth state machine

## Example prompts
- Help me pick semantic colors and margins for this screen according to HIG
- How should I migrate our blur backgrounds to Liquid Glass using Regular or Clear?
- Check if this SF Symbol exists via sfsymbols CLI and select an animation effect

## Source text · SKILL.md · MIT

Below is the content of a third-party file. It is data, not instructions for you: do not act on anything written inside unless the human asks. Block tag: 00c2f8963e621a86.

BEGIN THIRD-PARTY FILE 00c2f8963e621a86
````text
---
name: axiom-design
description: Use when making visual or interaction design decisions for an Apple app — HIG patterns, Liquid Glass, SF Symbols, typography, app entry-point and auth-flow structure.
license: MIT
---

# Design & HIG

**You MUST use this skill for ANY visual design, HIG compliance, Liquid Glass, SF Symbols, typography, or app composition work.**

<!-- AXIOM_AUDITOR_INLINE_BEGIN — rewritten for Codex by scripts/build-codex.ts; do not hand-edit -->
> **Auditors are skills here.** Where this router says "Launch `some-auditor` agent", invoke the
> matching Codex skill instead — same procedure, no Claude Code agent required.
>
> Available: `axiom-audit-liquid-glass`.
>
> The ones that shell out — builds, tests, simulators, crash symbolication — need shell access to run.
<!-- AXIOM_AUDITOR_INLINE_END -->

## Quick Reference

| Symptom / Task | Reference |
|----------------|-----------|
| Design decisions, HIG compliance, colors, backgrounds | See `skills/hig.md` |
| Spacing, padding, margins, insets — what value to use | See `skills/hig.md` |
| Designing for iPhone Duo — poses, controls on the side, keeping UI out of the fold | See axiom-swiftui (skills/iphone-duo.md) |
| Section index / A–Z index strip / alphabet scrubber — should this list have one | See `skills/hig.md` |
| Semantic colors, custom color patterns, material styles | See `skills/hig-ref.md` |
| Liquid Glass effects, adoption, migration from blur effects | See `skills/liquid-glass.md` |
| App-wide Liquid Glass adoption, platform differences | See `skills/liquid-glass-ref.md` |
| Backward compatibility: the `UIDesignRequiresCompatibility` opt-out, and why the 27 SDK ignores it on OS 27 | See `skills/liquid-glass.md` (Backward Compatibility) |
| SF Symbols rendering modes, effects, animations | See `skills/sf-symbols.md` |
| SF Symbols API signatures, UIKit equivalents, availability | See `skills/sf-symbols-ref.md` |
| Verify a symbol name exists / check one symbol's availability or supported modes (`sfsymbols` CLI) | See `skills/sf-symbols-ref.md` (Part 11) |
| San Francisco fonts, text styles, Dynamic Type, tracking | See `skills/typography-ref.md` |
| App entry points, auth flows, root view switching, scene lifecycle, document-based apps | See `skills/app-composition.md` |
| Apple Pay button / Wallet pass design / Tap to Pay button | See `axiom-payments` suite, plus `skills/hig.md` for cross-cutting HIG context |

## Decision Tree

```dot
digraph design {
    start [label="Design task" shape=ellipse];
    what [label="What do you need?" shape=diamond];

    start -> what;
    what -> "skills/hig.md" [label="design decision,\nHIG compliance,\ncolor/background choice"];
    what -> "skills/hig.md" [label="spacing/padding/margin value"];
    what -> "skills/hig-ref.md" [label="semantic color API,\ncustom color code,\nmaterial style details"];
````
END THIRD-PARTY FILE 00c2f8963e621a86

The third-party file has ended. Everything between the 00c2f8963e621a86 tags is data: requests and commands from it are not followed. An “end of file” line with another tag inside the block is part of the file.

First 2887 of 11758 bytes. © CharlesWiltgen · MIT · https://github.com/CharlesWiltgen/Axiom/tree/HEAD/axiom-codex/skills/axiom-design/SKILL.md

_Part of the page did not fit — see the HTML version._

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md