This skill guides the setup and configuration of UnoCSS, including custom rules, shortcuts, and preset integrations.
Install
mkdir -p .claude/skills/unocss && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/2076" && unzip -o skill.zip -d .claude/skills/unocss && rm skill.zipInstalls to .claude/skills/unocss
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
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.Key capabilities
- →Configure UnoCSS settings
- →Create custom CSS rules and shortcuts
- →Implement presets like Wind, Icons, and Attributify
- →Define theme tokens for colors and breakpoints
- →Manage CSS layers and preflights
How it works
UnoCSS acts as an atomic CSS engine that generates styles based on provided presets and configuration rules. It extracts utilities from source code to produce the necessary CSS output.
Inputs & outputs
When to use unocss
- →Configure UnoCSS settings
- →Create custom CSS shortcuts
- →Implement UnoCSS presets
- →Optimize CSS extraction
About this skill
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 |
| 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 |
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 |
When not to use it
- →When the project lacks a configuration file
- →When advanced features like attributify are not explicitly enabled
Prerequisites
Limitations
- →Requires explicit configuration for advanced features
- →Relies on presets for all utility generation
How it compares
Unlike static CSS frameworks, UnoCSS is un-opinionated and relies entirely on presets to provide utilities rather than shipping a pre-defined set of styles.
Compared to similar skills
unocss side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| unocss (this skill) | 9 | 6mo | No flags | Intermediate |
| frontend-design | 481 | 2mo | No flags | Advanced |
| screenshot-to-code | 204 | 2mo | No flags | Beginner |
| ui-ux-expert-skill | 91 | 9mo | Review | Advanced |
Try saying
Example prompts that trigger this skill in your AI assistant.
More by antfu
View all by antfu →You might also like
frontend-design
anthropics
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
screenshot-to-code
OneWave-AI
Convert UI screenshots into working HTML/CSS/React/Vue code. Detects design patterns, components, and generates responsive layouts. Use this when users provide screenshots of websites, apps, or UI designs and want code implementation.
ui-ux-expert-skill
fercracix33
Technical workflow for implementing accessible React user interfaces with shadcn/ui, Tailwind CSS, and TanStack Query. Includes 6-phase process with mandatory Style Guide compliance, Context7 best practices consultation, Chrome DevTools validation, and WCAG 2.1 AA accessibility standards. Use after Test Agent, Implementer, and Supabase agents complete their work.
shadcn-ui-setup
maneeshanif
Install and configure Shadcn/ui component library with Radix UI primitives, Aceternity UI effects, set up components, and manage the component registry. Use when adding Shadcn/ui to a Next.js project or installing specific UI components for Phase 2.
web-artifacts-builder
anthropics
Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.
svelte-ui-design
XIYO
ALWAYS use this skill for ANY Svelte component styling, design, or UI work. Svelte 5 UI design system using Tailwind CSS 4, Skeleton Labs design tokens/presets/Tailwind Components, and Bits UI headless components. Covers class composition, color systems, interactive components, forms, overlays, and all visual design.