reactforge-ai-skills

React codebase health toolkit — 9 AI skill files + 19 automation scripts for accessibility, performance, TypeScript migration, test generation, and dependency governance. Works with Claude, GitHub Copilot, Cursor, and any AI assistant.

What is reactforge-ai-skills?

Two things in one package:

1. AI Skills — markdown files that teach your AI assistant the correct React patterns, rules, and code examples. Paste into Claude, Copilot, or Cursor and your AI instantly knows your standards.

2. Automation Scripts — CLI tools that scan your codebase and find real problems: missing ARIA labels, performance anti-patterns, duplicate code, untested components, and vulnerable dependencies.

Skills  → teach your AI the rules
Scripts → catch violations automatically
Together → AI builds it right + CI enforces it

Install

# Install as dev dependency
npm install reactforge-ai-skills --save-dev

# Or run directly without installing
npx reactforge-ai-skills audit ./src

Quick Start — 30 seconds

# 1. Run full health audit on your React project
npx reactforge-ai-skills audit ./src

# 2. Check accessibility issues
npx reactforge-ai-skills check-accessibility ./src

# 3. Find performance anti-patterns
npx reactforge-ai-skills performance ./src

# 4. Generate missing tests (preview first)
npx reactforge-ai-skills gen-tests ./src
npx reactforge-ai-skills gen-tests ./src --write

Sample Output

npx reactforge-ai-skills check-accessibility ./src

♿ Scanning for accessibility issues...

📁 Found 12 component files

════════════════════════════════════════
♿ ACCESSIBILITY REPORT
════════════════════════════════════════

📊 Summary
  Total Issues: 3
  High: 2  |  Medium: 1
  Auto-fixable: 2

🔍 Issues Found

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

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

💡 Run with --fix to auto-apply fixable issues

npx reactforge-ai-skills performance ./src

⚡ Analyzing React Performance Issues...

📁 Scanning 12 files

  ChatWidget.jsx
  ⚠ [LARGE_COMPONENT] 202 lines — consider splitting
     Fix: Extract MessageList and InputBar into separate components
  💡 [MISSING_MEMO] Receives props but not wrapped in React.memo
     Fix: Wrap with React.memo() to prevent unnecessary re-renders
  ✗ [MISSING_KEY] Array .map() at line 41 missing key prop
     Fix: Add key={item.id} to root element

  SpendingChart.jsx
  ⚠ [EFFECT_NO_DEPS] useEffect missing dependency array
     Fix: Add dependency array: useEffect(() => {...}, [userId])

  1 errors  3 warnings  1 suggestions

npx reactforge-ai-skills gen-tests ./src

🧪 Generating Test Scaffolds for Untested Components...

📁 Found 12 component files

✓ 8 components already have tests
⚠  4 components need tests

  ChatWidget       → src/components/ChatWidget.test.jsx
  ProductCarousel  → src/components/ProductCarousel.test.jsx
  Hero             → src/components/Hero.test.jsx
  SpendingChart    → src/components/SpendingChart.test.jsx

💡 Run with --write to generate all test files automatically

All 19 Scripts

🔍 Analysis

| Command | What it does | |---------|-------------| | audit | Runs ALL checks — full health report in one command | | analyze-css | CSS quality, specificity issues, redundant rules | | detect-duplicates | Duplicate code blocks using hash comparison | | detect-unused-css | CSS classes defined but never used | | detect-unused-imports | Import statements never referenced | | detect-slow | React components with performance anti-patterns | | detect-untested | Components without test files | | check-accessibility | ARIA labels, alt text, roles, keyboard navigation | | performance | Missing memo, inline objects, missing keys, effect deps | | duplication-report | Detailed JSON + Markdown duplication report |

⚙️ Generators

| Command | What it does | |---------|-------------| | gen-proptypes | Generates PropTypes from component usage patterns | | gen-typescript | Converts PropTypes → TypeScript interfaces | | gen-tests | Creates Jest + RTL test scaffolds for untested components | | gen-testcafe | Generates TestCafe E2E test files |

