Unocss — Agent Skill by Anthony Fu

From the author

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 description by Anthony Fu

AutoGineer summary

Written by AutoGineer from the skill’s own files, not by the author

UnoCSS is an instant, atomic CSS engine that provides a highly flexible and extensible approach to styling. Unlike traditional CSS frameworks, it is un-opinionated and relies on presets to provide utility classes. It serves as a superset of Tailwind CSS, allowing developers to leverage existing knowledge while benefiting from advanced features like custom rules, shortcuts, and various integration presets. The engine operates by extracting utility classes from source files at build time to generate CSS on-demand, ensuring minimal bundle sizes.

What it does

Generates atomic CSS utilities on-demand based on project configuration.
Supports custom utility rules, shortcuts, and design tokens via a central configuration file.
Provides modular presets for features like icons, typography, web fonts, and attributify mode.
Integrates with build tools like Vite and frameworks like Nuxt for seamless development.
Allows fine-grained control over CSS generation through safelists, blocklists, and custom extractors.
Supports code transformation features like variant grouping and CSS directives.

When to use it

When you need a highly customizable and performant CSS solution for modern web applications.
When you want to use Tailwind-like syntax but require more flexibility or specific custom utilities.
When you need to integrate specialized features like Iconify icons or custom web fonts directly into your CSS workflow.
When you are working in a Vite or Nuxt environment and want optimized, build-time CSS generation.

Advantages

Extremely fast, on-demand CSS generation.
Highly extensible architecture through presets and custom rules.
Compatible with Tailwind CSS syntax.
Reduces CSS bundle size by only generating what is actually used.
Offers powerful configuration options for complex design systems.

Usage examples

“How do I define a custom shortcut in UnoCSS?”: You can add a 'shortcuts' object to your 'uno.config.ts' file, mapping a shorthand name to a string of utility classes, such as 'btn': 'py-2 px-4 rounded'.
“How can I ensure specific utility classes are always included in my build?”: Add the required classes to the 'safelist' array within your 'uno.config.ts' file to force UnoCSS to include them regardless of whether they are found in the source code.
“How do I add a custom rule for a specific margin value?”: In your 'uno.config.ts', add an entry to the 'rules' array, such as ['m-custom', { margin: '13px' }], to generate a new utility class.
“How do I enable attributify mode in my project?”: Install the 'preset-attributify' package and add 'presetAttributify()' to the 'presets' array in your 'uno.config.ts' file.

Install

Download the skill as a ZIP:
https://mp-staging.autogineer.com/agent-skills/antfu/unocss/download
Unzip it into the cross-client skills folder of your project:
```
mkdir -p .agents/skills && unzip unocss.zip -d .agents/skills
```

Documentation by Anthony Fu

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
Rules	Static and dynamic rules for generating CSS utilities	core-rules
Shortcuts	Combine multiple rules into single shorthands	core-shortcuts
Theme	Theming system for colors, breakpoints, and design tokens	core-theme
Variants	Apply variations like hover:, dark:, responsive to rules	core-variants
Extracting	How UnoCSS extracts utilities from source code	core-extracting
Safelist & Blocklist	Force include or exclude specific utilities	core-safelist
Layers & Preflights	CSS layer ordering and raw CSS injection	core-layers
Processors	Transform generated CSS layers (incl. Lightning CSS)	core-processors

Presets

Main Presets

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

Feature Presets

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

Transformers

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

Integrations

Topic	Description	Reference
Vite Integration	Setting up UnoCSS with Vite and framework-specific tips	integrations-vite
Nuxt Integration	UnoCSS module for Nuxt applications	integrations-nuxt

Files

ATTRIBUTION.mdAdded by AutoGineer895 B
GENERATION.md136 B
LICENSELicence file added by AutoGineer1.1 KiB
SKILL.md4.3 KiB
references/core-config.md3.1 KiB
references/core-extracting.md2.1 KiB
references/core-layers.md1.6 KiB
references/core-processors.md2.7 KiB
references/core-rules.md3.6 KiB
references/core-safelist.md4.0 KiB
references/core-shortcuts.md1.9 KiB
references/core-theme.md3.0 KiB
references/core-variants.md3.2 KiB
references/integrations-nuxt.md3.3 KiB
references/integrations-vite.md4.4 KiB
references/preset-attributify.md2.5 KiB
references/preset-icons.md3.7 KiB
references/preset-mini.md2.7 KiB
references/preset-rem-to-px.md1.6 KiB
references/preset-tagify.md2.0 KiB
references/preset-typography.md1.7 KiB
references/preset-web-fonts.md2.4 KiB
references/preset-wind3.md3.3 KiB
references/preset-wind4.md4.6 KiB
references/transformer-attributify-jsx.md2.5 KiB
references/transformer-compile-class.md2.2 KiB
references/transformer-directives.md2.5 KiB
references/transformer-variant-group.md1.8 KiB

references/preset-wind3.md

name: preset-wind3 description: Tailwind CSS / Windi CSS compatible preset for UnoCSS

Preset Wind3

The Tailwind CSS / Windi CSS compatible preset. Most commonly used preset for UnoCSS.

Installation

import { defineConfig, presetWind3 } from 'unocss'

export default defineConfig({
  presets: [
    presetWind3(),
  ],
})

