aico-cli 2.1.7 → 2.1.23

package/templates/skills/vitepress/references/theme-customization.md

@@ -0,0 +1,290 @@
+---
+name: extending-vitepress-default-theme
+description: Customize CSS variables, use layout slots, register global components, and override theme fonts
+---
+
+# Extending Default Theme
+
+Customize the default theme through CSS, slots, and Vue components.
+
+## Theme Entry File
+
+Create `.vitepress/theme/index.ts` to extend the default theme:
+
+```ts
+// .vitepress/theme/index.ts
+import DefaultTheme from 'vitepress/theme'
+import './custom.css'
+
+export default DefaultTheme
+```
+
+## CSS Variables
+
+Override root CSS variables:
+
+```css
+/* .vitepress/theme/custom.css */
+:root {
+  /* Brand colors */
+  --vp-c-brand-1: #646cff;
+  --vp-c-brand-2: #747bff;
+  --vp-c-brand-3: #9499ff;
+  
+  /* Backgrounds */
+  --vp-c-bg: #ffffff;
+  --vp-c-bg-soft: #f6f6f7;
+  
+  /* Text */
+  --vp-c-text-1: #213547;
+  --vp-c-text-2: #476582;
+}
+
+.dark {
+  --vp-c-brand-1: #747bff;
+  --vp-c-bg: #1a1a1a;
+}
+```
+
+See [all CSS variables](https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css).
+
+## Home Hero Customization
+
+```css
+:root {
+  /* Gradient name color */
+  --vp-home-hero-name-color: transparent;
+  --vp-home-hero-name-background: linear-gradient(120deg, #bd34fe, #41d1ff);
+  
+  /* Hero image glow */
+  --vp-home-hero-image-background-image: linear-gradient(-45deg, #bd34fe 50%, #47caff 50%);
+  --vp-home-hero-image-filter: blur(44px);
+}
+```
+
+## Custom Fonts
+
+Remove Inter font and use your own:
+
+```ts
+// .vitepress/theme/index.ts
+import DefaultTheme from 'vitepress/theme-without-fonts'
+import './fonts.css'
+
+export default DefaultTheme
+```
+
+```css
+/* .vitepress/theme/fonts.css */
+@font-face {
+  font-family: 'MyFont';
+  src: url('/fonts/myfont.woff2') format('woff2');
+}
+
+:root {
+  --vp-font-family-base: 'MyFont', sans-serif;
+  --vp-font-family-mono: 'Fira Code', monospace;
+}
+```
+
+Preload fonts in config:
+
+```ts
+// .vitepress/config.ts
+export default {
+  transformHead({ assets }) {
+    const fontFile = assets.find(file => /myfont\.[\w-]+\.woff2/.test(file))
+    if (fontFile) {
+      return [
+        ['link', { rel: 'preload', href: fontFile, as: 'font', type: 'font/woff2', crossorigin: '' }]
+      ]
+    }
+  }
+}
+```
+
+## Global Components
+
+Register components available in all markdown:
+
+```ts
+// .vitepress/theme/index.ts
+import DefaultTheme from 'vitepress/theme'
+import MyComponent from './components/MyComponent.vue'
+
+export default {
+  extends: DefaultTheme,
+  enhanceApp({ app }) {
+    app.component('MyComponent', MyComponent)
+  }
+}
+```
+
+Use in markdown:
+
+```md
+<MyComponent :prop="value" />
+```
+
+## Layout Slots
+
+Inject content into specific locations:
+
+```ts
+// .vitepress/theme/index.ts
+import DefaultTheme from 'vitepress/theme'
+import MyLayout from './MyLayout.vue'
+
+export default {
+  extends: DefaultTheme,
+  Layout: MyLayout
+}
+```
+
+```vue
+<!-- .vitepress/theme/MyLayout.vue -->
+<script setup>
+import DefaultTheme from 'vitepress/theme'
+const { Layout } = DefaultTheme
+</script>
+
+<template>
+  <Layout>
+    <template #aside-outline-before>
+      <div>Above outline</div>
+    </template>
+    
+    <template #doc-before>
+      <div>Before doc content</div>
+    </template>
+    
+    <template #doc-after>
+      <div>After doc content</div>
+    </template>
+  </Layout>
+</template>
+```
+
+### Available Slots
+
+**Doc layout (`layout: doc`):**
+- `doc-top`, `doc-bottom`
+- `doc-before`, `doc-after`
+- `doc-footer-before`
+- `sidebar-nav-before`, `sidebar-nav-after`
+- `aside-top`, `aside-bottom`
+- `aside-outline-before`, `aside-outline-after`
+- `aside-ads-before`, `aside-ads-after`
+
+**Home layout (`layout: home`):**
+- `home-hero-before`, `home-hero-after`
+- `home-hero-info-before`, `home-hero-info`, `home-hero-info-after`
+- `home-hero-actions-after`, `home-hero-image`
+- `home-features-before`, `home-features-after`
+
+**Page layout (`layout: page`):**
+- `page-top`, `page-bottom`
+
+**Always available:**
+- `layout-top`, `layout-bottom`
+- `nav-bar-title-before`, `nav-bar-title-after`
+- `nav-bar-content-before`, `nav-bar-content-after`
+- `not-found` (404 page)
+
+## Using Render Functions
+
+Alternative to template slots:
+
+```ts
+// .vitepress/theme/index.ts
+import { h } from 'vue'
+import DefaultTheme from 'vitepress/theme'
+import MyComponent from './MyComponent.vue'
+
+export default {
+  extends: DefaultTheme,
+  Layout() {
+    return h(DefaultTheme.Layout, null, {
+      'aside-outline-before': () => h(MyComponent)
+    })
+  }
+}
+```
+
+## Override Internal Components
+
+Replace default theme components with Vite aliases:
+
+```ts
+// .vitepress/config.ts
+import { fileURLToPath, URL } from 'node:url'
+
+export default {
+  vite: {
+    resolve: {
+      alias: [
+        {
+          find: /^.*\/VPNavBar\.vue$/,
+          replacement: fileURLToPath(
+            new URL('./theme/components/CustomNavBar.vue', import.meta.url)
+          )
+        }
+      ]
+    }
+  }
+}
+```
+
+## View Transitions
+
+Custom dark mode toggle animation:
+
+```vue
+<!-- .vitepress/theme/Layout.vue -->
+<script setup>
+import { useData } from 'vitepress'
+import DefaultTheme from 'vitepress/theme'
+import { nextTick, provide } from 'vue'
+
+const { isDark } = useData()
+
+provide('toggle-appearance', async ({ clientX: x, clientY: y }) => {
+  if (!document.startViewTransition) {
+    isDark.value = !isDark.value
+    return
+  }
+
+  const clipPath = [
+    `circle(0px at ${x}px ${y}px)`,
+    `circle(${Math.hypot(Math.max(x, innerWidth - x), Math.max(y, innerHeight - y))}px at ${x}px ${y}px)`
+  ]
+
+  await document.startViewTransition(async () => {
+    isDark.value = !isDark.value
+    await nextTick()
+  }).ready
+
+  document.documentElement.animate(
+    { clipPath: isDark.value ? clipPath.reverse() : clipPath },
+    { duration: 300, easing: 'ease-in', pseudoElement: `::view-transition-${isDark.value ? 'old' : 'new'}(root)` }
+  )
+})
+</script>
+
+<template>
+  <DefaultTheme.Layout />
+</template>
+```
+
+## Key Points
+
+- Import `vitepress/theme-without-fonts` to use custom fonts
+- Use layout slots to inject content without overriding components
+- Global components are registered in `enhanceApp`
+- Override CSS variables for theming
+- Use Vite aliases to replace internal components
+
+<!--
+Source references:
+- https://vitepress.dev/guide/extending-default-theme
+-->

