unocss

Generate on-demand CSS utilities from a project-level UnoCSS config.

5.7k|318|Updated Jan 28, 2026

Search Tags:#theming #utility-first #presets #variants #atomic-css #unocss

Ready to run

npx skills add https://github.com/antfu/skills --skill unocss-antfu

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: unocss
Source: https://github.com/antfu/skills/tree/main/skills/unocss
Command: npx skills add https://github.com/antfu/skills --skill unocss-antfu

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

UnoCSS eliminates the tedium of writing and maintaining large CSS by generating utilities on demand from a concise configuration.

Core Features & Use Cases

Instant utility generation from a minimal configuration.
Theming, variants, and presets for scalable design systems.
Rapid prototyping across frameworks like Vue, React, Svelte, and vanilla HTML.

Quick Start

Install UnoCSS via your package manager, create a config file (uno.config.*), and integrate it into your build (Vite, Nuxt, etc.). Then start using utility classes like m-4, p-2, text-blue-500 directly in your markup.

Frequently Asked Questions about unocss

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I generate utility-first CSS on demand for rapid UI styling?▼

You can generate utility-first CSS on demand by configuring a uno.config.* file and integrating it into your build pipeline, which outputs only the atomic CSS utilities used in your markup.

Does UnoCSS work with frameworks like Vue, React, and Svelte?▼

Yes, UnoCSS works with Vue, React, Svelte, and vanilla HTML by integrating into build tools like Vite or Nuxt, allowing you to apply utility classes directly in your markup across different frameworks.

What is the best way to set up scalable theming and design systems using atomic CSS?▼

The best way to set up scalable theming with atomic CSS is by defining presets, rules, themes, and variants within a project-level config file, enabling consistent design systems across your application.

How do I start prototyping with instant atomic CSS classes in my project?▼

To start prototyping with instant atomic CSS, install the package, create a configuration file, integrate it with your build tool, and immediately use utility classes like m-4 or text-blue-500 in your markup.

Why does UnoCSS require a project-level configuration file for generating CSS?▼

UnoCSS requires a project-level configuration file because it drives the extraction process and CSS output, allowing you to define custom presets, rules, themes, and variants for your specific UI styling needs.

Can I use custom transformers and integrations to drive atomic CSS extraction?▼

Yes, you can use optional transformers and integrations alongside your project-level configuration to drive CSS extraction and output, tailoring the utility generation process to your specific build setup.