---
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`.