skills.rest
catlog22
catlog22COMMUNITY
Explore all skills by this author →
GitHub

team-uidesign

Orchestrate a multi-agent UI design workflow from research through implementation and audit.

76|5|Updated Jul 7, 2026
Search Tags:#accessibility#design system#design tokens#ui design#component specs#audit workflow
One-click install
npx skills add https://github.com/catlog22/pi-maestro-flow --skill team-uidesign-catlog22
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: team-uidesign
Source: https://github.com/catlog22/pi-maestro-flow/tree/main/.pi/skills/team-uidesign
Command: npx skills add https://github.com/catlog22/pi-maestro-flow --skill team-uidesign-catlog22

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill turns a fragmented UI design process into a coordinated team workflow, so research, tokens, audits, and implementation move forward in a controlled sequence instead of ad hoc back-and-forth.

Core Features & Use Cases

  • Dual-track orchestration: Coordinates researcher, designer, reviewer, and implementer roles across component, system, and full-system pipelines.
  • Design-token and component-spec generation: Defines OKLCH-based tokens, responsive behavior, accessibility requirements, and all required interaction states.
  • Quality audit and recovery loops: Scores output against design standards, detects anti-patterns, and drives fix rounds before implementation continues.
  • Use case: A product team needs a new button, form, or full design system audited and built with accessibility and responsive constraints; this Skill manages the end-to-end pipeline.

Quick Start

Use the team-uidesign skill to analyze my UI scope and coordinate the research, design, audit, and build pipeline for this project.

Frequently Asked Questions about team-uidesign

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

FAQPage Schema
How do I coordinate a UI design workflow from research to implementation?▼

Coordinating a UI design workflow requires dual-track orchestration of researcher, designer, reviewer, and implementer roles in a controlled sequence. This manages research, design tokens, audits, and implementation systematically to prevent ad hoc back-and-forth.

How do I generate design tokens and component specifications with accessibility requirements?▼

Generating design tokens and component specs requires defining OKLCH-based tokens, responsive behavior, and accessibility constraints. This produces structured artifacts covering all required interaction states for components and full design systems.

Can I audit a full design system for anti-patterns and fix them before building?▼

Auditing a full design system for anti-patterns is achieved through quality audit and recovery loops. This scores output against design standards, detects anti-patterns, and drives fix rounds before implementation continues.

Does this UI design workflow support both single components and full design systems?▼

This UI design workflow supports single components, component systems, and full design systems. It applies accessibility, responsive behavior, and token governance requirements across all scopes to produce structured build outputs.

What is the best way to manage design tokens using OKLCH color spaces?▼

Managing design tokens using OKLCH color spaces is handled by defining OKLCH-based tokens within a structured generation pipeline. This ensures responsive behavior and accessibility constraints are governed correctly across the design system.

Why does my UI implementation break when design tokens are not governed properly?▼

UI implementation breaks when design tokens lack proper governance due to unmanaged responsive behavior and accessibility gaps. Running quality audit loops detects these anti-patterns and drives fix rounds before implementation continues.

Related Skills

Explore More Design & Creative Skills→
suriyelsuriyel
178

long-task-init

Scaffold project artifacts and decompose SRS requirements into verifiable features.

Community
Advanced
catalinakarstulovic2-aicatalinakarstulovic2-ai

frontend-design

Design and implement production-grade frontend interfaces with design tokens and responsive layouts.

Community
Advanced
alo-expalo-exp
6

design-handoff

Generate developer handoff specs with layout, tokens, component props, states, breakpoints, and accessibility notes from Figma URLs or descriptions.

Official
Advanced
yonatangrossyonatangross
217

design-system-tokens

Manages W3C DTCG design tokens with three-tier hierarchy and Style Dictionary transformations.

Community
Advanced