What is the platform-visual-standards skill?
The platform-visual-standards skill is a SKILL.md in phazurlabs/sumi that records current visual standards for each platform. Your AI coding agent uses it when a design must feel native, from iOS 26 Liquid Glass and Material 3 Expressive to modern CSS, watch, TV, car and visionOS.
The platform-visual-standards skill is a reference for current platform visual standards: iOS 26 Liquid Glass and SF Symbols 7, Material 3 Expressive, modern web CSS for 2025 and 2026, plus watchOS, tvOS and automotive. It lives in the phazurlabs/sumi repository.
Its purpose is to make recommendations platform-native instead of platform-generic. Users have muscle memory and visual expectations formed by their OS, and ignoring platform standards makes an app feel alien.
Liquid Glass and Material 3
- Liquid Glass materials run from ultraThinMaterial at 8pt blur to ultraThickMaterial at 64pt, each with its own saturation boost and use case.
- The iOS 26 tab bar is a floating capsule 8pt above the bottom safe area, 49pt tall in compact and 56pt in regular, with a maximum of 5 items.
- Dynamic Color samples the wallpaper in the HCT color space and generates five tonal palettes: primary, secondary, tertiary, neutral and neutral variant.
- M3 Expressive uses spring physics instead of cubic beziers, with 35 shape tokens and tonal elevation levels 0 to 5.
Beyond phone and desktop
Further sections cover Watch and Wear OS, TV and 10-foot UI, automotive and HUD design, and spatial XR for visionOS. A cross-platform section adds a device matrix of 9 device types, shared design tokens and guidance on when to adapt versus unify.
Who the platform-visual-standards skill is for
Best for
- Designs that must feel native to iOS 26, to Android with Material 3 Expressive, or to the web with current CSS.
- Interfaces for a watch, a TV, a car or visionOS, where size, viewing distance and input differ from a phone.
- Teams mapping one set of tokens across CSS custom properties, SwiftUI and Compose themes.
Not for
- Scoring an interface in a 100-point report with severity and effort, which the ui-design-review skill covers.
- Setting who owns a design system and how changes are proposed, versioned and deprecated, which the design-system-governance skill covers.
- Serving Apple Human Interface Guidelines as structured data with Liquid Glass guardrails and SwiftUI mappings, which the hig-mcp server covers.
How to install Platform Visual Standards Skill: Liquid Glass and Material 3
/plugin marketplace add phazurlabs/sumi
/plugin install sumi@sumi-marketplacegit clone https://github.com/phazurlabs/sumi.git && claude --plugin-dir ./sumi.Check the requirement
You need the Claude Code CLI, authenticated. The core is markdown with zero config, and it works offline.
Add the marketplace and install
Run the two commands above to add the phazurlabs/sumi marketplace and install the sumi plugin.
Pick a scope
Choose the scope when you install: user for all your projects, project shared through .claude/settings.json, or local, which is yours and gitignored.
Start
Run
/sumi:start, which asks what you are working on in plain words and picks the play. You never need to learn the names of the skills.
Check that it loaded
After installing, run /sumi:start in your agent. If /plugin is not recognised, update Claude Code.
Key features
- Liquid Glass materialsFive material types carry a background blur radius, a saturation boost and a use case, from ultraThinMaterial at 8pt and 1.2x to ultraThickMaterial at 64pt and 2.0x.
- Floating tab bar specsA capsule 8pt above the bottom safe area, 49pt compact and 56pt regular, with a thinMaterial fill, 24x24pt SF Symbols, a maximum of 5 items and a collapse to a compact pill on scroll.
- Glass versus solid guidanceChrome such as bars and toolbars takes glass. Cards in scrollable lists, full-screen content and text-heavy reading views stay solid, and interactive controls use solid with a tint.
- SF Symbols 7 on glassFour rendering modes, monochrome, hierarchical, palette and multicolor, plus variable color. The preferred weight on glass is medium, with a medium scale and a minimum 22x22pt bounding box.
- Dynamic Color and spring motionHCT based tonal palettes, plus emphasized motion at stiffness 300 and damping ratio 0.8 and standard motion at stiffness 500 and damping ratio 1.0, with a 20 to 40ms list stagger.
- Shape and tonal elevation35 shape tokens in families, and tonal elevation levels 0 to 5 that shift the surface toward the primary color, from none at level 0 to +14% primary at level 5.
- Modern CSS 2025 to 2026Container queries, view transitions and anchor positioning, alongside :has(), nesting, @scope, scroll-driven animations, subgrid, @layer, @property, color-mix and light-dark().
- Watch and TV rulesApple Watch case sizes from 42mm at 176x215px to 49mm at 205x251px. TV overscan uses a 5% action safe area, a 10% title safe area and a 48px inset on 1080p.
- Automotive and visionOS limitsNHTSA limits of 2 seconds per glance, 12 seconds per task and 6 glances. On visionOS, eye targets are at least 60x60pt and hover effects appear within 50ms.
- Cross-platform token mappingGlobal, alias and component tokens, plus a table mapping CSS custom properties to SwiftUI and Compose M3 equivalents, with a JSON token file layout per platform.
Frequently asked questions
What is the platform-visual-standards skill?
It is a SKILL.md in the phazurlabs/sumi repository that records current visual standards for every major platform. Your AI coding agent uses it when a design must feel native to its platform, covering iOS 26 Liquid Glass, Material 3 Expressive, modern CSS, watchOS, tvOS, automotive and visionOS.
How do I install platform-visual-standards?
Run /plugin marketplace add phazurlabs/sumi, then /plugin install sumi@sumi-marketplace, and start with /sumi:start. Pick the scope when you install: user for all your projects, project through .claude/settings.json, or local and gitignored. The core is markdown with zero config. If /plugin is not recognised, update your agent.
What does it specify for the iOS 26 tab bar?
The tab bar is a floating capsule 8pt above the bottom safe area, 49pt tall in compact and 56pt in regular. It uses thinMaterial with a 1pt specular highlight, 24x24pt SF Symbols, equal spacing with 44pt minimum tap targets, and a maximum of 5 items before a More tab.
What driver distraction limits does it list?
It lists NHTSA limits of 2 seconds per glance away from the road, 12 seconds cumulative per task and 6 glances per task. Its compliance checklist adds no tasks needing more than 6 sequential inputs, voice first for tasks over the 12 second budget, and no video on the driver display in motion.
How does it handle tokens across platforms?
It defines tokens at three levels: global, alias and component. A table maps CSS custom properties such as --color-primary to SwiftUI and Compose M3 equivalents. The strategy is to define once in a neutral format, transform per platform, override at the platform layer and test with a visual diff.
Which agent do I need and does it work offline?
You need the Claude Code CLI, authenticated. The core of the plugin is markdown with zero config, and it works offline. Run /sumi:start after installing and it asks what you are working on in plain words, then picks the play, so you never have to learn skill names.