skills.rest
rogsme
rogsmeCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

gsd-ui-phase

Automate UI design contract creation and commit it to the project repository.

Updated May 11, 2025
Search Tags:#project management#frontend#ui design#codebase integration#design contract
One-click install
npx skills add https://github.com/rogsme/dotfiles --skill gsd-ui-phase-rogsme
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: gsd-ui-phase
Source: https://github.com/rogsme/dotfiles/tree/main/.config/gsd/skills/gsd-ui-phase
Command: npx skills add https://github.com/rogsme/dotfiles --skill gsd-ui-phase-rogsme

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill automates the creation of UI design contracts for frontend phases, reducing design ambiguity and preventing ad-hoc styling decisions.

Core Features & Use Cases

  • Automated UI Design Contract Creation: Generates a UI design contract based on project root discovery and CONTEXT decisions.
  • UI Researcher Subagent: Spawns a subagent that grounds the spec in the existing codebase and checks it against phase CONTEXT decisions.
  • Sanity Check and Revision Pass: Ensures the spec complies with locked decisions, concreteness, state coverage, and completeness. Allows for one revision pass.
  • Committing UI Design Contract: Commits the UI design contract to the project repository following conventions.

Quick Start

Trigger the skill with the command: /gsd-ui-phase <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 automate UI design contract creation for frontend phases?▼

You can automate UI design contract creation by triggering a skill that researches your project root and generates a spec based on CONTEXT decisions. The process grounds the contract in your existing codebase to prevent ad-hoc styling decisions.

What is a UI design contract and when do I need it for frontend project management?▼

A UI design contract is a committed specification that defines frontend styling and design decisions. You need it when starting a new frontend phase to reduce design ambiguity and ensure spec compliance with locked project decisions.

How do I ensure UI spec compliance with locked codebase integration decisions?▼

To ensure UI spec compliance, a sanity check and revision pass validates the contract against locked decisions, concreteness, state coverage, and completeness. This automated check grounds the spec in your existing codebase.

Do I need existing CONTEXT decisions to generate a frontend UI design contract?▼

Yes, existing CONTEXT decisions are required. The UI design contract generation spawns a subagent that uses project root discovery and your CONTEXT decisions to ground the UI spec in the current codebase.

Can I commit the generated UI design contract directly to my project repository?▼

Yes, the automated process commits the finalized UI design contract directly to your project repository. It follows standard repository conventions after the sanity check validates the spec compliance.

Related Skills

Explore More Software Engineering Skills→
pradeepmoulipradeepmouli
2

speckit-baseline

Generate baseline-spec.md and current-state.md from repository analysis.

Community
Advanced
zeustritonzeustriton

frontend-design

Convert UI requirements into token-based React, Vue, or Svelte components.

Community
Advanced
MINT-IAMINT-IA

gsd-ui-phase

Generate UI-SPEC.md design contracts with phase objectives and verification steps.

Official
Intermediate
bryanvillamilpragmabryanvillamilpragma
3

superdesign

Analyze frontend codebases and generate UI design drafts with SuperDesign CLI.

Community
Advanced