skills.rest
myrtlepn
myrtlepnCOMMUNITY
Explore all skills by this author →
GitHub

mst:ui-designer

Generate detailed UI specifications with component trees and interaction flows.

24|5|Updated Feb 14, 2026
Search Tags:#design system#ux design#ui design#component design#interaction design#ui specification
One-click install
npx skills add https://github.com/myrtlepn/gran-maestro --skill mst-ui-designer
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: mst:ui-designer
Source: https://github.com/myrtlepn/gran-maestro/tree/main/skills/ui-designer
Command: npx skills add https://github.com/myrtlepn/gran-maestro --skill mst-ui-designer

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill automates the process of designing user interfaces, component hierarchies, interaction flows, and ensuring adherence to design systems, eliminating the need for manual UI specification.

Core Features & Use Cases

  • UI Specification Generation: Automatically creates detailed UI specification documents based on requirements.
  • Component Tree Design: Defines clear component structures with props and state flow.
  • Interaction Flow Mapping: Outlines all user paths, including happy, error, and edge cases.
  • Design System Integration: References design tokens for colors, spacing, and typography.
  • Accessibility Compliance: Specifies ARIA labels and keyboard navigation requirements.
  • Use Case: When a new feature request comes in, this Skill can generate a complete UI specification document, including component breakdowns and interaction flows, ready for development.

Quick Start

Use the ui-designer skill to create a UI specification for the new login screen requirements.

Frequently Asked Questions about mst:ui-designer

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

FAQPage Schema
How do I generate a UI specification for frontend development?▼

Generate a UI specification by inputting feature requirements to produce a detailed document covering component trees, interaction flows, and design system adherence in ui-spec.md format.

What is included in an automated component tree design?▼

An automated component tree design defines clear component structures, detailing the props and state flow required for frontend features to ensure proper interaction design.

Does this UI design process cover accessibility compliance?▼

Yes, the UI design process includes accessibility compliance by specifying ARIA labels and keyboard navigation requirements directly within the generated UI specifications.

Can I map error and edge cases using interaction flow mapping?▼

Yes, interaction flow mapping outlines all user paths including happy, error, and edge cases to ensure complete UI specification coverage for software development.

Does the UI specification generator write implementation code?▼

No, the UI specification generator never writes implementation code; it strictly produces detailed design phase outputs focusing on component hierarchies and interaction flows.

Related Skills

Explore More Design & Creative Skills→
mrodrigues1mrodrigues1

visual-design-foundations

Define visual design systems using typography, color, spacing, and iconography.

Community
Intermediate
dpalferydpalfery

delegate-frontend

Delegate React, CSS, and HTML tasks to the react-dev agent.

Community
Basic
tan-yong-shengtan-yong-sheng
4

ui-ux-designer

Create interface designs, wireframes, and design systems with accessibility standards.

Community
Advanced
diwad-codediwad-code

GUI Design Expert

Provides UI/UX design guidance and code templates for web and desktop apps.

Community
Intermediate