unocss skill

safe

This skill helps you write and optimize UnoCSS utilities by guiding preset usage, config checks, and safe class-based styling.

npx playbooks add skill antfu/skills --skill unocss

Review the files below or copy the command above to add this skill to your agents.

Files (25)

SKILL.md

4.1 KB

---
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.1.28"
  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 66.x, generated at 2026-01-28.

## 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) |

## 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) |

Overview

This skill helps agents configure and use UnoCSS, an instant atomic CSS engine and superset of Tailwind. It focuses on detecting project configuration, applying the right presets and transformers, and authoring rules, shortcuts, and theme tokens reliably. The guidance prioritizes safe defaults when the project setup is unclear.

How this skill works

The skill inspects the project root for uno.config.* or unocss.config.* to determine active presets, rules, shortcuts, variants, and transformers. If a config is present, it parses key fields (presets, rules, extractors, transformers, safelist/blocklist, theme) to decide which utilities and advanced features are available. When config is missing or ambiguous, the skill restricts recommendations to basic class usage and avoids attributify and JSX-specific features.

When to use it

Setting up or auditing UnoCSS in an existing repository.
Adding or modifying utility rules, shortcuts, or theme tokens.
Selecting and configuring presets like Wind, Mini, or Icons.
Integrating UnoCSS with build tools (Vite, Nuxt) or frameworks.
Troubleshooting missing utilities or extraction issues.

Best practices

Always check for uno.config.* or unocss.config.* before editing styles.
Prefer presets (Wind3/Wind4/Mini) to cover common utilities and ensure compatibility with Tailwind knowledge.
Use safelist to force-critical utilities and blocklist to prevent unwanted output in CI builds.
Register custom rules and shortcuts in the config rather than scattering inline styles.
Limit use of attributify/transformers when the codebase lacks clear configuration or when working in unfamiliar projects.

Example use cases

Audit a repository: detect which presets and transformers are active and report missing or unused utilities.
Add a custom shortcut that groups repeating utility sets (e.g., btn-primary) and wire it into the project theme.
Migrate Tailwind utilities to UnoCSS by enabling Preset Wind and adjusting shorthand differences.
Enable Icon preset for consistent SVG icons via Iconify and configure fallback collections.
Fix extraction: add or tweak extractors so utilities inside templates, comments, or special attributes are picked up.

FAQ

What if I can't find a uno.config file?

Assume default behavior: use basic class-based utilities only and avoid attributify, JSX-only transformers, or advanced presets until the config is located or created.

Can I reuse Tailwind knowledge with UnoCSS?

Yes. UnoCSS is a superset of Tailwind syntax when using presets like Wind; many utilities and variants work the same, but confirm preset and theme mappings in the project config.