unocss

Generate on-demand atomic CSS utilities from uno.config presets and transformers.

Updated Mar 25, 2026

Search Tags:#theming #responsive #presets #atomic #unocss #utility-css

Ready to run

npx skills add https://github.com/Shaarav4795/ScholarFlow --skill unocss-shaarav4795

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

UnoCSS provides on-demand utility-first CSS generation to keep styles lean and maintainable in large projects.

Core Features & Use Cases

Supports theming, breakpoints, and directives like @apply, @screen, theme(), and icon() via transformers.
Use cases include scalable design systems, rapid UI iteration, and framework-agnostic styling.
Full range of utility classes via presets and variants for rapid prototyping.

Quick Start

Install UnoCSS, configure uno.config.ts with your presets, and start using utility classes 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 on-demand atomic CSS utilities to reduce stylesheet bloat?▼

To generate on-demand atomic CSS and reduce stylesheet bloat, configure a build-time processor with uno.config to apply presets and output scoped CSS, keeping styles lean and maintainable.

What is atomic CSS utility generation and when do I need it for a design system?▼

Atomic CSS utility generation creates scoped styles on-demand rather than shipping pre-built stylesheets. You need it for scalable design systems and rapid UI iteration when keeping styles lean across large projects.

How do I set up responsive variants and theming for rapid UI prototyping?▼

Set up responsive variants and theming by installing the processor, defining breakpoints and theme tokens in your configuration file, then using utility classes directly in markup for rapid UI prototyping.

Does UnoCSS work framework-agnostic and support directives like @apply?▼

UnoCSS works framework-agnostic and supports directives like @apply, @screen, theme(), and icon() via transformers, allowing you to apply utility classes and presets across different platforms.

What's the best way to configure presets and transformers for utility-first CSS?▼

The best way to configure presets and transformers for utility-first CSS is to define them in your configuration file, which the build-time processor reads to generate the full range of utility classes and variants on-demand.

Why does my build-time processor need a configuration file for atomic CSS?▼

Your build-time processor needs a configuration file because it reads uno.config to apply presets and transformers, which determines the generated utility classes, responsive variants, and scoped CSS output.