Skip to main content
affpapa.org
RU EN
skill Claude Code CX Codex Cursor GitHub Copilot

unocss — Claude Code skill: what it does, how to install

A skill that gives the agent reference material on UnoCSS configuration, rules, shortcuts and presets. Useful when setting up UnoCSS or reusing Tailwind knowledge in it.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓ 
npx skills add antfu/skills --skill unocss -a claude-code
Open on GitHub

What unocss does

The skill treats UnoCSS as an atomic CSS engine with no built-in utilities of its own: everything comes from presets, and the syntax is a superset of Tailwind CSS, so basic Tailwind knowledge carries over. Topics covered include configuration, static and dynamic rules, shortcuts, theming, variants such as hover: and dark:, how UnoCSS extracts classes from source, safelist/blocklist, layers and preflights, and processors such as Lightning CSS.

It also documents presets — Wind3, Wind4, Mini, Icons, Attributify, Typography, Web Fonts, Tagify, Rem to Px — plus transformers for variant grouping, @apply/@screen/theme() directives, class compilation, and attributify support in JSX. Integration notes cover Vite and Nuxt setups.

Before writing UnoCSS code, the agent is told to check the project root for uno.config.* or unocss.config.* to see which presets and rules are already in place. If the setup is unclear, it's steered away from attributify mode and other advanced features toward plain class usage.

What it helps with

  • set up a UnoCSS config with the right presets
  • write static and dynamic utility rules
  • combine utilities into a shortcut
  • wire up icons via Iconify or attributify mode
  • configure a Vite or Nuxt build with UnoCSS

Example prompts for the agent

  • set up UnoCSS in this project with the Wind3 preset and icons
  • add a UnoCSS shortcut for the card component
  • check uno.config.ts and suggest which presets to enable

How to install unocss

1Skills CLI (Vercel)

npx skills add antfu/skills --skill unocss -a claude-code

2Manually: put the files in place

~/.claude/skills/unocss/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/unocss/

From the same set7

The whole set →
vitest Anthony Fu This skill guides work with Vitest tests, mocks, coverage, filtering, and fixtures. Use it when setting up tests or checking how Vitest fits a Vite project. Claude Code CX Codex Cursor +1 43,600installs vite Anthony Fu This skill covers Vite configuration, plugin development, SSR builds, and the Vite 8 move to Rolldown. Use it with vite.config.ts work. Claude Code CX Codex Cursor +1 39,800installs vue Anthony Fu This skill guides agents through Vue 3 Composition API, script setup, and reactivity. Use it when writing Vue SFCs or built-in component flows. Claude Code CX Codex Cursor +1 35,800installs nuxt Anthony Fu This skill equips your AI agent with Nuxt 5 knowledge: server-side rendering, file-based routing, auto-imports, and Nitro v3 deployment. Use it when building Nuxt apps, server routes, useFetch calls, middleware, or hybrid rendering. Claude Code CX Codex Cursor +1 24,100installs pnpm Anthony Fu Skill for working with pnpm, a Node.js package manager with strict dependency resolution. Use it when your project relies on workspaces, version catalogs, patches, or dependency overrides. Claude Code CX Codex Cursor +1 22,300installs pinia Anthony Fu Pinia skill adds reference documentation to Claude Code for the official Vue state management library. Use it when defining stores, managing state, getters, and actions in Vue apps. Claude Code CX Codex Cursor +1 19,700installs

Similar

interaction-design Seth Hobson This skill helps design microinteractions, transitions, and feedback states. Use it when polishing a UI or building loading and gesture patterns. Claude Code CX Codex Cursor 16,146installs design-system-patterns Seth Hobson Guides the design of design tokens, theme switching, and component library architecture. Use it when establishing shared UI foundations for a project. Claude Code CX Codex Cursor 15,953installs next vercel-labs Converts JSON specs into Next.js apps with routes, layouts, SSR, and metadata. Handy when building AI-generated multi-page apps with @json-render/next. Claude Code CX Codex Cursor +1 8,600installs react-best-practices mastra-ai 27 React performance and quality rules, priority-ordered: from eliminating request waterfalls to strict typing. Claude Code CX Codex Cursor +1 2,800installs react-native-design Seth Hobson This skill guides React Native styling, navigation, and Reanimated animations. Use it when building cross-platform mobile apps or platform-specific screens. Claude Code CX Codex Cursor 15,522installs angular-developer Copyright 2026 Google LLC Generates Angular code and gives architecture guidance for components, services, forms, routing, and HTTP. Useful when starting or changing an Angular project. Claude Code CX Codex Cursor +1 45,900installs frontend-design official anthropics This skill guides intentional visual design for new interfaces and redesigns. Use it when a generic generated UI is not enough. Claude Code Claude.ai 1,025,790installs design-taste-frontend Leonxlnx This skill directs the design of public pages and work screens, then checks the result in a browser through screenshots. Use it when an interface feels generic or unfinished. Claude Code CX Codex Cursor +1 673,100installs

