skills.rest
gula00
gula00COMMUNITY
Explore all skills by this author →
GitHub

ui-ux-pro-max

Generate and refine frontend UI code across React, Next.js, Vue, and Svelte.

2|Updated Mar 10, 2026
Search Tags:#accessibility#code generation#design system#ux design#frontend development#ui design
One-click install
npx skills add https://github.com/gula00/autoclaw-skills --skill ui-ux-pro-max-gula00
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-ux-pro-max
Source: https://github.com/gula00/autoclaw-skills/tree/main/ui-ux-pro-max-0.1.0
Command: npx skills add https://github.com/gula00/autoclaw-skills --skill ui-ux-pro-max-gula00

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill provides intelligent UI/UX design guidance and implementation support, helping users create polished, user-friendly interfaces across various platforms and technologies.

Core Features & Use Cases

  • UI/UX Design Intelligence: Offers recommendations on layouts, flows, visual styles, and design systems.
  • Code Generation & Critique: Assists in generating or refining frontend UI code (HTML/CSS/JS, React, Vue, etc.) and provides accessibility guidance.
  • Design System Generation: Can generate design system tokens and component guidelines.
  • Use Case: A developer needs to design a new user dashboard. They can use this Skill to get recommendations on layout, color palette, typography, and even generate basic component code adhering to best practices.

Quick Start

Use the ui-ux-pro-max skill to generate a design system for a new e-commerce product page.

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 for a new web application?▼

To generate a design system, this solution provides recommendations on visual styles, typography, and color palettes while outputting structured design tokens and component guidelines for your web application.

Can I use this to generate and critique frontend UI code for React and Vue?▼

Yes, you can use this to generate and critique frontend UI code for frameworks like React, Next.js, Vue, and Svelte, receiving implementation guidance and accessibility best practices for your components.

What is the best way to improve UX flows and information architecture for a user dashboard?▼

The best way to improve UX flows and information architecture is by applying design intelligence to critique layouts, refine user journeys, and optimize microcopy for your user dashboard.

Does this provide accessibility guidance for frontend component specifications?▼

Yes, it provides explicit accessibility guidance when generating and refining frontend component specifications, ensuring your HTML, CSS, and JavaScript outputs meet compliance standards.

How do I create layout generation and visual style direction for an e-commerce product page?▼

You create layout generation and visual style direction by requesting UI design intelligence, which outputs polished interface recommendations and component code tailored for an e-commerce product page.

Related Skills

Explore More Design & Creative Skills→
BeerspitnightBeerspitnight
1

frontend-designer

Converts UI/UX design inputs into structured frontend specifications for React, Vue, or HTML/CSS.

Community
Advanced
bamechobamecho
1

frontend-design

Design and implement production-grade frontend interfaces with HTML/CSS/JS and React or Vue.

Community
Advanced
jay6697117jay6697117

agency-frontend-developer

Plan and guide frontend implementation across React, Vue, Angular, and Svelte.

Community
Advanced
kjayleekjaylee

ui-ux-pro-max

Generate UI/UX design guidance and frontend code for web and mobile platforms.

Community
Advanced