skills.rest
lgwanai
lgwanaiCOMMUNITY
Explore all skills by this author →
GitHub

gsd-ui-phase

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

4|1|Updated Mar 22, 2026
Search Tags:#collaboration#specification#validation#ui design#generate#contract#frontend phase
One-click install
npx skills add https://github.com/lgwanai/openforce --skill gsd-ui-phase-lgwanai
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: gsd-ui-phase
Source: https://github.com/lgwanai/openforce/tree/main/skills/gsd-ui-phase
Command: npx skills add https://github.com/lgwanai/openforce --skill gsd-ui-phase-lgwanai

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

It eliminates ambiguity in frontend planning by turning a vague phase goal into a clear, reusable UI design contract that teams can implement and verify.

Core Features & Use Cases

  • Generates a UI design contract (UI-SPEC.md) for a specified frontend phase to align stakeholders and guide implementation.
  • Orchestrates research and verification by coordinating gsd-ui-researcher to propose UI details and gsd-ui-checker to validate the resulting UI-SPEC.
  • Supports phased workflows by auto-selecting the next unplanned phase when the phase number is omitted.

Use case: When planning a multi-phase UI release (e.g., onboarding, dashboard, settings), generate a concrete UI-SPEC for the next phase so designers and engineers share one source of truth and reviewers can confirm completeness.

Quick Start

Run gsd-ui-phase with a phase number to generate UI-SPEC.md for that frontend phase and have the workflow validate the contract.

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?▼

Generating a UI design contract involves providing a phase number to produce a phase-ready UI-SPEC.md file. This contract aligns stakeholders and guides implementation by documenting reviewable UI decisions.

What is a UI design contract used for in phased frontend workflows?▼

A UI design contract provides a single source of truth for designers and engineers during multi-phase UI releases. It ensures phase goals are documented, reviewable, and implementable across sequential workflows.

Can I auto-select the next unplanned phase when generating a UI specification?▼

Yes, you can auto-select the next unplanned phase when the phase number is omitted. This supports phased workflows by automatically identifying the next target phase for UI specification generation.

How does UI specification validation work during frontend planning?▼

UI specification validation works by coordinating research to propose UI details and a checker to validate the resulting UI-SPEC. This completes end-to-end verification and preserves workflow gates.

Do I need validated UI research before creating a phase-ready UI design contract?▼

Yes, validated UI research is required before creating a phase-ready UI design contract. The contract is generated from this research to eliminate ambiguity and ensure frontend planning decisions are verified.

Related Skills

Explore More Design & Creative Skills→
ev3rlitev3rlit

gsd-ui-phase

Orchestrate gsd-ui-researcher and gsd-ui-checker to generate a validated UI-SPEC.md.

Community
Advanced
onelee85onelee85

gsd-ui-phase

Orchestrate UI research and verification to generate a validated UI-SPEC.md.

Community
Advanced
Poom5741Poom5741

gsd-ui-phase

Generate a standardized UI-SPEC.md for frontend phases.

Community
Advanced
hb9397hb9397

design-prototype-docs

Generate structured UI mockup design documents from RFP/SFR requirements.

Community
Advanced