lovable-cleanup – skill Lập trình cho agent AI

lovable-cleanup

> Remove unwanted Lovable scaffolding while preserving required attribution, licenses and useful project history.

> Made with [agentic-awesome-skills](https://github.com/sickn33/agentic-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 15 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.

Verify all configuration/import references and project-specific use before removal.

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

and a Lovable project URL in README.md.

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

LOGO_UPDATE.md in the project root.

Why the execution order matters

Inspect source/config references before removing dependencies; update the manifest and lockfile with the project’s existing package manager. 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. Audit source/config and dependencies (Areas 2 & 7) — establish each removal candidate 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

9. Favicon / CDN cache (Area 15) — do ASAP after assets are swapped; browser

or CDN caching can keep the old icon visible, so verify the live response

---

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

| File | Action |

|---|---|

| favicon.ico | Overwrite with real icon — do NOT just delete, see Area 15 |

| favicon.png | Replace with real icon |

| og-image.png / logo.png | Replace with real brand assets |

| placeholder.svg | Delete only after checking source, CSS, dynamic paths and deployed references |

✅ 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 -->

grep -rn "lovable\|Lovable" src/ --include="*.tsx" --include="*.ts"

---

Area 7 · Lockfile

<!-- security-allowlist: npm uninstall removes a dev-only package, local filesystem only -->

npm uninstall lovable-tagger
grep "lovable-tagger" package-lock.json

Use yarn remove or pnpm remove if the project uses those instead.

---

Area 8 · package.json scripts (follow-up)

Double-check after Area 2 — scripts are sometimes injected separately from deps:

<!-- security-allowlist: grep, read-only -->

grep -n '"lovable' package.json

---

Area 9 · Environment files

<!-- security-allowlist: grep over local env files, read-only, no credentials transmitted -->

# Print filenames only: matching values may contain credentials.
rg -l -i "lovable" -- .env .env.local .env.example 2>/dev/null

Remove any Lovable API keys or project IDs. If a variable is Lovable-only, delete the

entire line — don't leave an empty key.

---

Area 10 · Root markdown docs

Delete or repurpose these common Lovable-generated files:

• CLEANUP_SUMMARY.md
• DEPLOYMENT_GUIDE.md
• DEVELOPMENT_SUMMARY.md
• LOGO_UPDATE.md

<!-- security-allowlist: grep over markdown files, read-only -->

grep -rln "lovable\|Lovable" *.md 2>/dev/null

✅ Skim each file before deleting — Lovable docs sometimes contain useful architecture

notes worth preserving in a rewritten CONTRIBUTING.md or ARCHITECTURE.md.

---

Area 11 · SEO & deploy config

Usually clean — confirm and move on:

<!-- security-allowlist: grep over config files, read-only -->

grep -in "lovable" \
  public/robots.txt public/sitemap.xml public/_redirects \
  vercel.json netlify.toml 2>/dev/null

After replacing og-image.png, update OG meta in index.html:

<meta property="og:image" content="/og-image.png" />
<meta property="og:url" content="https://your-domain.com" />
<meta property="og:title" content="Your Real Title" />

---

Area 12 · Git config

<!-- security-allowlist: grep and ls on local git config, read-only -->

grep -in "lovable" .gitignore
ls .git/hooks/

Inspect Lovable-specific entries/hooks. Preserve secret/build ignores, license notices and useful safety hooks; remove only confirmed obsolete behavior.

---

Area 13 · Unused dependencies

Step 1 — Map what's actually imported

<!-- security-allowlist: grep over source files, read-only, writes to private temp dir only -->

tmpdir="$(mktemp -d "${TMPDIR:-/tmp}/lovable-cleanup.XXXXXX")" || exit 1
grep -rh "from [\"']@radix-ui/" src/ --include="*.tsx" --include="*.ts" \
  | grep -oP "from [\"']\K@radix-ui/[^\"']+" | sort -u > "$tmpdir/radix-used.txt"

grep -rh "from [\"']@/components/ui/" src/ --include="*.tsx" \
  | grep -oP "from [\"']\K@/components/ui/[^\"']+" | sort -u > "$tmpdir/shadcn-used.txt"

Step 2 — Diff against installed

<!-- security-allowlist: grep and diff on local package.json and private temp files, read-only -->

grep -oP '"@radix-ui/[^"]+' package.json | tr -d '"' | sort > "$tmpdir/radix-installed.txt"
diff "$tmpdir/radix-installed.txt" "$tmpdir/radix-used.txt"

Step 3 — Bulk remove & verify

<!-- security-allowlist: npm uninstall removes unused local packages, no network mutation -->

npm uninstall @radix-ui/react-accordion @radix-ui/react-alert-dialog  # etc.
npm run build

---

Area 14 · Generic Lovable artifacts

• components.json — verify style, baseColor, and aliases match the real project
• eslint.config.js — usually standard; quick scan only

<!-- security-allowlis

… (nội dung đầy đủ có trong gói tải về)