skills.rest
samdae
samdaeCOMMUNITY
Explore all skills by this author →
GitHub

UI

Derive screen lists, component hierarchies, and interaction models from requirements and backend API designs.

1|Updated Jan 30, 2026
Search Tags:#ui#architecture#frontend#specification#requirements#wireframes
One-click install
npx skills add https://github.com/samdae/archflow --skill ui-samdae
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: UI
Source: https://github.com/samdae/archflow/tree/main/skills/ui
Command: npx skills add https://github.com/samdae/archflow --skill ui-samdae

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

UI specifications are often manual, inconsistent, and slow to align frontend teams with requirements and backend design. This Skill automates deriving deriving screen lists, component hierarchies, and interaction models from the requirements and the backend API design, shortening lead time and reducing misinterpretations.

Core Features & Use Cases

  • Derive screen list, routes, and data models from docs/spec.md and docs/arch-be.md
  • Generate component hierarchy and ASCII wireframes for planning
  • Produce a ready-to-review ui.md that teams can implement against

Quick Start

Provide the service docs path or ensure docs/{serviceName}/spec.md and docs/{serviceName}/arch-be.md exist. Then run the UI derivation flow to generate docs/{serviceName}/ui.md.

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 backend API designs?▼

Automated UI specification generation derives screen lists, component hierarchies, and interaction models from requirement docs and backend architecture files to produce an implementable ui.md output.

What is the best way to turn frontend requirements into wireframes?▼

Deriving component hierarchies and generating ASCII wireframes directly from specification and backend architecture documents provides structured planning artifacts for frontend implementation.

How do I map backend endpoints to frontend screen lists?▼

Analyzing service-oriented architecture documents extracts routes and data models to satisfy endpoint-driven mapping, translating backend endpoints into structured frontend screen lists.

Do I need existing spec files to derive UI specifications?▼

Deriving UI specifications requires existing spec.md for requirements and arch-be.md for backend design files, which are processed to generate the final ui.md document.

Can I use this to create reusable components for service-oriented architectures?▼

Applying UI specification derivation to service-oriented architectures supports reusable component generation and design-system guidance by mapping endpoint-driven interactions to structured component hierarchies.

Related Skills

Explore More Design & Creative Skills→
BigdropsBigdrops
1

frontend-to-backend-requirements

Create structured documents detailing data and API requirements for backend development.

Community
Advanced
guiledoguiledo

frontend-design

Design and implement distinctive frontend interfaces with polished interactions.

Community
Advanced
cartridge-ggcartridge-gg

ui-architecture

Standardize frontend UI components with Radix, Tailwind, CVA, and Storybook.

Official
Intermediate
JongHyunLee84JongHyunLee84

factory-ui-design

Generate UI specifications with screen layouts and component hierarchies from technical architecture.

Community
Advanced