package/templates/skills/vitest/GENERATION.md

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

package/templates/skills/vitest/SKILL.md

@@ -0,0 +1,52 @@
+---
+name: vitest
+description: Vitest fast unit testing framework powered by Vite with Jest-compatible API. Use when writing tests, mocking, configuring coverage, or working with test filtering and fixtures.
+metadata:
+  author: Anthony Fu
+  version: "2026.1.28"
+  source: Generated from https://github.com/vitest-dev/vitest, scripts located at https://github.com/antfu/skills
+---
+
+Vitest is a next-generation testing framework powered by Vite. It provides a Jest-compatible API with native ESM, TypeScript, and JSX support out of the box. Vitest shares the same config, transformers, resolvers, and plugins with your Vite app.
+
+**Key Features:**
+- Vite-native: Uses Vite's transformation pipeline for fast HMR-like test updates
+- Jest-compatible: Drop-in replacement for most Jest test suites
+- Smart watch mode: Only reruns affected tests based on module graph
+- Native ESM, TypeScript, JSX support without configuration
+- Multi-threaded workers for parallel test execution
+- Built-in coverage via V8 or Istanbul
+- Snapshot testing, mocking, and spy utilities
+
+> The skill is based on Vitest 3.x, generated at 2026-01-28.
+
+## Core
+
+| Topic | Description | Reference |
+|-------|-------------|-----------|
+| Configuration | Vitest and Vite config integration, defineConfig usage | [core-config](references/core-config.md) |
+| CLI | Command line interface, commands and options | [core-cli](references/core-cli.md) |
+| Test API | test/it function, modifiers like skip, only, concurrent | [core-test-api](references/core-test-api.md) |
+| Describe API | describe/suite for grouping tests and nested suites | [core-describe](references/core-describe.md) |
+| Expect API | Assertions with toBe, toEqual, matchers and asymmetric matchers | [core-expect](references/core-expect.md) |
+| Hooks | beforeEach, afterEach, beforeAll, afterAll, aroundEach | [core-hooks](references/core-hooks.md) |
+
+## Features
+
+| Topic | Description | Reference |
+|-------|-------------|-----------|
+| Mocking | Mock functions, modules, timers, dates with vi utilities | [features-mocking](references/features-mocking.md) |
+| Snapshots | Snapshot testing with toMatchSnapshot and inline snapshots | [features-snapshots](references/features-snapshots.md) |
+| Coverage | Code coverage with V8 or Istanbul providers | [features-coverage](references/features-coverage.md) |
+| Test Context | Test fixtures, context.expect, test.extend for custom fixtures | [features-context](references/features-context.md) |
+| Concurrency | Concurrent tests, parallel execution, sharding | [features-concurrency](references/features-concurrency.md) |
+| Filtering | Filter tests by name, file patterns, tags | [features-filtering](references/features-filtering.md) |
+
+## Advanced
+
+| Topic | Description | Reference |
+|-------|-------------|-----------|
+| Vi Utilities | vi helper: mock, spyOn, fake timers, hoisted, waitFor | [advanced-vi](references/advanced-vi.md) |
+| Environments | Test environments: node, jsdom, happy-dom, custom | [advanced-environments](references/advanced-environments.md) |
+| Type Testing | Type-level testing with expectTypeOf and assertType | [advanced-type-testing](references/advanced-type-testing.md) |
+| Projects | Multi-project workspaces, different configs per project | [advanced-projects](references/advanced-projects.md) |

