flow-jsx-ui

Orchestrate JSX UI development by routing tasks through boundary analysis and audits.

Updated May 12, 2026

Search Tags:#ui #react #orchestration #best-practices #jsx #ui-audit #boundary-analysis

Ready to run

npx skills add https://github.com/YeomanYe/skills --skill flow-jsx-ui

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: flow-jsx-ui
Source: https://github.com/YeomanYe/skills/tree/main/flow-jsx-ui
Command: npx skills add https://github.com/YeomanYe/skills --skill flow-jsx-ui

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Coordinating JSX UI projects across discovery, boundary analysis, and implementation loops so teams can reliably deliver maintainable UI components.

Core Features & Use Cases

Orchestrates the end-to-end JSX UI workflow by coordinating ui-extract, jsx-ui-audit, and best-practice skills.
Supports new UI creation, modification, refactoring, and component extraction with clear boundary decisions.
Enables automated review loops until the delivered UI complies with local conventions and project standards.

Quick Start

Analyze a given UI task, then invoke flow-jsx-ui to determine task type, trigger boundary analysis if needed, and route work through audit and implementation steps.

Frequently Asked Questions about flow-jsx-ui

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

FAQPage Schema

How do I orchestrate end-to-end JSX UI component development?▼

You orchestrate JSX UI development by analyzing a task, triggering boundary analysis, and routing work through audit and implementation steps. This enforces a round-trip workflow ensuring UI complies with local conventions and project standards.

What is component boundary analysis in React and Preact ecosystems?▼

Component boundary analysis determines how to split or extract JSX UI elements into distinct, maintainable parts. It supports new UI creation, modification, refactoring, and component extraction by making clear boundary decisions before implementation begins.

Can I use this workflow to refactor and extract components in Fresh?▼

Yes, the workflow applies to creating, updating, refactoring, or extracting components in Fresh, React, Preact, and similar JSX ecosystems. It routes tasks through boundary analysis, ui-extract, and jsx-ui-audit decisions for compliant implementation.

How do I validate React UI components against project best practices?▼

You validate React UI components by routing implementation through automated review loops using jsx-ui-audit decisions. This enforces a round-trip workflow that continues until the delivered UI complies with local conventions and project standards.

What's the best way to manage JSX UI modification and refactoring loops?▼

The best way to manage JSX UI modification is orchestrating a round-trip workflow consisting of boundary analysis, ui-extract, jsx-ui-audit decisions, and final implementation validation. This coordinates discovery and implementation loops for reliable component delivery.