What problem does it solve? Building product pages from product descriptions, screenshots, or Figma designs often leads to ad-hoc components that drift from the design system. This Skill guides an agent to implement runnable, interactive prototypes that strictly reuse TopTop Kit components, tokens, and interaction contracts, with traceable component stacks and verification results. ## Core Features & Use Cases - Kit-First Implementation: Reads principles, foundations, and component YAML specs, then maps page layers to existing componentIds before writing any code. - Component Mapping & Gap Tracking: Produces a JSON component mapping with explicit kitGaps instead of disguising missing components as similar ones, and hands off to toptop-prototype-studio for hybrid prototypes when the Kit is incomplete. - Design MVP Manifest & Verification: Delivers a manifest covering intent, component stack, interaction states, and references, then validates with specs:validate, portal:test, and portal:build. - Use Case: Given a Figma frame of a message list page, the Skill maps navigation, search, list, and tab bar to Kit components, implements all interaction states with real content, and outputs a traceable manifest. ## Quick Start Ask the agent to build an interactive prototype of your page from a product description, screenshot, or Figma link using the TopTop design system Kit.
