skills.rest
belos-street
belos-streetCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

unocss

Generate on-demand atomic CSS for used utility classes in frontend projects.

8|1|Updated Feb 28, 2026
Search Tags:#css#tailwind#shortcuts#presets#transformers#atomic-css#unocss
One-click install
npx skills add https://github.com/belos-street/skill-kit --skill unocss-belos-street
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: unocss
Source: https://github.com/belos-street/skill-kit/tree/main/skills/unocss
Command: npx skills add https://github.com/belos-street/skill-kit --skill unocss-belos-street

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

UnoCSS eliminates bloated global styles by generating only the atomic CSS you actually use, reducing bundle size and speeding up development and runtime performance.

Core Features & Use Cases

  • On-demand generation: Produce utilities at build or runtime so unused rules are never emitted.
  • Presets and icons: Enable preset-uno, preset-icons, preset-attributify and other presets to quickly cover common patterns.
  • Shortcuts & transformers: Create reusable class combos, dynamic shortcuts, and use transformers for directives and variant grouping.
  • Use Case: Replace a heavy utility CSS framework in a Vue or React project to drastically reduce CSS output and accelerate prototyping.

Quick Start

Install and configure a basic uno.config with preset-uno, add any needed presets like preset-icons or preset-attributify, and import virtual:uno.css into your application's entry file.

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 to reduce my frontend bundle size?▼

Generate on-demand atomic CSS by configuring an uno.config file with preset-uno and importing virtual:uno.css into your entry file. This eliminates bloated global styles by producing only the atomic CSS utilities you actually use, reducing bundle size and improving runtime performance.

Does UnoCSS work with Vue, React, and Svelte build toolchains?▼

UnoCSS works with Vue, React, Svelte, and plain HTML projects. It integrates into build toolchains via an uno.config configuration and virtual CSS imports, allowing you to replace heavy utility CSS frameworks and accelerate prototyping across these platforms.

What's the best way to create reusable atomic CSS class combinations for fast styling?▼

The best way to create reusable class combinations is by using shortcuts and dynamic shortcuts in your configuration. This feature lets you define reusable utility class combos, while transformers allow you to apply directives and variant grouping for fast styling.

How do I add icons and attributify patterns to my atomic CSS setup?▼

Add icons and attributify patterns by enabling preset-icons and preset-attributify in your uno.config file. These presets quickly cover common UI patterns alongside preset-uno, extending your on-demand atomic CSS generation without bloating your global styles.

Why does on-demand atomic CSS improve runtime performance over heavy utility frameworks?▼

On-demand atomic CSS improves runtime performance by generating utilities at build or runtime so unused rules are never emitted. This prevents shipping bloated global styles, drastically reduces CSS bundle output, and speeds up development and runtime performance.

Related Skills

Explore More Software Engineering Skills→
Situ2000Situ2000

unocss

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

Community
Intermediate
uni-helperuni-helper
95

unocss

Generate atomic CSS utilities on demand via UnoCSS presets and configuration.

Official
Intermediate
corey-alixcorey-alix

Atomic CSS

Create atomic CSS utility classes using token-based custom properties.

Official
Intermediate
CloudDevCrusaderCloudDevCrusader
1

unocss

Generate atomic CSS utilities on-demand via uno.config.ts configuration.

Community
Intermediate