aico-cli 2.1.7 → 2.1.23

package/templates/skills/unocss/references/preset-mini.md

@@ -0,0 +1,158 @@
+---
+name: preset-mini
+description: Minimal preset with essential utilities for UnoCSS
+---
+
+# Preset Mini
+
+The minimal preset with only essential rules and variants. Good starting point for custom presets.
+
+## Installation
+
+```ts
+import { defineConfig, presetMini } from 'unocss'
+
+export default defineConfig({
+  presets: [
+    presetMini(),
+  ],
+})
+```
+
+## What's Included
+
+Subset of `preset-wind3` with essential utilities aligned to CSS properties:
+
+- Basic spacing (margin, padding)
+- Display (flex, grid, block, etc.)
+- Positioning (absolute, relative, fixed)
+- Sizing (width, height)
+- Colors (text, background, border)
+- Typography basics (font-size, font-weight)
+- Borders and border-radius
+- Basic transforms and transitions
+
+## What's NOT Included
+
+Opinionated or complex Tailwind utilities:
+- `container`
+- Complex animations
+- Gradients
+- Advanced typography
+- Prose classes
+
+## Use Cases
+
+1. **Building custom presets** - Start with mini and add only what you need
+2. **Minimal bundle size** - When you only need basic utilities
+3. **Learning** - Understand UnoCSS core without Tailwind complexity
+
+## Dark Mode
+
+Same as preset-wind3:
+
+```ts
+presetMini({
+  dark: 'class' // or 'media'
+})
+```
+
+```html
+<div class="dark:bg-red:10" />
+```
+
+Class-based:
+```css
+.dark .dark\:bg-red\:10 {
+  background-color: rgb(248 113 113 / 0.1);
+}
+```
+
+Media query:
+```css
+@media (prefers-color-scheme: dark) {
+  .dark\:bg-red\:10 {
+    background-color: rgb(248 113 113 / 0.1);
+  }
+}
+```
+
+## CSS @layer Variant
+
+Native CSS layer support:
+
+```html
+<div class="layer-foo:p4" />
+```
+
+```css
+@layer foo {
+  .layer-foo\:p4 {
+    padding: 1rem;
+  }
+}
+```
+
+## Theme Customization
+
+```ts
+presetMini({
+  theme: {
+    colors: {
+      veryCool: '#0000ff',
+      brand: {
+        primary: 'hsl(var(--hue, 217) 78% 51%)',
+      }
+    },
+  }
+})
+```
+
+**Note:** `breakpoints` property is overridden, not merged.
+
+## Options
+
+```ts
+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
+
+Create custom preset extending mini:
+
+```ts
+import { presetMini } from 'unocss'
+import type { Preset } from 'unocss'
+
+export const myPreset: Preset = {
+  name: 'my-preset',
+  presets: [presetMini()],
+  rules: [
+    // Add custom rules
+    ['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',
+  },
+}
+```
+
+<!-- 
+Source references:
+- https://unocss.dev/presets/mini
+-->

package/templates/skills/unocss/references/preset-rem-to-px.md

@@ -0,0 +1,97 @@
+---
+name: preset-rem-to-px
+description: Convert rem units to px for utilities
+---
+
+# Preset Rem to Px
+
+Converts `rem` units to `px` in generated utilities.
+
+## Installation
+
+```ts
+import { defineConfig, presetRemToPx, presetWind3 } from 'unocss'
+
+export default defineConfig({
+  presets: [
+    presetWind3(),
+    presetRemToPx(),
+  ],
+})
+```
+
+## What It Does
+
+Transforms all rem values to px:
+
+```html
+<div class="p-4">
+```
+
+Without preset:
+```css
+.p-4 { padding: 1rem; }
+```
+
+With preset:
+```css
+.p-4 { padding: 16px; }
+```
+
+## Use Cases
+
+- Projects requiring pixel-perfect designs
+- Environments where rem doesn't work well
+- Consistency with pixel-based design systems
+- Email templates (better compatibility)
+
+## Options
+
+```ts
+presetRemToPx({
+  // Base font size for conversion (default: 16)
+  baseFontSize: 16,
+})
+```
+
+Custom base:
+
+```ts
+presetRemToPx({
+  baseFontSize: 14, // 1rem = 14px
+})
+```
+
+## With Preset Wind4
+
+**Note:** `presetRemToPx` is not needed with `preset-wind4`. Use the built-in processor instead:
+
+```ts
+import { createRemToPxProcessor } from '@unocss/preset-wind4/utils'
+
+export default defineConfig({
+  presets: [
+    presetWind4({
+      preflights: {
+        theme: {
+          process: createRemToPxProcessor(),
+        }
+      },
+    }),
+  ],
+  // Also apply to utilities
+  postprocess: [createRemToPxProcessor()],
+})
+```
+
+## Important Notes
+
+- Order matters: place after the preset that generates rem values
+- 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
+-->

package/templates/skills/unocss/references/preset-tagify.md

@@ -0,0 +1,134 @@
+---
+name: preset-tagify
+description: Use utilities as HTML tag names
+---
+
+# Preset Tagify
+
+Use CSS utilities directly as HTML tag names.
+
+## Installation
+
+```ts
+import { defineConfig, presetTagify } from 'unocss'
+
+export default defineConfig({
+  presets: [
+    presetTagify(),
+  ],
+})
+```
+
+## Basic Usage
+
+Instead of:
+
+```html
+<span class="text-red">red text</span>
+<div class="flex">flexbox</div>
+<span class="i-line-md-emoji-grin"></span>
+```
+
+Use tag names directly:
+
+```html
+<text-red>red text</text-red>
+<flex>flexbox</flex>
+<i-line-md-emoji-grin />
+```
+
+Works exactly the same!
+
+## With Prefix
+
+```ts
+presetTagify({
+  prefix: 'un-'
+})
+```
+
+```html
+<!-- Matched -->
+<un-flex></un-flex>
+
+<!-- Not matched -->
+<flex></flex>
+```
+
+## Extra Properties
+
+Add CSS properties to matched tags:
+
+```ts
+presetTagify({
+  // Add display: inline-block to icons
+  extraProperties: matched => matched.startsWith('i-')
+    ? { display: 'inline-block' }
+    : {},
+})
+```
+
+Or apply to all:
+
+```ts
+presetTagify({
+  extraProperties: { display: 'block' }
+})
+```
+
+## Options
+
+```ts
+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`
+
+Add your own:
+
+```ts
+presetTagify({
+  excludedTags: [
+    'b',
+    /^h\d+$/,
+    'table',
+    'article',  // Add custom exclusions
+    /^my-/,     // Exclude tags starting with 'my-'
+  ],
+})
+```
+
+## Use Cases
+
+- Quick prototyping
+- Cleaner HTML for simple pages
+- Icon embedding: `<i-carbon-sun />`
+- Semantic-like styling: `<flex-center>`, `<text-red>`
+
+## Limitations
+
+- Custom element names must contain a hyphen (HTML spec)
+- Some frameworks may not support all custom elements
+- Utilities without hyphens need the prefix option
+
+<!-- 
+Source references:
+- https://unocss.dev/presets/tagify
+-->

package/templates/skills/unocss/references/preset-typography.md

@@ -0,0 +1,95 @@
+---
+name: preset-typography
+description: Prose classes for typographic defaults on vanilla HTML content
+---
+
+# Preset Typography
+
+Prose classes for adding typographic defaults to vanilla HTML content.
+
+## Installation
+
+```ts
+import { defineConfig, presetTypography, presetWind3 } from 'unocss'
+
+export default defineConfig({
+  presets: [
+    presetWind3(), // Required!
+    presetTypography(),
+  ],
+})
+```
+
+## Basic Usage
+
+```html
+<article class="prose">
+  <h1>My Article</h1>
+  <p>This is styled with typographic defaults...</p>
+</article>
+```
+
+## Sizes
+
+```html
+<article class="prose prose-sm">Small</article>
+<article class="prose prose-base">Base (default)</article>
+<article class="prose prose-lg">Large</article>
+<article class="prose prose-xl">Extra large</article>
+<article class="prose prose-2xl">2X large</article>
+```
+
+Responsive:
+```html
+<article class="prose prose-sm md:prose-base lg:prose-lg">
+  Responsive typography
+</article>
+```
+
+## Colors
+
+```html
+<article class="prose prose-gray">Gray (default)</article>
+<article class="prose prose-slate">Slate</article>
+<article class="prose prose-blue">Blue</article>
+```
+
+## Dark Mode
+
+```html
+<article class="prose dark:prose-invert">
+  Dark mode typography
+</article>
+```
+
+## Excluding Elements
+
+```html
+<article class="prose">
+  <p>Styled</p>
+  <div class="not-prose">
+    <p>NOT styled</p>
+  </div>
+</article>
+```
+
+**Note:** `not-prose` only works as a class.
+
+## Options
+
+```ts
+presetTypography({
+  selectorName: 'prose',      // Custom selector
+  cssVarPrefix: '--un-prose', // CSS variable prefix
+  important: false,           // Make !important
+  cssExtend: {
+    'code': { color: '#8b5cf6' },
+    'a:hover': { color: '#f43f5e' },
+  },
+})
+```
+
+<!-- 
+Source references:
+- https://unocss.dev/presets/typography
+-->

package/templates/skills/unocss/references/preset-web-fonts.md

@@ -0,0 +1,91 @@
+---
+name: preset-web-fonts
+description: Easy Google Fonts and other web fonts integration
+---
+
+# Preset Web Fonts
+
+Easily use web fonts from Google Fonts and other providers.
+
+## Installation
+
+```ts
+import { defineConfig, presetWebFonts, presetWind3 } from 'unocss'
+
+export default defineConfig({
+  presets: [
+    presetWind3(),
+    presetWebFonts({
+      provider: 'google',
+      fonts: {
+        sans: 'Roboto',
+        mono: 'Fira Code',
+      },
+    }),
+  ],
+})
+```
+
+## Providers
+
+- `google` - Google Fonts (default)
+- `bunny` - Privacy-friendly alternative
+- `fontshare` - Quality fonts by ITF
+- `fontsource` - Self-hosted open source fonts
+- `coollabs` - Privacy-friendly drop-in replacement
+- `none` - Treat as system font
+
+## Font Configuration
+
+```ts
+fonts: {
+  // Simple
+  sans: 'Roboto',
+  
+  // Multiple (fallback)
+  mono: ['Fira Code', 'Fira Mono:400,700'],
+  
+  // Detailed
+  lato: [
+    {
+      name: 'Lato',
+      weights: ['400', '700'],
+      italic: true,
+    },
+    {
+      name: 'sans-serif',
+      provider: 'none',
+    },
+  ],
+}
+```
+
+## Usage
+
+```html
+<p class="font-sans">Roboto</p>
+<code class="font-mono">Fira Code</code>
+```
+
+## Local Fonts
+
+Self-host fonts:
+
+```ts
+import { createLocalFontProcessor } from '@unocss/preset-web-fonts/local'
+
+presetWebFonts({
+  provider: 'none',
+  fonts: { sans: 'Roboto' },
+  processors: createLocalFontProcessor({
+    cacheDir: 'node_modules/.cache/unocss/fonts',
+    fontAssetsDir: 'public/assets/fonts',
+    fontServeBaseUrl: '/assets/fonts',
+  })
+})
+```
+
+<!-- 
+Source references:
+- https://unocss.dev/presets/web-fonts
+-->