Unocss
Anthony FuCommunityCreated by Anthony Fu
- Skill
- Tool integration
- Software development
- MIT
- No issues found
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/downloadUnzip 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
SKILL.md
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 |
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.
Attribution and licence
- Created by
- Anthony Fu
- Publisher
- Anthony Fu (Community)
- Source
- antfu/skills · skills/unocss · commit f63e9ec
- Licence
- MIT License (redistribution allowed)
- LICENSE (added by AutoGineer from LICENSE.md)
- ATTRIBUTION.md (written by AutoGineer)
- Synced
AutoGineer is not affiliated with or endorsed by Anthony Fu or Anthony Fu.
Related skills
Web Artifacts Builder
AnthropicOfficial
A structured workflow for developing and bundling complex, multi-component React artifacts for Claude.
Software developmentClaude CodeClaude appsOpenAI Codex+14 moreApache-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 moreMITGitHub 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 moreApache-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 moreMITGitHub 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 moreMITGitHub 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 moreMITGitHub 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