🚀 Overview

AI coding tools (like Claude, Cursor, Lovable, v0, and Bolt) are incredible for shipping fast, but they often leave behind specific artifacts, duplicate code, and prototyping leftovers.

Frontend Vibe Cleanup provides the definitive rulebooks and reference materials to clean up AI-generated noise, enforce production standards, and maintain a pristine codebase.

🗂️ What's Inside?

🧠 AI Skills & Instructions

• SKILL.md: Core instructions and skill definitions for AI agents (Claude, Cursor, Windsurf, etc.) to follow when navigating your codebase.

📚 Reference Playbooks (/references)

• vibe-tools.md: The exhaustive cheat sheet for identifying and acting on AI tool-specific artifacts (e.g., what to do with .lovable, CLAUDE.md, v0-*.tsx, etc.).
• nextjs.md: Best practices, server/client component boundaries, and optimizations for modern Next.js 14+ apps (App Router).
• nuxt.md: Vue/Nuxt-specific architectural guidelines, state management, and conventions.
• seo.md: Go-to-market and metadata standards ensuring that rapidly prototyped sites are actually discoverable.

📦 Installation & Usage: npx vs npm i

We provide multiple ways to use this tool depending on your workflow:

• The Fastest Way (Recommended): Run npx frontend-vibe-cleanup
  • Why use npx? It runs the tool instantly without installing it permanently on your machine. You will always get the absolute latest version directly from NPM every time you run it. Perfect for quick cleanups!
• Install Locally: npm i -D frontend-vibe-cleanup
  • Why use npm i? Adds it to your project's devDependencies so your whole team can run it via package.json scripts.

🤖 The 4-Phase GitHub Copilot Workflow (VS Code)

If you are using GitHub Copilot in VS Code, your AI already has the context of your entire codebase. Use Copilot Chat and the @workspace tag with these exact 4 phases to surgically clean up your code without hallucinations.

Phase 1: 🔍 ANALYZE (Contextual Discovery)

Open the messy file and drop this into Copilot Chat:

"@workspace Analyze the currently open file and its direct imports. Do NOT rewrite the code yet. Flag any AI-generated technical debt across the codebase related to this file, specifically looking for: unnecessary 'use client' directives, inline style={{}} tags instead of Tailwind, and loose TypeScript any types. Let me know when you are ready to refactor."

Phase 2: 🏗️ REFACTOR (Workspace Execution)

Drop this into Copilot Chat:

"@workspace Refactor the active file based on your Phase 1 analysis. Cross-reference our existing UI components and types in the workspace. Enforce strict Next.js App Router architecture, immutable TypeScript interfaces, and replace all inline styles with Tailwind CSS. Output the updated code for this file."

Phase 3: 🧪 TEST SUITE (Automated Guardrails)

Drop this into Copilot Chat:

"@workspace Look at our current testing setup (Jest/Vitest/RTL) in the workspace. Generate a complete test suite for the newly refactored active file. Ensure you mock any external API calls or complex child components that exist in our codebase. Cover the happy path and empty states."

Phase 4: ✅ FINAL AUDIT (Deep Verification)

Drop this into Copilot Chat:

"@workspace Perform a final architectural audit on the active file and the newly generated test file. Cross-check against the entire workspace to ensure no imports are broken, zero any types exist, and no inline styles were missed. If anything is wrong, silently fix it and provide the final corrected code block."

⚡ The "God-Mode" One-Shot Prompt (Fastest & Credit Efficient)

Want to skip the 4-phase back-and-forth and clean up an entire feature in one shot? This prompt guarantees zero hallucinations, uses fewer AI credits, and forces the agent to follow the exact SKILL.md rules. Drop this single prompt into Copilot Chat, Cursor, Windsurf, or Claude:

"@workspace Act as the Frontend Vibe Cleanup Specialist. Execute the 4-Phase cleanup protocol (Analyze, Refactor, Test, Audit) on the active file and its direct dependencies in one shot. Do NOT narrate your thought process.

Strictly enforce: zero any types, immutable interfaces, Next.js App Router / React architectural standards, hydration-safe code, WCAG 2.2 AA accessibility, and Tailwind CSS (absolutely no inline styles). Purge all AI slop (generic names, .bolt/.lovable artifacts, unnecessary use client directives, and generic gradients).

Output exactly three sections:

1. 🛠️ Refactored Production Code
2. ✅ What Changed (Concise bullet points)
3. 🧪 Test Suite (Complete Jest/Vitest RTL test suite with jest-axe a11y checks)

Proceed silently and cross-verify against the workspace to ensure zero broken imports."

🤝 Contributing

Found a new AI tool leaving weird artifacts? Discover a better Next.js pattern? Create a pull request to add it to our references!