skills.rest
tiankong0101-byte
tiankong0101-byteCOMMUNITY
Explore all skills by this author →
GitHub

ui-ux-pro-max

Create design systems, component specifications, and interactive prototypes for software products.

Updated May 17, 2026
Search Tags:#accessibility#design system#prototyping#component library#ux design#ui design
One-click install
npx skills add https://github.com/tiankong0101-byte/skills-registry --skill ui-ux-pro-max-tiankong0101-byte
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-ux-pro-max
Source: https://github.com/tiankong0101-byte/skills-registry/tree/main/skills/ui-ux-pro-max
Command: npx skills add https://github.com/tiankong0101-byte/skills-registry --skill ui-ux-pro-max-tiankong0101-byte

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps you create professional-grade user interfaces and cohesive design systems when you need more than a rough mockup. It is built for producing scalable, polished, and implementation-ready design work for real products.

Core Features & Use Cases

  • Design system creation: Define tokens, typography, spacing, color, and reusable component structures for consistent product design.
  • High-fidelity prototyping: Plan interactive, production-style prototypes with transitions, micro-interactions, and responsive states.
  • Developer handoff support: Provide clear specifications, usage guidance, and implementation notes that make design-to-code transitions smoother.
  • Use case: A team building a new SaaS dashboard can use this Skill to establish the visual language, component states, accessibility rules, and prototype interactions before implementation.

Quick Start

Ask for a complete design system and high-fidelity prototype plan for your product, including tokens, component states, accessibility guidance, and handoff specifications.

Frequently Asked Questions about ui-ux-pro-max

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

FAQPage Schema
How do I create a design system with structured tokens and component specifications?▼

A design system requires defining structured design tokens for typography, spacing, and color, alongside reusable component specifications with full state coverage. This approach ensures brand-consistent interfaces and yields implementation-ready documentation for smooth design-to-code handoff.

What is the best way to plan high-fidelity prototyping with micro-interactions?▼

High-fidelity prototyping involves planning interactive, production-style prototypes with detailed transitions, micro-interactions, and responsive states. This mechanism establishes interactive component behavior and yields a clear prototype plan for developers to implement complex UI interactions.

How do I prepare UX design documentation for developer handoff?▼

UX design documentation for developer handoff requires providing clear specifications, usage guidance, and implementation notes alongside your component library. This documentation ensures smoother design-to-code transitions by detailing state coverage and accessibility compliance rules.

Does my UI design need accessibility compliance for a SaaS dashboard?▼

Yes, UI design for a SaaS dashboard requires accessibility compliance to ensure usable interfaces. Establishing accessibility rules during the design system creation phase guarantees your component library meets compliance standards across all interactive states and responsive breakpoints.

Can I use this approach to build a responsive component library from scratch?▼

Yes, you can build a responsive component library from scratch by defining structured design tokens and reusable component specifications. This approach supports planning responsive states and yields a scalable, production-grade component library for software products.

Related Skills

Explore More Design & Creative Skills→
jeffwweeejeffwweee

ui-designer

Generate HTML wireframes, React/MUI mockups, and design specifications.

Community
Intermediate
gil-kapelgil-kapel
2

ui-design-systems-agent

Convert user experience workflows into detailed design system specifications.

Community
Intermediate
STier-AiSTier-Ai
5

frontend-mobile-development-component-scaffold

Generate React/React Native components with TypeScript interfaces, styling, and tests.

Official
Intermediate
HmbownHmbown
105

silent-image

Render static visual mockups with clear annotations for design reviews.

Community
Basic