jsx-ui-audit

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

Updated May 12, 2026

Search Tags:#react #conventions #best-practices #jsx #design-systems #ui-audit

Ready to run

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

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

The skill helps ensure JSX UI work respects project-specific conventions before authoring or refactoring components, reducing inconsistencies and over-reliance on external design-system references when local standards exist.

Core Features & Use Cases

Scans a project to detect existing UI conventions, patterns, and component organization.
Guides whether to reuse local patterns or adopt external best-practices (antd, shadcn, radix) when local standards are weak or missing.
Outputs an implementation decision summary to inform downstream coding or design work.

Quick Start

Inspect a React project and run the audit to decide between local conventions or external best-practice references.

Frequently Asked Questions about jsx-ui-audit

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

FAQPage Schema

How do I audit existing JSX UI conventions before adding new React components?▼

Auditing JSX UI conventions involves scanning your project to detect existing patterns and component organization. This determines whether to reuse local standards or adopt external best-practice references, ensuring consistent style and interaction models across your React project.

When do I need to check project UI conventions versus using an external design system?▼

You need to check project UI conventions before writing or refactoring JSX components to prevent inconsistencies. This determines whether your project's local standards are strong enough to follow or if you should fallback to external guidance like antd, shadcn, or radix.

What is the best way to decide between local React patterns and external best-practice references?▼

The best way to decide is to evaluate project convention strength and current implementation. This produces a decision summary recommending whether to follow local conventions or fallback to antd, shadcn, or radix-like guidance based on the audit results.

Does this UI convention audit work with Preact and Fresh projects?▼

Yes, the UI convention audit applies to React, Preact, and Fresh projects. It inspects your JSX components to determine if you should reuse local standards or adopt external best-practice references for adding, refactoring, or auditing UI patterns.

How do I get a decision summary for reusing local standards or adopting external UI guidance?▼

Run a UI audit on your JSX components to generate a decision summary. This summary recommends specific sources and confirms whether to follow your project's local conventions or fallback to external design systems based on convention strength.