Agent skill
Vue
Vue 3 projects should follow these guardrails.
Install this agent skill to your Project
npx add-skill https://github.com/hivellm/rulebook/tree/main/templates/skills/frameworks/vue
SKILL.md
Vue Framework Rules
CRITICAL: Vue 3 projects should follow these guardrails.
Quality Commands
- Lint:
npm run lint - Unit tests:
npm run test:unit - e2e tests (Cypress/Playwright):
npm run test:e2e - Build:
npm run build
Project Structure
- Place feature modules in
src/modules/<feature>/ - Keep reusable components in
src/components - Shared composables go in
src/composables - Centralize Pinia/Vuex stores under
src/stores
Implementation Guidelines
- Adopt
<script setup>with TypeScript and define props viadefineProps - Leverage
defineEmitsfor typed event emission - Lazy-load routes with dynamic imports in
router/index.ts - Ensure global styles scoped via
:globalor dedicated CSS files
Pre-Commit Commands
npm run lint
npm run test:unit
npm run build
Documentation
- Update
/docs/vue-architecture.mdwith module tree changes - Document composables in
/docs/composables.md - Add component usage examples to
/docs/ui-components.md
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
DAG Workflow
Maintain a clean dependency graph (DAG) to prevent circular dependencies and ensure maintainable architecture.
Documentation Rules
All documentation in English. Root README concise, detailed docs in `/docs`.
Quality Enforcement
These rules are NON-NEGOTIABLE and MUST be followed without exception.
Rulebook Task Management
Spec-driven task management for features and breaking changes with OpenSpec-compatible format
Agent Automation
Mandatory workflow that AI agents MUST execute after EVERY implementation.
C
Execute these commands after EVERY implementation (see AGENT_AUTOMATION module for full workflow).
Didn't find tool you were looking for?