lang-jsx

Standardize React and JSX code quality with functional components and hook rules.

Updated Mar 19, 2026

Search Tags:#frontend #react #components #hooks #eslint #prettier #jsx

Ready to run

npx skills add https://github.com/dragoscirjan/opencode-config --skill lang-jsx

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: lang-jsx
Source: https://github.com/dragoscirjan/opencode-config/tree/main/skills/lang-jsx
Command: npx skills add https://github.com/dragoscirjan/opencode-config --skill lang-jsx

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps teams write consistent, maintainable React and JSX code by turning common front-end conventions into clear, reusable rules.

Core Features & Use Cases

Component Standards: Encourages functional components, clean composition, and colocated styles and tests.
Hook and Render Guidance: Reinforces correct hook usage, stable keys for lists, and practical use of memoization only when needed.
Use Case: Use it when reviewing a new UI component, refactoring an existing React screen, or aligning a team on shared JSX patterns.

Quick Start

Apply the lang-jsx skill to review or draft React and JSX code that follows these standards.

Frequently Asked Questions about lang-jsx

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

FAQPage Schema

How do I write cleaner React components and standardize JSX code quality?▼

React hook usage requires rules-of-hooks compliance to prevent runtime errors. This Skill reinforces correct hook usage, stable keys for list rendering, and practical memoization only when needed.

How do I ensure stable unique keys when rendering lists in React?▼

Ensure stable unique keys when rendering lists in React by applying standardized JSX conventions. This Skill mandates stable unique keys for reliable rendering and composition-first architecture.

Can I use this Skill for refactoring existing React screens in TypeScript projects?▼

Yes, you can use this Skill for refactoring existing React screens in TypeScript projects. It applies to component authoring, hook usage, testing, and refactoring in JavaScript and TypeScript environments.

What is the best way to align a team on shared JSX patterns and conventions?▼

The best way to align a team on shared JSX patterns is to standardize React code quality. This Skill turns common front-end conventions into clear, reusable rules for component standards and hook guidance.

When should I not use memoization in functional React components?▼

You should not use memoization in functional React components unless specifically needed. This Skill provides hook and render guidance that encourages practical use of memoization only when necessary for performance.