aico-cli 2.1.1 → 2.1.23

package/templates/skills/vite/references/features-workers.md

@@ -0,0 +1,115 @@
+---
+name: features-workers
+description: Web Worker support in Vite
+---
+
+# Web Workers
+
+## Constructor Syntax (Recommended)
+
+Standard Web Worker creation:
+
+```ts
+const worker = new Worker(new URL('./worker.js', import.meta.url))
+```
+
+Module worker:
+
+```ts
+const worker = new Worker(new URL('./worker.js', import.meta.url), {
+  type: 'module'
+})
+```
+
+Shared Worker:
+
+```ts
+const sharedWorker = new SharedWorker(
+  new URL('./shared-worker.js', import.meta.url)
+)
+```
+
+**Note:** The `new URL()` must be used directly inside `new Worker()` for detection.
+
+## Query Suffix Syntax
+
+Import with `?worker` suffix:
+
+```ts
+import MyWorker from './worker?worker'
+
+const worker = new MyWorker()
+```
+
+Shared worker:
+
+```ts
+import MySharedWorker from './worker?sharedworker'
+
+const worker = new MySharedWorker()
+```
+
+### Inline Worker
+
+Inline as base64 string (no separate chunk):
+
+```ts
+import MyWorker from './worker?worker&inline'
+
+const worker = new MyWorker()
+```
+
+### Worker URL Only
+
+Get URL instead of constructor:
+
+```ts
+import workerUrl from './worker?worker&url'
+```
+
+## Worker Script
+
+Workers can use ESM `import` statements:
+
+```ts
+// worker.js
+import { heavyComputation } from './utils'
+
+self.onmessage = (e) => {
+  const result = heavyComputation(e.data)
+  self.postMessage(result)
+}
+```
+
+## Worker Options
+
+Configure worker bundling:
+
+```ts
+// vite.config.ts
+export default defineConfig({
+  worker: {
+    format: 'es',  // or 'iife'
+    plugins: () => [/* worker-specific plugins */],
+    rollupOptions: {
+      // Rollup options for worker bundle
+    }
+  }
+})
+```
+
+## WebAssembly in Workers
+
+```ts
+// worker.js
+import init from './module.wasm?init'
+
+init().then((instance) => {
+  instance.exports.compute()
+})
+```
+
+<!-- 
+Source references:
+- https://vite.dev/guide/features.html#web-workers
+-->

package/templates/skills/vitepress/GENERATION.md

@@ -0,0 +1,5 @@
+# Generation Info
+
+- **Source:** `sources/vitepress`
+- **Git SHA:** `d4796a0373eb486766cf48e63fdf461681424d43`
+- **Generated:** 2026-01-28

package/templates/skills/vitepress/SKILL.md

@@ -0,0 +1,65 @@
+---
+name: vitepress
+description: VitePress static site generator powered by Vite and Vue. Use when building documentation sites, configuring themes, or writing Markdown with Vue components.
+metadata:
+  author: Anthony Fu
+  version: "2026.1.28"
+  source: Generated from https://github.com/vuejs/vitepress, scripts located at https://github.com/antfu/skills
+---
+
+VitePress is a Static Site Generator (SSG) built on Vite and Vue 3. It takes Markdown content, applies a theme, and generates static HTML that becomes an SPA for fast navigation. Perfect for documentation, blogs, and marketing sites.
+
+**Key Characteristics:**
+- File-based routing with `.md` files
+- Vue components work directly in Markdown
+- Fast HMR with instant updates (<100ms)
+- Default theme optimized for documentation
+- Built-in search (local or Algolia)
+
+**Before working with VitePress projects:**
+- Check `.vitepress/config.ts` for site configuration
+- Look at `.vitepress/theme/` for custom theme extensions
+- The `public/` directory contains static assets served as-is
+
+> The skill is based on VitePress 1.x, generated at 2026-01-28.
+
+## Core
+
+| Topic | Description | Reference |
+|-------|-------------|-----------|
+| Configuration | Config file setup, defineConfig, site metadata | [core-config](references/core-config.md) |
+| CLI | Command-line interface: dev, build, preview, init | [core-cli](references/core-cli.md) |
+| Routing | File-based routing, source directory, rewrites | [core-routing](references/core-routing.md) |
+| Markdown | Frontmatter, containers, tables, anchors, includes | [core-markdown](references/core-markdown.md) |
+
+## Features
+
+### Code & Content
+
+| Topic | Description | Reference |
+|-------|-------------|-----------|
+| Code Blocks | Syntax highlighting, line highlighting, diffs, focus | [features-code-blocks](references/features-code-blocks.md) |
+| Vue in Markdown | Components, script setup, directives, templating | [features-vue](references/features-vue.md) |
+| Data Loading | Build-time data loaders, createContentLoader | [features-data-loading](references/features-data-loading.md) |
+| Dynamic Routes | Generate pages from data, paths loader files | [features-dynamic-routes](references/features-dynamic-routes.md) |
+
+## Theme
+
+| Topic | Description | Reference |
+|-------|-------------|-----------|
+| Theme Config | Nav, sidebar, search, social links, footer | [theme-config](references/theme-config.md) |
+| Customization | CSS variables, slots, fonts, global components | [theme-customization](references/theme-customization.md) |
+| Custom Theme | Building themes from scratch, theme interface | [theme-custom](references/theme-custom.md) |
+
+## Advanced
+
+| Topic | Description | Reference |
+|-------|-------------|-----------|
+| Internationalization | Multi-language sites, locale configuration | [advanced-i18n](references/advanced-i18n.md) |
+| SSR Compatibility | Server-side rendering, ClientOnly, dynamic imports | [advanced-ssr](references/advanced-ssr.md) |
+
+## Recipes
+
+| Topic | Description | Reference |
+|-------|-------------|-----------|
+| Deployment | GitHub Pages, Netlify, Vercel, Cloudflare, Nginx | [recipes-deploy](references/recipes-deploy.md) |

