format: apply repo prettier (3.8.1) to the folded skills tree

963 markdown files reformatted with the repository's pinned prettier so
pnpm format:check covers the folded tree like every other repo file.

The formatter's embedded-language pass also normalized code fences
(TS semicolons, closed HTML tags in examples, lowercased CSS hex colors,
one renumbered list that skipped an index). Alphanumeric token deltas vs
the fold commit were audited file-by-file; all are formatter-equivalent
markup normalizations plus the four sanitized skills.

packages/mosaic/framework/skills/unocss/SKILL.md

@@ -3,7 +3,7 @@ name: unocss
 description: 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.
 metadata:
   author: Anthony Fu
-  version: "2026.1.28"
+  version: '2026.1.28'
   source: Generated from https://github.com/unocss/unocss, scripts located at https://github.com/antfu/skills
 ---
 
@@ -15,50 +15,50 @@ UnoCSS is an instant atomic CSS engine designed to be flexible and extensible. T
 
 ## Core
 
-| Topic | Description | Reference |
-|-------|-------------|-----------|
-| Configuration | Config file setup and all configuration options | [core-config](references/core-config.md) |
-| Rules | Static and dynamic rules for generating CSS utilities | [core-rules](references/core-rules.md) |
-| Shortcuts | Combine multiple rules into single shorthands | [core-shortcuts](references/core-shortcuts.md) |
-| Theme | Theming system for colors, breakpoints, and design tokens | [core-theme](references/core-theme.md) |
-| Variants | Apply variations like hover:, dark:, responsive to rules | [core-variants](references/core-variants.md) |
-| Extracting | How UnoCSS extracts utilities from source code | [core-extracting](references/core-extracting.md) |
-| Safelist & Blocklist | Force include or exclude specific utilities | [core-safelist](references/core-safelist.md) |
-| Layers & Preflights | CSS layer ordering and raw CSS injection | [core-layers](references/core-layers.md) |
+| Topic                | Description                                               | Reference                                        |
+| -------------------- | --------------------------------------------------------- | ------------------------------------------------ |
+| Configuration        | Config file setup and all configuration options           | [core-config](references/core-config.md)         |
+| Rules                | Static and dynamic rules for generating CSS utilities     | [core-rules](references/core-rules.md)           |
+| Shortcuts            | Combine multiple rules into single shorthands             | [core-shortcuts](references/core-shortcuts.md)   |
+| Theme                | Theming system for colors, breakpoints, and design tokens | [core-theme](references/core-theme.md)           |
+| Variants             | Apply variations like hover:, dark:, responsive to rules  | [core-variants](references/core-variants.md)     |
+| Extracting           | How UnoCSS extracts utilities from source code            | [core-extracting](references/core-extracting.md) |
+| Safelist & Blocklist | Force include or exclude specific utilities               | [core-safelist](references/core-safelist.md)     |
+| Layers & Preflights  | CSS layer ordering and raw CSS injection                  | [core-layers](references/core-layers.md)         |
 
 ## Presets
 
 ### Main Presets
 
-| Topic | Description | Reference |
-|-------|-------------|-----------|
+| Topic        | Description                                                 | Reference                                  |
+| ------------ | ----------------------------------------------------------- | ------------------------------------------ |
 | Preset Wind3 | Tailwind CSS v3 / Windi CSS compatible preset (most common) | [preset-wind3](references/preset-wind3.md) |
-| Preset Wind4 | Tailwind CSS v4 compatible preset with modern CSS features | [preset-wind4](references/preset-wind4.md) |
-| Preset Mini | Minimal preset with essential utilities for custom builds | [preset-mini](references/preset-mini.md) |
+| Preset Wind4 | Tailwind CSS v4 compatible preset with modern CSS features  | [preset-wind4](references/preset-wind4.md) |
+| Preset Mini  | Minimal preset with essential utilities for custom builds   | [preset-mini](references/preset-mini.md)   |
 
 ### Feature Presets
 
-| Topic | Description | Reference |
-|-------|-------------|-----------|
-| Preset Icons | Pure CSS icons using Iconify with any icon set | [preset-icons](references/preset-icons.md) |
+| Topic              | Description                                         | Reference                                              |
+| ------------------ | --------------------------------------------------- | ------------------------------------------------------ |
+| Preset Icons       | Pure CSS icons using Iconify with any icon set      | [preset-icons](references/preset-icons.md)             |
 | Preset Attributify | Group utilities in HTML attributes instead of class | [preset-attributify](references/preset-attributify.md) |
-| Preset Typography | Prose classes for typographic defaults | [preset-typography](references/preset-typography.md) |
-| Preset Web Fonts | Easy Google Fonts and other web fonts integration | [preset-web-fonts](references/preset-web-fonts.md) |
-| Preset Tagify | Use utilities as HTML tag names | [preset-tagify](references/preset-tagify.md) |
-| Preset Rem to Px | Convert rem units to px for utilities | [preset-rem-to-px](references/preset-rem-to-px.md) |
+| Preset Typography  | Prose classes for typographic defaults              | [preset-typography](references/preset-typography.md)   |
+| Preset Web Fonts   | Easy Google Fonts and other web fonts integration   | [preset-web-fonts](references/preset-web-fonts.md)     |
+| Preset Tagify      | Use utilities as HTML tag names                     | [preset-tagify](references/preset-tagify.md)           |
+| Preset Rem to Px   | Convert rem units to px for utilities               | [preset-rem-to-px](references/preset-rem-to-px.md)     |
 
 ## Transformers
 
-| Topic | Description | Reference |
-|-------|-------------|-----------|
-| Variant Group | Shorthand for grouping utilities with common prefixes | [transformer-variant-group](references/transformer-variant-group.md) |
-| Directives | CSS directives: @apply, @screen, theme(), icon() | [transformer-directives](references/transformer-directives.md) |
-| Compile Class | Compile multiple classes into one hashed class | [transformer-compile-class](references/transformer-compile-class.md) |
-| Attributify JSX | Support valueless attributify in JSX/TSX | [transformer-attributify-jsx](references/transformer-attributify-jsx.md) |
+| Topic           | Description                                           | Reference                                                                |
+| --------------- | ----------------------------------------------------- | ------------------------------------------------------------------------ |
+| Variant Group   | Shorthand for grouping utilities with common prefixes | [transformer-variant-group](references/transformer-variant-group.md)     |
+| Directives      | CSS directives: @apply, @screen, theme(), icon()      | [transformer-directives](references/transformer-directives.md)           |
+| Compile Class   | Compile multiple classes into one hashed class        | [transformer-compile-class](references/transformer-compile-class.md)     |
+| Attributify JSX | Support valueless attributify in JSX/TSX              | [transformer-attributify-jsx](references/transformer-attributify-jsx.md) |
 
 ## Integrations
 
-| Topic | Description | Reference |
-|-------|-------------|-----------|
+| Topic            | Description                                             | Reference                                            |
+| ---------------- | ------------------------------------------------------- | ---------------------------------------------------- |
 | Vite Integration | Setting up UnoCSS with Vite and framework-specific tips | [integrations-vite](references/integrations-vite.md) |
-| Nuxt Integration | UnoCSS module for Nuxt applications | [integrations-nuxt](references/integrations-nuxt.md) |
+| Nuxt Integration | UnoCSS module for Nuxt applications                     | [integrations-nuxt](references/integrations-nuxt.md) |

packages/mosaic/framework/skills/unocss/references/core-config.md

@@ -21,8 +21,8 @@ import {
   presetWebFonts,
   presetWind3,
   transformerDirectives,
-  transformerVariantGroup
-} from 'unocss'
+  transformerVariantGroup,
+} from 'unocss';
 
 export default defineConfig({
   shortcuts: [
@@ -31,7 +31,7 @@ export default defineConfig({
   theme: {
     colors: {
       // ...
-    }
+    },
   },
   presets: [
     presetWind3(),
@@ -44,11 +44,8 @@ export default defineConfig({
       },
     }),
   ],
-  transformers: [
-    transformerDirectives(),
-    transformerVariantGroup(),
-  ],
-})
+  transformers: [transformerDirectives(), transformerVariantGroup()],
+});
 ```
 
 UnoCSS automatically looks for `uno.config.{js,ts,mjs,mts}` or `unocss.config.{js,ts,mjs,mts}` in the project root.
@@ -56,16 +53,18 @@ UnoCSS automatically looks for `uno.config.{js,ts,mjs,mts}` or `unocss.config.{j
 ## Key Configuration Options
 
 ### rules
+
 Define CSS utility rules. Later entries have higher priority.
 
 ```ts
 rules: [
   ['m-1', { margin: '0.25rem' }],
   [/^m-(\d+)$/, ([, d]) => ({ margin: `${d / 4}rem` })],
-]
+];
 ```
 
 ### shortcuts
+
 Combine multiple rules into a single shorthand.
 
 ```ts
@@ -75,6 +74,7 @@ shortcuts: {
 ```
 
 ### theme
+
 Theme object for design tokens shared between rules.
 
 ```ts
@@ -90,35 +90,35 @@ theme: {
 ```
 
 ### presets
+
 Predefined configurations bundling rules, variants, and themes.
 
 ```ts
-presets: [
-  presetWind3(),
-  presetIcons(),
-]
+presets: [presetWind3(), presetIcons()];
 ```
 
 ### transformers
+
 Transform source code to support special syntax.
 
 ```ts
-transformers: [
-  transformerDirectives(),
-  transformerVariantGroup(),
-]
+transformers: [transformerDirectives(), transformerVariantGroup()];
 ```
 
 ### variants
+
 Preprocess selectors with ability to rewrite CSS output.
 
 ### extractors
+
 Handle source files and extract utility class names.
 
 ### preflights
+
 Inject raw CSS globally.
 
 ### layers
+
 Control the order of CSS layers. Default is `0`.
 
 ```ts
@@ -130,20 +130,23 @@ layers: {
 ```
 
 ### safelist
+
 Utilities that are always included in output.
 
 ```ts
-safelist: ['p-1', 'p-2', 'p-3']
+safelist: ['p-1', 'p-2', 'p-3'];
 ```
 
 ### blocklist
+
 Utilities that are always excluded.
 
 ```ts
-blocklist: ['p-1', /^p-[2-4]$/]
+blocklist: ['p-1', /^p-[2-4]$/];
 ```
 
 ### content
+
 Configure where to extract utilities from.
 
 ```ts
@@ -156,20 +159,22 @@ content: {
 ```
 
 ### separators
+
 Variant separator characters. Default: `[':', '-']`
 
 ### outputToCssLayers
+
 Output UnoCSS layers as CSS Cascade Layers.
 
 ```ts
-outputToCssLayers: true
+outputToCssLayers: true;
 ```
 
 ## Specifying Config File Location
 
 ```ts
 // vite.config.ts
-import UnoCSS from 'unocss/vite'
+import UnoCSS from 'unocss/vite';
 
 export default defineConfig({
   plugins: [
@@ -177,10 +182,10 @@ export default defineConfig({
       configFile: '../my-uno.config.ts',
     }),
   ],
-})
+});
 ```
 
-<!-- 
+<!--
 Source references:
 - https://unocss.dev/guide/config-file
 - https://unocss.dev/config/

packages/mosaic/framework/skills/unocss/references/core-extracting.md

@@ -27,7 +27,7 @@ export default defineConfig({
       ],
     },
   },
