ui

Name: ui
Availability: InStock
Author: marunion

Generates UI specifications from design documents for web and mobile apps.

Updated Mar 7, 2026

Search Tags:#design #ui #frontend #api #specification #ux

Ready to run

npx skills add https://github.com/Marunion/ai-factbomb --skill ui-marunion

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: ui
Source: https://github.com/Marunion/ai-factbomb/tree/main/archflow-main/skills/ui
Command: npx skills add https://github.com/Marunion/ai-factbomb --skill ui-marunion

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill automates the creation of detailed UI specifications by analyzing requirements and backend API designs, streamlining the UI development process.

Core Features & Use Cases

Screen Derivation: Automatically identifies necessary screens based on API endpoints (e.g., list, detail, form screens).
Component Hierarchy: Defines the structure and nesting of UI components for each screen.
Interaction Mapping: Outlines user actions, triggers, and corresponding API calls.
Use Case: Given a spec.md for a new e-commerce feature and arch-be.md detailing the product API, this Skill generates a ui.md file specifying all necessary screens, components, and user flows.

Quick Start

Use the ui skill to generate a UI specification for the 'blog' service, targeting a responsive platform.

Frequently Asked Questions about ui

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

FAQPage Schema

How do I generate UI specifications from functional requirements?▼

To generate UI specifications from functional requirements, analyze your spec.md and arch-be.md files. This process derives screen lists, component hierarchies, and user interactions from backend API designs to produce a comprehensive ui.md output.

Can I derive frontend screens automatically from backend API designs?▼

Yes, you can derive frontend screens automatically from backend API designs. The system identifies necessary screens like list, detail, and form views by analyzing API endpoints, then maps corresponding components and user interactions.

What is the best way to define component hierarchies for web and mobile applications?▼

Defining component hierarchies for web and mobile applications is best handled by analyzing functional requirements and API structures. This approach systematically outlines the nesting and structure of UI components for each derived screen.

How to map user interactions and state definitions from an API specification?▼

To map user interactions and state definitions from an API specification, analyze the backend API designs alongside requirements. This outlines specific user actions, triggers, and corresponding API calls within the generated UI documentation.

Do I need a spec.md file to generate a UI specification for a responsive platform?▼

Yes, you need a spec.md file along with an arch-be.md file detailing the backend architecture. These files provide the functional requirements and API designs required to generate the UI specification for a responsive platform.

What limitations exist when deriving screen lists from API endpoints?▼

Deriving screen lists from API endpoints relies strictly on the accuracy of the provided spec.md and arch-be.md files. The generated UI specification is limited to the functional requirements and backend designs explicitly defined in those input documents.