skills.rest
rcstrue
rcstrueCOMMUNITY
Explore all skills by this author →
GitHub

ui-ux-pro-max

Generate UI layouts, design tokens, and code-ready guidelines for web frontend stacks.

Updated Aug 23, 2026
Search Tags:#accessibility#tokens#ui-design#design-system#component-specs#ux-workflow
One-click install
npx skills add https://github.com/rcstrue/php_payroll --skill ui-ux-pro-max-rcstrue
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-ux-pro-max
Source: https://github.com/rcstrue/php_payroll/tree/main/php_payroll/skills/ui-ux-pro-max
Command: npx skills add https://github.com/rcstrue/php_payroll --skill ui-ux-pro-max-rcstrue

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

UI/UX design intelligence and implementation guidance for building polished interfaces. Use when the user asks for UI design, UX flows, information architecture, visual style direction, design systems/tokens, component specs, copy/microcopy, accessibility, or to generate/critique/refine frontend UI (HTML/CSS/JS, React, Next.js, Vue, Svelte, Tailwind). Includes workflows for (1) generating new UI layouts and styling, (2) improving existing UI/UX, (3) producing design-system tokens and component guidelines, and (4) turning UX recommendations into concrete code changes.

Core Features & Use Cases

  • UI concept generation: Provide polished layout directions and token-driven design system guidance.
  • UX optimization: Map user journeys, flows, and accessibility considerations to actionable improvements.
  • Code-ready outputs: Turn design-system rules into component specs and implementation steps across major stacks.

Quick Start

Provide a design prompt (e.g., "build a dashboard for analytics") and the AI will return a complete design system plus actionable frontend implementation guidance.

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 UI design system with tokens for a React dashboard?▼

To generate a UI design system with tokens for a React dashboard, provide a structured prompt describing your layout needs. The system returns a complete design system including pattern, style, colors, typography, tokens, and concrete code-ready component guidelines.

What is the best way to turn UX workflow recommendations into frontend code?▼

Turning UX workflow recommendations into frontend code involves mapping user journeys and accessibility considerations into actionable component specs. This process outputs concrete implementation steps across major stacks like HTML/CSS/JS, React, Next.js, Vue, Svelte, and Tailwind.

Can I use this to refine existing UI layouts and improve accessibility?▼

Yes, you can refine existing UI layouts and improve accessibility by providing a critique prompt. The system evaluates your current interface and returns actionable UX optimizations, information architecture improvements, and updated design-system tokens.

Does the design guidance work with Vue and Svelte frontend stacks?▼

The design guidance works across web frontend stacks including Vue and Svelte. It translates design-system rules and component specifications into concrete code changes compatible with these frameworks alongside React, Next.js, and Tailwind.

What format should my prompt be to get component specs and microcopy?▼

Your prompt should be a structured design request detailing the desired UI layout, UX flows, or component requirements. This structured input yields actionable component specs, microcopy recommendations, and token-driven styling guidelines.

Why do I need structured prompts for UI/UX design generation?▼

Structured prompts are required for UI/UX design generation because the system relies on specific instructions to produce comprehensive outputs. Without structured input detailing the design context, it cannot accurately generate pattern, style, tokens, and code-ready guidelines.

Related Skills

Explore More Design & Creative Skills→
memyselfandmmemyselfandm
8

brainstorming-designs

Guide topic-based brainstorming sessions for UI/UX designs with written output and ASCII mockups.

Community
Intermediate
ncsound919ncsound919

ui-ux-pro-max

Generate design-system tokens, component specs, and accessibility guidance for web stacks.

Community
Advanced
NITRR-OfficialNITRR-Official
4

tailwind-design-system

Create and implement design systems with Tailwind CSS v4.

Official
Intermediate
nickhou1983nickhou1983
4

playwright-explore

Crawl a live website to generate Playwright site maps and locator strategies.

Community
Advanced