← ClaudeAtlas

prototype-to-vue3listed

Convert PSM static prototype site pages into Vue 3 + Ant Design Vue 4 demo framework pages, mock API files, and menu rows. Use for single-page or whole-site conversion from Chinese-group static HTML pages into English-coded Vue files, preserving data-action/data-modal/data-nav behavior and mock-only execution. Emits Vue3/AntD4 idioms (v-model:value, a-form + a-form-item name, table
xiaofengche123/prototype-validation-service · ★ 1 · Web & Frontend · score 69
Install: claude install-skill xiaofengche123/prototype-validation-service
# Prototype To Vue (Vue3 edition) Convert static prototype business pages into the Vue3 demo framework generated by `prototype-vue3-framework` (**Vue 3.4 + Ant Design Vue 4**). Static paths stay Chinese; Vue paths are derived from the English `data-page` code. ## Resources - Read `references/psm-ui-profile.md` before converting naming, menus, styles, or component patterns. - Read `references/interaction-ir.md` before translating `data-action`, `data-modal`, or `data-nav`. - Read `references/visual-parity.md` before converting page layout or styles. - Read `references/manual.md` only for extended examples or troubleshooting. ## Hard Rules - Vue files must be English-coded: `src/views/<模块>/<子模块>/<编码>.vue`. - API files must be `src/views/<模块>/<子模块>/<编码小写>Api.js`. - Derive `<模块>/<子模块>` from the first four code characters, for example `BMWL01 -> BM/WL`, `BMSP04 -> BM/SP`. - `menu.js` must satisfy `formEname == 编码 == .vue filename` and `formLoadPath == /views/<模块>/<子模块>/<编码>`. - Chinese page names go only into display fields such as `formCname`, `groupCname`, and `fullTitle`. - Use mock-only API files; do not connect to a backend. - Emit **Vue 3 + Ant Design Vue 4** idioms (see `references/psm-ui-profile.md` §6/§8): `v-model:value` on inputs/selects; `<a-form>` + `<a-form-item name>` (no `a-form-model`); table single `#bodyCell="{ column, text, record, index }"` slot with object-arg `customRender`; `v-model:open` modals; `:deep()` deep styles; button icons via `<template #icon