UnoCSS Skill by Anthony Fu: Config, Rules and Presets for Claude

Gives Claude the UnoCSS docs, so it configures presets, writes rules and shortcuts, and sets up Vite or Nuxt correctly.

Installs: 16.2K; on skills.sh
Stars: 6K; on GitHub
Files: 25; besides SKILL.md
Updated: Oct 2026; last repo commit

UnoCSS is a reference that Claude reads when you configure UnoCSS or write utility rules, shortcuts and presets. It was generated from the official UnoCSS docs (version 66.10.5, dated 2026-09-25 in SKILL.md), with 24 reference pages for core config, presets, transformers and Vite and Nuxt setup.

Before writing UnoCSS code, SKILL.md tells Claude to look for a uno.config or unocss.config file in your project. If the setup is unclear it sticks to basic class usage and avoids attributify mode.

Good for

Front-end developers using UnoCSS in a Vite or Nuxt project
Teams moving from Tailwind CSS who want the same utility syntax
Anyone writing custom UnoCSS rules, shortcuts or presets

Install unocss

Claude Code

Copy this prompt.

Install the unocss skill in Claude Code. Run this command:

npx skills add https://github.com/antfu/skills --skill unocss

Then check that it loaded and tell me how to use it.

2
Paste it into Claude Code. It shows the change and asks before running it.

Requires Node.js.

From its listing on skills.sh. Source.

What's in the skill

When it loads

UnoCSS instant atomic CSS engine, superset of Tailwind CSS. Use when configuring UnoCSS, writing utility rules, shortcuts, or working with presets like Wind, Icons, Attributify.

Sections in SKILL.md

Core
Presets
Main Presets
Feature Presets
Transformers
Integrations

Key facts

Author: Anthony Fu
License: MIT
Installs on skills.sh: 16,161 (Nov 2, 2026)
GitHub stars: 6,032 for the whole antfu/skills repo (Nov 2, 2026)
Last commit: Oct 30, 2026
What is inside: 26 files including SKILL.md: 24 reference pages and GENERATION.md (source commit and date). No scripts.
Based on: UnoCSS v66.10.5, generated 2026-09-25 (SKILL.md)
Skill version: 2026.9.25 (SKILL.md metadata)
Repo status: The README calls the collection a proof of concept and says the author has not fully tested how well the skills perform

What it includes

Config, rules, shortcuts, theme, variants, extracting, safelist, layers, processors
How UnoCSS is configured and how it finds utilities in your code, including dynamic rules and Lightning CSS processing.
Try: “Add a custom UnoCSS shortcut for my primary button and use it in this component.”
Core (9 pages)
Wind3 (Tailwind 3), Wind4 (Tailwind 4) and Mini
Wind3 is described as the most common. Wind4 targets Tailwind CSS v4 with modern CSS features. Mini is a small base for custom builds.
Main presets (3 pages)
Icons, Attributify, Typography, Web Fonts, Tagify and Rem to Px
Icons use Iconify sets as pure CSS. Attributify groups utilities in HTML attributes. Typography adds prose classes.
Feature presets (6 pages)
Variant group, directives, compile class and attributify JSX
Directives cover @apply, @screen, theme() and icon(). Compile class turns several classes into one hashed class.
Transformers (4 pages)
Vite setup with framework tips, and the Nuxt module
How to wire UnoCSS into a Vite or Nuxt project.
Integrations (2 pages)
Reads uno.config.* or unocss.config.* before writing code
Claude learns your presets, rules and shortcuts from the config. Without a clear setup it avoids advanced features.
Files · Project check first

From the official docs

Questions

What does the unocss skill do?

It gives Claude the UnoCSS documentation in 24 pages, so the config, rules, presets and integrations it writes follow the official behavior of UnoCSS.

How do I install it?

Use the install box at the top of this page. The antfu/skills README also documents a skills pack, @antfu/skills, installed with skills-npm, and pnpx skills add antfu/skills --skill='*' for the whole repo.

Does it need an API key or scripts?

No key is named and the folder bundles no scripts. It is Markdown reference.

Is it safe to install?

It is Markdown with no scripts, so it only adds instructions for Claude. Review the config and CSS Claude writes from it as you would any change.

Does it cover Tailwind CSS?

SKILL.md says UnoCSS is a superset of Tailwind CSS and you can reuse Tailwind knowledge for basic syntax. It has Wind3 and Wind4 presets for Tailwind v3 and v4 compatibility. It is not a Tailwind skill.

How current is it?

SKILL.md says it is based on UnoCSS v66.10.5, generated on 2026-09-25. The README describes the collection as a proof of concept that keeps skills in sync with source docs.

Information

updated Nov 2, 2026

Repository: antfu/skills
Folder: skills/unocss

antfu/skills skills.sh

Sources

Docs, issue trackers and discussions this page is built from.

Show all 2

github.com · github.com
github.com · github.com