cupertino-ui-consistency
Maintain Cupertino + Lumina visual consistency for the AERA frontend. Use when creating or modifying UI, CSS/tokens, layouts, components, menus/overlays, tables, charts, or interaction states in this repo.
When & Why to Use This Skill
The Cupertino UI Consistency skill is a specialized tool for Claude designed to maintain the visual integrity of the AERA frontend. It bridges the gap between Cupertino-inspired aesthetics and the Lumina design system, providing a rigorous framework for CSS tokens, glassmorphism materials, and accessibility. By automating the application of design standards, it helps developers ensure that every component—from sidebars to complex charts—meets high-quality UI/UX benchmarks and remains consistent across the entire repository.
Use Cases
- Enforcing Design Tokens: Systematically apply palette, typography, and spacing tokens to maintain a unified visual language across the codebase during frontend development.
- Building Glassmorphism Interfaces: Implement sophisticated 'glass' and 'blur' effects for sidebars, popovers, and headers consistent with premium Apple-like aesthetics.
- Optimizing Component Interactions: Ensure all UI elements feature smooth motion easing, proper hover/active states, and comprehensive keyboard accessibility (WCAG AA).
- Refining Data Displays: Style tables and charts with minimal borders, tabular numerals, and subtle indicators to improve data readability and visual hierarchy.
| name | cupertino-ui-consistency |
|---|---|
| description | Maintain Cupertino + Lumina visual consistency for the AERA frontend. Use when creating or modifying UI, CSS/tokens, layouts, components, menus/overlays, tables, charts, or interaction states in this repo. |
Cupertino Ui Consistency
Overview
Apply a consistent Cupertino-inspired layer on top of Lumina: clean, recessed surfaces, glass materials, soft shadows, and restrained hierarchy. Use the checklist to align typography, tokens, components, interactions, and accessibility.
Workflow
- Define and use tokens first (palette, type, spacing, radii, elevation, motion).
- Restyle components to match Cupertino + Lumina (materials, shapes, states).
- Validate interaction completeness and accessibility (keyboard, focus, reduced motion).
Checklist
- Typography: SF Pro Display/Inter system stack; avoid custom licensed fonts; set
font-variant-numeric: tabular-numsfor numbers. - Tokens: define palette (single blue, no purple), desaturated red, radii (squircle), shadows, elevation, spacing scale, type scale, icon sizes, and motion tokens.
- Materials: apply glass/blur for sidebar, popovers, dropdowns, sticky headers; keep soft ambient shadows.
- Components: ensure hover/active/focus-visible/disabled/loading/error states; keep weights light and rely on color/spacing.
- Overlay behavior: Esc closes, click-outside closes, focus returns to trigger, viewport-safe positioning.
- Keyboard nav: arrow keys for menus, enter/esc actions, tab order for all controls.
- Motion: Apple-like easing; 150-250ms; opacity/transform only; reduced-motion safe.
- Tables: text left, numbers right, dates centered; no vertical borders; subtle row hover and minimal sort indicators.
- Charts: minimal axes and grid; subtle hover tooltips; tabular numerals in labels.
- Forms/settings: System Settings layout with grouped sections; inspector panel or modal for edits.
- Sidebar: narrow, translucent, pill active state, subtle divider for secondary/profile items.
- Menus/dropdowns/popovers: frosted, soft shadow, consistent radius, subtle separators, full keyboard support.
- Accessibility: WCAG AA contrast, visible focus, keyboard access for all interactive elements.
- Iconography: monoline SF Symbols-like look; consistent stroke weight and sizes.
Validation
Confirm tokens are used across components, overlays meet interaction rules, and UI changes keep the Lumina aesthetic while applying Cupertino polish.