skilld
All skills
antfu avatar

/unocss

@d02c484 official
by Anthony Fuantfu/skills5.9k stars
335

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.

Ask your Agent

Use this Skill: https://skilld.dev/gh/antfu/skills/unocss

This session only. Nothing lands on disk.

SKILL.md

≈46 tokens always: the name and description. ≈996 when used: this file. ≈17k more on demand in 25 files.

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

Source: SKILL.md on GitHub

Third-party checks

No alerts3d5 checks · Risk SAFE
  • Gen Agent Trust Hub3d

    This skill is a documentation-only resource providing configuration guides, presets, and integration instructions for the UnoCSS engine. It contains no executable code or malicious patterns.

  • Socket3d

    No alerts

  • Snyk3d

    Risk: LOW · No issues

  • Runlayer7mo

    1/25 files flagged

  • ZeroLeaks5mo

    Score: 93/100 · 2 sections analyzed

Provenance

Signed by skilld at d02c484. This ties the file your Agent reads to that commit on GitHub. It does not review the instructions.

Last checked against GitHub 2 days ago.

Activeupdated 4 days ago

Capability

Other metadata
metadata
{
  "author": "Anthony Fu",
  "version": "2026.9.25",
  "source": "Generated from https://github.com/unocss/unocss, scripts located at https://github.com/antfu/skills"
}

Topics

  • Nuxt
  • unocss
  • atomic-css
  • tailwind
  • css
  • preset
  • configuration
  • vite

README badge

README badge for antfu/skills/unocss

What it does

Configures and extends UnoCSS, an atomic CSS engine compatible with Tailwind CSS syntax but customizable via presets, rules, shortcuts, and variants. Use this skill when setting up UnoCSS in a project, writing custom utility rules, or integrating presets like Wind, Icons, or Attributify.

Generated from the current SKILL.md.

Frequently asked

Is UnoCSS compatible with Tailwind CSS?
Yes. UnoCSS is a superset of Tailwind CSS, so basic utility syntax from Tailwind works directly. The skill includes Preset Wind3 for Tailwind v3 / Windi CSS compatibility and Preset Wind4 for Tailwind v4 with modern CSS features.
How do I know what utilities and presets are available in a project?
Check for `uno.config.*` or `unocss.config.*` files in the project root to see what presets, rules, and shortcuts are configured. If the project setup is unclear, stick to basic `class` usage and avoid advanced features like attributify mode.
Can I use UnoCSS with Nuxt or Vite?
Yes. The skill includes Vite integration instructions and a Nuxt module for seamless setup in both frameworks.
Does this skill support CSS icons?
Yes, via Preset Icons, which provides pure CSS icons from Iconify with any icon set available.
What version of UnoCSS does this skill cover?
The skill is based on UnoCSS 66.x, generated at 2026-01-28.

Generated from the current SKILL.md. These answers refresh after source changes.