first

.agents/skills/unocss/references/core-shortcuts.md

@@ -0,0 +1,89 @@
+---
+name: unocss-shortcuts
+description: Combine multiple utility rules into single shorthand classes
+---
+
+# UnoCSS Shortcuts
+
+Shortcuts combine multiple rules into a single shorthand, inspired by Windi CSS.
+
+## Static Shortcuts
+
+Define as an object mapping shortcut names to utility combinations:
+
+```ts
+shortcuts: {
+  // Multiple utilities combined
+  'btn': 'py-2 px-4 font-semibold rounded-lg shadow-md',
+  'btn-green': 'text-white bg-green-500 hover:bg-green-700',
+  // Single utility alias
+  'red': 'text-red-100',
+}
+```
+
+Usage:
+```html
+<button class="btn btn-green">Click me</button>
+```
+
+## Dynamic Shortcuts
+
+Use RegExp matcher with function, similar to dynamic rules:
+
+```ts
+shortcuts: [
+  // Static shortcuts can be in array too
+  {
+    btn: 'py-2 px-4 font-semibold rounded-lg shadow-md',
+  },
+  // Dynamic shortcut
+  [/^btn-(.*)$/, ([, c]) => `bg-${c}-400 text-${c}-100 py-2 px-4 rounded-lg`],
+]
+```
+
+Now `btn-green` and `btn-red` generate:
+
+```css
+.btn-green {
+  padding: 0.5rem 1rem;
+  --un-bg-opacity: 1;
+  background-color: rgb(74 222 128 / var(--un-bg-opacity));
+  border-radius: 0.5rem;
+  --un-text-opacity: 1;
+  color: rgb(220 252 231 / var(--un-text-opacity));
+}
+```
+
+## Accessing Theme in Shortcuts
+
+Dynamic shortcuts receive context with theme access:
+
+```ts
+shortcuts: [
+  [/^badge-(.*)$/, ([, c], { theme }) => {
+    if (Object.keys(theme.colors).includes(c))
+      return `bg-${c}4:10 text-${c}5 rounded`
+  }],
+]
+```
+
+## Shortcuts Layer
+
+Shortcuts are output to the `shortcuts` layer by default. Configure with:
+
+```ts
+shortcutsLayer: 'my-shortcuts-layer'
+```
+
+## Key Points
+
+- Later shortcuts have higher priority
+- Shortcuts can reference other shortcuts
+- Dynamic shortcuts work like dynamic rules
+- Shortcuts are expanded at build time, not runtime
+- All variants work with shortcuts (`hover:btn`, `dark:btn`, etc.)
+
+<!-- 
+Source references:
+- https://unocss.dev/config/shortcuts
+-->