skills.rest
accionlabs
accionlabsOFFICIAL
Explore all skills by this author →
WebsiteGitHub

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
One-click install
npx skills add https://github.com/accionlabs/breezeai-claude-plugin --skill generate-functional-from-ui
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
accionlabsaccionlabs
2

onboard-repository

Upload a source repository into the Breeze code graph with Node.js 22+.

Official
Advanced
johan--johan--

create-specs

Convert reverse-engineering documentation into GitHub Spec Kit format.

Community
Advanced
Ikram-AlamIkram-Alam

building-chatgpt-apps

Build ChatGPT Apps with interactive widgets and FastMCP servers.

Community
Advanced
flonatflonat
127

proof-readability

Inspect mathematical proofs for clarity and improve readability without altering correctness.

Community
Advanced