Naming Skill

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

Conventions

Folders

Files

Case conventions in code

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
   • •.spec.js for 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

Steps

When creating a new file

1. •Identify the module it belongs to (e.g., users)
2. •Identify the file type (component, view, store, router, test, helper, plugin)
3. •Derive the name:
   • •module prefix (kebab-case) + dot + semantic name (kebab-case) + dot + type suffix
   • •Example: module=users, name=profile, type=component → users.profile.component.vue
4. •Place it in the correct sub-directory:
   • •.vue components → src/modules/{module}/components/
   • •.vue views → src/modules/{module}/views/
   • •stores → src/modules/{module}/stores/
   • •routers → src/modules/{module}/router/
   • •tests → src/modules/{module}/tests/
5. •Confirm the name follows the table above before writing the file

When auditing a module

1. •List all files in src/modules/{module}/
2. •Check each file against the conventions table
3. •Report any violations with the expected name
4. •Apply renames if requested (use /feature or direct edits)
5. •Run /verify after renaming

Examples