spec-driven-uilisted

Generate front-end UI specifications, code, and a framework-agnostic Design Source of Truth (design.md) for Web, GUI, or Terminal interfaces through a 9-phase workflow with structural anti-skip enforcement. Supports Web (React, Blazor, ASP.NET, HTML), Desktop GUI (WPF, Tkinter), and Terminal interfaces. Three modes: generated (interactive discovery), extracted (from existing mockup code via --extract), and hybrid. Produces design.md — a single document from which any AI can recreate the complete UI in any framework. Use when stories require UI components, when generating visual specifications from requirements, or when extracting a design source of truth from existing mockups. Always use this skill when the user runs /create-ui.
bankielewicz/DevForgeAI · ★ 4 · Web & Frontend · score 66

Install: claude install-skill bankielewicz/DevForgeAI

# Spec-Driven UI Generation Generate front-end UI specifications and code, and produce the framework-agnostic Design Source of Truth (`design.md`), through a 9-phase workflow with structural anti-skip enforcement. Governed by **ADR-078** (modernization) + **ADR-075** (design.md format-stay decision). Phase 03 includes a Claude Design fast-path (Step 3.0) per **RESEARCH-010** REC-2: when a user has authored their design in Claude Design and exported a handoff bundle, Step 3.0 routes through `mockup-extractor` (FRAMEWORK="claude-design-bundle") and skips Steps 3.3 / 3.7 / 3.7a / 3.8 (visual-discovery questions whose answers are in the bundle). This skill owns the UI specification phase of the modernized DevForgeAI pipeline. It runs after `/create-solution-architecture` (or standalone) and produces the UI artifacts consumed by `/dev`, `/qa`, and the 6 design.md consumer skills. ``` /create-solution-architecture → /create-ui (THIS SKILL) → /create-story → /dev ``` **Context files are THE LAW.** If ambiguous or conflicts detected: HALT and use AskUserQuestion. --- ## Execution Model See **`.claude/rules/core/anti-skip-behavior.md`** for the canonical execution contract (expand inline; do not wait passively or offer execution options; honor every step of every phase; Self-Check violation taxonomy; Token- Optimization-Bias prohibition; governed by ADR-076). After invocation, execute Phase 00 Initialization immediately. --- ## Anti-Skip Enforcement Contract Enforced structu