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:

1. Create Vuex module → store/modules/{feature}.js
2. Create view component → views/{feature}/Index.vue
3. Create sub-components → views/{feature}/components/
4. Add routes → router/{feature}.js + register in router/index.js
5. Add API config → config/index.js under api.paths
6. 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)