skills.rest
guillermobustamante
guillermobustamanteCOMMUNITY
Explore all skills by this author →
GitHub

ui-generation

Generate screen-by-screen UI specifications and implementation-ready prompts for AI coding agents.

Updated Feb 13, 2026
Search Tags:#ui#frontend#ai-agent#ux#design-system#screen-spec
One-click install
npx skills add https://github.com/guillermobustamante/BOMComparevX --skill ui-generation
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-generation
Source: https://github.com/guillermobustamante/BOMComparevX/tree/main/.codex/skills/ui-generation
Command: npx skills add https://github.com/guillermobustamante/BOMComparevX --skill ui-generation

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill bridges the gap between a high-level UI foundation and actionable frontend implementation by generating detailed, screen-by-screen UI specifications.

Core Features & Use Cases

  • Screen Specification: Creates detailed definitions for each UI screen, including layout, components, states, and interactions.
  • AI Agent Guidance: Produces implementation-ready prompts and structure guidance for AI coding agents.
  • Use Case: After defining the overall UI strategy, use this Skill to generate the exact specifications for an "Intake Queue" screen, detailing its components, responsive behavior, and accessibility requirements, ready for an AI to build.

Quick Start

Use the ui-generation skill to create detailed screen specifications based on the approved UI foundation.

Frequently Asked Questions about ui-generation

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

FAQPage Schema
How do I generate UI screen specifications for frontend delivery?▼

Generate UI screen specifications by translating an approved UI foundation into detailed, screen-by-screen implementation guidance. This defines layout, component structure, interaction rules, and delivery sequencing for frontend development.

How do I create AI agent prompts for frontend UI implementation?▼

Create AI agent prompts by defining implementation-ready structure guidance from approved UI specifications. The prompts translate user mentality, workflows, and information architecture into actionable instructions for AI coding agents.

What is a UI foundation and why do I need it before generating screen specs?▼

A UI foundation establishes the overarching user mentality, workflows, information architecture, and design system. It is required before generating screen specs to ensure component structure and interaction rules adhere to the approved strategy.

Can I use AI to generate detailed component states and responsive behavior for UI screens?▼

Yes, you can use AI to generate detailed component states and responsive behavior. The Skill creates screen specifications detailing layout, components, states, and interactions based on the established UI architecture.

Does generating UI specs for AI coding agents require an existing design system?▼

Yes, generating UI specs for AI coding agents requires an existing design system. The Skill relies on an approved UI foundation, including established architecture and workflows, to produce implementation-ready frontend delivery specifications.

What is the best way to translate UI strategy into implementation-ready frontend specifications?▼

The best way to translate UI strategy into frontend specifications is generating screen-by-screen guidance addressing component structure, interaction rules, and delivery sequencing. This ensures AI coding agents receive actionable prompts adhering to the foundation.

Related Skills

Explore More Software Engineering Skills→
guillermobustamanteguillermobustamante

ui-foundation

Analyze repository context to produce a UI foundation specification with QA gates.

Community
Advanced
guillermobustamanteguillermobustamante

frontend-implementation

Translate UI specifications into implementation-ready frontend guidance for AI coding agents.

Community
Advanced
bergsidebergside
2.3k

friendly

Generate implementable design-system guidance for rounded, pastel-forward product UIs.

Official
Intermediate
FutureAtomsFutureAtoms
1

react-native-2026-figma-to-code

Convert Figma designs into React Native code using Locofy.ai and Builder.io.

Community
Intermediate