gsd-ui-phase

Generate a UI-SPEC.md contract for a frontend phase.

4|Updated Apr 11, 2026

Search Tags:#frontend #verification #workflow orchestration #gsd #ui specification #design contract

Ready to run

npx skills add https://github.com/electroheadfx/efx-mux --skill gsd-ui-phase-electroheadfx

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: gsd-ui-phase
Source: https://github.com/electroheadfx/efx-mux/tree/main/.codex/skills/gsd-ui-phase
Command: npx skills add https://github.com/electroheadfx/efx-mux --skill gsd-ui-phase-electroheadfx

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps create a clear UI design contract for a frontend phase, so product and engineering teams can align on what the interface should include before implementation begins.

Core Features & Use Cases

UI Spec Generation: Produces a structured UI-SPEC.md for a given frontend phase.
Workflow Orchestration: Coordinates validation, UI research, and final verification through the GSD workflow.
Use Case: A team starting a new feature phase can use this Skill to define the required screens, states, and design constraints before development starts.

Quick Start

Use the gsd-ui-phase skill to generate a UI design contract for the next frontend phase.

Frequently Asked Questions about gsd-ui-phase

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

FAQPage Schema

How do I generate a UI specification for a frontend phase?▼

To generate a UI specification for a frontend phase, this Skill produces a structured UI-SPEC.md design contract. This document defines required screens, states, and design constraints to align product and engineering teams before implementation begins.

What is a UI design contract and when do I need it for frontend work?▼

A UI design contract is a structured specification defining interface scope for phased frontend work. You need it when starting a new feature phase to establish required screens and states, ensuring product and engineering alignment before development starts.

How do I coordinate UI research and validation before frontend implementation?▼

To coordinate UI research and validation before implementation, this Skill orchestrates the GSD workflow gates. It requires UI research coordination and validation checks to verify interface scope and produce a consistent deliverable.

Does this frontend UI spec workflow require specific dependencies or components?▼

This frontend UI spec workflow requires no specific dependencies or components to function. It independently applies structured specification, research orchestration, and verification to align product, design, and engineering on interface scope.

What is the best way to align product, design, and engineering on interface scope?▼

The best way to align teams on interface scope is generating a structured UI design contract. This Skill coordinates validation and UI research through workflow gates, producing a UI-SPEC review that ensures a consistent deliverable before implementation.

Why does frontend phased work require workflow gates and UI-SPEC review?▼

Frontend phased work requires workflow gates and UI-SPEC review to preserve structured specification and prevent misalignment. This process enforces validation and UI research coordination, ensuring product and engineering teams agree on required interface scope before implementation.