react-coding-standards

Enforce React and TypeScript coding standards using Avoid and Prefer rules.

Updated Feb 20, 2026
One-click install
npx skills add https://github.com/Lichens-Innovation/ai-dev-tools --skill react-coding-standards
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: react-coding-standards
Source: https://github.com/Lichens-Innovation/ai-dev-tools/tree/main/skills/react-coding-standards
Command: npx skills add https://github.com/Lichens-Innovation/ai-dev-tools --skill react-coding-standards

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Enforces internal React and TypeScript coding standards using avoid/prefer rules. Use when reviewing or refactoring React/TS code, applying company standards, or when the user asks to align code with coding standards.

Core Features & Use Cases

  • Avoid and Prefer rule enforcement across in-code patterns, naming, React patterns, and tests using the project's references.
  • Three-phase workflow: collect violations, apply corrective patterns, and report results to teams and linters.
  • Use case: when onboarding new developers, during code reviews, or while refactoring to ensure consistency with company standards.

Quick Start

Inspect the repository to identify deviations from the standards and apply the recommended Avoid/Prefer corrections to React and TypeScript code.

Frequently Asked Questions about react-coding-standards

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

FAQPage Schema
How do I enforce React and TypeScript coding standards automatically?

You enforce React and TypeScript coding standards by applying Avoid and Prefer rules to in-code patterns. This tool scans components, hooks, and tests to identify naming or pattern violations and suggests safe, non-breaking improvements.

What is the best way to align React code with company naming and lint patterns during onboarding?

The best way to align React code with company naming and lint patterns is using a three-phase workflow: collect pattern violations, apply corrective Avoid and Prefer rules, and report results to teams and linters for consistent codebase alignment.

How do I refactor TypeScript code to fix React anti-patterns?

To refactor TypeScript code and fix React anti-patterns, inspect the repository against YAML frontmatter metadata and reference files. It collects deviations and applies corrective patterns to ensure consistency during code reviews.

Does this coding standards enforcement work with existing test utilities and custom hooks?

Yes, coding standards enforcement works with existing test utilities and custom hooks. It applies Avoid and Prefer rules across typical React and TypeScript projects to address naming conventions, pattern violations, and lint concerns.

What are the limitations of using Avoid and Prefer rules for React pattern correction?

The limitation of using Avoid and Prefer rules for React pattern correction is that it relies on YAML frontmatter metadata and reference files, meaning it suggests safe, non-breaking improvements rather than automatically rewriting complex structural logic.