Add vue3-vite scaffold: skill, script, shell wrapper, and prompt

- resources/skills/vue3-vite/SKILL.md: procedure, outputs, and atomic design conventions
- resources/scripts/scaffold-vue3-vite.mjs: self-contained scaffold generating package.json, vite.config.js, index.html, router, pages, atomic component dirs, and SCSS foundations
- resources/scripts/scaffold-vue3-vite.sh: Node.js-delegating shell wrapper
- resources/prompts/scaffold-vue3-vite.prompt.md: chat-invocable prompt following shared pattern
This commit is contained in:
2026-06-30 17:33:47 -04:00
parent addbf37fc5
commit bb689a1bc2
4 changed files with 413 additions and 0 deletions
+54
View File
@@ -0,0 +1,54 @@
---
name: vue3-vite
description: "Use when scaffolding a new Vue 3 + Vite project with vue-router, a pages layer, an atomic component structure, and SCSS styling foundations."
argument-hint: "project-root=<path> app-name=<name> mode=<dry-run|apply> port=<dev-server-port>"
---
# Vue 3 + Vite Scaffold
Use this skill when starting a new Vue 3 + Vite frontend project that needs
routing, a component hierarchy, and a SCSS style foundation from the first
commit.
## Procedure
1. Confirm required inputs: `project-root` and `app-name`.
2. Run `resources/scripts/scaffold-vue3-vite.sh` in `--mode dry-run` first to
review planned files before writing.
3. After reviewing dry-run output, re-run with `--mode apply` to write files.
4. Run `npm install` in the project root to install dependencies.
5. Run `npm run dev` to verify the dev server starts cleanly on the configured
port.
## Outputs
- `package.json` (Vue 3, Vite, vue-router, sass)
- `vite.config.js` (dev server port, `@` alias pointing to `src/`)
- `index.html`
- `src/main.js`
- `src/App.vue`
- `src/router/index.js`
- `src/pages/HomePage.vue`
- `src/components/atoms/.gitkeep`
- `src/components/molecules/.gitkeep`
- `src/components/organisms/.gitkeep`
- `src/components/layouts/.gitkeep`
- `src/assets/styles/global-tokens.scss`
- `src/assets/styles/global-reset.scss`
- `.gitignore`
## Do Not Use
- Do not use this workflow when a project already has a `package.json` or
`vite.config.js` unless `--force` is passed.
- Do not use this workflow when the project requires SSR or a meta-framework
such as Nuxt.
## Notes
- Component directories follow strict atomic design:
`atoms`, `molecules`, `organisms`, `layouts`.
- Every new component should have a colocated SCSS file and a `*.stories.js`
stub; this scaffold creates the directory structure but not the components.
- The `@` alias is wired in both `vite.config.js` and expected by the router.
- SCSS files use `@use` for token and reset imports; avoid `@import`.