zi-ui-skill

Zi UI is a token-driven CSS design system with a calm, editorial aesthetic. Two-layer tokens (primitive → semantic), three orthogonal theming axes (brand × light/dark × contrast). Neutral palette, low chroma, 500 max font-weight, Geist typeface. Activate this skill when the user asks to build, style, mock up, or prototype UI in the Zi UI visual language — dashboards, internal tools, documentation sites, admin panels, SaaS interfaces. Also activate when the user references "Zi UI" by name, or asks to apply its tokens / components to an existing page. In React / Next.js / Vite projects, generate thin wrapper components on demand (3+ uses) instead of writing raw class strings everywhere. Do NOT activate for marketing landing pages, games, heavily branded consumer apps, or anything needing gradients, glows, or playful motion.