skills.rest
genexuslabs
genexuslabsOFFICIAL
Explore all skills by this author →
Website𝕏@GeneXusGitHub

ui-creator

Convert UI images and OpenAPI specs into Angular or React components with routing and services.

Updated Aug 27, 2026
Search Tags:#ui#react#openapi#angular#scaffolding#design-tokens#image-to-component
One-click install
npx skills add https://github.com/genexuslabs/genexus-skills --skill ui-creator-genexuslabs
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-creator
Source: https://github.com/genexuslabs/genexus-skills/tree/main/frontend/ui-creator
Command: npx skills add https://github.com/genexuslabs/genexus-skills --skill ui-creator-genexuslabs

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Converts UI images and/or OpenAPI specs into production-ready web components with routing and service integration.

Core Features & Use Cases

  • Converts UI images into visual components with an integrated image-to-component workflow and screenshot validation.
  • Generates pages directly from an OpenAPI spec when no UI images are provided, using neutral default tokens.
  • Supports Angular and React (Vite) projects, with shared app shells, routing, and services wired to APIs.
  • Keeps components self-contained and aligned to a design-token-driven style reference.

Quick Start

Provide UI images and/or an OpenAPI spec along with the project path and target platform, then run the image-to-component workflow to generate Angular or React components.

Frequently Asked Questions about ui-creator

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

FAQPage Schema
How do I convert UI images into Angular or React components?▼

To convert UI images into Angular or React components, provide the images and project path to trigger an image-to-component workflow that generates self-contained visual components with routing, services, and design token application.

Can I generate web components directly from an OpenAPI spec?▼

Yes, you can generate web components directly from an OpenAPI spec. When no UI images are provided, the system creates pages and wires services to APIs using neutral default design tokens.

Does this UI scaffolding tool support both React and Angular projects?▼

Yes, this UI scaffolding tool supports both Angular and React (Vite) projects. It generates platform-specific templates, shared app shells, and routing configurations tailored to your chosen framework.

How do generated components handle styling and design tokens?▼

Generated components handle styling by applying a design-token-driven style reference throughout the code. This ensures components remain self-contained and visually consistent across the application.

What do I need to provide to start generating components from designs?▼

To start generating components, you need to provide UI images and/or an OpenAPI spec along with your project path and target platform. The workflow then uses these inputs to scaffold the necessary web components.

How are API services integrated when generating pages from an OpenAPI spec?▼

When generating pages from an OpenAPI spec, API services are integrated by wiring the generated components directly to the defined APIs. This includes setting up routing and shared app shells for immediate functionality.

Related Skills

Explore More Software Engineering Skills→
madebynoammadebynoam

dcode:find-component

Locate UI component code by screenshots, routes, or component names.

Community
Intermediate
j4xiej4xie

integration-testing

Run end-to-end integration tests for API and UI interactions in the Cretas food traceability system.

Community
Advanced
joshua3403joshua3403

phase-5-design-system

Create a platform-agnostic design system with token definitions and component scaffolding.

Community
Advanced
DevHive1DevHive1
18

recreate-screenshot

Recreate UI components from static image references into frontend code.

Community
Advanced