Google AI Studio → Production React/TypeScript Refactoring

Input: $ARGUMENTS

Auto-detected Project Context

• package.json: !cat package.json 2>/dev/null | head -20 || echo "Not found"
• tsconfig.json: !cat tsconfig.json 2>/dev/null | head -10 || echo "Not found"
• Vite config: !ls vite.config.* 2>/dev/null || echo "Not found"
• Source structure: !ls -d src/ components/ services/ 2>/dev/null || echo "Flat structure"

Overview

Refactor React/TypeScript frontend code generated by Google AI Studio (Gemini) to production-grade conventions. AI Studio produces functional prototypes but with 25 systematic anti-patterns that must be fixed before production use.

This skill applies conventions from three real production projects:

• DahuAdmin — CRM (React + Vite + TailwindCSS + Zustand)
• place2work — Job platform (React + Vite + TailwindCSS + i18next)
• font-dahu — Marketing site (React + Vite + TailwindCSS + i18next + lazy loading)

Anti-Pattern Score

Score: ___ / 25 anti-patterns detected

Score Interpretation

Target: 0 anti-patterns remaining (all P0 + P1 at minimum)

Step 1: Scan Anti-Patterns

Run a full scan of the codebase. For each anti-pattern, Grep/Glob to detect its presence and fill the “Detected” column in the score table.

# Automated scan — run all checks at once
echo "=== AI Studio Anti-Pattern Scan ==="
echo "[1] Tailwind CDN:"; grep -rl "cdn.tailwindcss.com" . --include="*.html" 2>/dev/null || echo "  CLEAN"
echo "[2] ESM.sh:"; grep -rl "esm.sh" . --include="*.html" 2>/dev/null || echo "  CLEAN"
echo "[3] metadata.json:"; find . -name "metadata.json" -not -path "*/node_modules/*" 2>/dev/null || echo "  CLEAN"
echo "[4] No src/:"; test -d src && echo "  CLEAN" || echo "  DETECTED: flat structure"
echo "[5] export default:"; grep -rl "export default" . --include="*.tsx" --include="*.ts" 2>/dev/null | head -5 || echo "  CLEAN"
echo "[6] API key exposed:"; grep -rl "process\.env\.API_KEY\|process\.env\.GEMINI\|VITE_.*KEY\|VITE_.*SECRET\|VITE_.*TOKEN" . --include="*.ts" --include="*.tsx" --include="*.env*" 2>/dev/null | grep -v ".env.example" || echo "  CLEAN"
echo "[7] No i18n:"; grep -rql "useTranslation" . --include="*.tsx" 2>/dev/null && echo "  CLEAN" || echo "  DETECTED: no useTranslation"
echo "[7b] Hardcoded Zod messages:"; grep -rn "\.min(\|\.max(" . --include="*.ts" 2>/dev/null | grep -v node_modules | grep "'[A-Z]" | head -5 || echo "  CLEAN"
echo "[7c] Hardcoded sr-only:"; grep -rn "sr-only" . --include="*.tsx" 2>/dev/null | grep -v "t(" | grep -v node_modules | head -5 || echo "  CLEAN"
echo "[8] React.FC:"; grep -rl "React\.FC\|React\.FunctionComponent" . --include="*.tsx" 2>/dev/null | head -5 || echo "  CLEAN"
echo "[8b] import React:"; grep -rl "^import React" . --include="*.tsx" 2>/dev/null | head -5 || echo "  CLEAN"
echo "[9] strict mode:"; grep -l '"strict": true\|"strict":true' tsconfig.json 2>/dev/null || echo "  DETECTED: no strict mode"
echo "[10] catch any:"; grep -rn "catch.*any" . --include="*.ts" --include="*.tsx" 2>/dev/null || echo "  CLEAN"
echo "[11] Inline SVG:"; grep -rl "<svg.*viewBox" . --include="*.tsx" 2>/dev/null | head -5 || echo "  CLEAN"
echo "[12] No cn():"; grep -rql "cn(" . --include="*.tsx" --include="*.ts" 2>/dev/null && echo "  CLEAN" || echo "  DETECTED: no cn() utility"
echo "[15] Prompts in code:"; grep -rn 'prompt.*=.*`' . --include="*.ts" --include="*.tsx" 2>/dev/null | grep -v "constants/" | grep -v "node_modules/" || echo "  CLEAN"
echo "[16] Unsafe JSON.parse:"; grep -rn "JSON.parse" . --include="*.ts" --include="*.tsx" 2>/dev/null || echo "  CLEAN"
echo "[17] ErrorBoundary:"; grep -rl "ErrorBoundary" . --include="*.tsx" 2>/dev/null || echo "  DETECTED: no ErrorBoundary"
echo "[18] Lazy loading:"; grep -rl "React.lazy\|lazy(" . --include="*.tsx" 2>/dev/null || echo "  DETECTED: no lazy loading"
echo "[19] No Zod:"; grep -rql "z\.object\|z\.string\|zodResolver" . --include="*.ts" --include="*.tsx" 2>/dev/null && echo "  CLEAN" || echo "  DETECTED: no Zod validation"
echo "[20] manualChunks:"; grep -l "manualChunks" vite.config.* 2>/dev/null || echo "  DETECTED: no manualChunks"
echo "[21] No tests:"; find . -name "*.test.ts" -o -name "*.test.tsx" 2>/dev/null | head -1 | grep -q . && echo "  CLEAN" || echo "  DETECTED: no test files"
echo "[22] No ESLint:"; ls eslint.config.* 2>/dev/null | head -1 | grep -q . && echo "  CLEAN" || echo "  DETECTED: no ESLint config"
echo "[23] No aria-labels:"; grep -rql "aria-label" . --include="*.tsx" 2>/dev/null && echo "  CLEAN" || echo "  DETECTED: no aria-labels"
echo "[24] Boolean isLoading:"; grep -rn "isLoading" . --include="*.ts" --include="*.tsx" 2>/dev/null | grep -v "node_modules/" | head -3 || echo "  CLEAN (uses status)"
echo "[25] .env in .gitignore:"; grep -q "^\.env$\|^\.env\.\|^\.env\.local" .gitignore 2>/dev/null && echo "  CLEAN" || echo "  DETECTED: .env not in .gitignore"
echo "=== Scan Complete ==="

