unocss

by antfu 5.8k MIT Updated Jun 23, 2026
unocss skill by antfu
unocss — Frontend skill by antfu

unocss is an open-source frontend skill for Claude Code and compatible agents, published by antfu. Its author describes it as: “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.”. The project has 5.8k stars on GitHub and is available under the MIT license. Add it to your setup with `git clone https://github.com/antfu/skills ~/.claude/skills/unocss`.

What unocss does

UnoCSS is an instant atomic CSS engine designed to be flexible and extensible. The core is un-opinionated - all CSS utilities are provided via presets. It's a superset of Tailwind CSS, so you can reuse your Tailwind knowledge for basic syntax usage.

Installation

Add unocss to your agent with:

git clone https://github.com/antfu/skills ~/.claude/skills/unocss

Always review a skill's source before installing it. This command comes from the skill's public repository; the linked repo is the source of truth for exact setup steps.

What's inside

The SKILL.md for unocss is organised into these sections:

  • Core
  • Presets
  • Main Presets
  • Feature Presets
  • Transformers
  • Integrations

When to use it

Reach for unocss when you want frontend help from your agent without writing the same instructions every session. Load the skill and the agent picks it up automatically for relevant tasks.

Strengths

  • Clear MIT license — safe to read and adapt
  • Ships in antfu/skills, an established project with 5,770 GitHub stars
  • Actively maintained (recent commits)

Topics

agent-skillsskills

Frequently asked questions

What does unocss do?
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.
How do I install unocss?
Run git clone https://github.com/antfu/skills ~/.claude/skills/unocss in your agent, then reload your skills. Review the source at https://github.com/antfu/skills before installing.
Is unocss free to use?
Yes. unocss is free and open source under the MIT license, so you can read, run, and adapt it within that license's terms.
Where does unocss come from?
unocss ships inside antfu/skills, a repository that contains 19 catalogued skills in total. The repository's 5,770 GitHub stars apply to that whole collection, not to this skill on its own.

Related skills

More Frontend →

Nuxt full-stack Vue framework with SSR, auto-imports, and file-based routing. Use when working with Nuxt apps, server routes, useFetch, middleware, or hybrid rendering.

5.8k antfu MIT

Pinia official Vue state management library, type-safe and extensible. Use when defining stores, working with state/getters/actions, or implementing store patterns in Vue apps.

5.8k antfu MIT

Create and present web-based slidedecks for developers using Slidev with Markdown, Vue components, code highlighting, animations, and interactive features. Use when building technical presentations, conference talks, code walkthroughs, teaching materials, or developer decks.

5.8k antfu MIT

Bundle TypeScript and JavaScript libraries with blazing-fast speed powered by Rolldown. Use when building libraries, generating type declarations, bundling for multiple formats, or migrating from tsup.

5.8k antfu MIT

Vite build tool configuration, plugin API, SSR, and Vite 8 Rolldown migration. Use when working with Vite projects, vite.config.ts, Vite plugins, or building libraries/SSR apps with Vite.

5.8k antfu MIT