Skills
.Work. You
Rest

mst:ui-designer

Community

Design user interfaces and flows.

Design & Creative#design system#ux design#ui design#component design#interaction design#ui specification
Authormyrtlepn
Version1.0.0
Installs0

System Documentation

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.

Dependency Matrix

Required Modules

None required

Components

references

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: mst:ui-designer
Download link: https://github.com/myrtlepn/gran-maestro/archive/main.zip#mst-ui-designer

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.