What problem does it solve? Turning a page prototype into code requires deciding component boundaries, interfaces, and state ownership upfront; doing this ad hoc leads to tangled components and rework. This Skill converts page specs or prototype descriptions into a complete frontend component design plan before any code is written. ## Core Features & Use Cases - Component Tree Generation: Produces a hierarchical component tree from page specs, marking conditional rendering such as modals with v-if. - Interface Definition: Defines Props, Emits, and Slots for each component with types, required flags, defaults, and trigger timing, enabling parallel development. - State Management Planning: Maps data flow (Props down, Emits up), assigns state to parent components, Pinia/Vuex stores, or Composables, and suggests hooks for side-effect logic. - Use Case: After confirming a user management page prototype, feed the component list and interaction flow into this Skill to receive a component tree, per-component interface tables, a useUserList Composable suggestion, and a views/ directory layout ready for coding. ## Quick Start Ask the AI to generate a component design plan from your page prototype description, including the component tree, Props/Emits/Slots interfaces, and state management scheme.