-})
+});
 ```
 
 ### Filesystem Extraction
@@ -37,12 +37,9 @@ For files not in build pipeline:
 ```ts
 export default defineConfig({
   content: {
-    filesystem: [
-      'src/**/*.php',
-      'public/*.html',
-    ],
+    filesystem: ['src/**/*.php', 'public/*.html'],
   },
-})
+});
 ```
 
 ### Inline Text Extraction
@@ -55,7 +52,7 @@ export default defineConfig({
       async () => (await fetch('https://example.com')).text(),
     ],
   },
-})
+});
 ```
 
 ## Magic Comments
@@ -68,7 +65,7 @@ Force scan a file:
 // @unocss-include
 export const classes = {
   active: 'bg-primary text-white',
-}
+};
 ```
 
 ### @unocss-ignore
@@ -104,7 +101,7 @@ UnoCSS works at **build time** - dynamic classes don't work:
 **1. Safelist** - Pre-generate known values:
 
 ```ts
-safelist: ['p-1', 'p-2', 'p-3', 'p-4']
+safelist: ['p-1', 'p-2', 'p-3', 'p-4'];
 ```
 
 **2. Static mapping** - List combinations statically:
@@ -113,7 +110,7 @@ safelist: ['p-1', 'p-2', 'p-3', 'p-4']
 const colors = {
   red: 'text-red border-red',
   blue: 'text-blue border-blue',
-}
+};
 ```
 
 **3. Runtime** - Use `@unocss/runtime` for true runtime generation.
@@ -125,13 +122,13 @@ extractors: [
   {
     name: 'my-extractor',
     extract({ code }) {
-      return code.match(/class:[\w-]+/g) || []
+      return code.match(/class:[\w-]+/g) || [];
     },
   },
-]
+];
 ```
 
-<!-- 
+<!--
 Source references:
 - https://unocss.dev/guide/extracting
 -->

packages/mosaic/framework/skills/unocss/references/core-layers.md

@@ -15,7 +15,7 @@ Set layer on rules:
 rules: [
   [/^m-(\d)$/, ([, d]) => ({ margin: `${d / 4}rem` }), { layer: 'utilities' }],
   ['btn', { padding: '4px' }], // default layer
-]
+];
 ```
 
 ### Layer Ordering
@@ -31,23 +31,23 @@ layers: {
 ### Import Layers Separately
 
 ```ts
-import 'uno:components.css'
-import 'uno.css'
-import './my-custom.css'
-import 'uno:utilities.css'
+import 'uno:components.css';
+import 'uno.css';
+import './my-custom.css';
+import 'uno:utilities.css';
 ```
 
 ### CSS Cascade Layers
 
 ```ts
-outputToCssLayers: true
+outputToCssLayers: true;
 
 // Or with custom names
 outputToCssLayers: {
   cssLayerName: (layer) => {
-    if (layer === 'default') return 'utilities'
-    if (layer === 'shortcuts') return 'utilities.shortcuts'
-  }
+    if (layer === 'default') return 'utilities';
+    if (layer === 'shortcuts') return 'utilities.shortcuts';
+  };
 }
 ```
 
@@ -56,9 +56,10 @@ outputToCssLayers: {
 ```html
 <!-- UnoCSS layer -->
 <p class="uno-layer-my-layer:text-xl">
+  <!-- CSS @layer -->
+</p>
 
-<!-- CSS @layer -->
-<p class="layer-my-layer:text-xl">
+<p class="layer-my-layer:text-xl"></p>
 ```
 
 ## Preflights
@@ -75,7 +76,7 @@ preflights: [
       }
     `,
   },
-]
+];
 ```
 
 With layer:
@@ -86,18 +87,18 @@ preflights: [
     layer: 'base',
     getCSS: () => `html { font-family: system-ui; }`,
   },
-]
+];
 ```
 
 ## preset-wind4 Layers
 
-| Layer | Description | Order |
-|-------|-------------|-------|
-| `properties` | CSS @property rules | -200 |
-| `theme` | Theme CSS variables | -150 |
-| `base` | Reset styles | -100 |
+| Layer        | Description         | Order |
+| ------------ | ------------------- | ----- |
+| `properties` | CSS @property rules | -200  |
+| `theme`      | Theme CSS variables | -150  |
+| `base`       | Reset styles        | -100  |
 
-<!-- 
+<!--
 Source references:
 - https://unocss.dev/config/layers
 - https://unocss.dev/config/preflights

packages/mosaic/framework/skills/unocss/references/core-rules.md

@@ -15,7 +15,7 @@ Simple mapping from class name to CSS properties:
 rules: [
   ['m-1', { margin: '0.25rem' }],
   ['font-bold', { 'font-weight': 700 }],
-]
+];
 ```
 
 Usage: `<div class="m-1">` generates `.m-1 { margin: 0.25rem; }`
@@ -30,13 +30,14 @@ Use RegExp matcher with function body for flexible utilities:
 rules: [
   // Match m-1, m-2, m-100, etc.
   [/^m-(\d+)$/, ([, d]) => ({ margin: `${d / 4}rem` })],
-  
+
   // Access theme and context
   [/^p-(\d+)$/, (match, ctx) => ({ padding: `${match[1] / 4}rem` })],
-]
+];
 ```
 
 The function receives:
+
 1. RegExp match result (destructure to get captured groups)
 2. Context object with `theme`, `symbols`, etc.
 
@@ -46,11 +47,14 @@ Return 2D array for CSS property fallbacks (browser compatibility):
 
 ```ts
 rules: [
-  [/^h-(\d+)dvh$/, ([_, d]) => [
-    ['height', `${d}vh`],
-    ['height', `${d}dvh`],
-  ]],
-]
+  [
+    /^h-(\d+)dvh$/,
+    ([_, d]) => [
+      ['height', `${d}vh`],
+      ['height', `${d}dvh`],
+    ],
+  ],
+];
 ```
 
 Generates: `.h-100dvh { height: 100vh; height: 100dvh; }`
@@ -60,28 +64,31 @@ Generates: `.h-100dvh { height: 100vh; height: 100dvh; }`
 Control CSS output with symbols from `@unocss/core`:
 
 ```ts
-import { symbols } from '@unocss/core'
+import { symbols } from '@unocss/core';
 
 rules: [
-  ['grid', {
-    [symbols.parent]: '@supports (display: grid)',
-    display: 'grid',
-  }],
-]
+  [
+    'grid',
+    {
+      [symbols.parent]: '@supports (display: grid)',
+      display: 'grid',
+    },
+  ],
+];
 ```
 
 ### Available Symbols
 
-| Symbol | Description |
-|--------|-------------|
-| `symbols.parent` | Parent wrapper (e.g., `@supports`, `@media`) |
-| `symbols.selector` | Function to modify the selector |
-| `symbols.layer` | Set the UnoCSS layer |
-| `symbols.variants` | Array of variant handlers |
-| `symbols.shortcutsNoMerge` | Disable merging in shortcuts |
-| `symbols.noMerge` | Disable rule merging |
-| `symbols.sort` | Override sorting order |
-| `symbols.body` | Full control of CSS body |
+| Symbol                     | Description                                  |
+| -------------------------- | -------------------------------------------- |
+| `symbols.parent`           | Parent wrapper (e.g., `@supports`, `@media`) |
+| `symbols.selector`         | Function to modify the selector              |
+| `symbols.layer`            | Set the UnoCSS layer                         |
+| `symbols.variants`         | Array of variant handlers                    |
+| `symbols.shortcutsNoMerge` | Disable merging in shortcuts                 |
+| `symbols.noMerge`          | Disable rule merging                         |
+| `symbols.sort`             | Override sorting order                       |
+| `symbols.body`             | Full control of CSS body                     |
 
 ## Multi-Selector Rules
 
@@ -89,14 +96,17 @@ Use generator functions to yield multiple CSS rules:
 
 ```ts
 rules: [
-  [/^button-(.*)$/, function* ([, color], { symbols }) {
-    yield { background: color }
-    yield {
-      [symbols.selector]: selector => `${selector}:hover`,
-      background: `color-mix(in srgb, ${color} 90%, black)`
-    }
-  }],
-]
+  [
+    /^button-(.*)$/,
+    function* ([, color], { symbols }) {
+      yield { background: color };
+      yield {
+        [symbols.selector]: (selector) => `${selector}:hover`,
+        background: `color-mix(in srgb, ${color} 90%, black)`,
+      };
+    },
+  ],
+];
 ```
 
 Generates both `.button-red { background: red; }` and `.button-red:hover { ... }`
@@ -106,20 +116,23 @@ Generates both `.button-red { background: red; }` and `.button-red:hover { ... }
 Return a string for complete CSS control (advanced):
 
 ```ts
-import { defineConfig, toEscapedSelector as e } from 'unocss'
+import { defineConfig, toEscapedSelector as e } from 'unocss';
 
 rules: [
-  [/^custom-(.+)$/, ([, name], { rawSelector, theme }) => {
-    const selector = e(rawSelector)
-    return `
+  [
+    /^custom-(.+)$/,
+    ([, name], { rawSelector, theme }) => {
+      const selector = e(rawSelector);
+      return `
 ${selector} { font-size: ${theme.fontSize.sm}; }
 ${selector}::after { content: 'after'; }
 @media (min-width: ${theme.breakpoints.sm}) {
   ${selector} { font-size: ${theme.fontSize.lg}; }
 }
-`
-  }],
-]
+`;
+    },
+  ],
+];
 ```
 
 **Warning:** Fully controlled rules don't work with variants like `hover:`.
