skills.rest
DuySeu
DuySeuCOMMUNITY
Explore all skills by this author →
GitHub

gsd-ui-phase

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

1|Updated Aug 17, 2025
Search Tags:#workflow#frontend#ui-design#generate#design-research#ui-spec
One-click install
npx skills add https://github.com/DuySeu/StockMind --skill gsd-ui-phase-duyseu
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: gsd-ui-phase
Source: https://github.com/DuySeu/StockMind/tree/main/.agent/skills/gsd-ui-phase
Command: npx skills add https://github.com/DuySeu/StockMind --skill gsd-ui-phase-duyseu

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Frontend teams struggle with inconsistent UI specifications across phases, leading to rework and misalignment among design, research, and development.

Core Features & Use Cases

  • UI Contract Generation: Produce a complete UI-SPEC.md that documents UX flows, components, states, validation rules, and interactions for a frontend phase.
  • Validation & Research Orchestration: Coordinate gsd-ui-researcher and gsd-ui-checker to validate the spec against requirements and brand guidelines.
  • Use Case: A product designer generates a UI-SPEC.md for a new onboarding flow and shares it with engineers for implementation.

Quick Start

Provide a UI design contract for the next frontend phase by running the gsd-ui-phase workflow.

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

You generate a UI specification for frontend phases by running the gsd-ui-phase workflow, which outputs a complete UI-SPEC.md document covering UX flows, components, states, validation rules, and interactions.

What is a UI design contract and when do I need one?▼

A UI design contract is a structured UI-SPEC.md document that defines UX flows, components, and validation rules for a frontend phase. You need one to prevent rework and align design, research, and development teams.

How do I validate UI specifications against brand guidelines?▼

You validate UI specifications against brand guidelines by orchestrating the gsd-ui-researcher and gsd-ui-checker components, which coordinate to verify requirements and ensure design consistency across phases.

Can I use this workflow to document UI states and interactions for an onboarding flow?▼

Yes, you can use this workflow to document UI states and interactions for an onboarding flow. Product designers can generate a UI-SPEC.md and share it directly with engineers for implementation.

Best way to maintain consistent UI specifications across multiple frontend phases?▼

The best way to maintain consistent UI specifications across multiple frontend phases is to use deterministic workflow gates with context-aware phase numbering, ensuring end-to-end execution and alignment across teams.

Related Skills

Explore More Design & Creative Skills→
jedmamostojedmamosto

gsd-ui-phase

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

Community
Intermediate
gesmith0606gesmith0606

gsd-ui-phase

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

Community
Intermediate
zerAdazerAda

gsd-ui-phase

Automate UI design contract generation and orchestrate validation sub-skills.

Community
Intermediate
moonseokchoi-krmoonseokchoi-kr

spec-design

Automate specification and design workflows from feature idea to final approval.

Community
Advanced