Generates runnable UI mockups from approved wireframes using declared stacks.
npx skills add https://github.com/kinncj/MAPLE --skill mockup-kinncj
Please help me install this Agent Skill. Skill: mockup Source: https://github.com/kinncj/MAPLE/tree/main/template/.opencode/skills/mockup Command: npx skills add https://github.com/kinncj/MAPLE --skill mockup-kinncj
Scaffold high-fidelity UI component mockups using the project's declared UI stack consuming approved wireframes and design tokens. Output is runnable code — not a design file. Human approval required before the mockup is treated as the implementation target.
Provide an approved wireframe and tokens, then run the mockup generator to produce runnable UI code in your chosen stack.
High-intent search queries and answers about installing and using this skill.
The generator outputs runnable mockup code in React Mantine, React Tailwind, or plain HTML by consuming approved wireframes and design tokens. It produces artifacts like mockup.tsx and mockup.md files in docs/design/mockups.
Generating mockups requires approved wireframes and available design tokens as prerequisites. The tool enforces pre-flight checks to ensure both are present before producing starter UI code.
Yes, the mockup generator supports React Tailwind, React Mantine, and plain HTML stacks. It aligns assets, tokens, and wireframes to design specs before outputting runnable code.
Human approval is required because the generator produces high-fidelity starter code rather than final implementation files. Approval ensures the mockup accurately reflects the wireframe and design tokens before development.
Scaffolding high-fidelity UI components is best handled by generating runnable mockup code directly from approved wireframes and tokens. This outputs starter templates rather than static design files.
maslennikov-igGenerate actionable frontend design guidance for typography, color, and motion.
gvarelaGenerate versioned mockup artifacts and decision logs for UI iterations.
navapbcCoordinate design artifacts to enforce ID linkage and design token usage.
DiologIRTranslate macOS UI screenshots into native SwiftUI/AppKit code.