@@ -130,15 +143,18 @@ Use `symbols.body` to keep variant support with custom CSS:
 
 ```ts
 rules: [
-  ['custom-red', {
-    [symbols.body]: `
+  [
+    'custom-red',
+    {
+      [symbols.body]: `
       font-size: 1rem;
       &::after { content: 'after'; }
       & > .bar { color: red; }
     `,
-    [symbols.selector]: selector => `:is(${selector})`,
-  }]
-]
+      [symbols.selector]: (selector) => `:is(${selector})`,
+    },
+  ],
+];
 ```
 
 ## Rule Ordering
@@ -150,17 +166,21 @@ Later rules have higher priority. Dynamic rules output is sorted alphabetically
 UnoCSS merges rules with identical CSS bodies:
 
 ```html
-<div class="m-2 hover:m2">
+<div class="m-2 hover:m2"></div>
 ```
 
 Generates:
+
 ```css
-.hover\:m2:hover, .m-2 { margin: 0.5rem; }
+.hover\:m2:hover,
+.m-2 {
+  margin: 0.5rem;
+}
 ```
 
 Use `symbols.noMerge` to disable.
 
-<!-- 
+<!--
 Source references:
 - https://unocss.dev/config/rules
 -->

packages/mosaic/framework/skills/unocss/references/core-safelist.md

@@ -14,11 +14,13 @@ Utilities always included, regardless of detection:
 ```ts
 export default defineConfig({
   safelist: [
-    'p-1', 'p-2', 'p-3',
+    'p-1',
+    'p-2',
+    'p-3',
     // Dynamic generation
     ...Array.from({ length: 4 }, (_, i) => `p-${i + 1}`),
   ],
-})
+});
 ```
 
 ### Function Form
@@ -28,10 +30,10 @@ safelist: [
   'p-1',
   () => ['m-1', 'm-2'],
   (context) => {
-    const colors = Object.keys(context.theme.colors || {})
-    return colors.map(c => `bg-${c}-500`)
+    const colors = Object.keys(context.theme.colors || {});
+    return colors.map((c) => `bg-${c}-500`);
   },
-]
+];
 ```
 
 ### Common Use Cases
@@ -39,17 +41,15 @@ safelist: [
 ```ts
 safelist: [
   // Dynamic colors from CMS
-  () => ['primary', 'secondary'].flatMap(c => [
-    `bg-${c}`, `text-${c}`, `border-${c}`,
-  ]),
-  
+  () => ['primary', 'secondary'].flatMap((c) => [`bg-${c}`, `text-${c}`, `border-${c}`]),
+
   // Component variants
   () => {
-    const variants = ['primary', 'danger']
-    const sizes = ['sm', 'md', 'lg']
-    return variants.flatMap(v => sizes.map(s => `btn-${v}-${s}`))
+    const variants = ['primary', 'danger'];
+    const sizes = ['sm', 'md', 'lg'];
+    return variants.flatMap((v) => sizes.map((s) => `btn-${v}-${s}`));
   },
-]
+];
 ```
 
 ## Blocklist
@@ -58,9 +58,9 @@ Utilities never generated:
 
 ```ts
 blocklist: [
-  'p-1',           // Exact match
-  /^p-[2-4]$/,     // Regex
-]
+  'p-1', // Exact match
+  /^p-[2-4]$/, // Regex
+];
 ```
 
 ### With Messages
@@ -69,17 +69,17 @@ blocklist: [
 blocklist: [
   ['bg-red-500', { message: 'Use bg-red-600 instead' }],
   [/^text-xs$/, { message: 'Use text-sm for accessibility' }],
-]
+];
 ```
 
 ## Safelist vs Blocklist
 
-| Feature | Safelist | Blocklist |
-|---------|----------|-----------|
-| Purpose | Always include | Always exclude |
-| Strings | ✅ | ✅ |
-| Regex | ❌ | ✅ |
-| Functions | ✅ | ❌ |
+| Feature   | Safelist       | Blocklist      |
+| --------- | -------------- | -------------- |
+| Purpose   | Always include | Always exclude |
+| Strings   | ✅             | ✅             |
+| Regex     | ❌             | ✅             |
+| Functions | ✅             | ❌             |
 
 **Note:** Blocklist wins if utility is in both.
 
@@ -92,13 +92,13 @@ Prefer static mappings over safelist:
 const sizes = {
   sm: 'text-sm p-2',
   md: 'text-base p-4',
-}
+};
 
 // Avoid: Large safelist
-safelist: ['text-sm', 'text-base', 'p-2', 'p-4']
+safelist: ['text-sm', 'text-base', 'p-2', 'p-4'];
 ```
 
-<!-- 
+<!--
 Source references:
 - https://unocss.dev/config/safelist
 - https://unocss.dev/guide/extracting

packages/mosaic/framework/skills/unocss/references/core-shortcuts.md

@@ -22,6 +22,7 @@ shortcuts: {
 ```
 
 Usage:
+
 ```html
 <button class="btn btn-green">Click me</button>
 ```
@@ -38,7 +39,7 @@ shortcuts: [
   },
   // Dynamic shortcut
   [/^btn-(.*)$/, ([, c]) => `bg-${c}-400 text-${c}-100 py-2 px-4 rounded-lg`],
-]
+];
 ```
 
 Now `btn-green` and `btn-red` generate:
@@ -60,11 +61,13 @@ 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`
-  }],
-]
+  [
+    /^badge-(.*)$/,
+    ([, c], { theme }) => {
+      if (Object.keys(theme.colors).includes(c)) return `bg-${c}4:10 text-${c}5 rounded`;
+    },
+  ],
+];
 ```
 
 ## Shortcuts Layer
@@ -72,7 +75,7 @@ shortcuts: [
 Shortcuts are output to the `shortcuts` layer by default. Configure with:
 
 ```ts
-shortcutsLayer: 'my-shortcuts-layer'
+shortcutsLayer: 'my-shortcuts-layer';
 ```
 
 ## Key Points
@@ -83,7 +86,7 @@ shortcutsLayer: 'my-shortcuts-layer'
 - 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
 -->

packages/mosaic/framework/skills/unocss/references/core-theme.md

@@ -27,11 +27,13 @@ Access theme values in dynamic rules:
 
 ```ts
 rules: [
-  [/^text-(.*)$/, ([, c], { theme }) => {
-    if (theme.colors[c])
-      return { color: theme.colors[c] }
-  }],
-]
+  [
+    /^text-(.*)$/,
+    ([, c], { theme }) => {
+      if (theme.colors[c]) return { color: theme.colors[c] };
+    },
+  ],
+];
 ```
 
 ## Using Theme in Variants
@@ -44,18 +46,20 @@ variants: [
       // 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`
-  }],
-]
+  [
+    /^badge-(.*)$/,
+    ([, c], { theme }) => {
+      if (Object.keys(theme.colors).includes(c)) return `bg-${c}4:10 text-${c}5 rounded`;
+    },
+  ],
+];
 ```
 
 ## Breakpoints
@@ -86,8 +90,8 @@ extendTheme: (theme) => {
       sm: '320px',
       md: '640px',
     },
-  }
-}
+  };
+};
 ```
 
 **Note:** `verticalBreakpoints` works the same for vertical layout.
@@ -116,11 +120,11 @@ theme: {
 
 ```ts
 extendTheme: (theme) => {
-  theme.colors.veryCool = '#0000ff'
+  theme.colors.veryCool = '#0000ff';
   theme.colors.brand = {
     primary: 'hsl(var(--hue, 217) 78% 51%)',
-  }
-}
+  };
+};
 ```
 
 ### Replace Theme
@@ -135,25 +139,25 @@ extendTheme: (theme) => {
       ...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` |
+| 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
 
@@ -166,7 +170,7 @@ extendTheme: (theme) => {
 - `boxShadow` - Shadow definitions
 - `animation` - Animation keyframes and timing
 
-<!-- 
+<!--
 Source references:
 - https://unocss.dev/config/theme
 -->

packages/mosaic/framework/skills/unocss/references/core-variants.md

@@ -50,83 +50,97 @@ rules: [
 ## 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'
-})
+  dark: 'class',
+});
 ```
 
 ```html
-<div class="dark:bg-gray-800">
+<div class="dark:bg-gray-800"></div>
 ```
 
 Generates: `.dark .dark\:bg-gray-800 { ... }`
 
 ### Media Query
+
 ```ts
 presetWind3({
-  dark: 'media'
-})
+  dark: 'media',
+});
 ```
 
 Generates: `@media (prefers-color-scheme: dark) { ... }`
 
 ### Opt-in Media Query
+
 Use `@dark:` regardless of config:
 
 ```html
-<div class="@dark:bg-gray-800">
+<div class="@dark:bg-gray-800"></div>
 ```
 
 ### Custom Selectors
+
 ```ts
 presetWind3({
   dark: {
     light: '.light-mode',
     dark: '.dark-mode',
-  }
-})
+  },
+});
 ```
 
 ## CSS @layer Variant
@@ -138,36 +152,42 @@ Native CSS `@layer` support:
 ```
 
 Generates:
+
 ```css
 @layer foo {
-  .layer-foo\:p-4 { padding: 1rem; }
+  .layer-foo\:p-4 {
+    padding: 1rem;
+  }
 }
 ```
 
 ## Breakpoint Differences from Windi CSS
 
-| Windi CSS | UnoCSS |
-|-----------|--------|
+| Windi CSS | UnoCSS      |
+| --------- | ----------- |
 | `<sm:p-1` | `lt-sm:p-1` |
 | `@lg:p-1` | `at-lg:p-1` |
-| `>xl:p-1` | `xl:p-1` |
+| `>xl:p-1` | `xl:p-1`    |
 
 ## Media Hover (Experimental)
 
 Addresses sticky hover on touch devices:
 
 ```html
-<div class="@hover-text-red">
+<div class="@hover-text-red"></div>
 ```
 
 Generates:
+
 ```css
 @media (hover: hover) and (pointer: fine) {
-  .\@hover-text-red:hover { color: rgb(248 113 113); }
+  .\@hover-text-red:hover {
+    color: rgb(248 113 113);
+  }
 }
 ```
 
-<!-- 
+<!--
 Source references:
 - https://unocss.dev/config/variants
 - https://unocss.dev/presets/wind3

packages/mosaic/framework/skills/unocss/references/integrations-nuxt.md

@@ -18,35 +18,31 @@ Add to Nuxt config:
 ```ts
 // nuxt.config.ts
 export default defineNuxtConfig({
-  modules: [
-    '@unocss/nuxt',
-  ],
-})
+  modules: ['@unocss/nuxt'],
+});
 ```
 
 Create config file:
 
 ```ts
 // uno.config.ts
