lovable-cleanup

Remove every trace of Lovable scaffolding and ship the project as your own. Made with antigravity-awesome-skills · author: whoisabhishekadhikari

Overview

Lovable (lovable.dev) bootstraps Vite + React + shadcn/ui projects with its own tagger dependency, branding, placeholder assets, and generated markdown docs baked in. Most developers export from Lovable and want a clean, ownable codebase before shipping or open-sourcing. This skill covers all 14 areas where Lovable leaves fingerprints.

When to Use This Skill

• User says "clean up my Lovable project" or "remove Lovable branding"
• User says "de-Lovable", "I exported from Lovable", or "audit for Lovable leftovers"
• Project contains lovable-tagger in package.json
• Project contains CLEANUP_SUMMARY.md, DEPLOYMENT_GUIDE.md, or DEVELOPMENT_SUMMARY.md
• index.html still has a generic <title> or Lovable favicon
• User wants to audit a Vite/React project for scaffolding leftovers before shipping

Core Concepts

What Lovable injects

Lovable adds three categories of scaffolding that must be removed:

1. Dependency — lovable-tagger dev dep + componentTagger() call in vite.config.ts.

This is the only runtime hook; removing it is always safe.

1. Branding artifacts — favicon.ico/png, og-image.png, logo.png, generic <title>,

and a Lovable project URL in README.md.

1. Generated docs — CLEANUP_SUMMARY.md, DEPLOYMENT_GUIDE.md, DEVELOPMENT_SUMMARY.md,

LOGO_UPDATE.md in the project root.

Why the execution order matters

Removing deps before editing source files avoids lockfile conflicts. Cleaning docs last means the README reflects the already-cleaned project.

Unused dep footprint

Lovable pre-installs the full shadcn/ui component set (~29 components) and all Radix UI primitives (~30 packages). Most projects use 5–10. The unused ones are safe to remove but @radix-ui/react-slot must be kept — it is an indirect dep used internally by many shadcn components via the asChild prop.

Recommended Execution Order

1. Dependencies (Areas 2 & 7) — clear the package graph first
2. Build config (Area 3) — remove the tagger from Vite
3. Entry points (Areas 4 & 6) — clear runtime references
4. Assets (Area 5) — swap brand files (defer if assets not ready yet)
5. Docs & README (Areas 1 & 10) — clean last so README reflects the cleaned project
6. Environment & Git (Areas 9 & 12) — security sweep
7. SEO / deploy (Area 11) — usually a no-op; confirm and move on
8. Unused deps (Area 13) — safe to defer until after ship if on a deadline

Step-by-Step Guide

Area 1 · README.md

• Line 1: Replace # Welcome to your Lovable project with the real project title
• Line 5: Remove https://lovable.dev/projects/REPLACE_WITH_PROJECT_ID
• Lines 11–19: Delete the "Use Lovable" instructions block
• Lines 65–73: Delete the "Deploy via Lovable / custom domain docs" block

✅ After stripping, read the README end-to-end. Offer to write a replacement intro paragraph if large sections were removed.

Area 2 · package.json

• Remove "lovable-tagger" from devDependencies
• Rename "name" from "vite_react_shadcn_ts" to the real project name (kebab-case)
• Scan the scripts block for "lovable" or "lovable:*" entries and remove them

<!-- security-allowlist: grep for scanning package.json content, read-only, no network -->

grep -n "lovable" package.json

Area 3 · vite.config.ts

• Remove import { componentTagger } from "lovable-tagger"
• Remove mode === 'development' && componentTagger() from the plugins array
• Remove .filter(Boolean) if it was only present to handle the conditional tagger

<!-- security-allowlist: grep for scanning vite config, read-only -->

grep -n "lovable\|componentTagger\|filter(Boolean)" vite.config.ts

Area 4 · index.html

• Replace the generic <title> with the real product name
• Remove any <!-- Generated by Lovable --> comments or Lovable meta tags
• Replace the Lovable favicon reference if present

<!-- security-allowlist: grep for scanning HTML file, read-only -->

grep -in "lovable\|generator" index.html

Area 5 · public/ assets

Replace these files (keep filenames, swap content):

✅ Flag which files are actually referenced in <head> vs dead weight so the user knows what to prioritise.

Area 6 · Source files

• src/main.tsx — scan for Lovable HOCs, wrappers, or comments
• src/App.tsx — same
• Auto-generated components — look for // generated by Lovable headers

<!-- security-allowlist: grep over source files, read-only, no network -->

g