Creates design documentation for UI implementation.

Install

mkdir -p .claude/skills/gsd-ui-phase && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/12634" && unzip -o skill.zip -d .claude/skills/gsd-ui-phase && rm skill.zip

Installs to .claude/skills/gsd-ui-phase

Activation

This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.

Generate UI design contract (UI-SPEC.md) for frontend phases
60 charsno explicit “when” trigger
Intermediate

Key capabilities

  • Generate a UI design contract.
  • Orchestrate UI research.
  • Verify UI specifications.
  • Translate Claude Code `AskUserQuestion` to `request_user_input`.
  • Translate Claude Code `Task()` to `spawn_agent`.

How it works

The skill orchestrates UI research and verification agents to generate a UI design contract, translating GSD workflow commands to Codex equivalents.

Inputs & outputs

You give it
Optional phase number as GSD_ARGS.
You get back
A UI design contract (UI-SPEC.md).

When to use gsd-ui-phase

  • Defining UI specifications
  • Front-end design planning
  • Creating UI contracts

About this skill

<codex_skill_adapter>

A. Skill Invocation

  • This skill is invoked by mentioning $gsd-ui-phase.
  • Treat all user text after $gsd-ui-phase as {{GSD_ARGS}}.
  • If no arguments are present, treat {{GSD_ARGS}} as empty.

B. AskUserQuestion → request_user_input Mapping

GSD workflows use AskUserQuestion (Claude Code syntax). Translate to Codex request_user_input:

Parameter mapping:

  • headerheader
  • questionquestion
  • Options formatted as "Label" — description{label: "Label", description: "description"}
  • Generate id from header: lowercase, replace spaces with underscores

Batched calls:

  • AskUserQuestion([q1, q2]) → single request_user_input with multiple entries in questions[]

Multi-select workaround:

  • Codex has no multiSelect. Use sequential single-selects, or present a numbered freeform list asking the user to enter comma-separated numbers.

Execute mode fallback:

  • When request_user_input is rejected (Execute mode), present a plain-text numbered list and pick a reasonable default.

C. Task() → spawn_agent Mapping

GSD workflows use Task(...) (Claude Code syntax). Translate to Codex collaboration tools:

Direct mapping:

  • Task(subagent_type="X", prompt="Y")spawn_agent(agent_type="X", message="Y")
  • Task(model="...") → omit (Codex uses per-role config, not inline model selection)
  • fork_context: false by default — GSD agents load their own context via <files_to_read> blocks

Parallel fan-out:

  • Spawn multiple agents → collect agent IDs → wait(ids) for all to complete

Result parsing:

  • Look for structured markers in agent output: CHECKPOINT, PLAN COMPLETE, SUMMARY, etc.
  • close_agent(id) after collecting results from each agent </codex_skill_adapter>
<objective> Create a UI design contract (UI-SPEC.md) for a frontend phase. Orchestrates gsd-ui-researcher and gsd-ui-checker. Flow: Validate → Research UI → Verify UI-SPEC → Done </objective>

<execution_context> @C:/Users/gusta/OneDrive/Documentos/gerenciador-de-quadras/.codex/get-shit-done/workflows/ui-phase.md @C:/Users/gusta/OneDrive/Documentos/gerenciador-de-quadras/.codex/get-shit-done/references/ui-brand.md </execution_context>

<context> Phase number: {{GSD_ARGS}} — optional, auto-detects next unplanned phase if omitted. </context> <process> Execute @C:/Users/gusta/OneDrive/Documentos/gerenciador-de-quadras/.codex/get-shit-done/workflows/ui-phase.md end-to-end. Preserve all workflow gates. </process>

When not to use it

  • When the task is not related to generating a UI design contract.

Limitations

  • Codex has no `multiSelect` for user input.
  • Codex uses per-role config, not inline model selection for `Task()`.

How it compares

This skill automates the creation and verification of a UI design contract by orchestrating specialized agents, unlike a manual document creation process.

Compared to similar skills

gsd-ui-phase side by side with the closest alternatives in the catalog.

SkillInstallsUpdatedSafetyDifficulty
gsd-ui-phase (this skill)04moNo flagsIntermediate
ui01moNo flagsIntermediate
mithril-ui-kit-standards03moNo flagsIntermediate
ui-ux-pro-max1,9095moReviewIntermediate

Try saying

Example prompts that trigger this skill in your AI assistant.

You might also like

ui

pierreb-devkit

>

00

mithril-ui-kit-standards

14e28f87

mithril-ui-kit の UI コンポーネント実装標準。Use when: UIコンポーネントの追加、作成、改良、変更、修正、リファクタ、既存UIの挙動変更、CSS Modules対応、Bootstrap互換フォールバック、docs必須更新、live demo必須実装。

00

ui-ux-pro-max

nextlevelbuilder

UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 8 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app, .html, .tsx, .vue, .svelte. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient.

1,9092,023

svg-precision

dkyazzentwatwa

Deterministic SVG generation, validation, and rendering. Use for icons, diagrams, charts, UI mockups, or technical drawings requiring structural correctness and cross-viewer compatibility.

5271,229

mobile-android-design

wshobson

Master Material Design 3 and Jetpack Compose patterns for building native Android apps. Use when designing Android interfaces, implementing Compose UI, or following Google's Material Design guidelines.

101335

frontend-slides

sickn33

Create stunning, animation-rich HTML presentations from scratch or by converting PowerPoint files. Use when the user wants to build a presentation, convert a PPT/PPTX to web, or create slides for a talk/pitch. Helps non-designers discover their aesthetic through visual exploration rather than abstract choices.

95195

Search skills

Search the agent skills registry