gsd-ui-phase

Generate UI-SPEC.md for a frontend phase with validated research and verification gates.

Updated May 21, 2026
One-click install
npx skills add https://github.com/jedmamosto/m-and-ms --skill gsd-ui-phase-jedmamosto
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: gsd-ui-phase
Source: https://github.com/jedmamosto/m-and-ms/tree/main/.agents/skills/gsd-ui-phase
Command: npx skills add https://github.com/jedmamosto/m-and-ms --skill gsd-ui-phase-jedmamosto

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

It reduces ambiguity in frontend work by generating a phase-specific UI design contract that aligns research findings with verification gates.

Core Features & Use Cases

  • UI-SPEC.md contract generation: Produces a structured UI design contract for a requested frontend phase (e.g., a particular development milestone).
  • Validated research to verification flow: Orchestrates a validate → research → verify pipeline that preserves workflow gates before finalizing the UI spec.
  • Brand-consistent output: Uses an existing UI brand reference to keep the generated contract aligned with the established design system.

Quick Start

Run the gsd-ui-phase skill for your target phase number to generate UI-SPEC.md after validation, research, and verification steps complete.

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 design contract for a specific frontend phase?▼

To generate a UI design contract for a frontend phase, you produce a structured UI-SPEC.md file that aligns research findings with verification gates. This ensures your frontend planning workflow maintains consistent specs aligned to brand guidelines.

What is a UI spec verification gate in a research workflow?▼

A UI spec verification gate is a checkpoint within the research workflow that validates findings before finalizing the UI design contract. It preserves the end-to-end process gates ensuring research and verification steps complete successfully.

How do I keep frontend planning aligned with an existing design system?▼

You keep frontend planning aligned with an existing design system by using an established UI brand reference during contract generation. This ensures the generated UI-SPEC.md output remains consistent with your predefined brand guidelines.

Can I auto-detect the next phase when generating a UI spec?▼

Yes, you can auto-detect the next phase when generating a UI spec. When the target phase is omitted, the system auto-detects the next unplanned phase to produce the UI-SPEC.md contract without manual phase input.

Does UI spec generation require orchestration of research and checker components?▼

Yes, UI spec generation requires orchestration of dedicated research and checker components. It runs a validate, research, and verify pipeline to preserve workflow gates before finalizing the phase-ready UI design contract.

What is the best way to reduce ambiguity in frontend work before implementation?▼

The best way to reduce ambiguity in frontend work is generating a phase-specific UI design contract. This contract aligns validated research with verification gates, providing clear UI-SPEC.md documentation for developers.