Skip to content
cccskills
FreePublished on GitHub

create-module

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.

See how to install

Files included (1)

  • SKILL.md3.8 KB

SKILL.md (original)

Review the instructions the agent will receive before you install.

Create Module Skill

Create a new module by copying and renaming the tasks template module.

Prerequisites

  • The canonical template module src/modules/tasks must exist
  • You need a name for the new module (kebab-case)

Steps

1. Ask for the module name

Prompt user for the new module name in kebab-case (e.g., my-feature, user-settings)

1b. Crud-only option

On this stack crud-only keeps every file and only thins the store test (the Node stack's option of the same name removes files its template carries and this one does not).

Ask: is this module pure CRUD (list/get/create/update/delete, no business logic beyond the standard pass-through actions)? If yes, scaffold crud-only — same files, but the generated store test uses the thin form (step 6b): one test that exercises each action once, no dedicated happy/error-path block per action (see /feature Phase 1 §5 — pass-through store actions). If the module will carry any custom logic beyond CRUD, scaffold normally and let /feature add tests as that logic lands.

2. Derive naming conventions

Follow /naming for the full reference. Quick summary from the module name (e.g., my-feature):

  • kebab-case: my-feature (folder names, file prefixes, routes)
  • PascalCase: MyFeature (component names in JS/templates)
  • UPPER_SNAKE_CASE: MY_FEATURE (env keys, constants)
  • lowerCamelCase: myFeature (variable names, function names, store exports)

3. Duplicate the module

cp -r src/modules/tasks src/modules/{new-module-name}

4. Rename references

Search and replace the following tokens across the new module:

  • tasks → {new-module-name} (kebab-case)
  • Tasks → {NewModuleName} (PascalCase)
  • TASKS → {NEW_MODULE_NAME} (UPPER_SNAKE_CASE)
  • task → {new-module} (singular kebab-case, if applicable)
  • Task → {NewModule} (singular PascalCase, if applicable)

Files to check:

  • Component names and file names
  • Route paths and names
  • Store/Pinia modules
  • API endpoint names
  • Type/interface names
  • Config keys
  • Test file names and test descriptions

5. Apply renames carefully

  • Case-sensitive, whole-word matches where possible
  • Show plan before applying if many files affected
  • Don't rename unrelated code (e.g., "tasks" in comments about other features)

6. Config-driven values

Business values (plans, roles, feature flags) should be driven by module config, not hardcoded in stores or components.

Pattern:

  • Define in src/modules/{module}/config/{module}.development.config.js (and env-specific variants)
  • Access via the centralized config service (import config from '@/lib/services/config')

6b. Crud-only: trim the store test

If step 1b chose crud-only, replace the copied {module}.store.unit.tests.js with the thin form: one it() per renamed action that calls it once (mocking axios and the config service exactly as the template does) and asserts the resulting state — keep the template's error-path test for any action that changes state after its await, instead of the template's per-action describe blocks with happy- and error-path cases. Check it with /verify's coverage report — the thin form must still clear vitest.config.js's per-file thresholds; if it doesn't for a given action, keep that action's own test.

7. Verify & report

Run /verify, then report: module path, renamed tokens, lint/test results, next steps (customize logic, update routes in src/router).

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

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

naming

Free

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/Vue20Updated Oct 19, 2026

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

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