react-syntax-jsx
OfficialCraft robust JSX/TSX in React with best practices
AuthorOpenAEC-Foundation
Version1.0.0
Installs0
System Documentation
What problem does it solve?
JSX/TSX coding in React can be error-prone due to common pitfalls such as unstable keys, incorrect attribute mappings, and unsafe use of spread props. This guide provides structured patterns and anti-patterns to improve reliability and readability.
Core Features & Use Cases
- JSX/TSX syntax guidance, including expressions, conditional rendering, lists with keys, and fragments.
- Typing components with TypeScript, including props interfaces and generic components.
- Best practices for spread attributes, boolean attributes, and avoiding common anti-patterns.
- Use cases spanning UI components, lists rendering, and polymorphic components with TypeScript generics.
Quick Start
Refactor a sample JSX component to apply stable keys, correct attributes, and safe conditional rendering.
Dependency Matrix
Required Modules
None requiredComponents
references
💻 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-syntax-jsx Download link: https://github.com/OpenAEC-Foundation/React-Claude-Skill-Package/archive/main.zip#react-syntax-jsx 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.