skills.rest
mheers
mheersCOMMUNITY
Explore all skills by this author →
Website𝕏@HeersMarcelGitHub

unocss

Generate atomic CSS utilities from preset-based config files at build time.

Updated Feb 5, 2026
Search Tags:#css#web-development#utility-first#tailwind-compatible#unocss#preset-based
One-click install
npx skills add https://github.com/mheers/opencode-sandbox --skill unocss-mheers
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: unocss
Source: https://github.com/mheers/opencode-sandbox/tree/main/skills/unocss
Command: npx skills add https://github.com/mheers/opencode-sandbox --skill unocss-mheers

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

UnoCSS solves the pain of writing verbose CSS by providing an instant atomic CSS engine powered by presets, allowing you to compose styles with minimal and reusable utilities.

Core Features & Use Cases

  • Flexible presets: main presets (Wind3, Wind4, Mini) and feature presets (Icons, Attributify, Typography, Web Fonts, Tagify, Rem to Px) to tailor utilities to your project.
  • On-demand configuration: check for uno.config.* or unocss.config.* at project root to determine available presets and rules.
  • Use cases: rapidly scaffold UI components with consistent design tokens and responsive variants across platforms.

Quick Start

Install UnoCSS and create a root config file named uno.config.* or unocss.config.* to begin using its 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 does atomic CSS streamline web development styling?▼

Atomic CSS streamlines web development styling by using an on-demand engine to generate minimal, reusable utility classes from presets. This allows you to compose UI styles directly in markup without writing verbose custom CSS files.

Can I use Tailwind-compatible utility classes with a preset-based CSS engine?▼

Yes, you can use Tailwind-compatible utility classes with this preset-based CSS engine. It supports Tailwind-like syntax through main presets like Wind3 and Wind4, enabling rapid prototyping and consistent component styling.

How do I configure UnoCSS to generate utilities at build time?▼

To configure UnoCSS and generate utilities at build time, create a root configuration file named uno.config.* or unocss.config.*. The engine scans this file to determine available presets and rules for on-demand utility generation.

What features do UnoCSS presets offer for responsive web design?▼

UnoCSS presets offer features for responsive web design by providing main presets like Mini and Wind alongside feature presets like Attributify, Typography, and Icons. These allow you to apply responsive variants and consistent design tokens across platforms.

Is atomic CSS suitable for rapidly scaffolding UI components?▼

Yes, atomic CSS is suitable for rapidly scaffolding UI components. It provides instant utility classes that apply consistent design tokens and responsive variants, allowing you to build and style UI components directly within your markup.

What is the difference between main presets and feature presets in UnoCSS?▼

Main presets like Wind3, Wind4, and Mini provide core utility-first styling rules, while feature presets like Icons, Attributify, and Typography add specialized capabilities. This modular approach lets you tailor utilities precisely to your project requirements.

Related Skills

Explore More Software Engineering Skills→
belos-streetbelos-street
8

unocss

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

Community
Intermediate
LinWhite2333LinWhite2333

unocss

Generate atomic CSS utility classes with UnoCSS and custom rules.

Community
Intermediate
Dzakiamriz22Dzakiamriz22
1

tailwind

Generate TailwindCSS utility classes for responsive web interfaces.

Community
Intermediate
mymx2mymx2
4

unocss

Configure UnoCSS atomic CSS engine with presets and custom rules.

Community
Advanced