generate-functional-from-ui

Generate user-persona functional graphs from frontend UI repositories.

2|2|Updated Mar 11, 2026

Search Tags:#frontend #persona #generate #ui-analysis #entrypoints #functional-graph

Ready to run

npx skills add https://github.com/accionlabs/breezeai-claude-plugin --skill generate-functional-from-ui

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: generate-functional-from-ui
Source: https://github.com/accionlabs/breezeai-claude-plugin/tree/main/skills/generate-functional-from-ui
Command: npx skills add https://github.com/accionlabs/breezeai-claude-plugin --skill generate-functional-from-ui

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Converts a frontend UI repository into the human-persona half of a functional graph so teams can understand user intents, scenarios, and API touchpoints without manual specification.

Core Features & Use Cases

Detects frontend framework, routes, panels, and orphaned views to enumerate entry points.
Extracts personas, interactive widgets, and API calls to build persona > outcome > scenario > step > action trees with structured apis[].
Validates JSX coverage, enforces rules (persona confirmation, network-verb apis[]), checkpoints progress in entrypoints.json, and performs one EP-per-post upserts to the Breeze functional graph.
Use case: run a UI pass to rapidly generate testable user flows and API mappings for a product discovery, documentation handoff, or automated spec generation.

Quick Start

Run /breeze:generate-functional-from-ui with the absolute path to your frontend repository to produce user-persona scenarios, actions, and apis[].

Frequently Asked Questions about generate-functional-from-ui

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

FAQPage Schema

How do I generate user flows from a frontend UI repository?▼

To generate user flows from a frontend UI repository, apply an automated extraction process that detects frameworks, routes, and panels to build structured persona, scenario, and action trees. This maps interactive widgets and API calls without manual specification.

What is a user-persona functional graph in frontend development?▼

A user-persona functional graph represents the human-interaction half of an application by mapping personas to outcomes, scenarios, steps, and actions. It structures how users interact with UI panels and API touchpoints to understand product intents.

Do I need a Breeze workspace configuration to extract UI entry points?▼

Yes, extracting UI entry points requires a Breeze workspace configuration containing an apiKey, projectUuid, and apiBase. You also need an indexed code ontology and read access to the frontend repository to perform extractions and upserts.

How to extract API calls and interactive widgets from a frontend codebase?▼

Extract API calls and interactive widgets from a frontend codebase by running per-entrypoint analysis that detects frameworks and enumerates routes. This process validates JSX coverage and enforces rules to build structured network-verb apis[] arrays.

What's the best way to automate user scenario mapping for product discovery?▼

The best way to automate user scenario mapping for product discovery is running a UI repository pass that detects orphaned views and interactive elements. It automatically builds persona outcome trees and upserts them into a functional graph.