reactforge-ai-skills

Demo app + testing ground for the reactforge-ai-skills npm package — React codebase health toolkit with 9 AI skills and 19 automation scripts.

---

Live Demo

👉 kirti.github.io/reactforge-ai-skills

---

What this repo is

This is the public demo and test app for the reactforge-ai-skills npm package.

It serves two purposes:

1. Demo site — shows all 9 skills and 19 scripts in an interactive UI (GitHub Pages)
2. Test target — the scripts run against the src/ folder to prove they actually work

reactforge-ai-skills (this repo — public)
  ├── src/          ← React app scripts can actually scan
  ├── scripts/      ← All 19 automation scripts
  ├── skills/       ← 9 AI skill files
  └── dist/         ← Built and deployed to GitHub Pages

---

Quick Start

git clone https://github.com/kirti/reactforge-ai-skills
cd reactforge-ai-skills
npm install
npm run dev
# → http://localhost:5173

---

Test the Scripts

All scripts run against the src/ folder — real output on real React code:

# Accessibility audit
npm run a11y:check  # uses reactforge-ai-skills from node_modules

# Performance analysis
npm run perf:analyze

# Find duplicate code
npm run detect:duplicates

# Check unused imports
npm run detect:unused-imports

# Run everything
npm run maintain

---

All Available Scripts

Analysis

npm run a11y:check  # uses reactforge-ai-skills from node_modules              # ARIA, alt text, keyboard nav
npm run perf:analyze            # React.memo, inline objects, keys
npm run detect:duplicates       # Hash-based duplicate detection
npm run detect:unused-imports   # Dead import statements
npm run detect:unused-css       # Unused CSS classes
npm run css:analyze             # CSS quality report
npm run deps:check              # Dependency vulnerabilities
npm run maintain                # Run ALL checks
npm run maintain:dry-run        # Preview without writing reports

Generators

npm run generate:proptypes      # PropTypes from usage patterns
npm run generate:types          # PropTypes → TypeScript interfaces
npm run testcafe:scaffold       # Jest + RTL test scaffolds
npm run testcafe:generate       # TestCafe E2E test files
npm run testcafe:coverage       # Find untested components

Fixers

npm run css:fix                 # Auto-fix CSS issues
npm run css:convert-tailwind    # CSS → Tailwind suggestions
npm run refactor:suggest        # Preview refactoring changes
npm run refactor:apply          # Apply var→const, !! → Boolean()

---

9 AI Skills

Copy any skill into Claude, Copilot, or Cursor to teach it your React standards:

# Mac — copy to clipboard
cat skills/accessibility-audit/SKILL.md | pbcopy

# Add to Claude Code context
cat skills/performance-optimization/SKILL.md >> CLAUDE.md

# Add to GitHub Copilot
cat skills/typescript-migration/SKILL.md >> .github/copilot-instructions.md

Skill	Teaches AI
accessibility-audit	WCAG, ARIA, keyboard nav, screen readers
performance-optimization	React.memo, useMemo, lazy loading
typescript-migration	Props, hooks, events, API response types
test-coverage	Jest + RTL, mocking, async patterns
css-style-fixes	CSS best practices, specificity, Tailwind
duplicate-code-detection	Refactoring duplicate patterns
react-node-automation	Full React/Node quality automation
dependency-governance	npm audit, vulnerabilities, bundle size
testcafe-automation	E2E testing patterns

---

Deploy to GitHub Pages

# Automatic — push to main branch
git push origin main
# → GitHub Actions builds and deploys automatically

# Manual
npm run build
# Then enable Pages: Settings → Pages → GitHub Actions

Live at: https://kirti.github.io/reactforge-ai-skills/

---

Related

• skillforge-ai — General AI skills for Claude/GPT/Gemini
• zero-code-apps — AI app builder platform

---

Built by Kirti Kaushal — Senior AI/ML + Full Stack Engineer