aico-cli 2.1.1 → 2.1.23

package/templates/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
+-->

package/templates/skills/unocss/references/core-theme.md

@@ -0,0 +1,172 @@
+---
+name: unocss-theme
+description: Theming system for colors, breakpoints, and design tokens
+---
+
+# UnoCSS Theme
+
+UnoCSS supports theming similar to Tailwind CSS / Windi CSS. The `theme` property is deep-merged with the default theme.
+
+## Basic Usage
+
+```ts
+theme: {
+  colors: {
+    veryCool: '#0000ff', // class="text-very-cool"
+    brand: {
+      primary: 'hsl(var(--hue, 217) 78% 51%)', // class="bg-brand-primary"
+      DEFAULT: '#942192' // class="bg-brand"
+    },
+  },
+}
+```
+
+## Using Theme in Rules
+
+Access theme values in dynamic rules:
+
+```ts
+rules: [
+  [/^text-(.*)$/, ([, c], { theme }) => {
+    if (theme.colors[c])
+      return { color: theme.colors[c] }
+  }],
+]
+```
+
+## Using Theme in Variants
+
+```ts
+variants: [
+  {
+    name: 'variant-name',
+    match(matcher, { theme }) {
+      // Access theme.breakpoints, theme.colors, etc.
+    },
+  },
+]
+```
+
+## Using Theme in Shortcuts
+
+```ts
+shortcuts: [
+  [/^badge-(.*)$/, ([, c], { theme }) => {
+    if (Object.keys(theme.colors).includes(c))
+      return `bg-${c}4:10 text-${c}5 rounded`
+  }],
+]
+```
+
+## Breakpoints
+
+**Warning:** Custom `breakpoints` object **overrides** the default, not merges.
+
+```ts
+theme: {
+  breakpoints: {
+    sm: '320px',
+    md: '640px',
+  },
+}
+```
+
+Only `sm:` and `md:` variants will be available.
+
+### Inherit Default Breakpoints
+
+Use `extendTheme` to merge with defaults:
+
+```ts
+extendTheme: (theme) => {
+  return {
+    ...theme,
+    breakpoints: {
+      ...theme.breakpoints,
+      sm: '320px',
+      md: '640px',
+    },
+  }
+}
+```
+
+**Note:** `verticalBreakpoints` works the same for vertical layout.
+
+### Breakpoint Sorting
+
+Breakpoints are sorted by size. Use consistent units to avoid errors:
+
+```ts
+theme: {
+  breakpoints: {
+    sm: '320px',
+    // Don't mix units - convert rem to px
+    // md: '40rem', // Bad
+    md: `${40 * 16}px`, // Good
+    lg: '960px',
+  },
+}
+```
+
+## ExtendTheme
+
+`extendTheme` lets you modify the merged theme object:
+
+### Mutate Theme
+
+```ts
+extendTheme: (theme) => {
+  theme.colors.veryCool = '#0000ff'
+  theme.colors.brand = {
+    primary: 'hsl(var(--hue, 217) 78% 51%)',
+  }
+}
+```
+
+### Replace Theme
+
+Return a new object to completely replace:
+
+```ts
+extendTheme: (theme) => {
+  return {
+    ...theme,
+    colors: {
+      ...theme.colors,
+      veryCool: '#0000ff',
+    },
+  }
+}
+```
+
+## Theme Differences in Presets
+
+### preset-wind3 vs preset-wind4
+
+| preset-wind3 | preset-wind4 |
+|--------------|--------------|
+| `fontFamily` | `font` |
+| `fontSize` | `text.fontSize` |
+| `lineHeight` | `text.lineHeight` or `leading` |
+| `letterSpacing` | `text.letterSpacing` or `tracking` |
+| `borderRadius` | `radius` |
+| `easing` | `ease` |
+| `breakpoints` | `breakpoint` |
+| `boxShadow` | `shadow` |
+| `transitionProperty` | `property` |
+
+## Common Theme Keys
+
+- `colors` - Color palette
+- `breakpoints` - Responsive breakpoints
+- `fontFamily` - Font stacks
+- `fontSize` - Text sizes
+- `spacing` - Spacing scale
+- `borderRadius` - Border radius values
+- `boxShadow` - Shadow definitions
+- `animation` - Animation keyframes and timing
+
+<!-- 
+Source references:
+- https://unocss.dev/config/theme
+-->

package/templates/skills/unocss/references/core-variants.md