🔧 Fixers

| Command | What it does | |---------|-------------| | fix-css | Auto-fixes missing units, duplicate properties, vendor prefixes | | refactor | Converts var → const/let, !! → Boolean(), flags == | | to-tailwind | Maps CSS declarations to Tailwind class equivalents |

📦 Dependencies

| Command | What it does | |---------|-------------| | deps | Full dependency audit — vulnerabilities, outdated, unused | | validate-skills | Validates AI skill files format |

9 AI Skills

Paste these into Claude, Copilot, Cursor, or any AI assistant to teach it your React standards.

| Skill | Use when... | |-------|------------| | accessibility-audit | WCAG, ARIA, keyboard navigation, screen readers | | performance-optimization | Re-renders, memo, useMemo, lazy loading, virtualisation | | typescript-migration | Converting JS→TS, typing props, hooks, API responses | | test-coverage | Jest + RTL patterns, mocking, async testing | | dependency-governance | npm audit, vulnerability fixes, bundle size | | react-node-automation | Full React/Node quality automation patterns | | css-style-fixes | CSS best practices, specificity, Tailwind migration | | duplicate-code-detection | Finding and refactoring duplicate patterns | | testcafe-automation | E2E testing with TestCafe |

How to use a skill

Option 1 — Copy to clipboard (Mac):

cat node_modules/reactforge-ai-skills/skills/accessibility-audit/SKILL.md | pbcopy
# Paste into Claude, ChatGPT, or Cursor as context

Option 2 — Add to CLAUDE.md (Claude Code):

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

Option 3 — GitHub Copilot instructions:

cat node_modules/reactforge-ai-skills/skills/typescript-migration/SKILL.md >> .github/copilot-instructions.md
git add .github/copilot-instructions.md
git commit -m "ci: add reactforge TypeScript skill to Copilot"

Option 4 — Combine multiple skills:

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

Real World Examples

Run before every PR merge

npx reactforge-ai-skills audit ./src

Migrate PropTypes to TypeScript

# Step 1 — See what interfaces would be generated
npx reactforge-ai-skills gen-typescript ./src

# Step 2 — Apply
npx reactforge-ai-skills gen-typescript ./src --write

# Step 3 — Paste TypeScript skill into Claude
cat node_modules/reactforge-ai-skills/skills/typescript-migration/SKILL.md | pbcopy
# Ask Claude: "Help me finish migrating this file to TypeScript"

Fix accessibility before shipping

# Step 1 — Find all issues
npx reactforge-ai-skills check-accessibility ./src

# Step 2 — Paste accessibility skill into Claude
cat node_modules/reactforge-ai-skills/skills/accessibility-audit/SKILL.md | pbcopy
# Ask Claude: "Fix the accessibility issues in ChatWidget.jsx"

Generate tests for legacy code

# Step 1 — Find untested components
npx reactforge-ai-skills detect-untested ./src

# Step 2 — Generate scaffolds
npx reactforge-ai-skills gen-tests ./src --write

# Step 3 — Paste test-coverage skill into Claude
cat node_modules/reactforge-ai-skills/skills/test-coverage/SKILL.md | pbcopy
# Ask Claude: "Fill in the TODOs in the generated test files"

Add to CI/CD (GitHub Actions)

# .github/workflows/code-health.yml
name: Code Health

on:
  pull_request:
    branches: [main, master]

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

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

Then run:

npm run health
npm run health:a11y
npm run gen:tests

Generated Report Files

Scripts save reports locally for review:

| Script | Output file | |--------|------------| | check-accessibility | accessibility-report.json | | detect-duplicates | duplication-report.json | | analyze-css | css-analysis-report.json | | audit | maintenance-report.json | | detect-unused-css | unused-css-report.json | | detect-slow | performance-report.json |

Add *-report.json to your .gitignore — these are local outputs, not source files.

Related

• skillforge-ai — General-purpose AI skill files for Claude/GPT/Gemini
• zero-code-apps — AI app builder (Claude/GPT-4o/Gemini streaming)

*Built by Kirti Kaushal