-import { defineConfig, presetWind3 } from 'unocss'
+import { defineConfig, presetWind3 } from 'unocss';
 
 export default defineConfig({
-  presets: [
-    presetWind3(),
-  ],
-})
+  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 | - | ✅ | ✅ |
+| Build Tool    | Nuxt 2 | Nuxt Bridge | Nuxt 3 |
+| ------------- | ------ | ----------- | ------ |
+| Webpack Dev   | ✅     | ✅          | 🚧     |
+| Webpack Build | ✅     | ✅          | ✅     |
+| Vite Dev      | -      | ✅          | ✅     |
+| Vite Build    | -      | ✅          | ✅     |
 
 ## Configuration
 
@@ -56,17 +52,14 @@ Use a dedicated config file for best IDE support:
 
 ```ts
 // uno.config.ts
-import { defineConfig, presetWind3, presetIcons } from 'unocss'
+import { defineConfig, presetWind3, presetIcons } from 'unocss';
 
 export default defineConfig({
-  presets: [
-    presetWind3(),
-    presetIcons(),
-  ],
+  presets: [presetWind3(), presetIcons()],
   shortcuts: {
-    'btn': 'py-2 px-4 font-semibold rounded-lg',
+    btn: 'py-2 px-4 font-semibold rounded-lg',
   },
-})
+});
 ```
 
 ### Nuxt Layers Support
@@ -79,31 +72,34 @@ export default defineNuxtConfig({
   unocss: {
     nuxtLayers: true,
   },
-})
+});
 ```
 
 Then in your root config:
 
 ```ts
 // uno.config.ts
-import config from './.nuxt/uno.config.mjs'
+import config from './.nuxt/uno.config.mjs';
 
-export default config
+export default config;
 ```
 
 Or extend the merged config:
 
 ```ts
 // uno.config.ts
-import { mergeConfigs } from '@unocss/core'
-import config from './.nuxt/uno.config.mjs'
+import { mergeConfigs } from '@unocss/core';
+import config from './.nuxt/uno.config.mjs';
 
-export default mergeConfigs([config, {
-  // Your overrides
-  shortcuts: {
-    'custom': 'text-red-500',
+export default mergeConfigs([
+  config,
+  {
+    // Your overrides
+    shortcuts: {
+      custom: 'text-red-500',
+    },
   },
-}])
+]);
 ```
 
 ## Common Setup Example
@@ -111,10 +107,8 @@ export default mergeConfigs([config, {
 ```ts
 // nuxt.config.ts
 export default defineNuxtConfig({
-  modules: [
-    '@unocss/nuxt',
-  ],
-})
+  modules: ['@unocss/nuxt'],
+});
 ```
 
 ```ts
@@ -128,7 +122,7 @@ import {
   presetWind3,
   transformerDirectives,
   transformerVariantGroup,
-} from 'unocss'
+} from 'unocss';
 
 export default defineConfig({
   presets: [
@@ -145,14 +139,14 @@ export default defineConfig({
       },
     }),
   ],
-  transformers: [
-    transformerDirectives(),
-    transformerVariantGroup(),
-  ],
+  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'],
+    [
+      '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
@@ -160,12 +154,8 @@ export default defineConfig({
 ```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>
+    <h1 class="text-3xl font-bold text-blue-600">Hello UnoCSS!</h1>
+    <button class="btn mt-4">Click me</button>
   </div>
 </template>
 ```
@@ -175,9 +165,7 @@ With attributify mode:
 ```vue
 <template>
   <div p="4" text="center">
-    <h1 text="3xl blue-600" font="bold">
-      Hello UnoCSS!
-    </h1>
+    <h1 text="3xl blue-600" font="bold">Hello UnoCSS!</h1>
   </div>
 </template>
 ```
@@ -193,7 +181,7 @@ In development, visit `/_nuxt/__unocss` to access the UnoCSS inspector.
 - All Vite plugin features available
 - Nuxt layers config merging available
 
-<!-- 
+<!--
 Source references:
 - https://unocss.dev/integrations/nuxt
 -->

packages/mosaic/framework/skills/unocss/references/integrations-vite.md

@@ -15,34 +15,30 @@ pnpm add -D unocss
 
 ```ts
 // vite.config.ts
-import UnoCSS from 'unocss/vite'
-import { defineConfig } from 'vite'
+import UnoCSS from 'unocss/vite';
+import { defineConfig } from 'vite';
 
 export default defineConfig({
-  plugins: [
-    UnoCSS(),
-  ],
-})
+  plugins: [UnoCSS()],
+});
 ```
 
 Create config file:
 
 ```ts
 // uno.config.ts
-import { defineConfig, presetWind3 } from 'unocss'
+import { defineConfig, presetWind3 } from 'unocss';
 
 export default defineConfig({
-  presets: [
-    presetWind3(),
-  ],
-})
+  presets: [presetWind3()],
+});
 ```
 
 Add to entry:
 
 ```ts
 // main.ts
-import 'virtual:uno.css'
+import 'virtual:uno.css';
 ```
 
 ## Modes
@@ -52,7 +48,7 @@ import 'virtual:uno.css'
 Standard mode - generates global CSS injected via `uno.css` import.
 
 ```ts
-import 'virtual:uno.css'
+import 'virtual:uno.css';
 ```
 
 ### vue-scoped
@@ -62,7 +58,7 @@ Injects generated CSS into Vue SFC `<style scoped>`.
 ```ts
 UnoCSS({
   mode: 'vue-scoped',
-})
+});
 ```
 
 ### shadow-dom
@@ -72,20 +68,20 @@ For Web Components using Shadow DOM:
 ```ts
 UnoCSS({
   mode: 'shadow-dom',
-})
+});
 ```
 
 Add placeholder in component styles:
 
 ```ts
-const template = document.createElement('template')
+const template = document.createElement('template');
 template.innerHTML = `
 <style>
   :host { ... }
   @unocss-placeholder
 </style>
 <div class="m-1em">...</div>
-`
+`;
 ```
 
 ### per-module (experimental)
@@ -101,8 +97,8 @@ Generates CSS per chunk on build for MPA.
 Edit classes directly in browser DevTools:
 
 ```ts
-import 'virtual:uno.css'
-import 'virtual:unocss-devtools'
+import 'virtual:uno.css';
+import 'virtual:unocss-devtools';
 ```
 
 **Warning:** Uses MutationObserver to detect changes. Dynamic classes from scripts will also be included.
@@ -113,15 +109,15 @@ import 'virtual:unocss-devtools'
 
 ```ts
 // vite.config.ts
-import React from '@vitejs/plugin-react'
-import UnoCSS from 'unocss/vite'
+import React from '@vitejs/plugin-react';
+import UnoCSS from 'unocss/vite';
 
 export default {
   plugins: [
     UnoCSS(), // Must be before React when using attributify
     React(),
   ],
-}
+};
 ```
 
 **Note:** Remove `tsc` from build script if using `@unocss/preset-attributify`.
@@ -133,9 +129,9 @@ Works out of the box with `@vitejs/plugin-vue`.
 ### Svelte
 
 ```ts
-import { svelte } from '@sveltejs/vite-plugin-svelte'
-import extractorSvelte from '@unocss/extractor-svelte'
-import UnoCSS from 'unocss/vite'
+import { svelte } from '@sveltejs/vite-plugin-svelte';
+import extractorSvelte from '@unocss/extractor-svelte';
+import UnoCSS from 'unocss/vite';
 
 export default {
   plugins: [
@@ -144,7 +140,7 @@ export default {
     }),
     svelte(),
   ],
-}
+};
 ```
 
 Supports `class:foo` and `class:foo={bar}` syntax.
@@ -156,43 +152,34 @@ Same as Svelte, use `sveltekit()` from `@sveltejs/kit/vite`.
 ### Solid
 
 ```ts
-import UnoCSS from 'unocss/vite'
-import solidPlugin from 'vite-plugin-solid'
+import UnoCSS from 'unocss/vite';
+import solidPlugin from 'vite-plugin-solid';
 
 export default {
-  plugins: [
-    UnoCSS(),
-    solidPlugin(),
-  ],
-}
+  plugins: [UnoCSS(), solidPlugin()],
+};
 ```
 
 ### Preact
 
 ```ts
-import Preact from '@preact/preset-vite'
-import UnoCSS from 'unocss/vite'
+import Preact from '@preact/preset-vite';
+import UnoCSS from 'unocss/vite';
 
 export default {
-  plugins: [
-    UnoCSS(),
-    Preact(),
-  ],
-}
+  plugins: [UnoCSS(), Preact()],
+};
 ```
 
 ### Elm
 
 ```ts
