gsd-ui-phase

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

Updated Feb 11, 2026
One-click install
npx skills add https://github.com/ArtRiv/game-topicos-especiais --skill gsd-ui-phase-artriv
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: gsd-ui-phase
Source: https://github.com/ArtRiv/game-topicos-especiais/tree/main/.github/skills/gsd-ui-phase
Command: npx skills add https://github.com/ArtRiv/game-topicos-especiais --skill gsd-ui-phase-artriv

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill prevents mismatched expectations between design research and frontend implementation by producing a consistent UI design contract for a specific frontend phase.

Core Features & Use Cases

  • UI-SPEC contract generation: Produces or updates a UI design contract file (UI-SPEC.md) that can be used as a single source of truth during development.
  • Orchestrated research and verification: Runs a research step and then a verification step to ensure the UI-SPEC is grounded and internally consistent.
  • Phase-based scoping: Supports specifying a phase number so the generated UI contract aligns with the planned sequence of frontend work (or auto-detects the next unplanned phase).

Quick Start

Run gsd-ui-phase for the next frontend phase by providing a phase number argument to generate the corresponding UI-SPEC.md.

Frequently Asked Questions about gsd-ui-phase

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

FAQPage Schema
How do I create a UI design contract for a specific frontend development phase?

To create a UI design contract for a specific frontend development phase, you generate a UI-SPEC.md file that serves as a single source of truth. This aligns design research with implementation planning by enforcing a structured validate, research, and verify workflow.

How do I align UI research with frontend implementation planning to prevent mismatched expectations?

Aligning UI research with frontend implementation planning requires generating a phase-scoped UI-SPEC.md contract. This orchestrates a research step followed by a verification step to ensure the design contract is grounded and internally consistent across teams.

What is the best way to document UI requirements for iterative product development?

Documenting UI requirements for iterative product development is best handled by producing a phase-based UI design contract. This approach specifies a phase number so the generated UI spec aligns with the planned sequence of frontend work.

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

Yes, you can auto-detect the next unplanned frontend phase when generating a UI spec. The system supports specifying a phase number argument to align the contract, or it can automatically determine the next sequential phase that requires documentation.

Does generating a UI-SPEC require manual verification of the design research?

Generating a UI-SPEC does not require manual verification because the process runs an automated research step followed by a verification step. This orchestrated workflow ensures the UI design contract is internally consistent and grounded before team handoff.

Why do I need a phase-scoped UI spec instead of a single project-wide design document?

A phase-scoped UI spec is needed instead of a project-wide document to prevent mismatched expectations during iterative development. It ensures the UI design contract specifically aligns with the planned sequence of frontend work for each documented phase.