---
name: "unplugin-vue-components-auto"
description: "Automatically import UI components and composables on-demand with zero explicit import lines."
metadata:
  author: "Unplugin"
  version: "1.0.0"
  runtime_compatibility:
    - "codex"
    - "claude-code"
    - "cursor"
    - "windsurf"
triggers:
  - "setup unplugin-vue-components"
  - "auto import vue components vite"
  - "generate components.d.ts"
permissions:
  fs_read: true
  fs_write: "workspace"
  shell_exec: false
  net_access: false
---

# unplugin-vue-components & Auto-Import Architecture

Configures unplugin-vue-components and unplugin-auto-import: setting resolvers (Ant Design Vue, Element Plus, Naive UI), auto-generating d.ts declaration files for TypeScript, and eliminating clutter from script tags.

## When to Invoke
Invoke this skill whenever you need to:
- setup unplugin-vue-components
- auto import vue components vite
- generate components.d.ts

## Execution SOP & Rules
1. Add Components({ dirs: ['src/components'], resolvers: [...], dts: 'src/components.d.ts' }) in vite.config.ts.
2. Add AutoImport({ imports: ['vue', 'vue-router', 'pinia'], dts: 'src/auto-imports.d.ts' }).
3. Include generated .d.ts files in tsconfig.json include array.
4. Verify components render cleanly in templates without explicit import statements.

## Verification Checklist
- Run local linting, syntax validation, and type-checks before reporting completion.
- Ensure all created or modified files adhere to workspace boundaries and avoid uncommitted secrets.
- Verify tests or build commands exit cleanly with return code 0.