-import Elm from 'vite-plugin-elm'
-import UnoCSS from 'unocss/vite'
+import Elm from 'vite-plugin-elm';
+import UnoCSS from 'unocss/vite';
 
 export default {
-  plugins: [
-    Elm(),
-    UnoCSS(),
-  ],
-}
+  plugins: [Elm(), UnoCSS()],
+};
 ```
 
 ### Web Components (Lit)
@@ -200,10 +187,8 @@ export default {
 ```ts
 UnoCSS({
   mode: 'shadow-dom',
-  shortcuts: [
-    { 'cool-blue': 'bg-blue-500 text-white' },
-  ],
-})
+  shortcuts: [{ 'cool-blue': 'bg-blue-500 text-white' }],
+});
 ```
 
 ```ts
@@ -213,7 +198,7 @@ export class MyElement extends LitElement {
   static styles = css`
     :host { ... }
     @unocss-placeholder
-  `
+  `;
 }
 ```
 
@@ -232,8 +217,8 @@ Visit `http://localhost:5173/__unocss` in dev mode to:
 With `@vitejs/plugin-legacy`:
 
 ```ts
-import legacy from '@vitejs/plugin-legacy'
-import UnoCSS from 'unocss/vite'
+import legacy from '@vitejs/plugin-legacy';
+import UnoCSS from 'unocss/vite';
 
 export default {
   plugins: [
@@ -247,7 +232,7 @@ export default {
       renderModernChunks: false,
     }),
   ],
-}
+};
 ```
 
 ## VanillaJS / TypeScript
@@ -259,13 +244,10 @@ By default, `.js` and `.ts` files are not extracted. Configure to include:
 export default defineConfig({
   content: {
     pipeline: {
-      include: [
-        /\.(vue|svelte|[jt]sx|html)($|\?)/,
-        'src/**/*.{js,ts}',
-      ],
+      include: [/\.(vue|svelte|[jt]sx|html)($|\?)/, 'src/**/*.{js,ts}'],
     },
   },
-})
+});
 ```
 
 Or use magic comment in files:
@@ -274,10 +256,10 @@ Or use magic comment in files:
 // @unocss-include
 export const classes = {
   active: 'bg-primary text-white',
-}
+};
 ```
 
-<!-- 
+<!--
 Source references:
 - https://unocss.dev/integrations/vite
 -->

packages/mosaic/framework/skills/unocss/references/preset-attributify.md

@@ -10,14 +10,11 @@ Group utilities in HTML attributes for better readability.
 ## Installation
 
 ```ts
-import { defineConfig, presetAttributify, presetWind3 } from 'unocss'
+import { defineConfig, presetAttributify, presetWind3 } from 'unocss';
 
 export default defineConfig({
-  presets: [
-    presetWind3(),
-    presetAttributify(),
-  ],
-})
+  presets: [presetWind3(), presetAttributify()],
+});
 ```
 
 ## Basic Usage
@@ -25,7 +22,9 @@ export default defineConfig({
 Instead of long class strings:
 
 ```html
-<button class="bg-blue-400 hover:bg-blue-500 text-sm text-white font-mono font-light py-2 px-4 rounded border-2 border-blue-200">
+<button
+  class="bg-blue-400 hover:bg-blue-500 text-sm text-white font-mono font-light py-2 px-4 rounded border-2 border-blue-200"
+>
   Button
 </button>
 ```
@@ -79,20 +78,20 @@ When attribute names conflict with HTML properties:
 presetAttributify({
   prefix: 'un-',
   prefixedOnly: true,
-})
+});
 ```
 
 ## Options
 
 ```ts
 presetAttributify({
-  strict: false,           // Only generate CSS for attributify
-  prefix: 'un-',           // Attribute prefix
-  prefixedOnly: false,     // Require prefix for all
+  strict: false, // Only generate CSS for attributify
+  prefix: 'un-', // Attribute prefix
+  prefixedOnly: false, // Require prefix for all
   nonValuedAttribute: true, // Support valueless attributes
-  ignoreAttributes: [],    // Attributes to ignore
-  trueToNonValued: false,  // Treat value="true" as valueless
-})
+  ignoreAttributes: [], // Attributes to ignore
+  trueToNonValued: false, // Treat value="true" as valueless
+});
 ```
 
 ## TypeScript Support
@@ -102,18 +101,22 @@ presetAttributify({
 ```ts
 // html.d.ts
 declare module '@vue/runtime-dom' {
-  interface HTMLAttributes { [key: string]: any }
+  interface HTMLAttributes {
+    [key: string]: any;
+  }
 }
 declare module '@vue/runtime-core' {
-  interface AllowedComponentProps { [key: string]: any }
+  interface AllowedComponentProps {
+    [key: string]: any;
+  }
 }
-export {}
+export {};
 ```
 
 ### React
 
 ```ts
-import type { AttributifyAttributes } from '@unocss/preset-attributify'
+import type { AttributifyAttributes } from '@unocss/preset-attributify';
 
 declare module 'react' {
   interface HTMLAttributes<T> extends AttributifyAttributes {}
@@ -125,18 +128,16 @@ declare module 'react' {
 For JSX where `<div foo>` becomes `<div foo={true}>`:
 
 ```ts
-import { transformerAttributifyJsx } from 'unocss'
+import { transformerAttributifyJsx } from 'unocss';
 
 export default defineConfig({
-  transformers: [
-    transformerAttributifyJsx(),
-  ],
-})
+  transformers: [transformerAttributifyJsx()],
+});
 ```
 
 **Important:** Only use attributify if `uno.config.*` shows `presetAttributify()` is enabled.
 
-<!-- 
+<!--
 Source references:
 - https://unocss.dev/presets/attributify
 -->

packages/mosaic/framework/skills/unocss/references/preset-icons.md

@@ -16,18 +16,17 @@ pnpm add -D @unocss/preset-icons @iconify-json/[collection-name]
 Example: `@iconify-json/mdi` for Material Design Icons, `@iconify-json/carbon` for Carbon icons.
 
 ```ts
-import { defineConfig, presetIcons } from 'unocss'
+import { defineConfig, presetIcons } from 'unocss';
 
 export default defineConfig({
-  presets: [
-    presetIcons(),
-  ],
-})
+  presets: [presetIcons()],
+});
 ```
 
 ## Usage
 
 Two naming conventions:
+
 - `<prefix><collection>-<icon>` → `i-ph-anchor-simple-thin`
 - `<prefix><collection>:<icon>` → `i-ph:anchor-simple-thin`
 
@@ -71,17 +70,17 @@ Icons automatically choose between `mask` (monochrome) and `background-img` (col
 
 ```ts
 presetIcons({
-  scale: 1.2,              // Scale relative to font size
-  prefix: 'i-',            // Class prefix (default)
-  mode: 'auto',            // 'auto' | 'mask' | 'bg'
+  scale: 1.2, // Scale relative to font size
+  prefix: 'i-', // Class prefix (default)
+  mode: 'auto', // 'auto' | 'mask' | 'bg'
   extraProperties: {
-    'display': 'inline-block',
+    display: 'inline-block',
     'vertical-align': 'middle',
   },
-  warn: true,              // Warn on missing icons
-  autoInstall: true,       // Auto-install missing icon sets
-  cdn: 'https://esm.sh/',  // CDN for browser usage
-})
+  warn: true, // Warn on missing icons
+  autoInstall: true, // Auto-install missing icon sets
+  cdn: 'https://esm.sh/', // CDN for browser usage
+});
 ```
 
 ## Custom Icon Collections
@@ -94,8 +93,8 @@ presetIcons({
     custom: {
       circle: '<svg viewBox="0 0 120 120"><circle cx="60" cy="60" r="50"></circle></svg>',
     },
-  }
-})
+  },
+});
 ```
 
 Usage: `<span class="i-custom:circle"></span>`
@@ -103,28 +102,27 @@ Usage: `<span class="i-custom:circle"></span>`
 ### File System Loader
 
 ```ts
-import { FileSystemIconLoader } from '@iconify/utils/lib/loader/node-loaders'
+import { FileSystemIconLoader } from '@iconify/utils/lib/loader/node-loaders';
 
 presetIcons({
   collections: {
-    'my-icons': FileSystemIconLoader(
-      './assets/icons',
-      svg => svg.replace(/#fff/, 'currentColor')
+    'my-icons': FileSystemIconLoader('./assets/icons', (svg) =>
+      svg.replace(/#fff/, 'currentColor'),
     ),
-  }
-})
+  },
+});
 ```
 
 ### Dynamic Import (Browser)
 
 ```ts
-import presetIcons from '@unocss/preset-icons/browser'
+import presetIcons from '@unocss/preset-icons/browser';
 
 presetIcons({
   collections: {
-    carbon: () => import('@iconify-json/carbon/icons.json').then(i => i.default),
-  }
-})
+    carbon: () => import('@iconify-json/carbon/icons.json').then((i) => i.default),
+  },
+});
 ```
 
 ## Icon Customization
@@ -134,22 +132,22 @@ presetIcons({
   customizations: {
     // Transform SVG
     transform(svg, collection, icon) {
-      return svg.replace(/#fff/, 'currentColor')
+      return svg.replace(/#fff/, 'currentColor');
     },
     // Global sizing
     customize(props) {
-      props.width = '2em'
-      props.height = '2em'
-      return props
+      props.width = '2em';
+      props.height = '2em';
+      return props;
     },
     // Per-collection
     iconCustomizer(collection, icon, props) {
       if (collection === 'mdi') {
-        props.width = '2em'
+        props.width = '2em';
       }
-    }
-  }
-})
+    },
+  },
+});
 ```
 
 ## CSS Directive
