gsd-ui-phase

Generate a UI design contract for a frontend phase.

Updated May 22, 2026
One-click install
npx skills add https://github.com/yusaduymaz/loexai --skill gsd-ui-phase-yusaduymaz
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: gsd-ui-phase
Source: https://github.com/yusaduymaz/loexai/tree/main/.codex/skills/gsd-ui-phase
Command: npx skills add https://github.com/yusaduymaz/loexai --skill gsd-ui-phase-yusaduymaz

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill turns an unstructured frontend phase into a clear UI design contract, reducing ambiguity and keeping implementation aligned with the intended product direction.

Core Features & Use Cases

  • Phase Validation: Checks the phase context before any UI work begins.
  • UI Research Orchestration: Coordinates research steps to gather the design inputs needed for the phase.
  • Spec Verification: Confirms the resulting UI-SPEC.md satisfies the workflow gates and brand references.
  • Use Case: Use it when a frontend team needs a phase-specific UI specification that is consistent, validated, and ready for downstream execution.

Quick Start

Ask the skill to generate the UI design contract for the next frontend phase and include a phase number only if you want to override auto-detection.

Frequently Asked Questions about gsd-ui-phase

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

FAQPage Schema
How do I turn an unstructured frontend phase into a UI spec?

To create a UI spec from an unstructured frontend phase, you need a design contract that validates the phase context and orchestrates research to produce a clear, implementation-ready UI specification.

What is a UI design contract and how does it validate frontend workflow phases?

A UI design contract is a structured specification that validates phase context against workflow gates and brand references before frontend implementation begins, ensuring downstream execution stays aligned with the intended product direction.

How do I verify that my UI spec meets brand guidelines and workflow gates?

UI spec verification involves checking the generated specification file against required workflow gates and brand reference alignments to confirm it satisfies all structural and design constraints before execution.

Do I need to manually define the frontend phase number to generate a UI spec?

You do not need to manually define the frontend phase number to generate a UI spec, because the system supports auto-detection of the current phase while allowing manual phase number overrides when necessary.

Can I use UI research orchestration to gather design inputs for frontend planning?

You can use UI research orchestration to gather design inputs for frontend planning, coordinating research steps end-to-end to collect all necessary information before generating the phase-specific UI specification.

When should I avoid using an automated UI spec generator for frontend planning?

You should avoid using an automated UI spec generator when your frontend planning lacks defined workflow gates or established brand guidelines, as the system requires these references to validate and produce a compliant design contract.