gsd-ui-phase
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.zipInstalls 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 phasesKey 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
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-phaseas{{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:
header→headerquestion→question- Options formatted as
"Label" — description→{label: "Label", description: "description"} - Generate
idfrom header: lowercase, replace spaces with underscores
Batched calls:
AskUserQuestion([q1, q2])→ singlerequest_user_inputwith multiple entries inquestions[]
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_inputis 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: falseby 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>
<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.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| gsd-ui-phase (this skill) | 0 | 4mo | No flags | Intermediate |
| ui | 0 | 1mo | No flags | Intermediate |
| mithril-ui-kit-standards | 0 | 3mo | No flags | Intermediate |
| ui-ux-pro-max | 1,909 | 5mo | Review | Intermediate |
Try saying
Example prompts that trigger this skill in your AI assistant.
More by Gustavosareto
View all by Gustavosareto →You might also like
ui
pierreb-devkit
>
mithril-ui-kit-standards
14e28f87
mithril-ui-kit の UI コンポーネント実装標準。Use when: UIコンポーネントの追加、作成、改良、変更、修正、リファクタ、既存UIの挙動変更、CSS Modules対応、Bootstrap互換フォールバック、docs必須更新、live demo必須実装。
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.
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.
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.
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.