skills.rest
Yanick-mj
Yanick-mjCOMMUNITY
Explore all skills by this author →
GitHub

mb-ux-designer

Create UX artifacts including Excalidraw wireframes, user flows, and UI specs.

Updated Apr 6, 2026
Search Tags:#accessibility#excalidraw#user-flows#wireframes#ux#design-system#ui-spec
One-click install
npx skills add https://github.com/Yanick-mj/mb-framework --skill mb-ux-designer
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: mb-ux-designer
Source: https://github.com/Yanick-mj/mb-framework/tree/main/agents/ux-designer
Command: npx skills add https://github.com/Yanick-mj/mb-framework --skill mb-ux-designer

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It closes the gap between product requirements and front-end implementation by producing evidence-backed UX discovery artifacts and developer-ready UI specifications that include wireframes, user flows, accessibility checks, and component annotations.

Core Features & Use Cases

  • Discovery mode: audit existing screens, map user flows, produce Excalidraw wireframes, and generate a structured UI spec that feeds acceptance criteria and architecture decisions.
  • Delivery mode: validate or adjust wireframes against technical constraints, finalize UI specs for fe-dev with component names, props, and interaction details.
  • Accessibility & design system enforcement: run WCAG 2.1 AA checks, require design system updates as prerequisites, and insist on evidence (file paths/excerpts) for claims.
  • Use case: a PM requests UX discovery for a new feature; the agent produces flow diagrams, .excalidraw wireframes, an annotated UI spec, and accessibility checklist before the feature is broken down for implementation.

Quick Start

Ask the UX Designer to perform discovery for "Add pagination" in mobile mode, audit existing screens, produce Excalidraw wireframes, and deliver a developer-ready UI spec with component names and props.

Frequently Asked Questions about mb-ux-designer

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

FAQPage Schema
How do I generate developer-ready UI specs from product requirements?▼

To generate developer-ready UI specs, use a UX discovery workflow that audits existing screens, maps user flows, and outputs annotated component specifications. This process closes the gap between product requirements and front-end implementation.

Can I create Excalidraw wireframes for mobile and web features automatically?▼

Yes, you can create Excalidraw wireframes for mobile and web features. The workflow generates .excalidraw outputs by reviewing existing screens and design tokens, producing wireframes suitable for product discovery and sprint delivery phases.

What is included in a UX accessibility audit for UI specifications?▼

A UX accessibility audit for UI specifications includes WCAG 2.1 AA checks on wireframes and components. It requires evidence-based review of existing screens to ensure design system compliance before front-end development begins.

How do I map user flows during product discovery?▼

Map user flows during product discovery by auditing existing screens and applying evidence-based review. This produces structured flow diagrams and UI specs that feed acceptance criteria and architecture decisions for new features.

Do I need existing design tokens to produce UI specs and wireframes?▼

Yes, existing design tokens are required. The workflow insists on design system updates as prerequisites and requires evidence like file paths or excerpts for claims, ensuring component annotations align with established tokens.

What is the best way to validate wireframes against technical constraints for sprint delivery?▼

Validate wireframes against technical constraints in delivery mode by adjusting designs and finalizing UI specs for front-end developers. This ensures component names, props, and interaction details are implementation-ready.

Related Skills

Explore More Design & Creative Skills→
speqqaispeqqai

ux-design

Generate Figma mocks from PRDs using Speqq design system tokens.

Official
Advanced
SJTU-IPADSSJTU-IPADS
7

agile-product-owner

Generate INVEST-compliant user stories with acceptance criteria from backlog details.

Official
Advanced
co-cddoco-cddo

UX Designer

Create user flows, wireframes, and WCAG 2.1 AA accessibility documentation.

Official
Basic
borgheiborghei
467

product-designer

Translate user insights into UI/UX designs for web and mobile products.

Community
Basic