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://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/transformer-variant-group.md

name: transformer-variant-group description: Shorthand for grouping utilities with common prefixes

Transformer Variant Group

Enables shorthand syntax for grouping utilities with common prefixes.

Installation

import { defineConfig, transformerVariantGroup } from 'unocss'

export default defineConfig({
  transformers: [
    transformerVariantGroup(),
  ],
})

Usage

Group multiple utilities under one variant prefix using parentheses:

<!-- Before transformation -->
<div class="hover:(bg-gray-400 font-medium) font-(light mono)" />

<!-- After transformation -->
<div class="hover:bg-gray-400 hover:font-medium font-light font-mono" />

Examples

Hover States

<button class="hover:(bg-blue-600 text-white scale-105)">
  Hover me
</button>

Expands to: hover:bg-blue-600 hover:text-white hover:scale-105

Dark Mode

<div class="dark:(bg-gray-800 text-white)">
  Dark content
</div>

Expands to: dark:bg-gray-800 dark:text-white

Responsive

<div class="md:(flex items-center gap-4)">
  Responsive flex
</div>

Expands to: md:flex md:items-center md:gap-4

Nested Groups

<div class="lg:hover:(bg-blue-500 text-white)">
  Large screen hover
</div>

Expands to: lg:hover:bg-blue-500 lg:hover:text-white

Multiple Prefixes

<div class="text-(sm gray-600) font-(medium mono)">
  Styled text
</div>

Expands to: text-sm text-gray-600 font-medium font-mono

Key Points

Use parentheses () to group utilities
The prefix applies to all utilities inside the group
Can be combined with any variant (hover, dark, responsive, etc.)
Nesting is supported
Works in class attributes and other extraction sources

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
Anti UI Slop
GitHubOfficial
Prevent generic AI-generated UI by grounding interface development in real-world design patterns and rigorous review gates.
Software developmentClaude CodeClaude appsOpenAI Codex+14 more
Apache-2.0GitHub stars of the source repository40.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

Download ZIP

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