first

.agents/skills/unocss/references/transformer-variant-group.md

@@ -0,0 +1,97 @@
+---
+name: transformer-variant-group
+description: Shorthand for grouping utilities with common prefixes
+---
+
+# Transformer Variant Group
+
+Enables shorthand syntax for grouping utilities with common prefixes.
+
+## Installation
+
+```ts
+import { defineConfig, transformerVariantGroup } from 'unocss'
+
+export default defineConfig({
+  transformers: [
+    transformerVariantGroup(),
+  ],
+})
+```
+
+## Usage
+
+Group multiple utilities under one variant prefix using parentheses:
+
+```html
+<!-- 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
+
+```html
+<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
+
+```html
+<div class="dark:(bg-gray-800 text-white)">
+  Dark content
+</div>
+```
+
+Expands to: `dark:bg-gray-800 dark:text-white`
+
+### Responsive
+
+```html
+<div class="md:(flex items-center gap-4)">
+  Responsive flex
+</div>
+```
+
+Expands to: `md:flex md:items-center md:gap-4`
+
+### Nested Groups
+
+```html
+<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
+
+```html
+<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
+-->