skills.rest
antfu
antfuCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

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
One-click install
npx skills add https://github.com/antfu/skills --skill unocss-antfu
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
heamlkheamlk

unocss

Generate atomic CSS utilities on demand from UnoCSS configuration files.

Community
Advanced
Situ2000Situ2000

unocss

Generate atomic CSS utilities on demand for React, Vue, Svelte, and HTML projects.

Community
Intermediate
HieubkavHieubkav

tailwind-css

Generate responsive, themeable UI styles with Tailwind CSS utilities.

Community
Intermediate
JetBrainsJetBrains
302

unocss

Configures UnoCSS to generate CSS utilities on demand for frontend build pipelines.

Official
Intermediate