DEV Community

Cover image for I stopped re-explaining my React rules to Claude every session — here's how
kirti kaushal
kirti kaushal

Posted on • Originally published at substack.com

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

#ai #webdev #programming #productivity

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

GitHub Copilot — add to instructions:

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

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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

npm run perf:analyze
Enter fullscreen mode Exit fullscreen mode

Find duplicate code blocks using hash comparison

npm run detect:duplicates
Enter fullscreen mode Exit fullscreen mode

Find import statements that are never used

npm run detect:unused-imports
Enter fullscreen mode Exit fullscreen mode

Find CSS classes defined but never referenced

npm run detect:unused-css
Enter fullscreen mode Exit fullscreen mode

Full dependency audit — vulnerabilities, outdated packages

npm run deps:check
Enter fullscreen mode Exit fullscreen mode

Run ALL checks and save a maintenance report

npm run maintain
Enter fullscreen mode Exit fullscreen mode

Generator scripts

Generate PropTypes from component usage patterns (preview first)

npm run generate:proptypes
Enter fullscreen mode Exit fullscreen mode

Convert PropTypes to TypeScript interfaces

npm run generate:types
Enter fullscreen mode Exit fullscreen mode

Create Jest + RTL test scaffolds for untested components

npm run testcafe:scaffold
Enter fullscreen mode Exit fullscreen mode

Find components with no test files

npm run testcafe:coverage
Enter fullscreen mode Exit fullscreen mode

Fixer scripts

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

npm run css:fix
Enter fullscreen mode Exit fullscreen mode

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

npm run refactor:suggest
Enter fullscreen mode Exit fullscreen mode

Apply refactoring changes

npm run refactor:apply
Enter fullscreen mode Exit fullscreen mode

Get Tailwind class equivalents for your CSS

npm run css:convert-tailwind
Enter fullscreen mode Exit fullscreen mode

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"
Enter fullscreen mode Exit fullscreen mode 
MISSING ALT TEXT [MEDIUM] src/components/Hero.jsx:24  
  Image missing alt attribute
  Fix: Add alt="Description of image"`
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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"
  }
}`
Enter fullscreen mode Exit fullscreen mode

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/
Enter fullscreen mode Exit fullscreen mode 
Npm: https://www.npmjs.com/package/reactforge-ai-skills
Enter fullscreen mode Exit fullscreen mode 
GitHub: https://github.com/kirti/reactforge-ai-skills

`npm install reactforge-ai-skills --save-dev`
Enter fullscreen mode Exit fullscreen mode

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.

favicon 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! 🌱

Top comments (0)