---
name: "unocss-instant-atomic-css"
description: "Generate on-demand utility CSS with zero parsing overhead using high-performance UnoCSS."
metadata:
  author: "Anthony Fu"
  version: "1.0.0"
  runtime_compatibility:
    - "codex"
    - "claude-code"
    - "cursor"
    - "windsurf"
triggers:
  - "configure unocss vite"
  - "use unocss preseticons"
  - "unocss shortcuts"
permissions:
  fs_read: true
  fs_write: "workspace"
  shell_exec: false
  net_access: false
---

# UnoCSS Instant Atomic CSS Engine & Custom Presets

Configures UnoCSS: integrating Vite/Nuxt plugins, configuring presets (presetUno, presetIcons, presetAttributify), defining custom shortcut rules, and generating lightweight atomic style sheets in sub-milliseconds.

## When to Invoke
Invoke this skill whenever you need to:
- configure unocss vite
- use unocss preseticons
- unocss shortcuts

## Execution SOP & Rules
1. Install unocss and @unocss/vite plugin.
2. Create uno.config.ts declaring presets: [presetUno(), presetAttributify(), presetIcons()].
3. Import 'virtual:uno.css' in main application entrypoint.
4. Use pure CSS icons in markup: <div class='i-lucide-check text-green-500' />.

## Verification Checklist
- Run local linting, syntax validation, and type-checks before reporting completion.
- Ensure all created or modified files adhere to workspace boundaries and avoid uncommitted secrets.
- Verify tests or build commands exit cleanly with return code 0.