Note: @unocss/preset-uno and @unocss/preset-wind are deprecated and renamed to @unocss/preset-wind3.

Features

Full Tailwind CSS v3 compatibility
Dark mode (dark:, @dark:)
All responsive variants (sm:, md:, lg:, xl:, 2xl:)
All standard utilities (flex, grid, spacing, colors, typography, etc.)
Animation support (includes Animate.css animations)

Dark Mode

Class-based (default)

<div class="dark:bg-gray-800">

Generates: .dark .dark\:bg-gray-800 { ... }

Media Query Based

presetWind3({
  dark: 'media'
})

Generates: @media (prefers-color-scheme: dark) { ... }

Opt-in Media Query

Use @dark: regardless of config:

<div class="@dark:bg-gray-800">

Options

presetWind3({
  // Dark mode strategy
  dark: 'class', // 'class' | 'media' | { light: '.light', dark: '.dark' }
  
  // Generate pseudo selector as [group=""] instead of .group
  attributifyPseudo: false,
  
  // CSS custom properties prefix
  variablePrefix: 'un-',
  
  // Utils prefix
  prefix: '',
  
  // Generate preflight CSS
  preflight: true, // true | false | 'on-demand'
  
  // Mark all utilities as !important
  important: false, // boolean | string (selector)
})

Important Option

Make all utilities !important:

presetWind3({
  important: true,
})

Or scope with selector to increase specificity without !important:

presetWind3({
  important: '#app',
})

Output: #app :is(.dark .dark\:bg-blue) { ... }

Differences from Tailwind CSS

Quotes Not Supported

Template quotes don't work due to extractor:

<!-- Won't work -->
<div class="before:content-['']">

<!-- Use shortcut instead -->
<div class="before:content-empty">

Background Position

Use position: prefix for custom values:

<!-- Tailwind -->
<div class="bg-[center_top_1rem]">

<!-- UnoCSS -->
<div class="bg-[position:center_top_1rem]">

Animations

UnoCSS integrates Animate.css. Use -alt suffix for Animate.css versions when names conflict:

animate-bounce - Tailwind version
animate-bounce-alt - Animate.css version

Custom animations:

theme: {
  animation: {
    keyframes: {
      custom: '{0%, 100% { opacity: 0; } 50% { opacity: 1; }}',
    },
    durations: {
      custom: '1s',
    },
    timingFns: {
      custom: 'ease-in-out',
    },
    counts: {
      custom: 'infinite',
    },
  }
}

Differences from Windi CSS

Windi CSS	UnoCSS
`<sm:p-1`	`lt-sm:p-1`
`@lg:p-1`	`at-lg:p-1`
`>xl:p-1`	`xl:p-1`

Bracket syntax uses _ instead of ,:

<!-- Windi CSS -->
<div class="grid-cols-[1fr,10px,max-content]">

<!-- UnoCSS -->
<div class="grid-cols-[1fr_10px_max-content]">

Experimental: Media Hover

Addresses sticky hover on touch devices:

<div class="@hover-text-red">

Generates:

@media (hover: hover) and (pointer: fine) {
  .\@hover-text-red:hover { ... }
}

Requirements and compatibility

Works with: Claude Code, Claude apps, OpenAI Codex, GitHub Copilot, Cursor, Gemini CLI, Kiro, OpenCode, Goose, Amp, Roo Code, JetBrains Junie, Factory Droid, Devin (ex-Windsurf), Mistral Vibe, OpenHands, Letta

“Works with” means the tool reads the open Agent Skills format; a skill written for one tool may use features others lack.

Security

No issues found by our static scan· No issues found

A static scan is not a guarantee. Skills are third-party content: review a skill before you let an agent use it.

Web Artifacts Builder
AnthropicOfficial
A structured workflow for developing and bundling complex, multi-component React artifacts for Claude.
Software developmentClaude CodeClaude appsOpenAI Codex+14 more
Apache-2.0Medium riskHas scriptsGitHub stars of the source repository188.6k
Frontend UI Engineering
Addy Osmani· Community
Engineering standards for building accessible, responsive, and production-ready frontend user interfaces.
Software developmentClaude CodeClaude appsOpenAI Codex+14 more
MITGitHub stars of the source repository113.9k
Ask Sonner
Emil Kowalski· Community
A comprehensive guide for implementing, styling, and troubleshooting the Sonner toast notification library in React applications.
Software developmentClaude CodeClaude appsOpenAI Codex+14 more
MITGitHub stars of the source repository54.3k
Pick UI Library
Emil Kowalski· Community
Get recommendations for frontend UI libraries based on a curated, opinionated list.
Software developmentClaude CodeClaude appsOpenAI Codex+14 more
MITGitHub stars of the source repository54.3k
Animate Expo
Emil Kowalski· Community
A senior mobile engineering guide for building React Native and Expo animations that feel correct on real devices.
Software developmentClaude CodeClaude appsOpenAI Codex+14 more
MITGitHub stars of the source repository54.3k
Prototype
Emil Kowalski· Community
A design engineering workflow for building and comparing distinct UI variants using an isolated picker harness.
Software developmentClaude CodeClaude appsOpenAI Codex+14 more
MITGitHub stars of the source repository54.3k

Download ZIP

The ZIP holds the skill’s files, its licence files and an ATTRIBUTION.md. Download unocss.zip