# Configure UnoCSS Faster

UnoCSS setup can be difficult when presets, shortcuts, variants, and integrations interact. This skill gives Claude, Codex, and Claude Code focused reference guidance for practical UnoCSS work.

## Install

```bash
npx skillstore add antfu/unocss
```

## Metadata

- - Slug: antfu-unocss
- - Version: 1.0.0
- - Author: antfu
- - GitHub username: antfu
- - License: MIT
- - Repository: https://github.com/antfu/skills/tree/main/skills/unocss/
- - Ref: main
- - Supported tools: Claude, Codex, Claude Code
- - Risk level: low
- - Risk factors: external\_commands, network, filesystem, scripts
- - Quality score: 75
- - Public page: https://skillstore.pages.dev/skills/antfu-unocss
- - Manifest: https://skillstore.pages.dev/api/skills/antfu-unocss/manifest

## Capabilities

- Explains UnoCSS config files and common defineConfig options.
- Guides custom utility rules, dynamic rules, shortcuts, and safelists.
- Covers Wind, Mini, Icons, Attributify, Typography, and Web Fonts presets.
- Documents transformers for directives, variant groups, compiled classes, and JSX attributify syntax.
- Provides Vite and Nuxt integration guidance with framework-specific notes.

## Use Cases

- Set Up UnoCSS: Add a project config, choose presets, and wire UnoCSS into Vite or Nuxt.
- Design Utility APIs: Create rules, shortcuts, safelists, and variants that match a design system.
- Migrate Tailwind Patterns: Map familiar Tailwind CSS utility workflows to UnoCSS presets and transformers.

## Prompt Templates

### Create Basic Config

```
Help me create a basic UnoCSS config for this project. Inspect existing config files first, then suggest safe presets and imports.
```

### Add Shortcuts

```
Review my repeated utility classes and propose UnoCSS shortcuts. Keep names clear and compatible with the current preset setup.
```

### Build Custom Rules

```
Design UnoCSS static and dynamic rules for these design tokens. Explain matching, generated CSS behavior, and edge cases.
```

### Tune Advanced Integration

```
Audit my UnoCSS Vite or Nuxt integration. Check presets, transformers, extraction, safelist, layers, and performance tradeoffs.
```

## Limitations

- Does not run UnoCSS or validate generated CSS output.
- Does not replace the active project configuration as the source of truth.
- May not cover UnoCSS features added after version 66.x.
- Requires the agent to inspect local config files before using advanced syntax.

## Best Practices

- Inspect uno.config.\* or unocss.config.\* before recommending advanced syntax.
- Prefer explicit class usage unless the project already enables attributify or tagify modes.
- Keep custom rules and shortcuts aligned with existing theme tokens.

## Anti Patterns

- Do not assume every Tailwind plugin or class works without checking the active preset.
- Do not add attributify, tagify, or transformers without confirming project support.
- Do not create broad dynamic rules when a small static rule or shortcut is clearer.

## Security Audit

- - Safe to publish: true
- - Audited at: 2026-06-28T09:44:18.251\+00:00
- - Summary: Static analysis reported many command, network, filesystem, and script patterns, but reviewed samples are Markdown documentation examples for UnoCSS configuration. No executable skill code, credential exfiltration, malicious network target, or prompt injection attempt was found, so the remaining concern is low documentation-example risk.

## Stats

- - Views: 180
- - Downloads: 7
- - Favorites: 1
- - Popularity score: 0