platform-visual-standards
Installation
SKILL.md
Platform Visual Standards
Why Platform Visual Standards Matter
Every platform has a visual language — materials, motion curves, typography rules, spacing systems, and interaction idioms. A professional app respects these conventions because users have muscle memory and visual expectations formed by their OS. Ignoring platform standards makes an app feel alien. This skill ensures Sumi knows the current visual standards for every major platform so recommendations are platform-native, not platform-generic.
Reference Architecture
| File | Contents | Use When |
|---|---|---|
references/ios-26-liquid-glass.md |
iOS 26/iPadOS 26 Liquid Glass design system: material tiers, vibrancy levels, SF Symbols 7 (rendering modes, variable color, animations), Dynamic Island, StandBy mode, Live Activities, SwiftUI implementation patterns, Safe Areas, Dynamic Type. | Designing for iPhone, iPad. Recommending iOS-native patterns. Implementing Liquid Glass correctly. |
references/material-3-expressive.md |
Material Design 3 Expressive: 35-shape library (morphing shapes), spring-physics motion (mass, stiffness, damping), HCT color space, Dynamic Color (wallpaper extraction), M3 component gallery, Jetpack Compose patterns, canonical layouts for tablets/foldables. | Designing for Android, Wear OS. Recommending Material-native patterns. Implementing Dynamic Color. |
references/web-css-2025-2026.md |
Modern CSS capabilities: container queries (@container), view transitions API (same-doc + cross-doc), scroll-driven animations, oklch()/lch() color functions, anchor positioning, CSS nesting, :has() selector, subgrid, @layer cascade layers, @scope (scoped styles), @starting-style (entry animations), interpolate-size: allow-keywords (animate to height: auto), text-wrap: balance/pretty, transition-behavior: allow-discrete, @property (typed/animatable custom properties), field-sizing: content, scroll-snap-stop: always, Figma Sites/new products. | Building web interfaces. Recommending modern CSS patterns. Avoiding outdated approaches. Entry/exit animations without JS. Height auto transitions. |
references/watchos-tvos-automotive.md |
Watch design (Apple Watch, Wear OS): complications, glanceability, Digital Crown. TV design (tvOS, Android TV, Fire TV): 10-foot UI, D-pad navigation, focus system, overscan. Automotive (CarPlay, Android Auto): glanceability, driver safety, touch targets. | Designing for non-phone/tablet devices. Understanding unique constraints of each form factor. |
references/spatial-xr-design.md |
Spatial computing: visionOS (windows, volumes, spaces, Liquid Glass), Meta Quest (Horizon OS, 2D panels, immersive), WebXR, AR overlay patterns. Depth, gaze, gesture interaction models. | Designing for AR/VR/MR. Understanding spatial UI constraints. visionOS app design. |
references/cross-platform-harmony.md |
How to maintain one design system across 9 form factors: phone, tablet, desktop, TV, watch, spatial, automotive, kiosk, e-ink. Token architecture for multi-platform. Platform adaptation patterns. When to diverge vs. converge. | Building cross-platform design systems. Deciding platform-specific vs. shared patterns. Multi-device strategy. |