skills.rest
Ruzenie
RuzenieCOMMUNITY
Explore all skills by this author →
GitHub

ui-codegen-master

Orchestrate UI development workflows integrating code generation, refactoring, and quality assurance.

2|Updated Feb 15, 2026
Search Tags:#quality assurance#react#code refactoring#frontend development#component extraction#code optimization#ui generation
One-click install
npx skills add https://github.com/Ruzenie/RUI-agentskills --skill ui-codegen-master
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-codegen-master
Source: https://github.com/Ruzenie/RUI-agentskills/tree/main/RUI-agentskills/RUI-codex-cn/skills/ui-codegen-master
Command: npx skills add https://github.com/Ruzenie/RUI-agentskills --skill ui-codegen-master

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill streamlines the entire UI development lifecycle, from initial generation and aesthetic refinement to code optimization, component extraction, and quality assurance, ensuring production-ready frontend implementations.

Core Features & Use Cases

  • End-to-End UI Generation: Creates complete pages or modules (landing pages, dashboards, forms) from scratch.
  • Code Optimization & Refactoring: Improves existing frontend code for structure, performance, maintainability, and type safety.
  • Component Extraction: Identifies and abstracts reusable UI components.
  • Automated Quality Gates: Integrates acceptance criteria, self-review, and technical stack recommendations.
  • Use Case: Generate a new SaaS dashboard interface, optimize its performance, extract common UI elements into a shared component library, and ensure it meets accessibility standards.

Quick Start

Use the ui-codegen-master skill to generate a new React-based SaaS dashboard with a focus on performance and accessibility.

Frequently Asked Questions about ui-codegen-master

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

FAQPage Schema
How do I generate a complete React UI from scratch?▼

To generate a complete React UI from scratch, this Skill orchestrates end-to-end UI generation, integrating aesthetic coaching and code generation to build production-ready frontend implementations like dashboards or forms.

What is the best way to refactor existing frontend code for maintainability?▼

Refactoring existing frontend code for maintainability involves optimizing code structure, performance, and type safety. This Skill improves existing codebases by applying automated quality gates and component extraction to ensure high standards.

How do I extract reusable components from an existing codebase?▼

Extracting reusable components from an existing codebase requires identifying abstracted UI elements. This Skill identifies and abstracts reusable components, allowing you to build a shared component library from existing frontend implementations.

Can I automate quality assurance for frontend development workflows?▼

Yes, you can automate quality assurance for frontend development workflows. This Skill integrates automated quality gates, enforcing acceptance criteria, self-reviews, and technical stack recommendations to ensure code meets accessibility and performance standards.

Does this UI generation workflow support building shared component libraries?▼

Yes, this UI generation workflow supports building shared component libraries. It orchestrates component extraction from existing modules to abstract common UI elements, ensuring maintainable and reusable frontend code implementations.

What are the limitations of using an automated UI generation workflow?▼

The primary limitation of this automated UI generation workflow is its dependency on integration with various sub-skills for selection, aesthetics, generation, refactoring, standards enforcement, and quality auditing to function effectively.

Related Skills

Explore More Software Engineering Skills→
SwimmingLiuSwimmingLiu
1

teach-impeccable

Gather and persist project design context into a configuration file.

Community
Intermediate
alslimanyalslimany

frontend-design

Translate frontend requirements into production-grade UI implementations across HTML/CSS, React, or Vue.

Community
Advanced
alex-voloshin-devalex-voloshin-dev
2

plugin-author

Orchestrate plugin asset lifecycles through automated subagent workflows.

Community
Advanced
tukuyomil032tukuyomil032
2

swiftui-expert-skill

Analyze and optimize SwiftUI code for iOS and macOS applications.

Community
Advanced