ui-generation-workflow-runner

Executes a four-step UI generation workflow from a descriptive document.

2|Updated Feb 15, 2026
One-click install
npx skills add https://github.com/Ruzenie/RUI-agentskills --skill ui-generation-workflow-runner
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-generation-workflow-runner
Source: https://github.com/Ruzenie/RUI-agentskills/tree/main/RUI-agentskills/RUI-codex-cn/skills/ui-generation-workflow-runner
Command: npx skills add https://github.com/Ruzenie/RUI-agentskills --skill ui-generation-workflow-runner

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill transforms a descriptive document (ui-generation-workflow.md) into an executable task list, ensuring stable production of page-level UI elements by following a structured, four-step generation process.

Core Features & Use Cases

  • Structured Workflow: Enforces a strict, step-by-step approach to UI generation (planning, implementation, optimization, quality assurance).
  • Reusability: Prioritizes the reuse of existing components and design tokens.
  • Quality Gates: Integrates automated quality checks and acceptance criteria.
  • Use Case: Generating a new user dashboard page by first defining its structure, then implementing components, optimizing code, and finally running automated quality checks.

Quick Start

Use the ui-generation-workflow-runner skill to generate a new user dashboard page following the structured UI generation process.

Frequently Asked Questions about ui-generation-workflow-runner

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
What is a structured UI generation workflow?▼

A structured UI generation workflow is a four-step process that transforms a descriptive document into executable page-level UI tasks, covering structure planning, component implementation, code optimization, and quality assurance.

How do I generate page-level UIs from a descriptive document?▼

To generate page-level UIs from a descriptive document, you execute a four-step process: plan the structure, implement components using design tokens, optimize code by enforcing standards, and run quality assurance audits.

How do I enforce design token adherence during frontend component implementation?▼

You enforce design token adherence during component implementation by following a structured UI generation workflow that prioritizes the reuse of existing components and automatically checks code against quality standards.

Can I automate quality assurance checks for frontend development workflows?▼

Yes, you can automate quality assurance checks for frontend development workflows by integrating an auditor step that evaluates the generated page-level UIs against predefined acceptance criteria and code standards.

Does this UI generation workflow require dependencies?▼

No, the UI generation workflow does not require external dependencies, but it does collaborate with aesthetic and component selection skills to ensure stable production of page-level UI elements.