Report the scan results and total count before proceeding. If fewer than 3 anti-patterns are found, confirm with the user that this is AI Studio code.

Step 2: Refactoring Workflow

Apply fixes in priority order. Each step links to a detailed guide.

Priority P0 — Blocking for production

Priority P1 — Important for quality

Priority P2 — Recommended

Priority P3 — If applicable

Reference

For each step:

1. Read the linked guide
2. Apply the transformation
3. Run npx tsc --noEmit to verify TypeScript compiles
4. Move to the next step

Step 3: Delete AI Studio Artifacts

Remove these files/elements that are AI Studio-specific:

• metadata.json — AI Studio project descriptor
• <script src="https://cdn.tailwindcss.com"> in index.html
• <script type="importmap"> block in index.html
• Any ESM.sh imports (https://esm.sh/...)
• postcss.config.js and tailwind.config.js (Tailwind v4 uses Vite plugin)

Safety Checklist

Before applying ANY fix, verify:

Pre-Fix Verification

• npx tsc --noEmit passes (or note existing errors)
• npm run build succeeds (if Vite is configured)
• Note current file count and structure

Post-Fix Verification

• npx tsc --noEmit still passes (no new errors introduced)
• npm run build still succeeds
• npm run test passes (if tests exist)
• npm run lint passes (if ESLint configured)
• No files accidentally deleted

High-Risk Changes (Extra Care)

Ralph Mode (Autonomous Loop)

Run with --ralph to enable autonomous refactoring loop until all P0+P1 anti-patterns are resolved.

Usage

/google-aistudio-refacto --ralph ./path/to/project

The Loop

┌─────────────────────────────────────────────────────────────┐
│  RALPH MODE — Autonomous Refactoring Loop                    │
├─────────────────────────────────────────────────────────────┤
│                                                              │
│  ┌──────────┐    ┌──────────┐    ┌──────────┐              │
│  │  SCAN    │───▶│   FIX    │───▶│  BUILD   │──┐           │
│  │  25 anti │    │  Top P0  │    │  tsc +   │  │           │
│  │  patterns│    │  first   │    │  vite    │  │           │
│  └──────────┘    └──────────┘    └──────────┘  │           │
│       ▲                                         │           │
│       │         P0+P1 anti-patterns > 0?         │           │
│       └─────────────────────────────────────────┘           │
│                                                              │
│               P0+P1 = 0? ──▶ DONE                           │
│                                                              │
└─────────────────────────────────────────────────────────────┘

How It Works

1. Run the full 25-pattern scan (Step 1)
2. Pick the highest-priority remaining anti-pattern (P0 first)
3. Read the corresponding doc and apply the fix
4. Run npx tsc --noEmit to verify no breakage
5. Git commit the fix: fix: resolve anti-pattern #N — <description>
6. Re-scan and loop

Security Checkpoint (before fixing #6)

1. Backend proxy exists — verify config API endpoint
2. .env is in .gitignore — if not, fix #25 first
3. No VITE_.*KEY|SECRET|TOKEN in .env.example values

If no backend proxy exists: STOP and report. The API key cannot be removed from the client without a backend proxy.

Exit Conditions

Safety Guards

• Max 25 iterations to prevent infinite loops
• Build check (npx tsc --noEmit) after every fix
• Git commit after each successful fix (rollback possible)
• One anti-pattern per iteration — small, verifiable steps
• P0 before P1 before P2 — never skip priority order

Execution Checklist

Final Results

After all refactoring, present results clearly:

Results Summary

Overall Status

Changes Applied

List each fix with the file modified:

1. [Fix description] — path/to/file
2. …

Remaining Issues (if any)

Document issues that couldn’t be fixed and explain why:

• [Issue] — [Reason / Limitation]