Files

T

fragginwagon bb689a1bc2 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

2026-06-30 17:33:47 -04:00

2.0 KiB

Raw Blame History

name, description, argument-hint

name	description	argument-hint
vue3-vite	Use when scaffolding a new Vue 3 + Vite project with vue-router, a pages layer, an atomic component structure, and SCSS styling foundations.	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

Confirm required inputs: project-root and app-name.
Run resources/scripts/scaffold-vue3-vite.sh in --mode dry-run first to review planned files before writing.
After reviewing dry-run output, re-run with --mode apply to write files.
Run npm install in the project root to install dependencies.
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.

2.0 KiB Raw Blame History