@@ -178,7 +176,7 @@ Use `icon()` in CSS (requires transformer-directives):
 </a>
 ```
 
-<!-- 
+<!--
 Source references:
 - https://unocss.dev/presets/icons
 -->

packages/mosaic/framework/skills/unocss/references/preset-mini.md

@@ -10,13 +10,11 @@ The minimal preset with only essential rules and variants. Good starting point f
 ## Installation
 
 ```ts
-import { defineConfig, presetMini } from 'unocss'
+import { defineConfig, presetMini } from 'unocss';
 
 export default defineConfig({
-  presets: [
-    presetMini(),
-  ],
-})
+  presets: [presetMini()],
+});
 ```
 
 ## What's Included
@@ -35,6 +33,7 @@ Subset of `preset-wind3` with essential utilities aligned to CSS properties:
 ## What's NOT Included
 
 Opinionated or complex Tailwind utilities:
+
 - `container`
 - Complex animations
 - Gradients
@@ -53,8 +52,8 @@ Same as preset-wind3:
 
 ```ts
 presetMini({
-  dark: 'class' // or 'media'
-})
+  dark: 'class', // or 'media'
+});
 ```
 
 ```html
@@ -62,6 +61,7 @@ presetMini({
 ```
 
 Class-based:
+
 ```css
 .dark .dark\:bg-red\:10 {
   background-color: rgb(248 113 113 / 0.1);
@@ -69,6 +69,7 @@ Class-based:
 ```
 
 Media query:
+
 ```css
 @media (prefers-color-scheme: dark) {
   .dark\:bg-red\:10 {
@@ -102,10 +103,10 @@ presetMini({
       veryCool: '#0000ff',
       brand: {
         primary: 'hsl(var(--hue, 217) 78% 51%)',
-      }
+      },
     },
-  }
-})
+  },
+});
 ```
 
 **Note:** `breakpoints` property is overridden, not merged.
@@ -116,19 +117,19 @@ presetMini({
 presetMini({
   // Dark mode: 'class' | 'media' | { light: string, dark: string }
   dark: 'class',
-  
+
   // Generate [group=""] instead of .group for attributify
   attributifyPseudo: false,
-  
+
   // CSS variable prefix (default: 'un-')
   variablePrefix: 'un-',
-  
+
   // Utility prefix
   prefix: undefined,
-  
+
   // Preflight generation: true | false | 'on-demand'
   preflight: true,
-})
+});
 ```
 
 ## Building on Mini
@@ -136,8 +137,8 @@ presetMini({
 Create custom preset extending mini:
 
 ```ts
-import { presetMini } from 'unocss'
-import type { Preset } from 'unocss'
+import { presetMini } from 'unocss';
+import type { Preset } from 'unocss';
 
 export const myPreset: Preset = {
   name: 'my-preset',
@@ -147,12 +148,12 @@ export const myPreset: Preset = {
     ['card', { 'border-radius': '8px', 'box-shadow': '0 2px 8px rgba(0,0,0,0.1)' }],
   ],
   shortcuts: {
-    'btn': 'px-4 py-2 rounded bg-blue-500 text-white',
+    btn: 'px-4 py-2 rounded bg-blue-500 text-white',
   },
-}
+};
 ```
 
-<!-- 
+<!--
 Source references:
 - https://unocss.dev/presets/mini
 -->

packages/mosaic/framework/skills/unocss/references/preset-rem-to-px.md

@@ -10,14 +10,11 @@ Converts `rem` units to `px` in generated utilities.
 ## Installation
 
 ```ts
-import { defineConfig, presetRemToPx, presetWind3 } from 'unocss'
+import { defineConfig, presetRemToPx, presetWind3 } from 'unocss';
 
 export default defineConfig({
-  presets: [
-    presetWind3(),
-    presetRemToPx(),
-  ],
-})
+  presets: [presetWind3(), presetRemToPx()],
+});
 ```
 
 ## What It Does
@@ -25,17 +22,23 @@ export default defineConfig({
 Transforms all rem values to px:
 
 ```html
-<div class="p-4">
+<div class="p-4"></div>
 ```
 
 Without preset:
+
 ```css
-.p-4 { padding: 1rem; }
+.p-4 {
+  padding: 1rem;
+}
 ```
 
 With preset:
+
 ```css
-.p-4 { padding: 16px; }
+.p-4 {
+  padding: 16px;
+}
 ```
 
 ## Use Cases
@@ -51,7 +54,7 @@ With preset:
 presetRemToPx({
   // Base font size for conversion (default: 16)
   baseFontSize: 16,
-})
+});
 ```
 
 Custom base:
@@ -59,7 +62,7 @@ Custom base:
 ```ts
 presetRemToPx({
   baseFontSize: 14, // 1rem = 14px
-})
+});
 ```
 
 ## With Preset Wind4
@@ -67,7 +70,7 @@ presetRemToPx({
 **Note:** `presetRemToPx` is not needed with `preset-wind4`. Use the built-in processor instead:
 
 ```ts
-import { createRemToPxProcessor } from '@unocss/preset-wind4/utils'
+import { createRemToPxProcessor } from '@unocss/preset-wind4/utils';
 
 export default defineConfig({
   presets: [
@@ -75,13 +78,13 @@ export default defineConfig({
       preflights: {
         theme: {
           process: createRemToPxProcessor(),
-        }
+        },
       },
     }),
   ],
   // Also apply to utilities
   postprocess: [createRemToPxProcessor()],
-})
+});
 ```
 
 ## Important Notes
@@ -90,7 +93,7 @@ export default defineConfig({
 - Affects all utilities with rem units
 - Theme values in rem are also converted
 
-<!-- 
+<!--
 Source references:
 - https://unocss.dev/presets/rem-to-px
 - https://unocss.dev/presets/wind4

packages/mosaic/framework/skills/unocss/references/preset-tagify.md

@@ -10,13 +10,11 @@ Use CSS utilities directly as HTML tag names.
 ## Installation
 
 ```ts
-import { defineConfig, presetTagify } from 'unocss'
+import { defineConfig, presetTagify } from 'unocss';
 
 export default defineConfig({
-  presets: [
-    presetTagify(),
-  ],
-})
+  presets: [presetTagify()],
+});
 ```
 
 ## Basic Usage
@@ -43,8 +41,8 @@ Works exactly the same!
 
 ```ts
 presetTagify({
-  prefix: 'un-'
-})
+  prefix: 'un-',
+});
 ```
 
 ```html
@@ -62,18 +60,16 @@ Add CSS properties to matched tags:
 ```ts
 presetTagify({
   // Add display: inline-block to icons
-  extraProperties: matched => matched.startsWith('i-')
-    ? { display: 'inline-block' }
-    : {},
-})
+  extraProperties: (matched) => (matched.startsWith('i-') ? { display: 'inline-block' } : {}),
+});
 ```
 
 Or apply to all:
 
 ```ts
 presetTagify({
-  extraProperties: { display: 'block' }
-})
+  extraProperties: { display: 'block' },
+});
 ```
 
 ## Options
@@ -82,21 +78,22 @@ presetTagify({
 presetTagify({
   // Tag prefix
   prefix: '',
-  
+
   // Excluded tags (won't be processed)
   excludedTags: ['b', /^h\d+$/, 'table'],
-  
+
   // Extra CSS properties
   extraProperties: {},
-  
+
   // Enable default extractor
   defaultExtractor: true,
-})
+});
 ```
 
 ## Excluded Tags
 
 By default, these tags are excluded:
+
 - `b` (bold)
 - `h1` through `h6` (headings)
 - `table`
@@ -109,10 +106,10 @@ presetTagify({
     'b',
     /^h\d+$/,
     'table',
-    'article',  // Add custom exclusions
-    /^my-/,     // Exclude tags starting with 'my-'
+    'article', // Add custom exclusions
+    /^my-/, // Exclude tags starting with 'my-'
   ],
-})
+});
 ```
 
 ## Use Cases
@@ -128,7 +125,7 @@ presetTagify({
 - Some frameworks may not support all custom elements
 - Utilities without hyphens need the prefix option
 
-<!-- 
+<!--
 Source references:
 - https://unocss.dev/presets/tagify
 -->

packages/mosaic/framework/skills/unocss/references/preset-typography.md

@@ -10,14 +10,14 @@ Prose classes for adding typographic defaults to vanilla HTML content.
 ## Installation
 
 ```ts
-import { defineConfig, presetTypography, presetWind3 } from 'unocss'
+import { defineConfig, presetTypography, presetWind3 } from 'unocss';
 
 export default defineConfig({
   presets: [
     presetWind3(), // Required!
     presetTypography(),
   ],
-})
+});
 ```
 
 ## Basic Usage
@@ -40,10 +40,9 @@ export default defineConfig({
 ```
 
 Responsive:
+
 ```html
-<article class="prose prose-sm md:prose-base lg:prose-lg">
-  Responsive typography
-</article>
+<article class="prose prose-sm md:prose-base lg:prose-lg">Responsive typography</article>
 ```
 
 ## Colors
@@ -57,9 +56,7 @@ Responsive:
 ## Dark Mode
 
 ```html
-<article class="prose dark:prose-invert">
-  Dark mode typography
-</article>
+<article class="prose dark:prose-invert">Dark mode typography</article>
 ```
 
 ## Excluding Elements
@@ -79,17 +76,17 @@ Responsive:
 
 ```ts
 presetTypography({
-  selectorName: 'prose',      // Custom selector
+  selectorName: 'prose', // Custom selector
   cssVarPrefix: '--un-prose', // CSS variable prefix
-  important: false,           // Make !important
+  important: false, // Make !important
   cssExtend: {
-    'code': { color: '#8b5cf6' },
+    code: { color: '#8b5cf6' },
     'a:hover': { color: '#f43f5e' },
   },
-})
+});
 ```
 
-<!-- 
+<!--
 Source references:
 - https://unocss.dev/presets/typography
 -->

packages/mosaic/framework/skills/unocss/references/preset-web-fonts.md

@@ -10,7 +10,7 @@ Easily use web fonts from Google Fonts and other providers.
 ## Installation
 
 ```ts
-import { defineConfig, presetWebFonts, presetWind3 } from 'unocss'
+import { defineConfig, presetWebFonts, presetWind3 } from 'unocss';
 
 export default defineConfig({
   presets: [
@@ -23,7 +23,7 @@ export default defineConfig({
       },
     }),
   ],
-})
+});
 ```
 
 ## Providers
@@ -41,10 +41,10 @@ export default defineConfig({
 fonts: {
   // Simple
   sans: 'Roboto',
-  
+
   // Multiple (fallback)
   mono: ['Fira Code', 'Fira Mono:400,700'],
-  
+
   // Detailed
   lato: [
     {
@@ -72,7 +72,7 @@ fonts: {
 Self-host fonts:
 
 ```ts
