Vue claude md
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.From its SKILL.md
npx -y skills add xqgerogia/claude-skills --skill vue-claude-mdAssembled from the repository path, not quoted from the project. Check it against their README if it does not work.
2 things to look at
- no licenseNo license file was found in the repository. Code published without one is not open source by default, so using it at work is a question for whoever answers licensing questions where you are.
- 0 stars0 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.
SKILL.md
2.9 KB, as published. Nobody here has run it
Vue 3 CLAUDE.md Generator
Analyze the current Vue 3 + JavaScript project and generate a comprehensive CLAUDE.md file.
Steps
- Scan project structure — Read
package.json,vite.config.*, and scansrc/directory - Identify tech stack — Detect Vue version, build tool, CSS framework, state approach
- Map composables — List all files in
src/composables/with their responsibilities - Map components — List all
.vuefiles and their roles - Detect conventions — Identify patterns (theming, i18n, persistence keys)
- Generate CLAUDE.md
Template
Generate a CLAUDE.md following this structure:
# 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.