@@ -0,0 +1,175 @@
+---
+name: unocss-variants
+description: Apply variations like hover:, dark:, responsive to rules
+---
+
+# UnoCSS Variants
+
+Variants apply modifications to utility rules, like `hover:`, `dark:`, or responsive prefixes.
+
+## How Variants Work
+
+When matching `hover:m-2`:
+
+1. `hover:m-2` is extracted from source
+2. Sent to all variants for matching
+3. `hover:` variant matches and returns `m-2`
+4. Result `m-2` continues to next variants
+5. Finally matches the rule `.m-2 { margin: 0.5rem; }`
+6. Variant transformation applied: `.hover\:m-2:hover { margin: 0.5rem; }`
+
+## Creating Custom Variants
+
+```ts
+variants: [
+  // hover: variant
+  (matcher) => {
+    if (!matcher.startsWith('hover:'))
+      return matcher
+    return {
+      // Remove prefix, pass to next variants/rules
+      matcher: matcher.slice(6),
+      // Modify the selector
+      selector: s => `${s}:hover`,
+    }
+  },
+],
+rules: [
+  [/^m-(\d)$/, ([, d]) => ({ margin: `${d / 4}rem` })],
+]
+```
+
+## Variant Return Object
+
+- `matcher` - The processed class name to pass forward
+- `selector` - Function to customize the CSS selector
+- `parent` - Wrapper like `@media`, `@supports`
+- `layer` - Specify output layer
+- `sort` - Control ordering
+
+## Built-in Variants (preset-wind3)
+
+### Pseudo-classes
+- `hover:`, `focus:`, `active:`, `visited:`
+- `first:`, `last:`, `odd:`, `even:`
+- `disabled:`, `checked:`, `required:`
+- `focus-within:`, `focus-visible:`
+
+### Pseudo-elements
+- `before:`, `after:`
+- `placeholder:`, `selection:`
+- `marker:`, `file:`
+
+### Responsive
+- `sm:`, `md:`, `lg:`, `xl:`, `2xl:`
+- `lt-sm:` (less than sm)
+- `at-lg:` (at lg only)
+
+### Dark Mode
+- `dark:` - Class-based dark mode (default)
+- `@dark:` - Media query dark mode
+
+### Group/Peer
+- `group-hover:`, `group-focus:`
+- `peer-checked:`, `peer-focus:`
+
+### Container Queries
+- `@container`, `@sm:`, `@md:`
+
+### Print
+- `print:`
+
+### Supports
+- `supports-[display:grid]:`
+
+### Aria
+- `aria-checked:`, `aria-disabled:`
+
+### Data Attributes
+- `data-[state=open]:`
+
+## Dark Mode Configuration
+
+### Class-based (default)
+```ts
+presetWind3({
+  dark: 'class'
+})
+```
+
+```html
+<div class="dark:bg-gray-800">
+```
+
+Generates: `.dark .dark\:bg-gray-800 { ... }`
+
+### Media Query
+```ts
+presetWind3({
+  dark: 'media'
+})
+```
+
+Generates: `@media (prefers-color-scheme: dark) { ... }`
+
+### Opt-in Media Query
+Use `@dark:` regardless of config:
+
+```html
+<div class="@dark:bg-gray-800">
+```
+
+### Custom Selectors
+```ts
+presetWind3({
+  dark: {
+    light: '.light-mode',
+    dark: '.dark-mode',
+  }
+})
+```
+
+## CSS @layer Variant
+
+Native CSS `@layer` support:
+
+```html
+<div class="layer-foo:p-4" />
+```
+
+Generates:
+```css
+@layer foo {
+  .layer-foo\:p-4 { padding: 1rem; }
+}
+```
+
+## Breakpoint Differences from Windi CSS
+
+| Windi CSS | UnoCSS |
+|-----------|--------|
+| `<sm:p-1` | `lt-sm:p-1` |
+| `@lg:p-1` | `at-lg:p-1` |
+| `>xl:p-1` | `xl:p-1` |
+
+## Media Hover (Experimental)
+
+Addresses sticky hover on touch devices:
+
+```html
+<div class="@hover-text-red">
+```
+
+Generates:
+```css
+@media (hover: hover) and (pointer: fine) {
+  .\@hover-text-red:hover { color: rgb(248 113 113); }
+}
+```
+
+<!-- 
+Source references:
+- https://unocss.dev/config/variants
+- https://unocss.dev/presets/wind3
+- https://unocss.dev/presets/mini
+-->

package/templates/skills/unocss/references/integrations-nuxt.md

