gsd-ui-phase

Generate UI design contracts for frontend phases using sub-skills.

Updated May 28, 2026
One-click install
npx skills add https://github.com/SensLiao/Claude-code-setting --skill gsd-ui-phase-sensliao
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: gsd-ui-phase
Source: https://github.com/SensLiao/Claude-code-setting/tree/main/skills/gsd-ui-phase
Command: npx skills add https://github.com/SensLiao/Claude-code-setting --skill gsd-ui-phase-sensliao

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill automates the generation of UI design contracts (UI-SPEC.md) for frontend phases, streamlining the UI design process.

Core Features & Use Cases

  • Automated UI Design Contract Generation: Generates UI design contracts for frontend phases based on provided arguments.
  • Orchestration of Sub-Skills: Orchestrates the use of gsd-ui-researcher and gsd-ui-checker sub-skills.
  • Flow Control: Manages the flow of the process, including validation, research, verification, and completion.
  • Use Case: Ideal for teams working on frontend development where a standardized UI design contract is required for each phase.

Quick Start

Generate a UI design contract for the next frontend phase using the gsd-ui-phase skill with the argument 'phase-1'.

Frequently Asked Questions about gsd-ui-phase

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

FAQPage Schema
How do I automate UI design contract generation for frontend phases?

You can automate UI design contract generation by using a skill that orchestrates sub-skills for research and verification, producing a standardized UI-SPEC.md file for frontend phases. It streamlines the design process by managing flow control from validation to completion.

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

A UI design contract is a standardized UI specification document generated for frontend phases. You need it when your team requires a consistent design contract to orchestrate UI research and verification across multiple development phases.

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

To generate a UI specification for a specific frontend phase, you run the automation skill with your phase identifier, such as 'phase-1', as the argument. The tool then orchestrates UI research and verification to output the design contract.

Do I need workflow and reference files to generate UI specifications?

Yes, you need access to workflow and reference files for context loading to generate UI specifications. The automation process requires these files to properly orchestrate sub-skills and manage the flow control for design contract generation.

What's the best way to manage UI research and verification for frontend phases?

The best way to manage UI research and verification is to use an orchestration skill that automates the flow control between specialized researcher and checker components. This approach ensures a validated UI design contract is generated for each frontend phase.

Are there limitations when automating phase management for UI design?

A key limitation is that automating phase management requires explicit phase arguments and access to workflow reference files for context loading. Without these inputs, the orchestration flow cannot properly execute the UI research and verification steps.