Skills unocss
📦

unocss

Safe

Configure and use UnoCSS atomic CSS

UnoCSS is an instant atomic CSS engine that provides a flexible, extensible alternative to Tailwind CSS. This skill helps developers configure UnoCSS, write custom utility rules, and leverage presets like Wind, Icons, and Attributify.

Supports: Claude Codex Code(CC)
🥉 73 Bronze
1

Download the skill ZIP

2

Upload in Claude

Go to Settings → Capabilities → Skills → Upload skill

3

Toggle on and start using

Test it

Using "unocss". How do I configure a custom color palette in UnoCSS?

Expected outcome:

Define your colors in the theme.colors section of your uno.config.ts:

export default defineConfig({
theme: {
colors: {
primary: {
50: '#f0f9ff',
100: '#e0f2fe',
500: '#0ea5e9',
900: '#0c4a6e',
},
brand: '#ff4400',
}
}
});

Usage in HTML:
<div class="text-primary-500 bg-primary-100 text-brand">Colored element</div>

Using "unocss". How do I create a custom utility shortcut?

Expected outcome:

Add shortcuts to your configuration:

export default defineConfig({
shortcuts: [
['btn', 'px-4 py-2 rounded-lg font-semibold cursor-pointer transition-colors'],
['btn-primary', 'btn bg-blue-500 text-white hover:bg-blue-600'],
['card', 'bg-white rounded-xl shadow-lg p-6'],
]
});

Usage:
<button class="btn btn-primary">Click me</button>
<div class="card">Card content</div>

Security Audit

Safe
v1 • 1/30/2026

Documentation-only skill providing reference material for UnoCSS configuration. All static findings are false positives - patterns detected in markdown documentation code blocks are not executable code. This skill contains no code that performs network requests, filesystem operations, or external command execution.

25
Files scanned
3,591
Lines analyzed
0
findings
1
Total audits
No security issues found
Audited by: claude

Quality Score

45
Architecture
100
Maintainability
87
Content
31
Community
100
Security
91
Spec Compliance

What You Can Build

Configure UnoCSS for a new project

Set up a complete UnoCSS configuration with presets, custom rules, and theme customization for a new web project.

Create custom utility rules

Define custom CSS utility rules and shortcuts to extend UnoCSS with project-specific styling patterns.

Choose and configure presets

Select and configure the appropriate UnoCSS presets for a project, such as Wind3 for Tailwind compatibility or Icons for icon libraries.

Try These Prompts

Basic UnoCSS configuration 
Help me configure UnoCSS in my project. I want to set up a basic configuration with the Wind3 preset, custom shortcuts for common patterns, and a custom theme with my brand colors.
Custom utility rules 
Show me how to create a custom static or dynamic utility rule in UnoCSS. I need to create utilities for specific design requirements that are not covered by the default presets.
Using UnoCSS with frameworks 
How do I integrate UnoCSS with my [Vite/Nuxt] project? What configuration options do I need and how do I ensure hot module replacement works correctly?
Advanced features and transformers 
Explain how to use UnoCSS transformers like @apply directives, variant groups, and attributify mode. When should I use each feature and what are the performance implications?

Best Practices

  • Use the uno.config.ts file format for best IDE support, TypeScript hints, and hot module replacement
  • Start with a preset (like presetWind3 for Tailwind compatibility) and add customizations progressively
  • Define custom shortcuts for frequently used class combinations to keep HTML clean and maintainable
  • Use the safelist option sparingly - prefer extracting utilities from source code when possible

Avoid

  • Avoid putting too many utility classes directly in HTML - use shortcuts and custom rules instead
  • Do not use the full safelist as a replacement for proper utility extraction configuration
  • Avoid deeply nested custom rules that could conflict with preset utilities - test combinations
  • Do not ignore the extracting configuration - proper extraction significantly reduces CSS bundle size

Frequently Asked Questions

What is the difference between UnoCSS and Tailwind CSS?
UnoCSS is a superset of Tailwind CSS syntax, meaning all valid Tailwind classes work. UnoCSS is designed to be instant (faster build times) and fully configurable - you can replace all default utilities with your own. Unlike Tailwind, UnoCSS has no mandatory dependencies and the core is un-opinionated.
Which preset should I choose for my project?
Use presetWind3 for projects migrating from Tailwind CSS or Windi CSS. Use presetWind4 for new projects wanting modern CSS features. Use presetMini for minimal bundles or when building custom preset configurations from scratch.
How does UnoCSS handle purging and tree-shaking?
UnoCSS automatically extracts used utilities from your source files during build time. Configure the content array in your config to specify which files to scan. Unused utilities are not included in the final CSS, keeping bundles small.
Can I use UnoCSS with React, Vue, or other frameworks?
Yes, UnoCSS works with any framework. Use the Vite integration for most modern frameworks (React, Vue, Svelte) or the Nuxt module for Nuxt applications. UnoCSS generates a virtual CSS module that integrates with any build system.
How do I create custom responsive variants?
Define custom variants in the variants configuration using the matcher function. Variants allow you to create custom prefix selectors like 'dark:', 'container:', or your own project-specific variants that apply conditional styling.
What are transformers and when should I use them?
Transformers modify source code before UnoCSS processes it. Use transformerDirectives for @apply syntax, transformerVariantGroup for grouping utilities, and transformerAttributifyJSX for JSX attributify mode. They improve developer experience but add processing overhead.

Developer Details

Author

antfu

License

MIT

Repository

https://github.com/antfu/skills/tree/main/skills/unocss/

Ref

main

File structure

📁 references/

📄 core-config.md

📄 core-extracting.md

📄 core-layers.md

📄 core-rules.md

📄 core-safelist.md

📄 core-shortcuts.md

📄 core-theme.md

📄 core-variants.md

📄 integrations-nuxt.md

📄 integrations-vite.md

📄 preset-attributify.md

📄 preset-icons.md

📄 preset-mini.md

📄 preset-rem-to-px.md

📄 preset-tagify.md

📄 preset-typography.md

📄 preset-web-fonts.md

📄 preset-wind3.md

📄 preset-wind4.md

📄 transformer-attributify-jsx.md

📄 transformer-compile-class.md

📄 transformer-directives.md

📄 transformer-variant-group.md

📄 GENERATION.md

📄 SKILL.md