skilld
All skills
onmax avatar

/unocss

@de09c7b official
by Maxonmax/nuxt-skills715 stars
38

UnoCSS instant atomic CSS engine, superset of Tailwind CSS. Use when configuring UnoCSS, writing utility rules, shortcuts, or working with presets like Wind, Icons, Attributify.

Ask your Agent

Use this Skill: https://skilld.dev/gh/onmax/nuxt-skills/unocss

This session only. Nothing lands on disk.

referencestransformer-variant-group.md

≈457 tokens on demand. Your agent reads this file only when SKILL.md points to it.

Transformer Variant Group

Enables shorthand syntax for grouping utilities with common prefixes.

Installation

import { defineConfig, transformerVariantGroup } from 'unocss'

export default defineConfig({
  transformers: [
    transformerVariantGroup(),
  ],
})

Usage

Group multiple utilities under one variant prefix using parentheses:

<!-- Before transformation -->
<div class="hover:(bg-gray-400 font-medium) font-(light mono)" />

<!-- After transformation -->
<div class="hover:bg-gray-400 hover:font-medium font-light font-mono" />

Examples

Hover States

<button class="hover:(bg-blue-600 text-white scale-105)">
  Hover me
</button>

Expands to: hover:bg-blue-600 hover:text-white hover:scale-105

Dark Mode

<div class="dark:(bg-gray-800 text-white)">
  Dark content
</div>

Expands to: dark:bg-gray-800 dark:text-white

Responsive

<div class="md:(flex items-center gap-4)">
  Responsive flex
</div>

Expands to: md:flex md:items-center md:gap-4

Nested Groups

<div class="lg:hover:(bg-blue-500 text-white)">
  Large screen hover
</div>

Expands to: lg:hover:bg-blue-500 lg:hover:text-white

Multiple Prefixes

<div class="text-(sm gray-600) font-(medium mono)">
  Styled text
</div>

Expands to: text-sm text-gray-600 font-medium font-mono

Key Points

  • Use parentheses () to group utilities
  • The prefix applies to all utilities inside the group
  • Can be combined with any variant (hover, dark, responsive, etc.)
  • Nesting is supported
  • Works in class attributes and other extraction sources
<!-- Source references: - https://unocss.dev/transformers/variant-group -->

Source: SKILL.md on GitHub

Third-party checks

No alerts9d3 checks · Risk SAFE
  • Gen Agent Trust Hub9d

    The skill is a comprehensive documentation set for UnoCSS, providing guidance on configuration, rules, presets, and framework integrations. It is a legitimate resource for web development, although it involves standard development tasks like installing packages and analyzing project files which presents a standard attack surface.

  • Socket9d

    No alerts

  • Snyk9d

    Risk: LOW · No issues

Provenance

Signed by skilld at de09c7b. This ties the file your Agent reads to that commit on GitHub. It does not review the instructions.

Last checked against GitHub 2 days ago.

Activeupdated last week

Capability

Other metadata
metadata
{
  "author": "Anthony Fu",
  "version": "2026.1.28",
  "source": "Generated from https://github.com/unocss/unocss, scripts located at https://github.com/antfu/skills"
}

README badge

README badge for onmax/nuxt-skills/unocss