unocss

Generate atomic CSS utilities on demand from UnoCSS configuration files.

Updated Feb 26, 2026

Search Tags:#shortcuts #variants #atomic-css #unocss #css-utilities #preset-wind

Ready to run

npx skills add https://github.com/heamlk/Python-Skill --skill unocss-heamlk

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

## What problem does it solve? UnoCSS generates atomic CSS utilities on demand to speed up styling while keeping CSS payload small.

## Core Features & Use Cases

Instant utilities: create single-purpose classes for precise styling.
Preset compatibility: works with Wind3/Wind4, shortcuts, theming, and variants.
On-demand building: generates styles during build to reflect theme, config, and project structure.

### Quick Start Install UnoCSS, configure a preset (Wind3 or Wind4), and start applying utilities with class names.

Frequently Asked Questions about unocss

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

FAQPage Schema

How do I generate atomic CSS utilities on demand to reduce CSS bloat?▼

Atomic CSS utilities are generated on demand during the build process, creating single-purpose classes that reflect your theme and configuration to keep the final CSS payload small. This approach streamlines styling by only including the utilities you actually use.

What do I need to configure before applying atomic CSS utilities in a frontend project?▼

You need a frontend project with UnoCSS installed and a configuration file (uno.config.*) that includes your presets, transformers, and themes. This setup allows the engine to generate styles dynamically based on your project structure.

Can I use shortcuts and responsive variants with preset-wind for UI styling?▼

Yes, preset-wind supports shortcuts, theming, and responsive variants for UI styling. You can configure these features in your UnoCSS configuration file to create reusable utility combinations and adapt styles across different screen sizes.

How does on-demand building handle theming and variants for atomic CSS?▼

On-demand building generates styles during the build phase by scanning your project structure and reading your configuration file. It dynamically produces atomic utilities that match your defined theme, presets, and variant rules.

What is the difference between Wind3 and Wind4 presets when configuring atomic CSS?▼

Wind3 and Wind4 are different preset configurations available for atomic CSS generation. You select one during your initial setup to determine the specific set of utility classes, rules, and default styles available for your UI components.