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

Anti-pattern Scan command Detected Fixed

1 Tailwind CDN Grep: cdn.tailwindcss.com

2 ESM.sh import maps Grep: esm.sh

3 metadata.json artifact Glob: **/metadata.json

4 Flat structure (no src/) Bash: ls -d src/ 2>/dev/null

5 export default

Grep: export default

6 API key exposed Grep: process.env.API_KEY

7 Hardcoded French strings Grep: useTranslation (absent)

8 React.FC / import React

Grep: React.FC|import React

9 No strict: true

Grep: "strict": true (absent)

10 catch (err: any)

Grep: catch.*any

11 Inline SVG Grep: <svg.*viewBox

12 No cn() utility Grep: cn( (absent)

13 Prop drilling Manual check

14 Hardcoded data in components Manual check

15 Prompts mixed in code Grep: prompt.=.\x60

16 JSON.parse without try/catch Grep: JSON.parse

17 No ErrorBoundary Grep: ErrorBoundary (absent)

18 No lazy loading Grep: React.lazy|lazy( (absent)

19 No Zod validation Grep: z.object|z.string (absent)

20 No manualChunks Grep: manualChunks (absent)

21 No tests Glob: **/*.test.{ts,tsx} (absent)

22 No ESLint config Glob: eslint.config.* (absent)

23 No aria-labels Grep: aria-label (absent)

24 Boolean isLoading (no state machine) Grep: isLoading

25 .env not in .gitignore

Grep: ^.env in .gitignore

Score: ___ / 25 anti-patterns detected

Score Interpretation

Score Status Action

0 PASSED No AI Studio patterns remaining

1-5 GOOD Minor cleanup needed

6-14 NEEDS WORK Significant refactoring required

15-25 AI STUDIO RAW Full refactoring needed

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

Step What Guide Anti-patterns

1 Project structure: flat root → feature-based src/

docs/01-project-structure.md #4, #5

2 Tailwind: CDN → Tailwind v4 Vite plugin + cn() utility docs/02-tailwind-config.md #1, #12

3 API & Security: exposed keys → env config + fetch service docs/06-api-services.md #6, #15

3b Security: .env in .gitignore

docs/06-api-services.md #25

Priority P1 — Important for quality

Step What Guide Anti-patterns

4 TypeScript: strict mode + modern patterns docs/03-typescript-strict.md #8, #9, #10

5 Icons: inline SVG → Lucide React docs/07-icons-and-assets.md #11

6 Code quality: ErrorBoundary + safe JSON + cleanup docs/10-code-quality.md #16, #17

7 Testing: Vitest + RTL + MSW docs/11-testing-setup.md #21

8 Linting: ESLint 9 + Prettier docs/12-linting-formatting.md #22

Priority P2 — Recommended

Step What Guide Anti-patterns

9 i18n: hardcoded strings → i18next docs/04-i18n-setup.md #7

10 Performance: lazy loading + Vite chunks docs/08-performance.md #2, #18, #20

11 Accessibility: aria-labels + keyboard nav docs/13-accessibility.md #23

Priority P3 — If applicable

Step What Guide Anti-patterns

12 State management: boolean → state machine + Zustand docs/05-state-management.md #13, #24

13 Forms & validation: useState → RHF + Zod docs/09-forms-validation.md #14, #19

Reference

Guide What it covers

docs/14-troubleshooting.md Common errors and fixes by phase

For each step:

• Read the linked guide

• Apply the transformation

• Run npx tsc --noEmit to verify TypeScript compiles

• 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)

Change Type Risk Verification

Restructure to src/ Import paths break npx tsc --noEmit

Remove Tailwind CDN Styles disappear npm run build

• visual check

Tailwind v3 → v4 Config files change Delete old configs first

Remove API key from client App stops working Verify backend proxy exists

Replace axios → fetch API calls change Check response.ok pattern

Replace export default All imports break npx tsc --noEmit

Replace isLoading → status Store API changes Update all consumers

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

• Run the full 25-pattern scan (Step 1)

• Pick the highest-priority remaining anti-pattern (P0 first)

• Read the corresponding doc and apply the fix

• Run npx tsc --noEmit to verify no breakage

• Git commit the fix: fix: resolve anti-pattern #N — <description>

• Re-scan and loop

Security Checkpoint (before fixing #6)

• Backend proxy exists — verify config API endpoint

• .env is in .gitignore — if not, fix #25 first

• 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

Condition Action

All P0+P1 anti-patterns fixed PASSED

npm run build fails and can't be fixed after 2 retries STOP — report issue

Anti-pattern count unchanged after 3 consecutive scans STOP — manual intervention

Max 25 iterations reached STOP — report remaining issues

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

Task Priority Status

1 Run full 25-pattern scan Setup [ ]

2 Fill Anti-Pattern Score table Setup [ ]

3 Pre-fix verification (Safety Checklist) Safety [ ]

4 Create src/ structure + move files P0 [ ]

5 Replace export default → named exports P0 [ ]

6 Remove Tailwind CDN, install Tailwind v4 P0 [ ]

7 Create cn() utility P0 [ ]

8 Secure API key, create config/env.ts

P0 [ ]

8b Verify .env in .gitignore

P0 [ ]

9 Replace axios → native fetch P0 [ ]

10 Extract prompts to constants/

P0 [ ]

11 Enable strict: true in tsconfig P1 [ ]

12 Remove React.FC

• import React

P1 [ ]

13 Fix catch (err: any) → unknown

P1 [ ]

14 Replace inline SVG → Lucide React P1 [ ]

15 Add ErrorBoundary P1 [ ]

16 Wrap JSON.parse in try/catch P1 [ ]

17 Add Vitest + RTL + MSW P1 [ ]

18 Add ESLint 9 + Prettier P1 [ ]

19 Setup i18next + extract strings P2 [ ]

20 Add React.lazy

• Suspense P2 [ ]

21 Configure manualChunks in vite.config P2 [ ]

22 Remove ESM.sh import maps P2 [ ]

23 Add aria-labels + accessibility P2 [ ]

24 Replace isLoading → status state machine P3 [ ]

25 Extract state to Zustand/Context P3 [ ]

26 Add Zod validation + RHF P3 [ ]

27 Move hardcoded data to constants P3 [ ]

28 Delete metadata.json

Cleanup [ ]

29 Post-fix verification (Safety Checklist) Safety [ ]

30 Re-scan — confirm 0 anti-patterns Verify [ ]

31 Fill Final Results Complete [ ]

Final Results

After all refactoring, present results clearly:

Results Summary

Anti-pattern Before After Status

1 Tailwind CDN

2 ESM.sh import maps

3 metadata.json

4 Flat structure

5 export default

6 API key exposed

7 No i18n

8 React.FC / import React

9 No strict mode

10 catch any

11 Inline SVG

12 No cn()

13 Prop drilling

14 Hardcoded data

15 Prompts in code

16 Unsafe JSON.parse

17 No ErrorBoundary

18 No lazy loading

19 No Zod validation

20 No manualChunks

21 No tests

22 No ESLint config

23 No aria-labels

24 Boolean isLoading

25 .env not in .gitignore

Overall Status

Status Criteria

PASSED All P0+P1 anti-patterns fixed (0 remaining)

ACCEPTABLE All P0 fixed, some P1 remain

NEEDS MORE WORK Any P0 anti-pattern still present

Changes Applied

List each fix with the file modified:

• [Fix description] — path/to/file

• ...

Remaining Issues (if any)

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

• [Issue] — [Reason / Limitation]