package/templates/skills/vitest/references/advanced-environments.md

@@ -0,0 +1,264 @@
+---
+name: test-environments
+description: Configure environments like jsdom, happy-dom for browser APIs
+---
+
+# Test Environments
+
+## Available Environments
+
+- `node` (default) - Node.js environment
+- `jsdom` - Browser-like with DOM APIs
+- `happy-dom` - Faster alternative to jsdom
+- `edge-runtime` - Vercel Edge Runtime
+
+## Configuration
+
+```ts
+// vitest.config.ts
+defineConfig({
+  test: {
+    environment: 'jsdom',
+    
+    // Environment-specific options
+    environmentOptions: {
+      jsdom: {
+        url: 'http://localhost',
+      },
+    },
+  },
+})
+```
+
+## Installing Environment Packages
+
+```bash
+# jsdom
+npm i -D jsdom
+
+# happy-dom (faster, fewer APIs)
+npm i -D happy-dom
+```
+
+## Per-File Environment
+
+Use magic comment at top of file:
+
+```ts
+// @vitest-environment jsdom
+
+import { expect, test } from 'vitest'
+
+test('DOM test', () => {
+  const div = document.createElement('div')
+  expect(div).toBeInstanceOf(HTMLDivElement)
+})
+```
+
+## jsdom Environment
+
+Full browser environment simulation:
+
+```ts
+// @vitest-environment jsdom
+
+test('DOM manipulation', () => {
+  document.body.innerHTML = '<div id="app"></div>'
+  
+  const app = document.getElementById('app')
+  app.textContent = 'Hello'
+  
+  expect(app.textContent).toBe('Hello')
+})
+
+test('window APIs', () => {
+  expect(window.location.href).toBeDefined()
+  expect(localStorage).toBeDefined()
+})
+```
+
+### jsdom Options
+
+```ts
+defineConfig({
+  test: {
+    environmentOptions: {
+      jsdom: {
+        url: 'http://localhost:3000',
+        html: '<!DOCTYPE html><html><body></body></html>',
+        userAgent: 'custom-agent',
+        resources: 'usable',
+      },
+    },
+  },
+})
+```
+
+## happy-dom Environment
+
+Faster but fewer APIs:
+
+```ts
+// @vitest-environment happy-dom
+
+test('basic DOM', () => {
+  const el = document.createElement('div')
+  el.className = 'test'
+  expect(el.className).toBe('test')
+})
+```
+
+## Multiple Environments per Project
+
+Use projects for different environments:
+
+```ts
+defineConfig({
+  test: {
+    projects: [
+      {
+        test: {
+          name: 'unit',
+          include: ['tests/unit/**/*.test.ts'],
+          environment: 'node',
+        },
+      },
+      {
+        test: {
+          name: 'dom',
+          include: ['tests/dom/**/*.test.ts'],
+          environment: 'jsdom',
+        },
+      },
+    ],
+  },
+})
+```
+
+## Custom Environment
+
+Create custom environment package:
+
+```ts
+// vitest-environment-custom/index.ts
+import type { Environment } from 'vitest/runtime'
+
+export default <Environment>{
+  name: 'custom',
+  viteEnvironment: 'ssr', // or 'client'
+  
+  setup() {
+    // Setup global state
+    globalThis.myGlobal = 'value'
+    
+    return {
+      teardown() {
+        delete globalThis.myGlobal
+      },
+    }
+  },
+}
+```
+
+Use with:
+
+```ts
+defineConfig({
+  test: {
+    environment: 'custom',
+  },
+})
+```
+
+## Environment with VM
+
+For full isolation:
+
+```ts
+export default <Environment>{
+  name: 'isolated',
+  viteEnvironment: 'ssr',
+  
+  async setupVM() {
+    const vm = await import('node:vm')
+    const context = vm.createContext()
+    
+    return {
+      getVmContext() {
+        return context
+      },
+      teardown() {},
+    }
+  },
+  
+  setup() {
+    return { teardown() {} }
+  },
+}
+```
+
+## Browser Mode (Separate from Environments)
+
+For real browser testing, use Vitest Browser Mode:
+
+```ts
+defineConfig({
+  test: {
+    browser: {
+      enabled: true,
+      name: 'chromium', // or 'firefox', 'webkit'
+      provider: 'playwright',
+    },
+  },
+})
+```
+
+## CSS and Assets
+
+In jsdom/happy-dom, configure CSS handling:
+
+```ts
+defineConfig({
+  test: {
+    css: true, // Process CSS
+    
+    // Or with options
+    css: {
+      include: /\.module\.css$/,
+      modules: {
+        classNameStrategy: 'non-scoped',
+      },
+    },
+  },
+})
+```
+
+## Fixing External Dependencies
+
+If external deps fail with CSS/asset errors:
+
+```ts
+defineConfig({
+  test: {
+    server: {
+      deps: {
+        inline: ['problematic-package'],
+      },
+    },
+  },
+})
+```
+
+## Key Points
+
+- Default is `node` - no browser APIs
+- Use `jsdom` for full browser simulation
+- Use `happy-dom` for faster tests with basic DOM
+- Per-file environment via `// @vitest-environment` comment
+- Use projects for multiple environment configurations
+- Browser Mode is for real browser testing, not environment
+
+<!-- 
+Source references:
+- https://vitest.dev/guide/environment.html
+-->