package/templates/skills/vitepress/references/advanced-i18n.md

@@ -0,0 +1,299 @@
+---
+name: vitepress-internationalization
+description: Setting up multi-language sites with locale configuration and RTL support
+---
+
+# Internationalization
+
+VitePress supports multi-language sites through locale configuration.
+
+## Directory Structure
+
+Organize content by locale:
+
+```
+docs/
+├─ en/
+│  ├─ guide.md
+│  └─ index.md
+├─ zh/
+│  ├─ guide.md
+│  └─ index.md
+└─ fr/
+   ├─ guide.md
+   └─ index.md
+```
+
+Or with root as default language:
+
+```
+docs/
+├─ guide.md        # English (root)
+├─ index.md
+├─ zh/
+│  ├─ guide.md
+│  └─ index.md
+└─ fr/
+   ├─ guide.md
+   └─ index.md
+```
+
+## Configuration
+
+```ts
+// .vitepress/config.ts
+import { defineConfig } from 'vitepress'
+
+export default defineConfig({
+  locales: {
+    root: {
+      label: 'English',
+      lang: 'en'
+    },
+    zh: {
+      label: '简体中文',
+      lang: 'zh-CN',
+      link: '/zh/'
+    },
+    fr: {
+      label: 'Français',
+      lang: 'fr',
+      link: '/fr/'
+    }
+  }
+})
+```
+
+## Locale-Specific Config
+
+Override site config per locale:
+
+```ts
+locales: {
+  root: {
+    label: 'English',
+    lang: 'en',
+    title: 'My Docs',
+    description: 'Documentation site',
+    themeConfig: {
+      nav: [
+        { text: 'Guide', link: '/guide/' }
+      ],
+      sidebar: {
+        '/guide/': [
+          { text: 'Introduction', link: '/guide/' }
+        ]
+      }
+    }
+  },
+  zh: {
+    label: '简体中文',
+    lang: 'zh-CN',
+    link: '/zh/',
+    title: '我的文档',
+    description: '文档站点',
+    themeConfig: {
+      nav: [
+        { text: '指南', link: '/zh/guide/' }
+      ],
+      sidebar: {
+        '/zh/guide/': [
+          { text: '介绍', link: '/zh/guide/' }
+        ]
+      }
+    }
+  }
+}
+```
+
+## Locale-Specific Properties
+
+Each locale can override:
+
+```ts
+interface LocaleSpecificConfig {
+  lang?: string
+  dir?: string              // 'ltr' or 'rtl'
+  title?: string
+  titleTemplate?: string | boolean
+  description?: string
+  head?: HeadConfig[]       // Merged with existing
+  themeConfig?: ThemeConfig // Shallow merged
+}
+```
+
+## Search i18n
+
+### Local Search
+
+```ts
+themeConfig: {
+  search: {
+    provider: 'local',
+    options: {
+      locales: {
+        zh: {
+          translations: {
+            button: {
+              buttonText: '搜索',
+              buttonAriaLabel: '搜索'
+            },
+            modal: {
+              noResultsText: '没有结果',
+              resetButtonTitle: '重置搜索',
+              footer: {
+                selectText: '选择',
+                navigateText: '导航',
+                closeText: '关闭'
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+```
+
+### Algolia Search
+
+```ts
+themeConfig: {
+  search: {
+    provider: 'algolia',
+    options: {
+      appId: '...',
+      apiKey: '...',
+      indexName: '...',
+      locales: {
+        zh: {
+          placeholder: '搜索文档',
+          translations: {
+            button: { buttonText: '搜索文档' }
+          }
+        }
+      }
+    }
+  }
+}
+```
+
+## Separate Locale Directories
+
+For fully separated locales without root fallback:
+
+```
+docs/
+├─ en/
+│  └─ index.md
+├─ zh/
+│  └─ index.md
+└─ fr/
+   └─ index.md
+```
+
+Requires server redirect for `/` → `/en/`. Netlify example:
+
+```
+/* /en/:splat 302 Language=en
+/* /zh/:splat 302 Language=zh
+/* /en/:splat 302
+```
+
+## Persisting Language Choice
+
+Set cookie on language change:
+
+```vue
+<!-- .vitepress/theme/Layout.vue -->
+<script setup>
+import DefaultTheme from 'vitepress/theme'
+import { useData, inBrowser } from 'vitepress'
+import { watchEffect } from 'vue'
+
+const { lang } = useData()
+
+watchEffect(() => {
+  if (inBrowser) {
+    document.cookie = `nf_lang=${lang.value}; expires=Mon, 1 Jan 2030 00:00:00 UTC; path=/`
+  }
+})
+</script>
+
+<template>
+  <DefaultTheme.Layout />
+</template>
+```
+
+## RTL Support (Experimental)
+
+For right-to-left languages:
+
+```ts
+locales: {
+  ar: {
+    label: 'العربية',
+    lang: 'ar',
+    dir: 'rtl'
+  }
+}
+```
+
+Requires PostCSS plugin like `postcss-rtlcss`:
+
+```ts
+// postcss.config.js
+import rtlcss from 'postcss-rtlcss'
+
+export default {
+  plugins: [
+    rtlcss({
+      ltrPrefix: ':where([dir="ltr"])',
+      rtlPrefix: ':where([dir="rtl"])'
+    })
+  ]
+}
+```
+
+## Organizing Config
+
+Split config into separate files:
+
+```
+.vitepress/
+├─ config/
+│  ├─ index.ts      # Main config, merges locales
+│  ├─ en.ts         # English config
+│  ├─ zh.ts         # Chinese config
+│  └─ shared.ts     # Shared config
+```
+
+```ts
+// .vitepress/config/index.ts
+import { defineConfig } from 'vitepress'
+import { shared } from './shared'
+import { en } from './en'
+import { zh } from './zh'
+
+export default defineConfig({
+  ...shared,
+  locales: {
+    root: { label: 'English', ...en },
+    zh: { label: '简体中文', ...zh }
+  }
+})
+```
+
+## Key Points
+
+- Use `locales` object in config with `root` for default language
+- Each locale can override title, description, and themeConfig
+- `themeConfig` is shallow merged (define complete nav/sidebar per locale)
+- Don't override `themeConfig.algolia` at locale level
+- `dir: 'rtl'` enables RTL with PostCSS plugin
+- Language switcher appears automatically in nav
+
+<!--
+Source references:
+- https://vitepress.dev/guide/i18n
+-->

