Unocss

UnoCSS - The instant on-demand atomic CSS engine

Configuration

• Installation and basic setup → See [configuration](reference/configuration.md)
• Custom rules and shortcuts → See [configuration](reference/configuration.md)
• Theme configuration (colors, breakpoints, fonts) → See [configuration](reference/configuration.md)
• Class writing order → See [configuration](reference/configuration.md)

Presets

• preset-uno, preset-mini, preset-wind → See [presets](reference/presets.md)
• preset-icons for icon system → See [presets](reference/presets.md)
• preset-attributify for attribute syntax → See [presets](reference/presets.md)
• Custom presets → See [presets](reference/presets.md)

Shortcuts & Transformers

• Creating reusable shortcuts → See [shortcuts-transformers](reference/shortcuts-transformers.md)
• Dynamic shortcuts → See [shortcuts-transformers](reference/shortcuts-transformers.md)
• transformer-directives for @apply → See [shortcuts-transformers](reference/shortcuts-transformers.md)
• transformer-variant-group → See [shortcuts-transformers](reference/shortcuts-transformers.md)

Quick Start

pnpm install -D unocss

// uno.config.ts
import { defineConfig, presetUno, presetIcons, presetAttributify } from 'unocss'

export default defineConfig({
  presets: [
    presetUno(),
    presetAttributify(),
    presetIcons({
      scale: 1.2,
      cdn: 'https://esm.sh/'
    }),
  ],
})

// main.ts
import 'virtual:uno.css'
import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

Key Features

• Instant: No scanning, generate on-demand
• Flexible: Fully customizable
• Powerful: Built-in presets for common patterns
• Lightweight: Only generate what you use
• Compatible: Works with any framework

Common Patterns

Basic Classes

  Hello UnoCSS

Responsive Design

  Left
  Right

Dark Mode

  Content

Best Practices

1. Use presets: Start with preset-uno
2. Use shortcuts: Create reusable class combinations
3. Use transformers: For directives and variant groups
4. Organize config: Keep config modular for large projects

Resources

• Official Documentation
• Playground
• Presets

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: belos-street
• Source: belos-street/skill-kit
• License: MIT

Install and usage instructions live in the source repository linked above.