Use this whenever a new file/folder is created or renamed in this Vue project, when reviewing a module for consistency, or when the right path for a file is unclear. Also triggers on "what should I name this?", "is this file named correctly?", "audit module naming". Enforces kebab-case folders, dot-prefixed `{module}.{name}.{type}.vue|js` files, multi-entity rules, singular vs plural for views, and the layered structure UI → Store → API.
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
설치 방법 보기설치하기 전에 에이전트에게 전달되는 지시 내용을 확인할 수 있습니다.
Audit or apply the project's file and folder naming conventions.
| Location | Case | Example |
|---|---|---|
| Top-level src dirs | kebab-case | src/lib/, src/modules/ |
| Module dirs | kebab-case | modules/home/, modules/user-settings/ |
| Module sub-dirs | fixed names | components/, views/, stores/, router/, tests/ |
| Component utils | components/utils/ | components/utils/ |
| Type | Pattern | Example |
|---|---|---|
| Component | {module}.{name}.component.vue | home.hero.component.vue |
| View | {module}.{name}.view.vue | auth.signin.view.vue |
| Store | {module}.store.js | tasks.store.js |
| Router | {module}.router.js | users.router.js |
| Unit Test | {target}.unit.tests.js | home.store.unit.tests.js |
| E2E Test | {target}.e2e.tests.js | auth.signup.e2e.tests.js |
| Service | {name}.js | axios.js |
| Helper | {name}.js | tools.js |
| Plugin | {name}.js | vuetify.js |
| Config | {name}.js or index.js | development.js |
When a module contains multiple entities (e.g., billing with subscription), components and views add an entity segment after the module prefix. Stores keep the simple {module}.store.js pattern (one store per module).
| Correct | Wrong |
|---|---|
billing.pricingCard.component.vue | PricingCard.component.vue |
billing.plans.view.vue | plans.view.vue |
billing.store.js | subscription.store.js |
Pattern (components/views): {module}.{entity}[.{name}].{type}.{ext}
| Context | Convention | Example |
|---|---|---|
| Variable / function | lowerCamelCase | useHomeStore, paginationRequest |
| Component name (JS) | PascalCase | HomeHeroComponent |
| Store export | use{Module}Store | useTasksStore |
| Constant / env key | UPPER_SNAKE_CASE | MY_MODULE_KEY |
Dot-notation prefix: always prefix with the module name separated by dots
home.hero.component.vue not hero.component.vuetasks.store.js not store.jsSemantic suffix: always add the type suffix
.component.vue for reusable components.view.vue for page-level views.store.js for Pinia stores.router.js for route definitions.unit.tests.js for unit tests, .e2e.tests.js for E2E testsSingular vs plural: follow the module's data semantics
tasks.view.vue, users.view.vuetask.view.vue, user.view.vueUtility sub-components: place in components/utils/ and keep the module prefix
components/utils/home.blur.background.component.vueShared code: files in src/lib/ use simple kebab-case, no module prefix
src/lib/helpers/tools.js, src/lib/plugins/vuetify.jsDerive name as: module prefix (kebab-case) + . + semantic name + . + type suffix. Place in the correct sub-directory (components/, views/, stores/, router/, tests/). When auditing, check each file against the tables above and report violations.
아직 리뷰가 없습니다. 사용해 본 소감을 남겨 주세요.
로그인 없이 쓸 수 있습니다. 사용 후기, 질문, 작동하지 않은 환경 등을 편하게 남겨 주세요.
아직 댓글이 없습니다. 첫 댓글을 남겨 보세요.
Use this whenever the user asks to "create a module", "scaffold a feature", "add a Vue domain", "new module called X", or starts work on a brand-new vertical (views + components + store + router entry + tests). Duplicates the canonical `src/modules/tasks` template, applies kebab/Pascal/camel/ UPPER renames, and wires config-driven values. Module stays self-contained.
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
Use this whenever the user asks to "implement", "add", "build", "create", or "modify" a feature, page, view, component, or module in this Vue project. Three phases: Phase 0 scope analysis (flows + edge cases + UI needs + plan validation, STOP for user), Phase 1 implementation (layered UI → Store → API, Vue 3 Composition + Vuetify 4, /ui design rules), Phase 2 Definition-of-Done checklist + /verify + /pull-request. Auto-runs /create-module if the target module doesn't exist.
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
Use this whenever the user asks to "open a PR", "ship this", "create the pull request", "make a PR", or once a Vue feature/fix is verified and ready to push. Full lifecycle: branch → commit (commitizen) → issue → draft PR → CI → ready → autonomous monitor loop (fix comments, resolve threads, iterate until CI green + zero unresolved threads). `--perfect` adds a CodeRabbit convergence loop on top. Never works on `main`/`master`, never uses `--no-verify`.
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
Design system reference for the Devkit Vue stack (Vuetify 4 + custom theme helpers). Use when asked about styling, theming, layout, design system, Vuetify components, visual verification, or UI patterns. Automatically consumed by /feature when the task has a visual component. Can also be invoked directly for design-only tasks (restyle, theme change, layout fix).
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
Use this whenever a downstream Vue project needs to absorb upstream Devkit Vue changes — triggers on "update stack", "sync with devkit", "merge upstream", "pull stack updates", "resolve stack conflicts". Two-phase: ISO merge (stack modules stay byte-identical to upstream) then project alignment (apply MIGRATIONS.md, diff project modules vs `tasks` reference, /verify). Stack-code failures get an issue on `pierreb-devkit/Vue`.
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
Run this after every code change in this Vue project, before committing, before opening a PR, or whenever the user says "verify", "check", "lint", "run tests", "build", "audit". Diff audit (router guards, store boundaries, UX, /ui consistency, error handling) → lint → tests + coverage gate → build. Coverage drops → add tests, never lower thresholds. Triggers on "is this ready to commit?", "any issues?", "tests passing?".
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.