---
description: Generates a CLAUDE.md file for Vue 3 + JavaScript projects. Scans the project structure and creates comprehensive project documentation for AI assistance. Use when setting up a new Vue 3 project or updating project documentation.
---

# Vue 3 CLAUDE.md Generator

Analyze the current Vue 3 + JavaScript project and generate a comprehensive `CLAUDE.md` file.

## Steps

1. **Scan project structure** — Read `package.json`, `vite.config.*`, and scan `src/` directory
2. **Identify tech stack** — Detect Vue version, build tool, CSS framework, state approach
3. **Map composables** — List all files in `src/composables/` with their responsibilities
4. **Map components** — List all `.vue` files and their roles
5. **Detect conventions** — Identify patterns (theming, i18n, persistence keys)
6. **Generate CLAUDE.md**

## Template

Generate a `CLAUDE.md` following this structure:

```markdown
# CLAUDE.md

本文件为 Claude Code (claude.ai/code) 在此仓库中工作时提供指引。

## 常用命令

\```bash
pnpm dev       # 启动开发服务器 (localhost:5173)
pnpm build     # 生产构建（输出到 dist/）
pnpm preview   # 预览生产构建
\```

[Include test/lint commands if detected]

## 架构概览

**技术栈**：Vue 3 + Vite + [CSS Framework] + JavaScript（无 TypeScript）

**状态管理**使用 Vue 3 组合式函数（composables），未使用外部状态库：
- `src/composables/use{Name}.js` — [功能描述]

**数据流向**：App.vue 持有全局状态，通过 props/events 与子组件通信。子组件通过 emit 将操作回传给 composables。

**核心约定**：
- Tailwind 类负责布局、间距、响应式
- CSS 自定义属性负责所有颜色和阴影
- 不要使用 Tailwind 颜色工具类（如 `bg-gray-100`）— 统一使用 `style="background: var(--surface)"`

## 项目结构

\```
src/
├── main.js          # 应用入口
├── App.vue          # 根组件
├── composables/     # 组合式函数（状态管理）
├── components/      # UI 组件
├── styles/          # 全局样式和主题
├── assets/          # 静态资源
└── i18n.js          # 国际化（如有）
\```
```

## Detection Rules

| Check | How to Detect |
|-------|---------------|
| Package manager | Look for `pnpm-lock.yaml`, `yarn.lock`, or `package-lock.json` |
| CSS framework | Check `package.json` for `tailwindcss`, `unocss`, etc. |
| Vue version | Check `package.json` `vue` dependency |
| TypeScript | Check for `tsconfig.json` or `.ts` files in `src/` |
| Composables | Scan `src/composables/` for `use*.js` files |
| Theme system | Look for `[data-theme]` in CSS files |
| i18n | Look for dictionary objects or `vue-i18n` |
| Persistence | Search for `localStorage.setItem` in composables |
| Test framework | Check `package.json` for `vitest`, `jest`, etc. |
| Lint tools | Check for `eslint.config.*`, `.eslintrc.*` |

Run: `cat CLAUDE.md` after generation to verify the output.