setup-react-rules

Enforce React/TypeScript quality and security rules via PostToolUse hooks.

3|1|Updated Mar 23, 2026

Search Tags:#typescript #security #frontend #react #code-quality #best-practices #lint

Ready to run

npx skills add https://github.com/malinskibeniamin/skills --skill setup-react-rules

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: setup-react-rules
Source: https://github.com/malinskibeniamin/skills/tree/main/setup-react-rules
Command: npx skills add https://github.com/malinskibeniamin/skills --skill setup-react-rules

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

Enforce React/TS/security rules via PostToolUse hooks to ban unsafe patterns, reduce XSS risks, and standardize component-library usage across code changes.

Core Features & Use Cases

Enforced rules cover HTML usage, TS escape hatches, dangerouslySetInnerHTML, eval/new Function, barrel imports, and missing passive listeners.
Automatic checks run during Edit/Write to skip component-library directories as needed, ensuring consistent coding standards.
Use cases include code reviews, CI gate checks, and contributor onboarding to maintain a secure, accessible UI codebase.

Quick Start

Install and enable the skill in your Claude environment to automatically enforce React rules during edits.

Frequently Asked Questions about setup-react-rules

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

FAQPage Schema

How do I enforce React and TypeScript security rules automatically during code edits?▼

React and TypeScript security rules are enforced automatically during edits using PostToolUse hooks that detect unsafe patterns like raw HTML, eval, and barrel imports in frontend code changes.

What React XSS vulnerabilities should I check for in my frontend codebase?▼

React XSS vulnerabilities include dangerouslySetInnerHTML usage, unsafe TypeScript escape hatches, and raw HTML injection, which pattern validation checks identify and block across component and hook edits.

How do I prevent dangerous code patterns like eval in a React project?▼

Dangerous patterns like eval and new Function are prevented by automated script hooks that validate code changes against hardening rules, blocking unsafe execution patterns during the edit and write process.

Can I configure React linting rules to skip component library directories?▼

React linting rules can skip component library directories using opt-in controls via environment variables, allowing automated checks to exclude specific paths while maintaining coding standards elsewhere.

Does this React code quality enforcement tool work with TypeScript projects?▼

React code quality enforcement works with TypeScript projects by validating type safety, checking TS escape hatches, and standardizing component-library imports across frontend code changes.

What's the best way to standardize React component imports and prevent barrel file issues?▼

Standardizing React component imports and preventing barrel file issues is handled by automated checks that detect improper barrel imports during edits, ensuring consistent module usage across the codebase.