vue-gen
Installation
SKILL.md
Vue Generator -- Memoire Spec to Vue SFC
Transforms Memoire component specs into production-ready Vue 3 Single File Components. Uses Composition API with <script setup>, TypeScript, Tailwind CSS, and composable patterns for state management.
Atomic Design Mapping to Vue
| Atomic Level | Vue Pattern | Output Directory | Example |
|---|---|---|---|
| atom | SFC, no composables | components/ui/ |
MButton.vue, MBadge.vue |
| molecule | SFC, may use atoms | components/molecules/ |
SearchField.vue, UserChip.vue |
| organism | SFC + composable | components/organisms/ |
DataTable.vue, Sidebar.vue |
| template | SFC (slot-based layout) | components/templates/ |
DashboardLayout.vue |
| page | SFC + Pinia store | pages/ |
HomePage.vue, SettingsPage.vue |