react-tsx-readability-guard
CommunityMake React/TSX code cleaner and more readable.
AuthorMiss-PinkElf
Version1.0.0
Installs0
System Documentation
What problem does it solve?
React and TSX code often becomes hard to read and maintain as complexity grows. This skill enforces clear structure, semantic names, and readable JSX to help teammates understand intent quickly.
Core Features & Use Cases
- Enforces semantic naming, reduces magic numbers by introducing named constants.
- Improves JSX readability by extracting logic out of render paths and organizing conditional rendering.
- Applies to creating, refactoring, and reviewing React components, TSX pages, and Ant Design UI patterns like Form, Table, Modal, Drawer.
- Includes optional guidance for commenting and structuring code without over-abstracting.
Quick Start
Refactor a React/TSX component to improve readability while preserving behavior.
Dependency Matrix
Required Modules
None requiredComponents
Standard package💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: react-tsx-readability-guard Download link: https://github.com/Miss-PinkElf/Multi-Agent/archive/main.zip#react-tsx-readability-guard Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.