-import { createLocalFontProcessor } from '@unocss/preset-web-fonts/local'
+import { createLocalFontProcessor } from '@unocss/preset-web-fonts/local';
 
 presetWebFonts({
   provider: 'none',
@@ -81,11 +81,11 @@ presetWebFonts({
     cacheDir: 'node_modules/.cache/unocss/fonts',
     fontAssetsDir: 'public/assets/fonts',
     fontServeBaseUrl: '/assets/fonts',
-  })
-})
+  }),
+});
 ```
 
-<!-- 
+<!--
 Source references:
 - https://unocss.dev/presets/web-fonts
 -->

packages/mosaic/framework/skills/unocss/references/preset-wind3.md

@@ -10,13 +10,11 @@ The Tailwind CSS / Windi CSS compatible preset. Most commonly used preset for Un
 ## Installation
 
 ```ts
-import { defineConfig, presetWind3 } from 'unocss'
+import { defineConfig, presetWind3 } from 'unocss';
 
 export default defineConfig({
-  presets: [
-    presetWind3(),
-  ],
-})
+  presets: [presetWind3()],
+});
 ```
 
 **Note:** `@unocss/preset-uno` and `@unocss/preset-wind` are deprecated and renamed to `@unocss/preset-wind3`.
@@ -34,7 +32,7 @@ export default defineConfig({
 ### Class-based (default)
 
 ```html
-<div class="dark:bg-gray-800">
+<div class="dark:bg-gray-800"></div>
 ```
 
 Generates: `.dark .dark\:bg-gray-800 { ... }`
@@ -43,8 +41,8 @@ Generates: `.dark .dark\:bg-gray-800 { ... }`
 
 ```ts
 presetWind3({
-  dark: 'media'
-})
+  dark: 'media',
+});
 ```
 
 Generates: `@media (prefers-color-scheme: dark) { ... }`
@@ -54,7 +52,7 @@ Generates: `@media (prefers-color-scheme: dark) { ... }`
 Use `@dark:` regardless of config:
 
 ```html
-<div class="@dark:bg-gray-800">
+<div class="@dark:bg-gray-800"></div>
 ```
 
 ## Options
@@ -63,22 +61,22 @@ Use `@dark:` regardless of config:
 presetWind3({
   // Dark mode strategy
   dark: 'class', // 'class' | 'media' | { light: '.light', dark: '.dark' }
-  
+
   // Generate pseudo selector as [group=""] instead of .group
   attributifyPseudo: false,
-  
+
   // CSS custom properties prefix
   variablePrefix: 'un-',
-  
+
   // Utils prefix
   prefix: '',
-  
+
   // Generate preflight CSS
   preflight: true, // true | false | 'on-demand'
-  
+
   // Mark all utilities as !important
   important: false, // boolean | string (selector)
-})
+});
 ```
 
 ### Important Option
@@ -88,7 +86,7 @@ Make all utilities `!important`:
 ```ts
 presetWind3({
   important: true,
-})
+});
 ```
 
 Or scope with selector to increase specificity without `!important`:
@@ -96,7 +94,7 @@ Or scope with selector to increase specificity without `!important`:
 ```ts
 presetWind3({
   important: '#app',
-})
+});
 ```
 
 Output: `#app :is(.dark .dark\:bg-blue) { ... }`
@@ -110,9 +108,9 @@ Template quotes don't work due to extractor:
 ```html
 <!-- Won't work -->
 <div class="before:content-['']">
-
-<!-- Use shortcut instead -->
-<div class="before:content-empty">
+  <!-- Use shortcut instead -->
+  <div class="before:content-empty"></div>
+</div>
 ```
 
 ### Background Position
@@ -122,9 +120,9 @@ Use `position:` prefix for custom values:
 ```html
 <!-- Tailwind -->
 <div class="bg-[center_top_1rem]">
-
-<!-- UnoCSS -->
-<div class="bg-[position:center_top_1rem]">
+  <!-- UnoCSS -->
+  <div class="bg-[position:center_top_1rem]"></div>
+</div>
 ```
 
 ### Animations
@@ -157,20 +155,20 @@ theme: {
 
 ## Differences from Windi CSS
 
-| Windi CSS | UnoCSS |
-|-----------|--------|
+| Windi CSS | UnoCSS      |
+| --------- | ----------- |
 | `<sm:p-1` | `lt-sm:p-1` |
 | `@lg:p-1` | `at-lg:p-1` |
-| `>xl:p-1` | `xl:p-1` |
+| `>xl:p-1` | `xl:p-1`    |
 
 Bracket syntax uses `_` instead of `,`:
 
 ```html
 <!-- Windi CSS -->
 <div class="grid-cols-[1fr,10px,max-content]">
-
-<!-- UnoCSS -->
-<div class="grid-cols-[1fr_10px_max-content]">
+  <!-- UnoCSS -->
+  <div class="grid-cols-[1fr_10px_max-content]"></div>
+</div>
 ```
 
 ## Experimental: Media Hover
@@ -178,17 +176,18 @@ Bracket syntax uses `_` instead of `,`:
 Addresses sticky hover on touch devices:
 
 ```html
-<div class="@hover-text-red">
+<div class="@hover-text-red"></div>
 ```
 
 Generates:
+
 ```css
 @media (hover: hover) and (pointer: fine) {
   .\@hover-text-red:hover { ... }
 }
 ```
 
-<!-- 
+<!--
 Source references:
 - https://unocss.dev/presets/wind3
 -->

packages/mosaic/framework/skills/unocss/references/preset-wind4.md

@@ -10,13 +10,11 @@ The Tailwind CSS v4 compatible preset. Enhances preset-wind3 with modern CSS fea
 ## Installation
 
 ```ts
-import { defineConfig, presetWind4 } from 'unocss'
+import { defineConfig, presetWind4 } from 'unocss';
 
 export default defineConfig({
-  presets: [
-    presetWind4(),
-  ],
-})
+  presets: [presetWind4()],
+});
 ```
 
 ## Key Differences from Wind3
@@ -27,15 +25,15 @@ No need for `@unocss/reset` - reset is built-in:
 
 ```ts
 // Remove these imports
-import '@unocss/reset/tailwind.css' // ❌ Not needed
-import '@unocss/reset/tailwind-compat.css' // ❌ Not needed
+import '@unocss/reset/tailwind.css'; // ❌ Not needed
+import '@unocss/reset/tailwind-compat.css'; // ❌ Not needed
 
 // Enable in config
 presetWind4({
   preflights: {
     reset: true,
   },
-})
+});
 ```
 
 ### OKLCH Color Model
@@ -47,7 +45,8 @@ Uses `oklch` for better color perception and contrast. Not compatible with `pres
 Automatically generates CSS variables from theme:
 
 ```css
-:root, :host {
+:root,
+:host {
   --spacing: 0.25rem;
   --font-sans: ui-sans-serif, system-ui, sans-serif;
   --colors-black: #000;
@@ -70,20 +69,20 @@ Uses `@property` for better browser optimization:
 
 ### Theme Key Changes
 
-| 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` |
-| `verticalBreakpoints` | `verticalBreakpoint` |
-| `boxShadow` | `shadow` |
-| `transitionProperty` | `property` |
-| `container.maxWidth` | `containers.maxWidth` |
-| Size properties (`width`, `height`, etc.) | Unified to `spacing` |
+| 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`                       |
+| `verticalBreakpoints`                     | `verticalBreakpoint`               |
+| `boxShadow`                               | `shadow`                           |
+| `transitionProperty`                      | `property`                         |
+| `container.maxWidth`                      | `containers.maxWidth`              |
+| Size properties (`width`, `height`, etc.) | Unified to `spacing`               |
 
 ## Options
 
@@ -92,14 +91,14 @@ presetWind4({
   preflights: {
     // Built-in reset styles
     reset: true,
-    
+
     // Theme CSS variables generation
     theme: 'on-demand', // true | false | 'on-demand'
-    
+
     // @property CSS rules
     property: true,
   },
-})
+});
 ```
 
 ### Theme Variable Processing
@@ -107,21 +106,21 @@ presetWind4({
 Convert rem to px for theme variables:
 
 ```ts
-import { createRemToPxProcessor } from '@unocss/preset-wind4/utils'
+import { createRemToPxProcessor } from '@unocss/preset-wind4/utils';
 
 presetWind4({
   preflights: {
     theme: {
       mode: 'on-demand',
       process: createRemToPxProcessor(),
-    }
+    },
   },
-})
+});
 
 // Also apply to utilities
 export default defineConfig({
   postprocess: [createRemToPxProcessor()],
-})
+});
 ```
 
 ### Property Layer Customization
@@ -136,7 +135,7 @@ presetWind4({
       selector: ':where(*, ::before, ::after)',
     },
   },
-})
+});
 ```
 
 Remove `@supports` wrapper:
@@ -148,23 +147,23 @@ presetWind4({
       parent: false,
     },
   },
-})
+});
 ```
 
 ## Generated Layers
 
-| Layer | Description | Order |
-|-------|-------------|-------|
-| `properties` | CSS `@property` rules | -200 |
-| `theme` | Theme CSS variables | -150 |
-| `base` | Reset/preflight styles | -100 |
+| Layer        | Description            | Order |
+| ------------ | ---------------------- | ----- |
+| `properties` | CSS `@property` rules  | -200  |
+| `theme`      | Theme CSS variables    | -150  |
+| `base`       | Reset/preflight styles | -100  |
 
 ## Theme.defaults
 
 Global default configuration for reset styles:
 
 ```ts
