Skills

Skill 1 of 19

Antfu Design

antfu-style design conventions, broadened.

2 minutes · 407 words · 6 sections

Install

$ npx skills add antfu/skills --skill antfu-design

$ npx skills add antfu/skills

The first command installs just this skill, by the name in its SKILL.md; the second installs the whole repository.

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.

shortcuts: [
  {
    'color-base': 'color-neutral-800 dark:color-neutral-200',
    'bg-base': 'bg-white dark:bg-#111',
    'bg-secondary': 'bg-#eee dark:bg-#222',
    'border-base': 'border-#8882',

    'bg-active': 'bg-#8881',
    'color-active': 'color-primary-600 dark:color-primary-300',
    'border-active': 'border-primary-600/25 dark:border-primary-400/25',

    'btn-action': 'inline-flex items-center gap-2 rounded border border-base px2 py1 op75 hover:op100 hover:bg-active disabled:pointer-events-none disabled:op30!',
    'op-fade': 'op65 dark:op55',
    'op-mute': 'op30 dark:op25',

    'z-top-nav': 'z-60',
    'z-panel-content': 'z-70',
    'z-drawer-content': 'z-100',
  },
]

Core References

Topic	Description	Reference
Core Principles	Semantic tokens, dark mode parity, z-index naming, class-first output	core-principles (opens in a new tab)
Starter Kit	Copy-paste UnoCSS starter config and base light/dark styles	core-starter-kit (opens in a new tab)
Tokens and Combos	Token families, reusable class combinations, mobile-safe shell tokens	core-tokens-and-combinations (opens in a new tab)
Design Read and Dials	Read the brief, declare a design read, set variance/motion/density dials	core-design-read (opens in a new tab)

Best Practices

Topic	Description	Reference
Strict Rules and Pre-Flight	Do/don’t checklist and the consolidated pre-flight	best-practices-strict-rules (opens in a new tab)
Class over Attributify	Why generated code uses class utilities, with conversions	best-practices-class-utilities-over-attributify (opens in a new tab)
Anti-Slop Hygiene	The dash ban and the AI-tell forbidden patterns	best-practices-anti-slop (opens in a new tab)
Bias Correction	Typography, color, layout, and materiality defaults to override	best-practices-bias-correction (opens in a new tab)

Features

Topic	Description	Reference
Data Presentation	Paths, icons, time, date, numbers, badges, buttons	features-data-presentation (opens in a new tab)
Micro-Interactions	Radius, alignment, shadows, animation, numbers, outlines, hit areas	features-micro-interactions (opens in a new tab)
Floating Vue Overrides	Shared Floating Vue setup and popper styling	features-floating-vue-overrides (opens in a new tab)

Advanced

Topic	Description	Reference
Pattern Vocabulary	Named UI patterns to recognize and reach for	advanced-pattern-vocabulary (opens in a new tab)
Redesign Protocol	Detect mode, audit first, preserve IA and SEO	advanced-redesign-protocol (opens in a new tab)

About this skill

Trigger

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.

The verbatim description from this skill’s front matter — the string an agent matches on to decide whether to load it.

Colophon for this issue

Colophon

How this issue was made

Source: github.com/antfu/skills, branch main, last pushed 23 June 2026.
Licence: MIT — the text of every skill is reproduced unmodified, frontmatter included, under the upstream licence.
Discovery: 19 skills found by walking the repository tree for SKILL.md, not by matching a directory convention. One layout observed: skills/*/SKILL.md.
Issue colours: Resolved from a deterministic hash of the owner name. Two accent tones are generated per issue and each is proven against its own ground before it ships: a single accent that passes AA on both light and dark paper is arithmetically impossible.
Heading repairs: None needed in this skill: the outline was already valid.
Spec compliance: Every skill satisfies the Agent Skills specification’s frontmatter rules.
Images: Images inside a skill come from the upstream repository. Where the author gave no alternative text we mark the image decorative rather than inventing a description — a plausible caption we made up is worse than none for the reader who depends on it.
Signal: This repository is unranked on skills.sh, which says nothing about it: the leaderboard covers a fraction of published skills.
Agent surfaces: The whole issue is available as one markdown document at /antfu/skills.md, and each skill at its own .md URL.
Publication: Set by Skills Docs from the source repository. Body text is Literata at the reader’s chosen size and measure; code is Geist Mono. Nothing on this page was written by us except this paragraph.

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.

shortcuts: [
  {
    'color-base': 'color-neutral-800 dark:color-neutral-200',
    'bg-base': 'bg-white dark:bg-#111',
    'bg-secondary': 'bg-#eee dark:bg-#222',
    'border-base': 'border-#8882',

    'bg-active': 'bg-#8881',
    'color-active': 'color-primary-600 dark:color-primary-300',
    'border-active': 'border-primary-600/25 dark:border-primary-400/25',

    'btn-action': 'inline-flex items-center gap-2 rounded border border-base px2 py1 op75 hover:op100 hover:bg-active disabled:pointer-events-none disabled:op30!',
    'op-fade': 'op65 dark:op55',
    'op-mute': 'op30 dark:op25',

    'z-top-nav': 'z-60',
    'z-panel-content': 'z-70',
    'z-drawer-content': 'z-100',
  },
]

Core References

Topic	Description	Reference
Core Principles	Semantic tokens, dark mode parity, z-index naming, class-first output	core-principles (opens in a new tab)
Starter Kit	Copy-paste UnoCSS starter config and base light/dark styles	core-starter-kit (opens in a new tab)
Tokens and Combos	Token families, reusable class combinations, mobile-safe shell tokens	core-tokens-and-combinations (opens in a new tab)
Design Read and Dials	Read the brief, declare a design read, set variance/motion/density dials	core-design-read (opens in a new tab)

Best Practices

Topic	Description	Reference
Strict Rules and Pre-Flight	Do/don’t checklist and the consolidated pre-flight	best-practices-strict-rules (opens in a new tab)
Class over Attributify	Why generated code uses class utilities, with conversions	best-practices-class-utilities-over-attributify (opens in a new tab)
Anti-Slop Hygiene	The dash ban and the AI-tell forbidden patterns	best-practices-anti-slop (opens in a new tab)
Bias Correction	Typography, color, layout, and materiality defaults to override	best-practices-bias-correction (opens in a new tab)

Features

Topic	Description	Reference
Data Presentation	Paths, icons, time, date, numbers, badges, buttons	features-data-presentation (opens in a new tab)
Micro-Interactions	Radius, alignment, shadows, animation, numbers, outlines, hit areas	features-micro-interactions (opens in a new tab)
Floating Vue Overrides	Shared Floating Vue setup and popper styling	features-floating-vue-overrides (opens in a new tab)

Advanced

Topic	Description	Reference
Pattern Vocabulary	Named UI patterns to recognize and reach for	advanced-pattern-vocabulary (opens in a new tab)
Redesign Protocol	Detect mode, audit first, preserve IA and SEO	advanced-redesign-protocol (opens in a new tab)

Antfu Design

Core Rules

Starter shortcuts

Core References

Best Practices

Features

Advanced

About this skill

Trigger

Colophon

Antfu Design

Core Rules

Starter shortcuts

Core References

Best Practices

Features

Advanced

Appendix 1.1–1.14

ReferencesMarkdown · 13 files

Also bundledMarkdown · 1 file

About this skill

Trigger

Colophon

Appendix 1.1–1.14

ReferencesMarkdown · 13 files

Also bundledMarkdown · 1 file