UnoCSS Atomic Engine

Style with UnoCSS — the instant, on-demand atomic CSS engine. Configures presets, custom rules and shortcuts, variant groups, and attributify mode for a fully customizable, faster alternative to utility CSS frameworks.

This skill helps you adopt UnoCSS across any framework. It sets up the Vite/Astro/Nuxt integration, composes presets (Wind, Icons, Typography), writes custom rules, shortcuts, and dynamic variants, enables attributify and pure-CSS icon modes, and tunes safelist and preflight — delivering on-demand atomic CSS generated only for what you use.

When to use

Use when you want atomic utility CSS that is faster and more extensible than the alternatives — custom rules and shortcuts, pure-CSS icons, attributify mode, or migrating an existing utility-CSS project to UnoCSS.

Examples

Custom rules and shortcuts

Extend the atomic engine

Configure UnoCSS with a custom rule for a fluid font-size utility and a shortcut that composes a primary button style

Pure-CSS icons

Use icons as classes

Set up UnoCSS presetIcons so I can render Lucide icons directly with class names like i-lucide-search in my markup