fragginwagon
bb689a1bc2
- 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
55 lines
2.0 KiB
Markdown
55 lines
2.0 KiB
Markdown
---
|
|
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`.
|