gsd-ui-phase

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

Updated Apr 9, 2026
One-click install
npx skills add https://github.com/dobrinz123/claude-skills-share --skill gsd-ui-phase-dobrinz123
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: gsd-ui-phase
Source: https://github.com/dobrinz123/claude-skills-share/tree/main/skills/gsd-ui-phase
Command: npx skills add https://github.com/dobrinz123/claude-skills-share --skill gsd-ui-phase-dobrinz123

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Create consistent, actionable UI design contracts for frontend phases without manual handoffs, reducing ambiguity between designers and engineers and ensuring design requirements are captured, verified, and stored as UI-SPEC.md in the project context.

Core Features & Use Cases

  • End-to-end UI spec generation: Orchestrates research and verification to produce a complete UI-SPEC.md for a given frontend phase.
  • Integrated verification: Runs gsd-ui-researcher to collect requirements and gsd-ui-checker to validate the resulting specification and preserve workflow gates.
  • Project-context aware: Auto-detects phase when omitted, reads and writes project workflow files, and maintains phase-level continuity.
  • Use Case: When beginning a new frontend phase, automatically generate a UI contract that lists components, interactions, accessibility requirements, assets, and verification checks to hand off to implementation.

Quick Start

Generate a UI design contract for the current frontend phase and save the result as UI-SPEC.md in the project context.

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, use a tool that orchestrates UI research and verification to produce a production-ready design contract saved as UI-SPEC.md in your project context.

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

A UI design contract is a specification document that lists components, interactions, accessibility requirements, and verification checks for a frontend phase. You need one to reduce ambiguity between designers and engineers during handoffs.

Can I automatically verify UI requirements and maintain workflow gates during frontend development?

Yes, you can automatically verify UI requirements by running a checker tool that validates the resulting specification and preserves workflow gates while reading and writing project context files.

How do I ensure phase-level continuity when creating UI specifications across multiple frontend phases?

To ensure phase-level continuity across multiple frontend phases, use a project-context aware tool that auto-detects the current phase, reads existing workflow files, and writes updated specifications to maintain continuity.

Does UI spec generation work without manual handoffs between designers and engineers?

UI spec generation works without manual handoffs by orchestrating research to collect requirements and verification to validate designs, automatically capturing and storing the results in the project context.

What limitations exist when auto-detecting the frontend phase for UI specification generation?

A limitation of auto-detecting the frontend phase is that the tool requires readable project workflow files; when the phase is omitted and context files are missing, it cannot determine the correct phase to generate the UI-SPEC.md.