skills.rest
jjchambers80
jjchambers80COMMUNITY
Explore all skills by this author →
GitHub

gsd-ui-phase

Generate UI design contract documents for frontend development phases.

Updated Feb 18, 2026
Search Tags:#frontend#workflow orchestration#ui design#phase planning#ui-spec#design contract
One-click install
npx skills add https://github.com/jjchambers80/judgesdirectory --skill gsd-ui-phase-jjchambers80
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: gsd-ui-phase
Source: https://github.com/jjchambers80/judgesdirectory/tree/main/.github/skills/gsd-ui-phase
Command: npx skills add https://github.com/jjchambers80/judgesdirectory --skill gsd-ui-phase-jjchambers80

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Frontend phases often start without a clear UI design contract, leading to inconsistent implementation and rework. This Skill produces a structured UI-SPEC.md document that defines the design requirements before coding begins. ## Core Features & Use Cases - UI-SPEC Generation: Creates a UI design contract (UI-SPEC.md) for a frontend phase by orchestrating researcher and checker agents. - Phase Auto-Detection: Accepts an optional phase number argument and automatically detects the next unplanned phase when omitted. - Gated Workflow: Follows a Validate → Research UI → Verify UI-SPEC flow with preserved workflow gates. - Use Case: A developer starting a new frontend phase runs the skill to research UI patterns, apply brand guidelines, and produce a verified UI-SPEC.md before writing any component code. ## Quick Start Run the gsd-ui-phase skill with a phase number to generate the UI-SPEC.md design contract for that frontend phase.

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 spec for a frontend phase?▼

Run the skill with a phase number as the argument, for example the phase you want to plan. It executes the UI phase workflow end-to-end, researching UI patterns and producing a verified UI-SPEC.md design contract.

What is a UI-SPEC.md design contract?▼

UI-SPEC.md is a UI design contract document that defines the design requirements for a frontend phase before implementation. It is produced by the gsd-ui-researcher and verified by the gsd-ui-checker during the workflow.

Can I run the UI phase workflow without specifying a phase number?▼

Yes, the phase argument is optional. When omitted, the skill automatically detects the next unplanned phase and generates the UI-SPEC.md for that phase.

What agents does the UI phase workflow orchestrate?▼

The workflow orchestrates two agents: gsd-ui-researcher, which researches UI patterns and brand guidance, and gsd-ui-checker, which verifies the resulting UI-SPEC.md against the workflow gates.

When should I not use an automated UI spec generator?▼

Avoid it for phases with no frontend surface or when design decisions require live stakeholder workshops. The workflow assumes a defined phase structure and brand reference material to research against.

Related Skills

Explore More Software Engineering Skills→
oiagorodriguesoiagorodrigues

frontend-blueprint

Translates vague frontend requests into actionable design directives before coding.

Community
Intermediate
FerroxLabsFerroxLabs
21

ferrox-ui-phase

Create a UI-SPEC.md design contract before frontend implementation begins.

Community
Intermediate
Sake-TeamSake-Team

design-system

Generate design systems from codebases and audit UI visual consistency.

Official
Advanced
striderZAstriderZA
72

quick-design

Generate lightweight design specifications for small game changes with acceptance criteria.

Community
Intermediate