Vue project setup

Skill xqgerogia/claude-skills/skills/vue-project-setup

Initializes a new Vue 3 + Vite + Tailwind CSS + JavaScript project with best-practice directory structure. Use when scaffolding a new Vue 3 project, setting up project conventions, or bootstrapping a frontend app.From its SKILL.md

Install

npx -y skills add xqgerogia/claude-skills --skill vue-project-setup

Assembled 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.5 KB, as published. Nobody here has run it

Vue 3 Project Setup

Initialize a production-ready Vue 3 + JavaScript project.

Steps

Create project with Vite:

pnpm create vite@latest <project-name> --template vue
cd <project-name>
pnpm install

Add Tailwind CSS v4:

pnpm add -D tailwindcss @tailwindcss/vite

Configure Vite — Update vite.config.js:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [vue(), tailwindcss()],
})

Setup CSS — Replace src/style.css content:
```
@import 'tailwindcss';
```

Create directory structure:

src/
├── main.js
├── App.vue
├── style.css
├── composables/     # Shared state (useXxx.js)
├── components/      # UI components (.vue)
├── styles/          # Global CSS (themes, animations)
│   └── themes/
├── assets/          # Static assets
└── i18n.js          # (optional) internationalization

Generate CLAUDE.md — Run the vue-claude-md skill to create project documentation

Generate initial CLAUDE.md:

cat > CLAUDE.md << 'EOF'
# CLAUDE.md

本文件为 Claude Code 在此仓库中工作时提供指引。

## 常用命令

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

## 架构概览

**技术栈**：Vue 3 + Vite + Tailwind CSS v4 + JavaScript（无 TypeScript）

**状态管理**：使用 Vue 3 组合式函数（composables），未使用外部状态库。

**核心约定**：
- Tailwind 类负责布局、间距、响应式
- CSS 自定义属性负责所有颜色和阴影
- 组件使用 `<script setup>` + Composition API
- Props 向下传递，emit 向上通信
EOF

Optional Additions

i18n: Create src/i18n.js with dictionary-based translations
Theme system: Use the vue-theme-system skill to add multi-theme support
Testing: pnpm add -D vitest @vue/test-jsdom (note: many Vue 3 JS projects skip TypeScript-tied test utils)

Verify Setup

pnpm dev
# Open http://localhost:5173