What problem does it solve? Building interfaces with UnoCSS often produces inconsistent styling, raw utility chains scattered across markup, broken dark mode, and generic AI-looking output. This Skill enforces a semantic token system and design discipline so generated UI code stays consistent, themeable, and free of common AI-slop patterns. ## Core Features & Use Cases - Semantic Token System: Provides copy-paste UnoCSS shortcuts (bg-base, border-base, btn-action, named z-layers) that work in both light and dark mode across React, Vue, Svelte, Solid, and plain HTML. - Design Read and Dials: Guides the agent to declare a design read and set variance, motion, and density dials before choosing a look, with separate baselines for tooling UIs and marketing pages. - Anti-Slop and Polish Rules: Enforces hard bans on em-dashes, generic placeholder content, and AI-purple defaults, plus micro-interaction polish like concentric radius, tabular numbers, and staggered enters. - Use Case: When asked to build a devtools panel or landing page in a Vue 3 + UnoCSS project, the agent applies the starter config, uses semantic shortcuts in markup, and passes a pre-flight checklist before returning code. ## Quick Start Ask the agent to build a settings panel or landing section for your UnoCSS project and it will apply the antfu-design token system and polish rules automatically.
