skills.rest
YeomanYe
YeomanYeCOMMUNITY
Explore all skills by this author →
GitHub

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
One-click install
npx skills add https://github.com/YeomanYe/skills --skill flow-jsx-ui
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
YeomanYeYeomanYe

jsx-ui-audit

Audit React/Preact/Fresh projects to decide between local UI conventions and external references.

Community
Advanced
fabiolpgomesfabiolpgomes

checklist-runner

Execute automated validation of tasks against Markdown-based project checklists and generate status reports.

Community
Intermediate
0xHoneyJar0xHoneyJar
2

validating

Validate UI sprint components' physics and rigor compliance via Markdown reports.

Official
Intermediate
nguyenthienthanhnguyenthienthanh
24

react-expert

Apply React best practices to component design and state management.

Community
Advanced