skills.rest
JetBrains
JetBrainsOFFICIAL
Explore all skills by this author →
Website𝕏@jetbrainsGitHub

unocss

Configures UnoCSS to generate CSS utilities on demand for frontend build pipelines.

302|22|Updated Feb 12, 2026
Search Tags:#theming#css#utilities#presets#variants#atomic#unocss
One-click install
npx skills add https://github.com/JetBrains/skills --skill unocss-jetbrains
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: unocss
Source: https://github.com/JetBrains/skills/tree/main/unocss
Command: npx skills add https://github.com/JetBrains/skills --skill unocss-jetbrains

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

UnoCSS solves CSS bloat and slow iteration by generating utilities on demand, enabling faster, more maintainable styling workflows.

Core Features & Use Cases

  • Instant atomic CSS engine with presets like Wind3, Wind4, Mini, and Icon presets for rapid design systems.
  • Flexible configuration through uno.config.ts, theme tokens, variants, transformers, and framework integrations (Vite, Nuxt, etc).
  • Use cases include rapid prototyping, scalable design systems, and framework-agnostic utilities across frontend projects.

Quick Start

Create an UnoCSS config (uno.config.ts) and enable a preset like Wind3 to start generating utilities.

Frequently Asked Questions about unocss

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

FAQPage Schema
How do I generate CSS utilities on demand to reduce stylesheet bloat?▼

You can generate CSS utilities on demand by configuring UnoCSS as a flexible atomic CSS engine. This approach solves CSS bloat and slow iteration by only producing the styles you actually use, enabling faster and more maintainable frontend styling workflows.

How do I set up an atomic CSS engine with Vite or Nuxt?▼

Set up an atomic CSS engine by creating an uno.config.ts file and enabling a preset like Wind3. This configuration supports framework integrations including Vite and Nuxt to start generating utilities instantly across your frontend apps.

What is the best way to build a scalable design system with consistent theming?▼

The best way to build a scalable design system is using an on-demand atomic CSS engine with flexible configuration. You define theme tokens, variants, and presets in your config file to ensure consistent theming and rapid prototyping across frontend projects.

Can I use presets and transformers for rapid prototyping in frontend apps?▼

Yes, you can use presets like Wind3, Wind4, Mini, and Icon for rapid prototyping in frontend apps. These presets integrate with transformers and configurable theme tokens to quickly generate scalable design systems and framework-agnostic utilities.

Does UnoCSS work without predefined component styles?▼

Yes, it works as an atomic CSS engine that generates utilities directly from your markup without predefined component styles. This framework-agnostic approach relies on configuration files and presets to generate CSS on demand.

Related Skills

Explore More Software Engineering Skills→
futureteafuturetea

Vite Configuration

Generate typed Vite configs for React and TypeScript projects.

Community
Advanced
himanshu231204himanshu231204
2

design-system

Generate design systems and audit visual consistency across web UIs.

Community
Intermediate
artmsilvaartmsilva
2

debug-extraction

Diagnose build-time CSS extraction failures in Stitches RSC plugins.

Community
Advanced
Ben1821Ben1821

ui-styling

Automate UI component installation, styling, and theming with shadcn/ui and Tailwind CSS.

Community
Advanced