vue
Vue 组件开发与代码审查技能 - 开发模式：描述需求时生成高质量 Vue 组件/Composable - 审查模式：/vue <path> 审查该路径下所有 Vue 文件
Best use case
vue is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
Vue 组件开发与代码审查技能 - 开发模式：描述需求时生成高质量 Vue 组件/Composable - 审查模式：/vue <path> 审查该路径下所有 Vue 文件
Teams using vue should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/vue/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How vue Compares
| Feature / Agent | vue | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
Vue 组件开发与代码审查技能 - 开发模式：描述需求时生成高质量 Vue 组件/Composable - 审查模式：/vue <path> 审查该路径下所有 Vue 文件
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
SKILL.md Source
# Vue 组件开发技能 ## 功能说明 ### 开发模式 当用户描述需求时，生成高质量的 Vue 代码： ``` 创建一个用户列表组件 封装 Element Plus 的 Table 组件 写一个 useTable composable 这个组件太大了，帮我拆分 ``` **触发条件**：用户描述包含"创建"、"生成"、"封装"、"编写"、"拆分"等关键词 ### 审查模式 当用户使用 `/vue <path>` 命令时，审查指定路径下的 Vue 文件： ``` /vue src/components /vue src/views/Dashboard.vue /vue # 审查当前目录 ``` --- ## 模式分发 ### 1. 开发模式 **执行流程**： 1. **需求解析** — 理解用户想要实现的功能 2. **类型判断** — 使用决策树确定组件类型 3. **代码生成** — 按照规范生成代码 4. **类型提示** — 确保完整的 TypeScript 类型定义 ### 2. 审查模式 **执行流程**： 1. **文件扫描** — 使用 Glob 查找指定路径下的所有 `.vue` 和 composables 文件 2. **展示检查清单** — 展示可检查项，等待用户确认： ``` 以下是可执行的检查项，请确认需要检查哪些（默认全选，回复排除项的编号即可）： 1. [x] 组件结构 2. [x] TypeScript 类型 3. [x] 组件封装 4. [x] Composable 5. [x] 性能 6. [x] 现代语法 7. [x] 代码规范 8. [x] 可访问性 (a11y) 9. [ ] 测试（默认不选，需明确指定） ``` 3. **逐项检查** — 按照清单扫描代码，记录问题 4. **输出诊断报告** — 按统一格式输出结果（见下方） --- ## 快速决策树 ``` 用户请求 → 判断类型 是纯逻辑复用吗？ → YES: Composable (useXxx) → NO: 继续 是封装组件库组件吗？ → YES: 二次封装（保证类型透传） → NO: 继续 业务逻辑复杂 或 >1300 行？ → YES: 拆分为子组件 + Composable → NO: 单文件组件 ``` --- ## 审查输出格式 ```markdown ## 📋 [文件名] 审查结果 ### ✅ 通过项 - [x] 组件结构合理 - [x] TypeScript 类型完整 - [x] ... ### ❌ 问题项 - [ ] **[问题标题]** - 位置：[文件:行号] - 问题：[描述] - 建议：[改进方案] ### 📊 总评：X/10 ``` --- ## 引用文件 详细规则位于 `references/` 目录： - `references/component-types.md` — 组件分类、大组件拆分规则 - `references/wrapper-pattern.md` — 二次封装完整指南 - `references/composable-rules.md` — Composable 编写规则 - `references/modern-features.md` — Vue 3.3+ / 3.5+ 新特性 - `references/review-checklist.md` — 详细的审查清单 - `references/project-setup.md` — Vue Web 项目配置（unplugin-vue-components 等）
Related Skills
bgo
Automates the complete Blender build-go workflow, from building and packaging your extension/add-on to removing old versions, installing, enabling, and launching Blender for quick testing and iteration.
websocket-engineer
Real-time communication specialist implementing scalable WebSocket architectures. Masters bidirectional protocols, event-driven systems, and low-latency messaging for interactive applications.
webscraping-ai-automation
Automate Webscraping AI tasks via Rube MCP (Composio). Always search tools first for current schemas.
webflow-automation
Automate Webflow CMS collections, site publishing, page management, asset uploads, and ecommerce orders via Rube MCP (Composio). Always search tools first for current schemas.
Webex Automation
Automate Cisco Webex messaging, rooms, teams, webhooks, and people management through natural language commands
webapp-testing
Toolkit for interacting with and testing local web applications using Playwright. Supports verifying frontend functionality, debugging UI behavior, capturing browser screenshots, and viewing browser logs.
webapp-test-docker-demo
Dedicated test Agent responsible for managing all E2E tests for the webapp-test-docker-demo project. Use this skill when you need to run tests, view test lists, generate test reports, or create new tests. This Agent knows all test files in the project, can execute tests and provide detailed reports. The project uses Docker Compose and Playwright for end-to-end testing.
web3-testing
Test smart contracts comprehensively using Hardhat and Foundry with unit tests, integration tests, and mainnet forking. Use when testing Solidity contracts, setting up blockchain test suites, or va...
web-search
Web search and content extraction toolkit. Use for searching documentation, facts, current information, or extracting readable content from URLs. Supports multiple providers (ddgs keyless, brave_api with key), caching, and safe defaults. Prefer this over browser-tools when no interaction is needed.
web-scraping
Web scraping best practices for AI coding agents. Covers tmux session management for long-running scrapes, Crawl4AI integration, parallel pipeline orchestration, resume-friendly architecture, and rate limit handling. Use this skill when building scrapers, running data extraction jobs, or managing lead generation pipelines.
web-research
Perform web research using OpenAI APIs. Fast mode uses gpt-5-search-api for quick lookups. Normal/deep modes use o3-deep-research model for comprehensive multi-step research with code interpreter. Invoke when user needs current web information or thorough research on a topic.
web-qa-bot
AI-powered automated QA for web apps. Smoke tests, accessibility, visual regression. Works with Cursor, Claude, ChatGPT, Copilot. Vibe-coding ready.