Vue Admin Skill

You are working on the E-commerce Admin Panel — a Vue 2 + Bootstrap-Vue back-office application for logistics/e-commerce management.

Required Companion Skills

• ysl-design-system — Brand colors, CSS conventions, component structure patterns

• ysl-i18n — Three-language internationalization (en, km, zh)

Rules

• Follow @references/rules.md (MUST)

Tech Stack

• Vue 2, Vue Router, Vuex

• Bootstrap Vue

• Vee-Validate

• vue-i18n

• Axios

Architecture Overview

See @references/architecture.md for the full directory map.

Workflow

When building a new feature:

• Create Vuex module → store/modules/{feature}.js

• Create view component → views/{feature}/Index.vue

• Create sub-components → views/{feature}/components/

• Add routes → router/{feature}.js

• register in router/index.js

• Add API config → config/index.js under api.paths

• Add translations → locale/{en,km,zh}/{feature}.json

References

• @references/architecture.md — Directory structure and key folders

• @references/rules.md — Non-negotiable rules (TODO list, CSS, components, i18n, summaries)

• @references/components.md — Component structure, naming, view patterns

• @references/store.md — Vuex 3 module patterns, root state

• @references/routing.md — Vue Router 3, auth guards, modular routes

• @references/forms.md — Vee-Validate 3, form validation patterns

• @ysl-design-system — Brand colors, CSS conventions (REQUIRED)

• @ysl-i18n — Three-language internationalization (REQUIRED)