Skip to content
cccskills
FreePublished on GitHub

naming

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.

The English summary is being prepared. Showing the original description.

pierreb-devkit/Vue
See how to install

Files included (1)

  • SKILL.md4.3 KB

SKILL.md (original)

Review the instructions the agent will receive before you install.

Naming Skill

Audit or apply the project's file and folder naming conventions.

Conventions

Folders

LocationCaseExample
Top-level src dirskebab-casesrc/lib/, src/modules/
Module dirskebab-casemodules/home/, modules/user-settings/
Module sub-dirsfixed namescomponents/, views/, stores/, router/, tests/
Component utilscomponents/utils/components/utils/

Files

TypePatternExample
Component{module}.{name}.component.vuehome.hero.component.vue
View{module}.{name}.view.vueauth.signin.view.vue
Store{module}.store.jstasks.store.js
Router{module}.router.jsusers.router.js
Unit Test{target}.unit.tests.jshome.store.unit.tests.js
E2E Test{target}.e2e.tests.jsauth.signup.e2e.tests.js
Service{name}.jsaxios.js
Helper{name}.jstools.js
Plugin{name}.jsvuetify.js
Config{name}.js or index.jsdevelopment.js

Multi-entity modules

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).

CorrectWrong
billing.pricingCard.component.vuePricingCard.component.vue
billing.plans.view.vueplans.view.vue
billing.store.jssubscription.store.js

Pattern (components/views): {module}.{entity}[.{name}].{type}.{ext}

Case conventions in code

ContextConventionExample
Variable / functionlowerCamelCaseuseHomeStore, paginationRequest
Component name (JS)PascalCaseHomeHeroComponent
Store exportuse{Module}StoreuseTasksStore
Constant / env keyUPPER_SNAKE_CASEMY_MODULE_KEY

Rules

  1. Dot-notation prefix: always prefix with the module name separated by dots

    • home.hero.component.vue not hero.component.vue
    • tasks.store.js not store.js

  2. Semantic 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 tests

  3. Singular vs plural: follow the module's data semantics

    • List of items → plural: tasks.view.vue, users.view.vue
    • Single item → singular: task.view.vue, user.view.vue

  4. Utility sub-components: place in components/utils/ and keep the module prefix

    • components/utils/home.blur.background.component.vue

  5. Shared code: files in src/lib/ use simple kebab-case, no module prefix

    • src/lib/helpers/tools.js, src/lib/plugins/vuetify.js

Applying names

Derive 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.

Reviews

No reviews yet. Tell others what you thought.

Comments

No login needed. Share how it worked for you, ask a question, or note where it did not run.

No comments yet. Be the first to write one.

Comments are published right away. Do not include personal information such as email addresses or phone numbers. Up to 2 URLs.

0 / 1,000 characters

This form is protected by reCAPTCHA, and the Google Privacy Policy and Terms of Service apply.

More skills from this repository

create-module

Free

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.

The English summary is being prepared. Showing the original description.

pierreb-devkit/Vue20Updated Oct 19, 2026

feature

Free

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.

The English summary is being prepared. Showing the original description.

pierreb-devkit/Vue20Updated Oct 19, 2026

pull-request

Free

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`.

The English summary is being prepared. Showing the original description.

pierreb-devkit/Vue20Updated Oct 19, 2026

ui

Free

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).

The English summary is being prepared. Showing the original description.

pierreb-devkit/Vue20Updated Oct 19, 2026

update-stack

Free

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`.

The English summary is being prepared. Showing the original description.

pierreb-devkit/Vue20Updated Oct 19, 2026

verify

Free

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?".

The English summary is being prepared. Showing the original description.

pierreb-devkit/Vue20Updated Oct 19, 2026

See all skills by pierreb-devkit

Report a problem with this skill