antfu-design

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-include when needed). Use font-mono + tabular-nums for 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. Show more Installs 760 Repository antfu/skills GitHub Stars 5.6K First Seen Jun 23, 2026 Security Audits Gen Agent Trust Hub Pass Socket Pass Snyk Pass