liquid-apple-ui-skilllisted

# Liquid Apple UI Skill (v2.1) Design system and frontend engineering patterns for crafting authentic Apple Cupertino-caliber light liquid crystal interfaces without heavyweight framework dependencies (React, Next.js, or runtime `node_modules`). Directly reverse-engineered and extracted from the production-tested **AGY Router** mission-control console and **CekWeb Megapass** workbench applications. --- ## 1. Cupertino Canvas & Color Palette Tokens Strictly avoid generic flat muddy grays. The authentic Apple light-mode aesthetic uses an ultra-clean platinum foundation (`#F5F5F7`), dynamic ambient iridescent mesh gradients, and translucent frosted glass cards. For dark mode tokens, see Section 10. ### Core Tokens & Variables ```css :root { --apple-blue: #0071E3; --apple-blue-hover: #0077ED; --apple-indigo: #5E5CE6; --apple-mint: #30D158; --apple-orange: #FF9F0A; --apple-pink: #FF375F; --apple-purple: #BF5AF2; --apple-teal: #64D2FF; --text-primary: #1D1D1F; --text-secondary: #86868B; } ``` ### Surface & Depth Hierarchy Table | Component Level | Visual Specification | Styling Class / CSS | Semantic Purpose | |---|---|---|---| | **Ambient Canvas** | `#F5F5F7` + Iridescent Mesh Radial Gradients | `.apple-ambient-canvas` | Deepest foundation layer; dynamic color hints at 5 coordinate points | | **Frosted Glass Cards** | `rgba(255,255,255,0.92)` + `blur(32px) saturate(190%)` | `.crystal-card` | Main content panels, data containers, and fixed sidebar navig