Questions about unocss

How to install unocss in Claude Code?

Run npx skills add antfu/skills --skill unocss -a claude-code — the skill lands in ~/.claude/skills/unocss/SKILL.md.

What does the unocss skill do?

It gives the agent reference material on UnoCSS configuration, rules, presets and transformers so it writes correct utilities and sets up the build without guessing the syntax.

Does it require knowing Tailwind CSS?

UnoCSS is described as a superset of Tailwind CSS, so basic utility syntax carries over directly, while the skill adds coverage of presets, shortcuts and theming that Tailwind doesn't have.

Source text

SKILL.md · MIT 
---
name: unocss
description: 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.
metadata:
  author: Anthony Fu
  version: "2026.9.25"
  source: Generated from https://github.com/unocss/unocss, scripts located at https://github.com/antfu/skills
---

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.

**Important:** Before writing UnoCSS code, agents should check for `uno.config.*` or `unocss.config.*` files in the project root to understand what presets, rules, and shortcuts are available. If the project setup is unclear, avoid using attributify mode and other advanced features - stick to basic `class` usage.

> The skill is based on UnoCSS v66.10.5, generated at 2026-09-25.

## Core

| Topic | Description | Reference |
|-------|-------------|-----------|
| Configuration | Config file setup and all configuration options | [core-config](references/core-config.md) |
| Rules | Static and dynamic rules for generating CSS utilities | [core-rules](references/core-rules.md) |
| Shortcuts | Combine multiple rules into single shorthands | [core-shortcuts](references/core-shortcuts.md) |
| Theme | Theming system for colors, breakpoints, and design tokens | [core-theme](references/core-theme.md) |
| Variants | Apply variations like hover:, dark:, responsive to rules | [core-variants](references/core-variants.md) |
| Extracting | How UnoCSS extracts utilities from source code | [core-extracting](references/core-extracting.md) |
| Safelist & Blocklist | Force include or exclude specific utilities | [core-safelist](references/core-safelist.md) |
| Layers & Preflights | CSS layer ordering and raw CSS injection | [core-layers](references/core-layers.md) |
| Processors | Transform generated CSS layers (incl. Lightning CSS) | [core-processors](references/core-processors.md) |

## Presets

### Main Presets

| Topic | Description | Reference |
|-------|-------------|-----------|
| Preset Wind3 | Tailwind CSS v3 / Windi CSS compatible preset (most common) | [preset-wind3](references/preset-wind3.md) |
| Preset Wind4 | Tailwind CSS v4 compatible preset with modern CSS features | [preset-wind4](references/preset-wind4.md) |
| Preset Mini | Minimal preset with essential utilities for custom builds | [preset-mini](references/preset-mini.md) |

### Feature Presets

| Topic | Description | Reference |
|-------|-------------|-----------|
| Preset Icons | Pure CSS icons using Iconify with any icon set | [preset-icons](references/preset-icons.md) |
| Preset Attributify | Group utilities in HTML attributes instead of class | [preset-attributify](references/preset-attributify.md) |
| Preset Typography | Prose classes for typographic defaults | [preset-typography](references/preset-typography.md) |
| Preset Web Fonts | Easy Google Fonts and other web fonts integration | [preset-web-fonts](references/preset-web-fonts.md) |
| Preset Tagify | Use utilities as HTML tag names | [preset-tagify](references/preset-tagify.md) |
| Preset Rem to Px | Convert rem units to px for utilities | [preset-rem-to-px](references/preset-rem-to-px.md) |

## Transformers

| Topic | Description | Reference |
|-------|-------------|-----------|
| Variant Group | Shorthand for grouping utilities with common prefixes | [transformer-variant-group](references/transformer-variant-group.md) |
| Directives | CSS directives: @apply, @screen, theme(), icon() | [transformer-directives](references/transformer-directives.md) |
| Compile Class | Compile multiple classes into one hashed class | [transformer-compile-class](references/transformer-compile-class.md) |
| Attributify JSX | Support valueless attributify in JSX/TSX | [transformer-attributify-jsx](references/transformer-attributify-jsx.md) |

## Integrations

| Topic | Description | Reference |
|-------|-------------|-----------|
| Vite Integration | Setting up UnoCSS with Vite and framework-specific tips | [integrations-vite](references/integrations-vite.md) |
| Nuxt Integration | UnoCSS module for Nuxt applications | [integrations-nuxt](references/integrations-nuxt.md) |

© Anthony Fu · MIT · antfu/skills

See also

Project sponsors

Companies that keep this analytics open
Gold sponsor
Nutra.Club

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor