UI Design & Development Skills

Generate design graph nodes (UserJourney, Flow, Page, Component) from any input: Jira ticket, plain-text description, scenario references, or Figma wireframes. Builds requirement context, resolves matching functional graph scenarios/steps/actions, generates design nodes with component reuse, and optionally syncs results back to Jira. When a frontend UI repo is available, reads it to discover routes and navigation and split a scenario into multiple flows/pages. Use when: "analyze this design", "create design from this ticket", "generate design for these scenarios", user shares a Figma URL or Jira link, "design graph from requirement".

Compare Figma design system components against the Breeze design graph component registry. First builds existingcomponents.json by iteratively fetching all Component nodes from MCP, then reads a user-provided figmaComponents.json file and performs a multi-dimensional comparison: name matching (with semantic equivalence resolution), type (ATOM/MOLECULE/ORGANISM/TEMPLATE) alignment, and supportingComponents parity. Outputs a structured comparison report. Use when: "compare components", "figma vs design graph", "component drift analysis", "compare figma components", "component comparison", "design system audit".

analyze the functional against the existing functional graph which can be access using breezeAi mcp tools. Identifies coverage gaps, conflicts, dependencies, and impact. Use when: "analyze this requirement", "is this covered", "impact of this change", "break down this user story".

DEPRECATED. Old Python multi-pass cluster pipeline that generated a functional graph from the code graph via intent extraction → DBSCAN clustering → outcome assignment → scenario generation. The DBSCAN clustering step produces duplicate scenarios under realistic repo layouts, which is why this skill was retired. Do NOT run unless you are explicitly resuming an in-progress historical run or are consciously reproducing the legacy behaviour for comparison. Replacements: /breeze:generate-functional-from-ui (frontend repos), /breeze:generate-functional-from-backend (backend repos). Should almost never auto-trigger on natural-language requests.

Detect user personas from a frontend UI repository by analyzing routes, layouts, subscription tiers, roles, feature flags, and access control patterns. Optionally create or update personas in the Breeze functional graph. Use when: "detect personas", "identify personas", "who uses this app", "find user types", "analyze personas from UI", "persona detector".

Generate design graph (UserJourney, Flow, Page, Component) from functional graph scenarios, enriched by reading the actual frontend UI codebase. Scenario→UserJourney, Step→Flow/Page, Action→Component. Use when: "design from UI", "ui to design graph", "generate design from frontend", "map ui to user journeys".

Generate the System / External System half of the functional graph from a backend repo (REST routes, GraphQL operations, queue / event / cron handlers) using a rooted per-entry-point sub-agent depth pass. The parent discovers entry points; an installed agent (breeze:backend-flow-structuring-agent) processes ONE EP per run — reads the handler + every injected service, enumerates DTO / enum / validation fields, runs a branch & error-path audit, traces side effects, self-validates (schema / rule-a / chain / persona / citations / coverage / polymorphic split), writes the payload to disk, and POSTs directly to /functional-graph/v2/upsert with an api-key header (no MCP argument-size clipping). Use when: generate functional from backend, backend to functional, backend functional pass.

Generate User-persona functional graph from a frontend UI repo with rooted per-(EP, persona) sub-agent depth pass, mandatory field enumeration, persona-conditional visibility audit, CodeGraphSearch escalation (no budget cap), and Python-helper validators (schema / rule-a / forbidden / citations / coverage). Produces upsert-ready payloads with apis[] capture. One sub-agent run per (EP, persona) pair.

Get a source repository into the Breeze code graph for the current project. Wraps the breeze-code-ontology-generator CLI with --capture-statements so method-level statements are available for downstream skills (generate-functional-from-ui, generate-functional-from-backend, generate-code, search). Supports two upload modes: automatic (CLI streams to the backend, needs an API key) or manual (CLI writes ndjson locally and the user uploads via the Breeze UI at /code-ontology/ ). API key is optional — collected on-demand only if the user picks automatic mode. Verifies Node.js is exactly v22.x before running (Node 24 fails silently due to a tree-sitter native-binding + ESM-TLA incompatibility) and resolves the target repo from a path argument or the current directory. Run once per repo. Re-run to re-index after large changes. Use when: "onboard repo", "upload repository", "index repo into breeze", "add repo to project", "ingest codebase", "register code graph", or whenever a Breeze skill reports the project has no code ontology yet.

Create or update nodes in the functional graph (Persona > Outcome > Scenario > Step > Action) from code, documents, or Figma designs. Use when: "update functional graph", "add to graph", "capture this in the functional graph", after analyzing a Figma frame, document, or code cluster.

Validate the functional graph against source documents. Checks coverage, duplicates, persona quality, description completeness, action platform-agnosticism, and citation traceability. Use when: "validate graph", "check graph quality", "compare graph to docs", "audit functional graph", "graph health check".

Generate user stories from UI design visuals (Figma frames, PDF screens, or images) that describe the functional intent behind the visual design, expressed in terms of personas, outcomes, scenarios, steps, and actions. Outputs structured user stories aligned with the functional graph and saves them to a Markdown file. Use when: user shares a Figma URL, PDF, or image design and wants functional user stories, "convert design to user stories", "visual to text", "extract functional intent from design".