antfu-design
Installation
SKILL.md
Use this when building interfaces with UnoCSS in any framework (React, Vue, Svelte, Solid, or plain HTML), from dense devtools panels to landing pages. Read core-design-read first to set the direction, then apply the token system plus the polish and anti-slop rules.
Core Rules
- Use semantic shortcuts (
bg-base,border-base,color-active,btn-action) instead of raw utility chains in markup. - Design light and dark mode together. Core tokens must work in both themes.
- Name z-index layers (
z-top-nav,z-panel-content,z-drawer-content). Do not use raw z values in templates. - Generate class-based utilities only (
class="..."). Avoid Attributify syntax in generated code. - Keep icon/status class strings literal so UnoCSS can statically extract them (
// @unocss-includewhen needed). - Use
font-mono+tabular-numsfor technical values (paths, SHAs, counters, timestamps, percentages). - For long paths and IDs, truncate visually but keep the full value in
title. - Read the brief and set the three dials before choosing a look (core-design-read).
- Borders for dense or structural surfaces, layered shadows for elevated ones (features-micro-interactions).
- Zero em-dash and en-dash characters in any user-facing text (best-practices-anti-slop).
Starter shortcuts
A minimal semantic core. See core-starter-kit for the full uno.config.ts and base styles.