0xKoru Implement Apple Web UI
Use this skill for web interfaces that should feel Apple-inspired without pretending to be native iOS.
Workflow
- Inspect the existing frontend stack, component library, icon library, CSS strategy, and test tooling.
- Use native HTML semantics first: buttons, inputs, labels, dialogs, navigation, lists, and tables. Style behavior without breaking accessibility.
- Build from tokens: system font stack, semantic colors, spacing, radii, shadows, focus rings, and motion durations.
- 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.
- Keep glass readable: provide contrast, avoid busy backgrounds behind text, and include
prefers-reduced-transparencyor solid fallbacks when practical. - 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, andprefers-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.