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.