# Implement Apple Web UI

> Build Apple-inspired web interfaces in React, HTML, CSS, or frontend frameworks while respecting HIG principles. Use when Codex needs to implement iOS-style or macOS-style web UI, Apple-like visual hierarchy, SF/system typography, semantic colors, responsive safe-area layouts, accessible controls, glass or Liquid Glass inspired surfaces, React glass UI components, or design tokens for Apple-style web apps.

- Skill: `0xkoru/implement-apple-web-ui` (Agent Skill, multi-file: 3 files)
- Install (CLI): `npx skillmds@latest add 0xkoru/implement-apple-web-ui`
- Raw SKILL.md: https://api.skillmd.com/api/skills/0xkoru/implement-apple-web-ui/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Design & Media
- Author: 0xKoru (https://skillmd.com/u/0xkoru)
- Updated: 2026-09-22
- Page: https://skillmd.com/skills/0xkoru/implement-apple-web-ui

---


# Implement Apple Web UI

Use this skill for web interfaces that should feel Apple-inspired without pretending to be native iOS.

## Workflow

1. Inspect the existing frontend stack, component library, icon library, CSS strategy, and test tooling.
2. Use native HTML semantics first: buttons, inputs, labels, dialogs, navigation, lists, and tables. Style behavior without breaking accessibility.
3. Build from tokens: system font stack, semantic colors, spacing, radii, shadows, focus rings, and motion durations.
4. Choose platform feel intentionally: iOS for touch-first mobile views; macOS for dense desktop tools; visionOS/glass only when the user asks for a glass-forward style.
5. Keep glass readable: provide contrast, avoid busy backgrounds behind text, and include `prefers-reduced-transparency` or solid fallbacks when practical.
6. Verify responsive behavior at mobile, tablet, and desktop widths. Check text wrapping, target sizes, focus states, dark mode, and reduced motion.

## Web Design Rules

- Use `-apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", Arial, sans-serif`.
- Use semantic tokens like `--label-primary`, `--label-secondary`, `--fill-secondary`, `--bg-primary`, `--separator`, and `--accent`.
- Keep tap targets at least 44px high on touch surfaces.
- Use pill buttons for primary mobile actions, but do not make every element pill-shaped.
- Use cards sparingly for individual repeated items; prefer full-width sections and list surfaces for app workflows.
- Use blur/glass on navigation, toolbars, sidebars, floating controls, and modals. Avoid glass as a blanket background style.
- Prefer CSS media queries for `prefers-color-scheme`, `prefers-reduced-motion`, `prefers-contrast`, and `prefers-reduced-transparency`.
- If using `@mawtech/glass-ui`, preserve its accessibility behavior and adapt tokens instead of rewriting component internals.

## References

Read `references/apple-web-tokens.md` for tokens, CSS patterns, and library notes.