@@ -0,0 +1,199 @@
+---
+name: unocss-nuxt-integration
+description: UnoCSS module for Nuxt applications
+---
+
+# UnoCSS Nuxt Integration
+
+The official Nuxt module for UnoCSS.
+
+## Installation
+
+```bash
+pnpm add -D unocss @unocss/nuxt
+```
+
+Add to Nuxt config:
+
+```ts
+// nuxt.config.ts
+export default defineNuxtConfig({
+  modules: [
+    '@unocss/nuxt',
+  ],
+})
+```
+
+Create config file:
+
+```ts
+// uno.config.ts
+import { defineConfig, presetWind3 } from 'unocss'
+
+export default defineConfig({
+  presets: [
+    presetWind3(),
+  ],
+})
+```
+
+**Note:** The `uno.css` entry is automatically injected by the module.
+
+## Support Status
+
+| Build Tool | Nuxt 2 | Nuxt Bridge | Nuxt 3 |
+|------------|--------|-------------|--------|
+| Webpack Dev | ✅ | ✅ | 🚧 |
+| Webpack Build | ✅ | ✅ | ✅ |
+| Vite Dev | - | ✅ | ✅ |
+| Vite Build | - | ✅ | ✅ |
+
+## Configuration
+
+### Using uno.config.ts (Recommended)
+
+Use a dedicated config file for best IDE support:
+
+```ts
+// uno.config.ts
+import { defineConfig, presetWind3, presetIcons } from 'unocss'
+
+export default defineConfig({
+  presets: [
+    presetWind3(),
+    presetIcons(),
+  ],
+  shortcuts: {
+    'btn': 'py-2 px-4 font-semibold rounded-lg',
+  },
+})
+```
+
+### Nuxt Layers Support
+
+Enable automatic config merging from Nuxt layers:
+
+```ts
+// nuxt.config.ts
+export default defineNuxtConfig({
+  unocss: {
+    nuxtLayers: true,
+  },
+})
+```
+
+Then in your root config:
+
+```ts
+// uno.config.ts
+import config from './.nuxt/uno.config.mjs'
+
+export default config
+```
+
+Or extend the merged config:
+
+```ts
+// uno.config.ts
+import { mergeConfigs } from '@unocss/core'
+import config from './.nuxt/uno.config.mjs'
+
+export default mergeConfigs([config, {
+  // Your overrides
+  shortcuts: {
+    'custom': 'text-red-500',
+  },
+}])
+```
+
+## Common Setup Example
+
+```ts
+// nuxt.config.ts
+export default defineNuxtConfig({
+  modules: [
+    '@unocss/nuxt',
+  ],
+})
+```
+
+```ts
+// uno.config.ts
+import {
+  defineConfig,
+  presetAttributify,
+  presetIcons,
+  presetTypography,
+  presetWebFonts,
+  presetWind3,
+  transformerDirectives,
+  transformerVariantGroup,
+} from 'unocss'
+
+export default defineConfig({
+  presets: [
+    presetWind3(),
+    presetAttributify(),
+    presetIcons({
+      scale: 1.2,
+    }),
+    presetTypography(),
+    presetWebFonts({
+      fonts: {
+        sans: 'DM Sans',
+        mono: 'DM Mono',
+      },
+    }),
+  ],
+  transformers: [
+    transformerDirectives(),
+    transformerVariantGroup(),
+  ],
+  shortcuts: [
+    ['btn', 'px-4 py-1 rounded inline-block bg-teal-600 text-white cursor-pointer hover:bg-teal-700 disabled:cursor-default disabled:bg-gray-600 disabled:opacity-50'],
+  ],
+})
+```
+
+## Usage in Components
+
+```vue
+<template>
+  <div class="p-4 text-center">
+    <h1 class="text-3xl font-bold text-blue-600">
+      Hello UnoCSS!
+    </h1>
+    <button class="btn mt-4">
+      Click me
+    </button>
+  </div>
+</template>
+```
+
+With attributify mode:
+
+```vue
+<template>
+  <div p="4" text="center">
+    <h1 text="3xl blue-600" font="bold">
+      Hello UnoCSS!
+    </h1>
+  </div>
+</template>
+```
+
+## Inspector
+
+In development, visit `/_nuxt/__unocss` to access the UnoCSS inspector.
+
+## Key Differences from Vite
+
+- No need to import `virtual:uno.css` - automatically injected
+- Config file discovery works the same
+- All Vite plugin features available
+- Nuxt layers config merging available
+
+<!-- 
+Source references:
+- https://unocss.dev/integrations/nuxt
+-->