-import type { Theme } from '@unocss/preset-wind4/theme'
+import type { Theme } from '@unocss/preset-wind4/theme';
 
 const defaults: Theme['default'] = {
   transition: {
@@ -180,7 +179,7 @@ const defaults: Theme['default'] = {
     family: 'var(--font-mono)',
     // ...
   },
-}
+};
 ```
 
 ## Compatibility Notes
@@ -194,9 +193,9 @@ presetWind4({
   preflights: {
     theme: {
       process: createRemToPxProcessor(),
-    }
+    },
   },
-})
+});
 ```
 
 ### presetLegacyCompat
@@ -230,18 +229,20 @@ theme: {
 ## When to Use Wind4
 
 Choose **preset-wind4** when:
+
 - Starting a new project
 - Targeting modern browsers
 - Want built-in reset and CSS variables
 - Following Tailwind v4 conventions
 
 Choose **preset-wind3** when:
+
 - Need legacy browser support
 - Migrating from Tailwind v3
 - Using presetLegacyCompat
 - Want stable, proven preset
 
-<!-- 
+<!--
 Source references:
 - https://unocss.dev/presets/wind4
 -->

packages/mosaic/framework/skills/unocss/references/transformer-attributify-jsx.md

@@ -24,20 +24,12 @@ The `={true}` breaks UnoCSS attributify detection.
 ## Installation
 
 ```ts
-import { 
-  defineConfig, 
-  presetAttributify, 
-  transformerAttributifyJsx 
-} from 'unocss'
+import { defineConfig, presetAttributify, transformerAttributifyJsx } from 'unocss';
 
 export default defineConfig({
-  presets: [
-    presetAttributify(),
-  ],
-  transformers: [
-    transformerAttributifyJsx(),
-  ],
-})
+  presets: [presetAttributify()],
+  transformers: [transformerAttributifyJsx()],
+});
 ```
 
 ## How It Works
@@ -61,12 +53,13 @@ transformerAttributifyJsx({
   // Only transform specific attributes
   // Default: transforms all that match attributify patterns
   blocklist: ['text', 'font'],
-})
+});
 ```
 
 ## When to Use
 
 Required when using:
+
 - React
 - Preact
 - Solid
@@ -88,35 +81,25 @@ With valueless attributify syntax:
 
 ```ts
 // vite.config.ts
-import React from '@vitejs/plugin-react'
-import UnoCSS from 'unocss/vite'
+import React from '@vitejs/plugin-react';
+import UnoCSS from 'unocss/vite';
 
 export default {
   plugins: [
     UnoCSS(), // Must be before React
     React(),
   ],
-}
+};
 ```
 
 ```ts
 // uno.config.ts
-import { 
-  defineConfig, 
-  presetAttributify, 
-  presetWind3,
-  transformerAttributifyJsx 
-} from 'unocss'
+import { defineConfig, presetAttributify, presetWind3, transformerAttributifyJsx } from 'unocss';
 
 export default defineConfig({
-  presets: [
-    presetWind3(),
-    presetAttributify(),
-  ],
-  transformers: [
-    transformerAttributifyJsx(),
-  ],
-})
+  presets: [presetWind3(), presetAttributify()],
+  transformers: [transformerAttributifyJsx()],
+});
 ```
 
 ### Preact
@@ -126,15 +109,12 @@ Same as React, use `@preact/preset-vite` or `@prefresh/vite`.
 ### Solid
 
 ```ts
-import UnoCSS from 'unocss/vite'
-import solidPlugin from 'vite-plugin-solid'
+import UnoCSS from 'unocss/vite';
+import solidPlugin from 'vite-plugin-solid';
 
 export default {
-  plugins: [
-    UnoCSS(),
-    solidPlugin(),
-  ],
-}
+  plugins: [UnoCSS(), solidPlugin()],
+};
 ```
 
 ## TypeScript Support
@@ -143,14 +123,14 @@ Add type declarations:
 
 ```ts
 // shims.d.ts
-import type { AttributifyAttributes } from '@unocss/preset-attributify'
+import type { AttributifyAttributes } from '@unocss/preset-attributify';
 
 declare module 'react' {
   interface HTMLAttributes<T> extends AttributifyAttributes {}
 }
 ```
 
-<!-- 
+<!--
 Source references:
 - https://unocss.dev/transformers/attributify-jsx
 -->

packages/mosaic/framework/skills/unocss/references/transformer-compile-class.md

@@ -10,13 +10,11 @@ Compiles multiple utility classes into a single hashed class for smaller HTML.
 ## Installation
 
 ```ts
-import { defineConfig, transformerCompileClass } from 'unocss'
+import { defineConfig, transformerCompileClass } from 'unocss';
 
 export default defineConfig({
-  transformers: [
-    transformerCompileClass(),
-  ],
-})
+  transformers: [transformerCompileClass()],
+});
 ```
 
 ## Usage
@@ -63,13 +61,13 @@ Add `:uno:` prefix to mark classes for compilation:
 transformerCompileClass({
   // Custom trigger string (default: ':uno:')
   trigger: ':uno:',
-  
+
   // Custom class prefix (default: 'uno-')
   classPrefix: 'uno-',
-  
+
   // Hash function for class names
   hashFn: (str) => /* custom hash */,
-  
+
   // Keep original classes alongside compiled
   keepOriginal: false,
 })
@@ -94,6 +92,7 @@ Enforce compile class usage across project:
 ```
 
 This rule:
+
 - Warns when class attribute doesn't start with `:uno:`
 - Auto-fixes by adding the prefix
 
@@ -102,10 +101,13 @@ Options:
 ```json
 {
   "rules": {
-    "@unocss/enforce-class-compile": ["warn", {
-      "prefix": ":uno:",
-      "enableFix": true
-    }]
+    "@unocss/enforce-class-compile": [
+      "warn",
+      {
+        "prefix": ":uno:",
+        "enableFix": true
+      }
+    ]
   }
 }
 ```
@@ -115,14 +117,14 @@ Options:
 ```ts
 export default defineConfig({
   transformers: [
-    transformerVariantGroup(),  // Process variant groups first
-    transformerDirectives(),    // Then directives
-    transformerCompileClass(),  // Compile last
+    transformerVariantGroup(), // Process variant groups first
+    transformerDirectives(), // Then directives
+    transformerCompileClass(), // Compile last
   ],
-})
+});
 ```
 
-<!-- 
+<!--
 Source references:
 - https://unocss.dev/transformers/compile-class
 -->

packages/mosaic/framework/skills/unocss/references/transformer-directives.md

@@ -10,13 +10,11 @@ Enables `@apply`, `@screen`, `theme()`, and `icon()` directives in CSS.
 ## Installation
 
 ```ts
-import { defineConfig, transformerDirectives } from 'unocss'
+import { defineConfig, transformerDirectives } from 'unocss';
 
 export default defineConfig({
-  transformers: [
-    transformerDirectives(),
-  ],
-})
+  transformers: [transformerDirectives()],
+});
 ```
 
 ## @apply
@@ -52,7 +50,7 @@ Configure aliases:
 transformerDirectives({
   applyVariable: ['--at-apply', '--uno-apply', '--uno'],
   // or disable: applyVariable: false
-})
+});
 ```
 
 ## @screen
@@ -83,12 +81,16 @@ Create breakpoint media queries:
 ```css
 /* Less than breakpoint */
 @screen lt-sm {
-  .item { display: none; }
+  .item {
+    display: none;
+  }
 }
 
 /* At specific breakpoint only */
 @screen at-md {
-  .item { width: 50%; }
+  .item {
+    width: 50%;
+  }
 }
 ```
 
@@ -151,7 +153,7 @@ Convert icon utility to SVG (requires preset-icons):
 }
 ```
 
-<!-- 
+<!--
 Source references:
 - https://unocss.dev/transformers/directives
 -->

packages/mosaic/framework/skills/unocss/references/transformer-variant-group.md

@@ -10,13 +10,11 @@ Enables shorthand syntax for grouping utilities with common prefixes.
 ## Installation
 
 ```ts
-import { defineConfig, transformerVariantGroup } from 'unocss'
+import { defineConfig, transformerVariantGroup } from 'unocss';
 
 export default defineConfig({
-  transformers: [
-    transformerVariantGroup(),
-  ],
-})
+  transformers: [transformerVariantGroup()],
+});
 ```
 
 ## Usage
@@ -36,9 +34,7 @@ Group multiple utilities under one variant prefix using parentheses:
 ### Hover States
 
 ```html
-<button class="hover:(bg-blue-600 text-white scale-105)">
-  Hover me
-</button>
+<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`
@@ -46,9 +42,7 @@ 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>
+<div class="dark:(bg-gray-800 text-white)">Dark content</div>
 ```
 
 Expands to: `dark:bg-gray-800 dark:text-white`
@@ -56,9 +50,7 @@ Expands to: `dark:bg-gray-800 dark:text-white`
 ### Responsive
 
 ```html
-<div class="md:(flex items-center gap-4)">
-  Responsive flex
-</div>
+<div class="md:(flex items-center gap-4)">Responsive flex</div>
 ```
 
 Expands to: `md:flex md:items-center md:gap-4`
@@ -66,9 +58,7 @@ 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>
+<div class="lg:hover:(bg-blue-500 text-white)">Large screen hover</div>
 ```
 
 Expands to: `lg:hover:bg-blue-500 lg:hover:text-white`
@@ -76,9 +66,7 @@ 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>
+<div class="text-(sm gray-600) font-(medium mono)">Styled text</div>
 ```
 
 Expands to: `text-sm text-gray-600 font-medium font-mono`
@@ -91,7 +79,7 @@ Expands to: `text-sm text-gray-600 font-medium font-mono`
 - Nesting is supported
 - Works in class attributes and other extraction sources
 
-<!-- 
+<!--
 Source references:
 - https://unocss.dev/transformers/variant-group
 -->