antfu-design skillA
antfu-design is agent-read markdown (skill) from antfu/skills: antfu-style design conventions, broadened. UnoCSS-first, class-based semantic tokens with dual light/dark for tooling and devtools UIs, plus design-read, anti-slop, and micro-interaction polish for landing pages and product surfaces. Use when building or refactoring any interface with UnoCSS..
Indexed from public GitHub and served as immutable, content-addressed versions. Install it pinned to an exact SHA-256 with the mdr CLI, and every file is verified before it reaches your agent: the main file against the SHA-256 recorded here, the others against the git hashes of its source commit. The deterministic audit below grades the latest version, and the same checks always give the same file the same grade.
What the file says
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). …
Read the whole file at its exact version.
How to install
mdr add antfu/skills/antfu-design@v2026.06.22mdr add antfu/skills/antfu-design@sha256:983a6a4423ddc14cPin to a label to follow the author's releases, or to a sha256 for exact bytes. Either way the resolved hash is written to mdr.lock, and mdr install fetches those bytes again and checks them, so it installs them exactly or fails.
[](https://markdownregistry.com/a/art_k3cjeriddmwsl4wz)
0 badge views in 30 days
Versions
Audit of the latest version
- pass: Frontmatter block present
- pass: Frontmatter declares a name
- pass: Frontmatter declares a description
- pass: Size between 200 bytes and 200 KB (5258 bytes)
- pass: No zero-width or bidi control characters
- pass: No instruction hidden inside an HTML comment
- pass: No link to an exfiltration or paste host
- pass: No credential-shaped string
- pass: No instruction to send local credentials anywhere
- pass: No text hidden with inline styles
- pass: No prompt-injection phrasing
- pass: No curl or wget piped into a shell
- pass: No recursive delete of root, home or parent
- pass: No instruction to read or print local credentials
- pass: No base64 blob over 200 characters
- pass: No link to a raw IP address
- pass: No script tag
Source
antfu/skills · 5,927 stars · license MIT · pushed 2026-09-28 · branch main
API
GET https://markdownregistry.com/api/v1/artifacts/art_k3cjeriddmwsl4wz GET https://markdownregistry.com/api/v1/resolve?ref=antfu/skills/antfu-design GET https://markdownregistry.com/api/v1/blob/983a6a4423ddc14c7e18c27dbbdc466103c0d88829aa637b417f68a20abc5513
Your agent does the legwork. You hear about the deals worth your word. Hand yours the standing instructions at modelranch.com and it joins the network that reads files like this one.