package/templates/skills/vitepress/references/advanced-ssr.md

@@ -0,0 +1,228 @@
+---
+name: vitepress-ssr-compatibility
+description: Server-side rendering compatibility, ClientOnly component, and handling browser-only code
+---
+
+# SSR Compatibility
+
+VitePress pre-renders pages on the server during build. All Vue code must be SSR-compatible.
+
+## The Rule
+
+Only access browser/DOM APIs in Vue lifecycle hooks:
+- `onMounted()`
+- `onBeforeMount()`
+
+```vue
+<script setup>
+import { onMounted, ref } from 'vue'
+
+const windowWidth = ref(0)
+
+onMounted(() => {
+  // Safe - runs only in browser
+  windowWidth.value = window.innerWidth
+})
+</script>
+```
+
+**Do NOT** access at top level:
+
+```vue
+<script setup>
+// WRONG - runs during SSR where window doesn't exist
+const width = window.innerWidth
+</script>
+```
+
+## ClientOnly Component
+
+Wrap non-SSR-friendly components:
+
+```vue
+<template>
+  <ClientOnly>
+    <BrowserOnlyComponent />
+  </ClientOnly>
+</template>
+```
+
+## Libraries That Access Browser on Import
+
+Some libraries access `window` or `document` when imported:
+
+### Dynamic Import in onMounted
+
+```vue
+<script setup>
+import { onMounted } from 'vue'
+
+onMounted(async () => {
+  const lib = await import('browser-only-library')
+  lib.doSomething()
+})
+</script>
+```
+
+### Conditional Import
+
+```ts
+if (!import.meta.env.SSR) {
+  const lib = await import('browser-only-library')
+  lib.doSomething()
+}
+```
+
+### In enhanceApp
+
+```ts
+// .vitepress/theme/index.ts
+export default {
+  async enhanceApp({ app }) {
+    if (!import.meta.env.SSR) {
+      const plugin = await import('browser-plugin')
+      app.use(plugin.default)
+    }
+  }
+}
+```
+
+## defineClientComponent
+
+Helper for components that access browser on import:
+
+```vue
+<script setup>
+import { defineClientComponent } from 'vitepress'
+
+const BrowserComponent = defineClientComponent(() => {
+  return import('browser-only-component')
+})
+</script>
+
+<template>
+  <BrowserComponent />
+</template>
+```
+
+With props and slots:
+
+```vue
+<script setup>
+import { ref, h } from 'vue'
+import { defineClientComponent } from 'vitepress'
+
+const componentRef = ref(null)
+
+const BrowserComponent = defineClientComponent(
+  () => import('browser-only-component'),
+  // Props passed to h()
+  [
+    { ref: componentRef, someProp: 'value' },
+    {
+      default: () => 'Default slot content',
+      header: () => h('div', 'Header slot')
+    }
+  ],
+  // Callback after component loads
+  () => {
+    console.log('Component loaded', componentRef.value)
+  }
+)
+</script>
+```
+
+## Teleports
+
+Teleport to body only with SSG:
+
+```vue
+<ClientOnly>
+  <Teleport to="body">
+    <div class="modal">Modal content</div>
+  </Teleport>
+</ClientOnly>
+```
+
+For other targets, use `postRender` hook:
+
+```ts
+// .vitepress/config.ts
+export default {
+  async postRender(context) {
+    // Inject teleport content into final HTML
+  }
+}
+```
+
+## Common SSR Errors
+
+### "window is not defined"
+
+Code accesses `window` at module level:
+
+```ts
+// BAD
+const width = window.innerWidth
+
+// GOOD
+let width: number
+onMounted(() => {
+  width = window.innerWidth
+})
+```
+
+### "document is not defined"
+
+Same issue with `document`:
+
+```ts
+// BAD
+const el = document.querySelector('#app')
+
+// GOOD
+onMounted(() => {
+  const el = document.querySelector('#app')
+})
+```
+
+### Hydration Mismatch
+
+Server and client render different content:
+
+```vue
+<!-- BAD - different on server vs client -->
+<div>{{ typeof window !== 'undefined' ? 'client' : 'server' }}</div>
+
+<!-- GOOD - consistent -->
+<ClientOnly>
+  <div>Client only content</div>
+</ClientOnly>
+```
+
+## Checking Environment
+
+```ts
+// In Vue component
+import.meta.env.SSR  // true on server, false on client
+
+// In VitePress
+import { inBrowser } from 'vitepress'
+if (inBrowser) {
+  // Client-only code
+}
+```
+
+## Key Points
+
+- Access browser APIs only in `onMounted` or `onBeforeMount`
+- Use `<ClientOnly>` for non-SSR components
+- Use `defineClientComponent` for libraries that access browser on import
+- Check `import.meta.env.SSR` for environment-specific code
+- Teleport to body only, or use `postRender` hook
+- Consistent rendering prevents hydration mismatches
+
+<!--
+Source references:
+- https://vitepress.dev/guide/ssr-compat
+-->