# Lovable Cleanup

> 审计并清除 Vite + React 项目中的 Lovable 脚手架 — 移除 lovable-tagger、替换占位资源、修剪未使用的 Radix 依赖、清理生成文档，让代码库真正属于你。触发词：Lovable 清理、Lovable 脚手架移除、de-Lovable、Lovable 项目瘦身、移除 Lovable 品牌

- Skill: `kscz0000/lovable-cleanup` (Agent Skill)
- Install (CLI): `npx skillmds@latest add kscz0000/lovable-cleanup`
- Raw SKILL.md: https://api.skillmd.com/api/skills/kscz0000/lovable-cleanup/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: kscz0000 (https://skillmd.com/u/kscz0000)
- Updated: 2026-09-21
- Page: https://skillmd.com/skills/kscz0000/lovable-cleanup

---


# Lovable 脚手架清理

> 移除 Lovable 脚手架的一切痕迹，让项目真正属于你。
> 由 [antigravity-awesome-skills](https://github.com/sickn33/antigravity-awesome-skills) 制作 · 作者：**whoisabhishekadhikari**

---

## 概述

Lovable（lovable.dev）用自带的 tagger 依赖、品牌标识、占位资源和生成的 markdown 文档来引导 Vite + React + shadcn/ui 项目。大多数开发者从 Lovable 导出后，希望在上架或开源前拥有一个干净的、可自主控制的代码库。本技能覆盖 Lovable 留下痕迹的全部 14 个领域。

---

## 何时使用本技能

- 用户说"清理我的 Lovable 项目"或"移除 Lovable 品牌"
- 用户说"de-Lovable"、"我从 Lovable 导出了"或"审计 Lovable 残留"
- 项目 `package.json` 中包含 `lovable-tagger`
- 项目包含 `CLEANUP_SUMMARY.md`、`DEPLOYMENT_GUIDE.md` 或 `DEVELOPMENT_SUMMARY.md`
- `index.html` 仍使用通用 `<title>` 或 Lovable favicon
- 用户想在上线前审计 Vite/React 项目中的脚手架残留

---

## 核心概念

### Lovable 注入了什么

Lovable 添加了三类必须移除的脚手架：

1. **依赖** — `lovable-tagger` 开发依赖 + `vite.config.ts` 中的 `componentTagger()` 调用。
   这是唯一的运行时钩子；移除它始终安全。
2. **品牌产物** — `favicon.ico/png`、`og-image.png`、`logo.png`、通用 `<title>`，
   以及 `README.md` 中的 Lovable 项目 URL。
3. **生成文档** — 项目根目录下的 `CLEANUP_SUMMARY.md`、`DEPLOYMENT_GUIDE.md`、`DEVELOPMENT_SUMMARY.md`、
   `LOGO_UPDATE.md`。

### 为什么执行顺序很重要

在编辑源文件之前移除依赖可以避免锁文件冲突。最后清理文档意味着 README 反映的是已清理完毕的项目。

### 未使用依赖占位

Lovable 预装了完整的 shadcn/ui 组件集（约 29 个组件）和所有 Radix UI 原语（约 30 个包）。大多数项目只用 5–10 个。未使用的可以安全移除，但 `@radix-ui/react-slot` 必须保留——它是许多 shadcn 组件通过 `asChild` prop 内部使用的间接依赖。

---

## 推荐执行顺序

1. 依赖（Area 2 和 7）— 先清理包依赖图
2. 构建配置（Area 3）— 从 Vite 中移除 tagger
3. 入口文件（Area 4 和 6）— 清理运行时引用
4. 资源文件（Area 5）— 替换品牌文件（如资源未准备好可延后）
5. 文档和 README（Area 1 和 10）— 最后清理，使 README 反映已清理的项目
6. 环境和 Git（Area 9 和 12）— 安全扫描
7. SEO / 部署（Area 11）— 通常无需操作；确认后继续
8. 未使用依赖（Area 13）— 如赶进度可延后到上线后

---

## 逐步指南

### Area 1 · README.md

- 第 1 行：将 `# Welcome to your Lovable project` 替换为真实项目标题
- 第 5 行：移除 `https://lovable.dev/projects/REPLACE_WITH_PROJECT_ID`
- 第 11–19 行：删除"Use Lovable"说明块
- 第 65–73 行：删除"Deploy via Lovable / custom domain docs"块

✅ 清除后，从头到尾阅读 README。如果删除了大段内容，主动提供撰写替换的介绍段落。

---

### Area 2 · package.json

- 从 `devDependencies` 中移除 `"lovable-tagger"`
- 将 `"name"` 从 `"vite_react_shadcn_ts"` 改为真实项目名（kebab-case）
- 扫描 `scripts` 块中 `"lovable"` 或 `"lovable:*"` 条目并移除

<!-- security-allowlist: grep for scanning package.json content, read-only, no network -->
```bash
grep -n "lovable" package.json
```

---

### Area 3 · vite.config.ts

- 移除 `import { componentTagger } from "lovable-tagger"`
- 从 plugins 数组中移除 `mode === 'development' && componentTagger()`
- 移除 `.filter(Boolean)`（如果它仅为处理条件性 tagger 而存在）

<!-- security-allowlist: grep for scanning vite config, read-only -->
```bash
grep -n "lovable\|componentTagger\|filter(Boolean)" vite.config.ts
```

---

### Area 4 · index.html

- 将通用 `<title>` 替换为真实产品名称
- 移除所有 `<!-- Generated by Lovable -->` 注释或 Lovable meta 标签
- 如存在 Lovable favicon 引用则替换

<!-- security-allowlist: grep for scanning HTML file, read-only -->
```bash
grep -in "lovable\|generator" index.html
```

---

### Area 5 · public/ 资源

替换以下文件（保留文件名，替换内容）：

| 文件 | 操作 |
|---|---|
| `favicon.ico` | 替换为真实图标 |
| `favicon.png` | 替换为真实图标 |
| `og-image.png` / `logo.png` | 替换为真实品牌资源 |
| `placeholder.svg` | 通常未使用 — 可安全删除 |

✅ 标记哪些文件在 `<head>` 中实际引用、哪些是死文件，让用户知道优先处理什么。

---

### Area 6 · 源文件

- `src/main.tsx` — 扫描 Lovable HOC、包装器或注释
- `src/App.tsx` — 同上
- 自动生成的组件 — 查找 `// generated by Lovable` 头部

<!-- security-allowlist: grep over source files, read-only, no network -->
```bash
grep -rn "lovable\|Lovable" src/ --include="*.tsx" --include="*.ts"
```

---

### Area 7 · 锁文件

<!-- security-allowlist: npm uninstall removes a dev-only package, local filesystem only -->
```bash
npm uninstall lovable-tagger
grep "lovable-tagger" package-lock.json
```

如项目使用 yarn 或 pnpm，改用 `yarn remove` 或 `pnpm remove`。

---

### Area 8 · package.json 脚本（后续检查）

在 Area 2 之后二次确认 — 脚本有时与依赖分开注入：

<!-- security-allowlist: grep, read-only -->
```bash
grep -n '"lovable' package.json
```

---

### Area 9 · 环境文件

<!-- security-allowlist: grep over local env files, read-only, no credentials transmitted -->
```bash
grep -rin "lovable" .env .env.local .env.example 2>/dev/null \
  | sed -E 's/([A-Za-z_][A-Za-z0-9_]*LOVABLE[A-Za-z0-9_]*=).*/\1[REDACTED]/I'
```

移除所有 Lovable API 密钥或项目 ID。如果变量仅 Lovable 使用，删除整行 — 不要留下空键。

---

### Area 10 · 根目录 markdown 文档

删除或改造以下常见的 Lovable 生成文件：

- `CLEANUP_SUMMARY.md`
- `DEPLOYMENT_GUIDE.md`
- `DEVELOPMENT_SUMMARY.md`
- `LOGO_UPDATE.md`

<!-- security-allowlist: grep over markdown files, read-only -->
```bash
grep -rln "lovable\|Lovable" *.md 2>/dev/null
```

✅ 删除前先浏览每个文件 — Lovable 文档有时包含有价值的架构说明，值得保留到重写的 `CONTRIBUTING.md` 或 `ARCHITECTURE.md` 中。

---

### Area 11 · SEO 和部署配置

通常已干净 — 确认后继续：

<!-- security-allowlist: grep over config files, read-only -->
```bash
grep -in "lovable" \
  public/robots.txt public/sitemap.xml public/_redirects \
  vercel.json netlify.toml 2>/dev/null
```

替换 `og-image.png` 后，更新 `index.html` 中的 OG meta：

```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 配置

<!-- security-allowlist: grep and ls on local git config, read-only -->
```bash
grep -in "lovable" .gitignore
ls .git/hooks/
```

移除任何 Lovable 特有的 `.gitignore` 条目或 commit hooks。

---

### Area 13 · 未使用依赖

**步骤 1 — 映射实际导入**

<!-- security-allowlist: grep over source files, read-only, writes to private temp dir only -->
```bash
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"
```

**步骤 2 — 与已安装的做差异比较**

<!-- security-allowlist: grep and diff on local package.json and private temp files, read-only -->
```bash
grep -oP '"@radix-ui/[^"]+' package.json | tr -d '"' | sort > "$tmpdir/radix-installed.txt"
diff "$tmpdir/radix-installed.txt" "$tmpdir/radix-used.txt"
```

**步骤 3 — 批量移除并验证**

<!-- security-allowlist: npm uninstall removes unused local packages, no network mutation -->
```bash
npm uninstall @radix-ui/react-accordion @radix-ui/react-alert-dialog  # etc.
npm run build
```

---

### Area 14 · 通用 Lovable 产物

- `components.json` — 验证 `style`、`baseColor` 和 `aliases` 与真实项目匹配
- `eslint.config.js` — 通常标准；快速扫描即可

<!-- security-allowlist: grep on config files, read-only -->
```bash
grep -in "lovable" components.json eslint.config.js
```

---

## 主扫描命令

<!-- security-allowlist: recursive grep across project directory, read-only, no network -->
```bash
grep -rn "lovable\|Lovable\|LOVABLE\|lovable-tagger\|lovable\.dev" \
  --include="*.ts" --include="*.tsx" --include="*.js" --include="*.jsx" \
  --include="*.json" --include="*.md" --include="*.html" --include="*.toml" \
  --include="*.yaml" --include="*.yml" --include="*.txt" \
  . 2>/dev/null \
  | grep -v "node_modules\|\.git\|dist\|build" \
  | sed -E 's/([A-Za-z_][A-Za-z0-9_]*LOVABLE[A-Za-z0-9_]*=).*/\1[REDACTED]/I'
```

---

## 示例

### 示例 1：从零开始全面审计

```
User: I just exported my project from Lovable. Clean it up.

Agent:
1. Runs master scan — finds 23 matches across 8 files
2. Uninstalls lovable-tagger, renames package.json "name"
3. Strips vite.config.ts of componentTagger
4. Updates index.html title, removes generator comment
5. Flags 4 markdown docs for deletion, skims each first
6. Produces cleanup report
```

### 示例 2：仅修剪目标依赖

```
User: Just prune the unused Radix packages from my Lovable project.

Agent:
1. Runs grep diff (Area 13 only)
2. Identifies 18 unused @radix-ui packages
3. Removes them in bulk, keeps @radix-ui/react-slot
4. Runs npm run build to verify — passes clean
```

---

## 最佳实践

- ✅ **应该：** 在修改源文件之前先移除依赖（Area 2 和 7）
- ✅ **应该：** 删除前先浏览 Lovable 生成的文档 — 可能包含有价值的架构说明
- ✅ **应该：** 每批修改后验证 `npm run build` 通过
- ✅ **应该：** 上线前替换 OG 图片 — 它直接影响社交分享预览
- ❌ **不要：** 移除 `@radix-ui/react-slot` — 它是大多数 shadcn 组件的间接依赖
- ❌ **不要：** 留下空环境变量如 `LOVABLE_PROJECT_ID=` — 删除整行

---

## 局限性

- 本技能不会创建或提供品牌资源（favicon、OG 图片）— 它只标记需要替换的内容。用户必须自行提供真实资源。
- 依赖修剪（Area 13）安全但不万无一失 — 部分 Radix 包是间接依赖，直接 `grep` 无法捕获。始终用 `npm run build` 验证。
- 本技能不会自动修改 `components.json` 别名 — 它只扫描并标记不匹配项，由用户手动修复。
- 不覆盖 Lovable 特有的后端集成（Supabase 行级安全、edge functions）— 那些需要单独审查。

---

## 故障排查

### 问题：移除 Radix 包后构建失败

**症状：** `@radix-ui/*` 包出现 Module not found 错误
**解决方案：** 重新添加缺失的包。打开 `src/components/ui/*.tsx` 搜索 `from '@radix-ui/...'` 导入，找到依赖它的组件。

### 问题：卸载后 lovable-tagger 仍在锁文件中

**症状：** `grep "lovable-tagger" package-lock.json` 仍有结果
**解决方案：** 删除 `node_modules/` 和 `package-lock.json`，然后重新运行 `npm install`。

### 问题：更新 index.html 后浏览器仍显示通用标题

**症状：** 浏览器标签页仍显示"Lovable"或"Vite App"
**解决方案：** 检查 `src/App.tsx` 或布局包装器中是否有 `<Helmet>` 或 `<Head>` 组件 — React 层的 title 标签会在运行时覆盖 `index.html`。

---

## 相关技能

- `@vite-config` — Vite 配置最佳实践
- `@shadcn-setup` — shadcn/ui 安装与定制
- `@react-cleanup` — 通用 React 项目清理

---

## 附加资源

- [Lovable 文档](https://docs.lovable.dev)
- [shadcn/ui 组件列表](https://ui.shadcn.com/docs/components)
- [Radix UI 原语](https://www.radix-ui.com/primitives)
- [antigravity-awesome-skills](https://github.com/sickn33/antigravity-awesome-skills)

---

## 输出格式

完成审计后，生成清理报告：

```
## ✅ Cleaned
<list of changes made>

## ⚠️ Needs your input
<items needing a decision — brand assets, project name, domain>

## 🗑️ Deferred (safe to do later)
<e.g. unused dep pruning, OG image swap>
```

---

*由 [antigravity-awesome-skills](https://github.com/sickn33/antigravity-awesome-skills) 制作 · 作者：[whoisabhishekadhikari](https://github.com/whoisabhishekadhikari)*

