unocss

Generate atomic CSS utilities for UnoCSS projects with Wind presets.

5|Updated Jan 29, 2026

Search Tags:#utility-first #shortcuts #presets #variants #UnoCSS #atomic-css #Tailwind-compatible

Ready to run

npx skills add https://github.com/ShenQingchuan/val.dokduk --skill unocss-shenqingchuan

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: unocss
Source: https://github.com/ShenQingchuan/val.dokduk/tree/main/.agents/skills/unocss
Command: npx skills add https://github.com/ShenQingchuan/val.dokduk --skill unocss-shenqingchuan

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

UnoCSS provides on-demand atomic CSS utilities, reducing the need to write repetitive CSS and speeding up UI development.

Core Features & Use Cases

Instant utility generation via Wind presets (Wind3/Wind4) and other UnoCSS presets
Support for Attributify, Icons, and presets to streamline component styling
Use cases include rapid prototyping, design systems, and large-scale apps with consistent design tokens

Quick Start

Install UnoCSS in your project, configure uno.config.ts with a preset (e.g., Wind3 or Wind4), and import virtual:uno.css or the generated CSS into your app to start using utilities.

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 for rapid UI styling?▼

To generate atomic CSS utilities, this Skill automates on-demand utility creation using UnoCSS. It simplifies frontend styling by applying Wind presets, Attributifyify, and icons to speed up UI development without writing repetitive CSS.

What is atomic CSS and when do I need it for frontend projects?▼

Atomic CSS is an approach where utility classes are generated on-demand to style UI elements directly in markup. You need it to reduce repetitive CSS files, speed up rapid prototyping, and maintain consistent design tokens across large-scale apps.

How do I set up UnoCSS with Wind presets in my project?▼

To set up UnoCSS, install it in your project, configure uno.config.ts with a preset like Wind3 or Wind4, and import virtual:uno.css or the generated CSS into your app to start using the utility classes immediately.

Can I use UnoCSS with Tailwind-compatible workflows?▼

Yes, you can use UnoCSS with Tailwind-compatible workflows. It supports Wind presets, which provide Tailwind-compatible utility classes, allowing you to apply familiar atomic CSS patterns for rapid UI styling and design systems.

Does UnoCSS support attributify and icons for component styling?▼

Yes, UnoCSS supports attributify and icons for component styling. These features streamline styling by allowing you to apply utilities directly as HTML attributes and generate icon utilities on-demand within your UI project.