I stopped re-explaining my React rules to Claude every session — here's how

Every AI coding session starts from zero.

It doesn't know your team avoids inline objects in JSX. It doesn't know you need ARIA labels on every button. It doesn't know you're migrating from PropTypes to TypeScript.
So it generates generic code. You fix it. You explain the rules again next session. You fix it again.
I got tired of that loop. So I built reactforge-ai-skills — a toolkit that teaches Claude and Copilot your React standards once, and enforces them automatically.

Reactforge-ai-skills is a React codebase health toolkit I built and published this week. It gives your AI assistant a set of rules to follow — and gives you a set of scripts to enforce them automatically.

npm install reactforge-ai-skills --save-dev

Here's exactly what's inside and how to use it.

The problem this solves

• Every time you open a new Claude or Copilot session, your AI starts from zero.
• It doesn’t know your team avoids inline objects in JSX. It doesn’t know you need ARIA labels on every button.
• It doesn’t know you’re migrating from PropTypes to TypeScript.

So it generates generic code. You fix it. You explain the rules again in the next session. You fix it again.

Skill files break that cycle. You load the rules once — your AI follows them every time.

What's included

9 AI Skill Files

Each skill file is a detailed markdown document that teaches your AI assistant the correct patterns for a specific area of React development.

• accessibility-audit WCAG 2.1 compliance rules, ARIA label requirements, keyboard navigation patterns, screen reader support. Load this and your AI stops generating

  and starts generating proper elements with labels.

• performance-optimization When to use React.memo, useCallback, useMemo. Why inline objects in JSX cause unnecessary re-renders. How to use lazy loading and virtualisation for large lists. Missing key prop patterns.

• **typescript-migration **Step-by-step rules for converting JavaScript React components to TypeScript. How to type props, hooks, event handlers, and API responses correctly.

• test-coverage Jest + React Testing Library patterns. How to mock modules, handle async tests, test error states. Why getByRole beats getByTestId.

• css-style-fixes CSS specificity rules, how to structure CSS variables, redundant rule detection, Tailwind migration patterns.

• duplicate-code-detection Patterns for identifying and refactoring duplicated logic. When to extract a custom hook vs a utility function vs a base component.

• react-node-automation Full React and Node.js quality automation patterns — linting, testing, CI configuration.

• dependency-governance npm audit workflow, how to handle vulnerability fixes without breaking changes, bundle size analysis.

• *testcafe-automation * End-to-end testing patterns with TestCafe. Page object model, selector strategies, async handling.

How to load a skill into your AI

Claude Code — add to CLAUDE.md :

cat node_modules/reactforge-ai-skills/skills/accessibility-audit/SKILL.md >> CLAUDE.md

GitHub Copilot — add to instructions:

cat node_modules/reactforge-ai-skills/skills/performance-optimization/SKILL.md >>
 .github/copilot-instructions.md

Copy to clipboard and paste into any AI chat:

# Mac
cat node_modules/reactforge-ai-skills/skills/typescript-migration/SKILL.md | pbcopy

Then paste into Claude, ChatGPT, or Cursor

Combine multiple skills:

cat node_modules/reactforge-ai-skills/skills/accessibility-audit/SKILL.md \
    node_modules/reactforge-ai-skills/skills/performance-optimization/SKILL.md \
    >> CLAUDE.md

19 Automation Scripts

• The scripts scan your actual src/ folder and find real problems.
• No configuration needed — just point them at your source directory.

Analysis scripts

Find accessibility violations — missing ARIA labels, alt text, keyboard support

npm run a11y:check

Find React performance anti-patterns — missing memo, inline objects, effect deps

npm run perf:analyze

Find duplicate code blocks using hash comparison

npm run detect:duplicates

Find import statements that are never used

npm run detect:unused-imports

Find CSS classes defined but never referenced

npm run detect:unused-css

Full dependency audit — vulnerabilities, outdated packages

npm run deps:check

Run ALL checks and save a maintenance report

npm run maintain

Generator scripts

Generate PropTypes from component usage patterns (preview first)

npm run generate:proptypes

Convert PropTypes to TypeScript interfaces

npm run generate:types

Create Jest + RTL test scaffolds for untested components

npm run testcafe:scaffold

Find components with no test files

npm run testcafe:coverage

Fixer scripts

Auto-fix CSS issues — missing units, vendor prefixes, duplicates

npm run css:fix

Preview refactoring suggestions — var→const, !!→Boolean()

npm run refactor:suggest

Apply refactoring changes

npm run refactor:apply

Get Tailwind class equivalents for your CSS

npm run css:convert-tailwind

A real example

I ran npm run a11y:check against my banking POC frontend and it found this:

`INPUT NO LABEL [HIGH] src/components/ChatWidget.jsx:179
  Form input missing label or aria-label
  Fix: Add aria-label="Type your message"

MISSING ALT TEXT [MEDIUM] src/components/Hero.jsx:24  
  Image missing alt attribute
  Fix: Add alt="Description of image"`

Two real bugs. One command.
The component had been in production for weeks.

Run health checks automatically on every pull request:

github/workflows/code-health.yml
name: Code Health
on:
  pull_request:
    branches: [main]
jobs:
  health:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: '20'
      - run: npm ci
      - run: npx reactforge-ai-skills check-accessibility ./src
      - run: npx reactforge-ai-skills detect-duplicates ./src
      - run: npx reactforge-ai-skills deps

Add to package.json

`{
  "scripts": {
    "health": "reactforge-ai-skills audit ./src",
    "health:a11y": "reactforge-ai-skills check-accessibility ./src",
    "health:perf": "reactforge-ai-skills performance ./src",
    "gen:tests": "reactforge-ai-skills gen-tests ./src --write",
    "gen:types": "reactforge-ai-skills gen-typescript ./src"
  }
}`

Live demo

The demo repo runs all 19 scripts against a real React application so you can see actual output before installing.

Demo site: https://kirti.github.io/reactforge-demo/

Npm: https://www.npmjs.com/package/reactforge-ai-skills

GitHub: https://github.com/kirti/reactforge-ai-skills

`npm install reactforge-ai-skills --save-dev`

Built with love by Kirti Kaushal — 15 years of engineering, finally building in public.
Kind is Cool 🙏 share your knowledge

Thank You for Reading ❤️

Thank you for spending your time with us and being part of our learning community.

🌟 Kind is Cool 📚 Share Your Knowledge

🚀 Help Others Grow

If you enjoyed this blog, tutorial, or Instagram post:

👍 Give it a Like
💬 Leave a Comment
🔄 Share it with someone who might find it helpful
⭐ Follow us for more content on AI, Coding, GitHub, Career Growth, and Continuous Learning

🚀 Instagram: @kirti.builds
💻 GitHub: https://github.com/kirti
✍️ Medium: https://medium.com/@kirtikau

Reactforge-ai-skills — 9 AI Skills + 19 Automation Scripts for React Developers

Teach Claude and Copilot your React standards. Enforce them automatically.

kirtikaushal.substack.com

Our Mission

Helping people learn, build, grow, and succeed through technology, education, and community.

“Knowledge becomes more valuable when it is shared.”

“Learn. Build. Share. Grow.”

❤️ Your support, likes, shares, and feedback motivate us to keep creating free educational content for everyone.

Thank you for being part of the journey! 🌱