Unocss
Skill ComeOnOliver/skillshub/skills/aiskillstore/marketplace/antfu/unocss
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.From its SKILL.md
npx -y skills add ComeOnOliver/skillshub --skill unocssAssembled from the repository path, not quoted from the project. Check it against their README if it does not work.
SKILL.md
4.1 KB, 912 tokens by cl100k_base, as published. Nobody here has run it
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 |
What ships with it
73.9 KB alongside SKILL.md
GitHub clipped this repository’s file list, so this is at least 25 files and may be more.
references/
- core-config.md2.9 KB
- core-extracting.md2.1 KB
- core-layers.md1.6 KB
- core-rules.md3.6 KB
- core-safelist.md1.8 KB
- core-shortcuts.md1.9 KB
- core-theme.md3.0 KB
- core-variants.md3.2 KB
- integrations-nuxt.md3.3 KB
- integrations-vite.md4.2 KB
- preset-attributify.md2.5 KB
- preset-icons.md3.7 KB
- preset-mini.md2.7 KB
- preset-rem-to-px.md1.6 KB
- preset-tagify.md2.0 KB
- preset-typography.md1.7 KB
- preset-web-fonts.md1.6 KB
- preset-wind3.md3.3 KB
- preset-wind4.md4.6 KB
- transformer-attributify-jsx.md2.5 KB
- transformer-compile-class.md2.2 KB
- transformer-directives.md2.3 KB
- transformer-variant-group.md1.8 KB
- GENERATION.md136 B
- skill-report.json13.6 KB
Gives 0 of the 12 instructions most css styling skills give in 912 tokens
Counted across 512 of the 512 authors here whose files we hold, read 2026-09-06
- Animate only transform and opacityin 32 of 512, across 30 files
- Respect prefers-reduced-motionin 21 of 512
- Support reduced motion preferencesin 16 of 512, across 6 files
- Use Tailwind CSS for stylingin 14 of 512, across 13 files
- Specify AnimatePresence mode explicitlyin 12 of 512, across 2 files
- Set initial states explicitlyin 12 of 512, across 2 files
- Use semantic HTML elementsin 11 of 512, across 10 files
- Use oklch for color valuesin 11 of 512, across 10 files
- Honor prefers-reduced-motion in animationsin 10 of 512
- Provide a reduced-motion fallback for animationsin 10 of 512, across 9 files
- Use property names in camelCasein 9 of 512, across 4 files
- Ensure UI animations stay under 300msin 9 of 512, across 6 files
Said here and by no other author read
- Check for configuration files before writing code
Grouped from the skills themselves: near-identical wordings counted once, and counted by distinct author, so one author publishing three of these counts once. Length counted with cl100k_base; the agent that loads this file may tokenize it differently.