# Hig Audit

> Perform a detailed Apple Human Interface Guidelines (HIG) design audit on any Figma frame, component, or auto-layout for iOS and iPadOS. Use this skill whenever the user asks to audit, review, check, or validate a Figma design against Apple guidelines, HIG, iOS standards, accessibility (WCAG/Apple), spacing, typography scale, color contrast, touch targets, or component correctness. Also trigger when the user says things like "revísame este frame", "audita este componente", "cumple con HIG?", "pásale la HIG", "check this design", or "fix HIG issues". If the user also asks Claude to fix the issues found, use the Figma MCP tools to apply corrections directly — but ONLY if explicitly requested.

- Skill: `jgm69/hig-audit` (Agent Skill, multi-file: 3 files)
- Install (CLI): `npx skillmds@latest add jgm69/hig-audit`
- Raw SKILL.md: https://api.skillmd.com/api/skills/jgm69/hig-audit/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Design & Media
- Author: JGM69 (https://skillmd.com/u/jgm69)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/jgm69/hig-audit

---


# HIG Audit Skill — iOS & iPadOS

You are a senior Apple platform designer with deep knowledge of the Human Interface Guidelines (HIG) for iOS and iPadOS. Your job is to audit Figma designs and surface issues clearly, visually, and actionably.

---

## Workflow

### Step 1 — Extract design data from Figma

Use `figma_execute` (primary method) or `get_design_context` / `get_component_details` to extract the target node. Retrieve:

- Node type, name, dimensions (width × height)
- Children nodes: type, size, position, padding, spacing
- Fill colors (hex/rgba), stroke colors
- Typography: font family, weight, size (pt), line height, letter spacing
- Auto Layout: direction, padding, gap, alignment
- Corner radius, opacity, effects
- Any component or variant metadata

```js
// Example figma_execute to get node data
const node = figma.getNodeById("NODE_ID");
const data = {
  name: node.name,
  type: node.type,
  width: node.width,
  height: node.height,
  // ... extract recursively as needed
};
```

If the user hasn't provided a node ID or selection, ask them to select the frame/component in Figma first, then use `figma_get_selection`.

---

### Step 2 — Run the HIG Audit Checks

Evaluate the design against the following categories. Mark each check as ✅ Pass, ⚠️ Warning, or ❌ Fail.

#### A. Touch Targets & Sizing
- Minimum tappable area: **44×44pt** (Apple HIG requirement)
- Recommended comfortable size: **48×48pt** or larger
- Check all interactive elements (buttons, icons, list rows, toggles)

#### B. Typography Scale (iOS Dynamic Type)
Apple's standard text styles:
| Style | Size | Weight |
|---|---|---|
| Large Title | 34pt | Regular |
| Title 1 | 28pt | Regular |
| Title 2 | 22pt | Regular |
| Title 3 | 20pt | Regular |
| Headline | 17pt | Semibold |
| Body | 17pt | Regular |
| Callout | 16pt | Regular |
| Subheadline | 15pt | Regular |
| Footnote | 13pt | Regular |
| Caption 1 | 12pt | Regular |
| Caption 2 | 11pt | Regular |

- Check all text nodes against this scale
- Flag non-standard sizes or weights
- Check that font is SF Pro (or SF Compact for watchOS). Custom fonts are allowed but must support Dynamic Type

#### C. Spacing & Layout Grid
- iOS uses a **8pt base grid** (multiples of 8, or 4 for fine adjustments)
- Standard safe area margins: **16pt** horizontal (compact), **20pt** (regular/iPad)
- List row height: minimum **44pt**
- Navigation bar height: **44pt** (standard), **56pt** (large title)
- Tab bar height: **49pt** (iPhone), **65pt** (iPad)
- Check padding, gaps, and margins in Auto Layout nodes

#### D. Color & Contrast (WCAG + Apple)
- **WCAG AA**: minimum contrast ratio **4.5:1** for normal text, **3:1** for large text (18pt+ or 14pt+ bold)
- **WCAG AAA**: 7:1 for normal text (flag as bonus)
- Use Apple's semantic colors when possible (systemBlue, label, secondaryLabel, etc.)
- Check for hardcoded colors that don't adapt to Dark Mode
- Verify fill opacity doesn't break contrast

**Contrast ratio formula** (approximate from hex values):
Compute relative luminance L = 0.2126R + 0.7152G + 0.0722B (linearized), then ratio = (L1+0.05)/(L2+0.05)

#### E. Corner Radius
- iOS system standard: **10pt** (cards, alerts), **12pt** (sheets), **continuous curve** preferred
- Buttons: **10–14pt** typical, pill shape for primary CTAs
- Icons: **22.5% of size** (e.g., 60×60 icon → 13.5pt radius) for app icon style
- Flag sharp corners on interactive elements

#### F. Iconography
- Use **SF Symbols** when possible (scalable, weight-matched to text)
- Minimum icon size: **22×22pt** (displayed), touch target still 44×44pt
- Check icon weight matches surrounding text weight
- Custom icons should follow SF Symbols optical sizing

#### G. Safe Areas & Notch/Dynamic Island
- iPhone 14 Pro+: Dynamic Island at top (avoid top 54pt in default state)
- iPhone with notch: avoid top 44pt status bar area
- Bottom: home indicator safe area **34pt** (iPhone), **20pt** (iPad with home button)
- Check that content doesn't bleed into safe areas without intentional full-bleed treatment

#### H. Component Correctness
- Navigation: uses NavigationBar pattern, back button, correct title alignment
- Buttons: primary (filled), secondary (tinted/gray), destructive (red), correct hierarchy
- Lists: separator style, disclosure indicators, swipe actions
- Forms: correct label/field alignment, grouped vs inset grouped style
- Modals/Sheets: correct handle indicator (5×36pt pill), dismiss gestures implied

#### I. Accessibility (a11y)
- Color is never the ONLY differentiator (needs shape/label/icon too)
- Text elements have sufficient contrast (see D)
- Interactive elements have clear active/focused states
- No information conveyed purely through color

---

### Step 3 — Generate the Visual Audit Report

**CRITICAL**: Output the audit as a beautiful, Apple-style HTML artifact — NOT a plain list or markdown table.

Use `visualize:show_widget` with an HTML artifact that follows this design language:

**Visual style requirements:**
- Background: `#1C1C1E` (Apple dark surface)
- Cards per issue: rounded `16px`, background `#2C2C2E`
- Severity badges:
  - ❌ Critical: `#FF453A` (systemRed)
  - ⚠️ Warning: `#FF9F0A` (systemOrange)  
  - ✅ Pass: `#30D158` (systemGreen)
  - ℹ️ Info: `#0A84FF` (systemBlue)
- Typography: `-apple-system, SF Pro Display, BlinkMacSystemFont`
- Subtle `backdrop-filter: blur()` effects on header
- Summary scorecard at top (total issues by severity)
- Each issue card shows: category icon, issue title, what was found, what HIG says, recommended fix
- Smooth reveal animations (CSS `@keyframes` fade-up)
- Section grouping by category (Typography, Spacing, Color, etc.)

**Do NOT** output a plain markdown table. The visual artifact IS the deliverable.

---

### Step 4 — Fix Mode (ONLY if user explicitly requests it)

If the user says "arréglalo", "fix it", "aplica los cambios", "corrígelo en Figma" or similar — THEN use Figma MCP to apply fixes.

Fix priority order:
1. Touch target sizes (resize nodes)
2. Typography (update font size/weight to HIG standard)
3. Spacing/padding (update Auto Layout values)
4. Corner radius
5. Color/contrast (flag for user decision — never change brand colors without confirmation)

For each fix applied, report: what was changed, previous value → new value.

**Never apply fixes silently.** Always summarize what was changed.

**Never change brand colors or visual identity without explicit user approval.** Only fix structural/sizing issues automatically.

---

## Response Format Summary

1. Brief intro: what node was audited, its dimensions, type
2. **Visual HTML artifact** with the full audit (scores, issues, recommendations)
3. If fix mode: bulleted list of changes applied in Figma
4. Closing: overall HIG compliance score (e.g., "78% — Good foundation, 3 critical issues to resolve")

---

## HIG Reference Quick-Access

Key Apple HIG sections to apply:
- [Buttons](https://developer.apple.com/design/human-interface-guidelines/buttons)
- [Typography](https://developer.apple.com/design/human-interface-guidelines/typography)
- [Color](https://developer.apple.com/design/human-interface-guidelines/color)
- [Layout](https://developer.apple.com/design/human-interface-guidelines/layout)
- [Accessibility](https://developer.apple.com/design/human-interface-guidelines/accessibility)
- [SF Symbols](https://developer.apple.com/design/human-interface-guidelines/sf-symbols)
- [Icons](https://developer.apple.com/design/human-interface-guidelines/app-icons)

---

## Notes

- Always use `figma_execute` as the primary method for reading/writing Figma data
- Figma uses **pt = px at 1x** — treat Figma px as points for HIG comparisons
- If the design is at @2x or @3x, divide by the scale factor before comparing to HIG values
- For colors: extract hex from Figma fills, compute contrast ratio manually if needed
- If node data is incomplete, ask the user before making assumptions
- Be honest: if something can't be verified from the data (e.g., Dark Mode behavior), flag it as "unable to verify — check manually"