skills.rest
atro2829-hub
atro2829-hubCOMMUNITY
Explore all skills by this author →
GitHub

ui-ux-pro-max

Generate UI/UX guidance and implementation plans from product requirements.

Updated Jun 1, 2026
Search Tags:#accessibility#design system#ui design#component specs#frontend implementation#ux flows
One-click install
npx skills add https://github.com/atro2829-hub/APPLE-NET-NEW --skill ui-ux-pro-max-atro2829-hub
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-ux-pro-max
Source: https://github.com/atro2829-hub/APPLE-NET-NEW/tree/main/skills/ui-ux-pro-max
Command: npx skills add https://github.com/atro2829-hub/APPLE-NET-NEW --skill ui-ux-pro-max-atro2829-hub

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires csv, json, and includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill helps you move from vague UI/UX requests to concrete design direction, interface structure, and implementation guidance without guessing at style, spacing, or interaction choices.

Core Features & Use Cases

  • UI Concept and Layout Guidance: Defines screen structure, hierarchy, spacing, typography, and visual direction for new interfaces.
  • UX Flow and Accessibility Support: Maps user journeys, states, edge cases, and accessibility considerations for more usable products.
  • Design System Output: Produces tokens, component rules, and reusable UI guidance for consistent frontend implementation.
  • Implementation Planning: Converts design recommendations into file-level edits, component breakdowns, and acceptance criteria for web and app stacks.
  • Use Case: A product team can use it to refine a dashboard, choose a visual style, generate a token set, and get concrete guidance for React, Next.js, Vue, Svelte, Tailwind, or mobile frameworks.

Quick Start

Ask the skill to generate a design system and implementation plan for your product, including the target platform, stack, goals, and any screenshot, Figma, repo, URL, or user journey you already have.

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 generate a design system from product requirements?▼

To generate a design system from product requirements, provide your target platform, stack, and goals to receive structured spacing, typography, color tokens, component rules, and frontend implementation guidance.

How do I map UX flows and accessibility considerations for a new interface?▼

Mapping UX flows and accessibility involves defining user journeys, edge cases, and state interactions to ensure usable products across web, iOS, Android, and desktop workflows.

Can I get implementation guidance for React and Tailwind from UI design specs?▼

Yes, UI design specs can be converted into implementation plans including file-level edits, component breakdowns, and acceptance criteria for stacks like React, Next.js, Vue, Svelte, and Tailwind.

Does this design system generator support mobile and desktop workflows?▼

Yes, this design system generator supports web, iOS, Android, and desktop workflows by producing stack-specific code direction, component specs, and layout guidance.

What is the best way to turn vague UI ideas into concrete component specs?▼

The best way to turn vague UI ideas into concrete component specs is to define screen structure, visual hierarchy, and interaction states, resulting in reusable rules and design tokens for consistent frontend implementation.

Related Skills

Explore More Design & Creative Skills→
silaslopes100silaslopes100

reversa-researcher

Convert raw product ideation data into structured user personas and customer journey maps.

Community
Intermediate
DVNghiemDVNghiem
20

frontend-handoff

Convert approved design outputs into frontend implementation handoff checklists.

Community
Intermediate
beattherbeatther
1

ui-ux-pro-max

Design cohesive UI systems with color, typography, and component patterns across 9 stacks.

Community
Advanced
ybbms777ybbms777
1

design-implementation-reviewer

Compare implemented HTML, CSS, and React interfaces against Figma design specifications.

Community
Intermediate