team-ux-improve

Diagnose and fix UI interaction failures in React and Vue codebases.

76|5|Updated Jul 7, 2026
One-click install
npx skills add https://github.com/catlog22/pi-maestro-flow --skill team-ux-improve-catlog22
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: team-ux-improve
Source: https://github.com/catlog22/pi-maestro-flow/tree/main/.pi/skills/team-ux-improve
Command: npx skills add https://github.com/catlog22/pi-maestro-flow --skill team-ux-improve-catlog22

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill systematically finds and fixes UI and UX interaction problems such as unresponsive buttons, missing loading or error feedback, stale state updates, and weak accessibility states.

Core Features & Use Cases

  • End-to-end UX improvement pipeline: Scans the codebase, diagnoses root causes, designs fixes, implements changes, and validates them with tests.
  • Team-worker orchestration: Uses a coordinator plus specialized roles for scanning, diagnosing, designing, implementing, and testing.
  • Feedback and state management repair: Adds loading, error, success, empty, and focus states, and corrects reactive updates in React or Vue projects.
  • Use Case: A product team reports that submit buttons do nothing, async actions fail silently, and lists do not refresh after edits; this Skill traces the issue through the full pipeline and produces validated fixes.

Quick Start

Ask the skill to audit your project for UX interaction issues and produce a full scan-to-fix pipeline for the target app.

Frequently Asked Questions about team-ux-improve

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

FAQPage Schema
How do I fix unresponsive buttons and silent async failures in my React or Vue app?

To fix unresponsive buttons and silent async failures, this Skill scans your React or Vue components, diagnoses state and event handling root causes, implements corrected code changes, and validates results with tests through a full scan-to-fix pipeline.

What is the best way to add missing loading and error feedback states to UI components?

The best way to add missing loading and error feedback states is through a structured pipeline that diagnoses state management gaps, designs the missing feedback states, and implements framework-aware code changes for your specific React or Vue project.

How do I find and repair stale data refresh problems after editing list items?

To repair stale data refresh problems, the Skill traces reactive update failures by scanning your codebase, diagnosing the state management root causes, and implementing validated fixes to ensure lists refresh correctly after edits.

Can I use this pipeline to fix accessibility state gaps in my Vue or React codebase?

Yes, you can use this pipeline to fix accessibility state gaps in React or Vue codebases. It scans components for weak accessibility states, designs appropriate focus and feedback states, implements changes, and validates them.

How does the team-worker orchestration pipeline diagnose and fix UX interaction failures?

The team-worker orchestration pipeline diagnoses UX interaction failures by using a coordinator plus specialized roles for scanning, diagnosing, designing, implementing, and testing, ensuring framework-aware patterns and report outputs.

What should I do before running a full UX interaction audit on my web application?

Before running a UX interaction audit, you need a React or Vue codebase with identifiable issues like unresponsive controls, missing feedback, stale data, or accessibility gaps, then ask the Skill to produce a full scan-to-fix pipeline for the target app.