skills.rest
amoai-tech
amoai-techCOMMUNITY
Explore all skills by this author →
GitHub

wireframe

Converts product requirements into buildable, testable UI wireframe contracts for MDE screens.

1|Updated Sep 15, 2026
Search Tags:#mermaid#figma#user journey#ui design#wireframe#design contract#ai hitl
One-click install
npx skills add https://github.com/amoai-tech/mdeai --skill wireframe-amoai-tech
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: wireframe
Source: https://github.com/amoai-tech/mdeai/tree/main/.claude/skills/wireframe
Command: npx skills add https://github.com/amoai-tech/mdeai --skill wireframe-amoai-tech

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Teams often jump from a feature idea straight into code, producing screens that ignore existing routes, components, data contracts, and AI approval behavior. This Skill turns a product idea or existing screen into a verified, implementation-ready UI contract before any coding begins. ## Core Features & Use Cases - Prove-before-design workflow: Inspects current routes, components, data sources, and AI behavior before drawing anything, so wireframes reflect real system truth. - Structured contract output: Produces component reuse maps, data/state matrices, AI/HITL approval contracts, responsive rules, accessibility notes, and Playwright verification scenarios. - Multi-fidelity outputs: Supports ASCII flow sketches, Mermaid journey/sequence/state diagrams, implementation wireframes, and Figma high-fidelity artifacts. - Use Case: A host-publish flow for events needs redesign. The Skill verifies the existing /host/event/new route, maps the host journey, defines draft/approval/error/mobile states, and hands engineering a buildable contract with acceptance criteria. ## Quick Start Ask the agent to wireframe the event creation flow for hosts, including the AI draft approval step and mobile behavior, before any implementation begins.

Frequently Asked Questions about wireframe

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create an implementation-ready wireframe before coding?▼

Follow the Prove, Journey, Wireframe, Contract, Implement, Verify workflow. First inspect the existing route, components, and data sources, then map the user journey, draw the wireframe, and define component reuse, data, state, responsive, and accessibility contracts with acceptance criteria.

How do I wireframe AI approval flows with CopilotKit and Mastra?▼

Use the AI/HITL contract annotations: AI READS, AI PROPOSES, HUMAN EDITS, HUMAN APPROVES, SYSTEM WRITES. Consequential actions must follow the sequence where AI proposes, a human reviews and approves, and only then does the system commit a durable write.

When should I use Mermaid diagrams versus Figma in a wireframe?▼

Use Mermaid flowcharts, sequence diagrams, or state diagrams to explain behavior, decisions, and failure paths. Use Figma only for high-fidelity or collaborative design after the flow and layout are approved; both must describe the same verified journey.

Does this wireframe workflow handle responsive and accessibility requirements?▼

Yes. Every implementation wireframe must define behavior at 1440px desktop, 1024px tablet, and 390px mobile checkpoints, plus heading hierarchy, keyboard order, focus management, form labels, and screen-reader announcements before high fidelity.

What are the limitations of a wireframe contract before implementation?▼

The wireframe stops at a buildable, testable contract and does not own production implementation, PR creation, or CI gates. Those steps route to separate implementation and verification skills, and any security, tenant, or approval blocker marks the wireframe blocked regardless of score.

Related Skills

Explore More Design & Creative Skills→
ludsonaielloludsonaiello

frontend

Build Next.js UI components, pages, and forms from verified API contracts.

Community
Advanced
CopilotKitCopilotKit
7

copilotkit-develop

Implements CopilotKit v2 chat interfaces, frontend tools, and runtime endpoints in React applications.

Official
Intermediate
yunshu0909yunshu0909
742

prd-doc-writer

Write and iteratively refine PRDs and user stories with ASCII wireframes and Mermaid diagrams.

Community
Advanced
thilthpc01208thilthpc01208

prototype

Orchestrate multi-phase game prototype workflows and generate structured prototype reports.

Community
Advanced