skills.rest
kirklin
kirklinCOMMUNITY
Explore all skills by this author →
Website𝕏@lkirkunGitHub

unocss

Generate on-demand atomic CSS utilities using UnoCSS presets and build tool integrations.

1|Updated Feb 9, 2026
Search Tags:#integration#shortcuts#variants#preset#atomic-css#unocss#wind3
One-click install
npx skills add https://github.com/kirklin/skills --skill unocss-kirklin
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: unocss
Source: https://github.com/kirklin/skills/tree/main/skills/unocss
Command: npx skills add https://github.com/kirklin/skills --skill unocss-kirklin

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

UnoCSS reduces CSS bloat by generating on-demand, atomic utilities from a configurable set of presets, making styling fast and maintainable.

Core Features & Use Cases

  • On-demand utilities generation across projects and frameworks.
  • Presets and integrations with Wind3/Wind4, Icons, Attributify, and more for rapid setup.
  • Toolchain compatibility with Vite, Nuxt, and other modern build systems to streamline development.

Quick Start

Create a project config for UnoCSS and start using presets like Wind3 to generate 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 on demand to reduce CSS boilerplate?▼

You can generate atomic CSS utilities on demand by configuring UnoCSS with presets like Wind3. This approach automatically produces only the styles your project uses, reducing CSS bloat and simplifying maintenance across modern web apps.

Can I use UnoCSS with modern build tools like Vite and Nuxt?▼

Yes, UnoCSS works with Vite and Nuxt. It provides integrations for modern build systems to streamline development, allowing you to apply atomic utility generation directly within your existing toolchain without friction.

What's the best way to set up attributify and icons presets for rapid styling?▼

The best way to set up attributify and icons presets is by creating a project configuration file for UnoCSS. This enables rapid setup and allows you to leverage these presets alongside Wind3 for on-demand utility generation.

Does atomic CSS generation work across different frameworks or only specific ones?▼

Atomic CSS generation works across multiple projects and frameworks. UnoCSS generates on-demand utilities regardless of the specific framework, making styling fast and maintainable throughout your modern web application stack.

How do I author custom utility rules and configure shortcuts in UnoCSS?▼

You can author custom utility rules and configure shortcuts by defining them within your UnoCSS project configuration. This allows you to extend the preset rules and create tailored atomic utilities specific to your styling needs.

Related Skills

Explore More Software Engineering Skills→
furrycolombia-sysfurrycolombia-sys
1

storybook

Initialize and configure Storybook tasks using the Claude workflow.

Community
Intermediate
uni-helperuni-helper
95

unocss

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

Official
Intermediate
boomNDSboomNDS

unocss

Generate atomic CSS utilities from class-based presets in UnoCSS projects.

Community
Advanced
pluginagentmarketplacepluginagentmarketplace
1

css-architecture

Implement BEM, SMACSS, ITCSS, and atomic design patterns for scalable CSS.

Community
Intermediate