# Reuse First Development

> 功能选型流程：先搜现成方案→评估对比→集成，不自己写。适用于任何需要引入新能力的功能选型。

- Skill: `publieople/reuse-first-development` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add publieople/reuse-first-development`
- Raw SKILL.md: https://api.skillmd.com/api/skills/publieople/reuse-first-development/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: publieople (https://skillmd.com/u/publieople)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/publieople/reuse-first-development

---


# Reuse-First Development

## 核心原则

> **每个需求先找现成最优开源方案，评估后集成。绝不自己实现核心功能。**

这是用户（冯周杰 / Publieople）在多个项目中反复强化的核心方法论。违反此原则就是返工。

## 决策流程

```
功能需求出现
    │
    ├── 1. 搜索 ──→ web_search × 3 (不同关键词)
    │         ──→ npm search / GitHub search
    │         ──→ 看 npmtrends.com 对比下载量
    │
    ├── 2. 评估 ──→ web_extract 拉 README + npm 页面
    │         按以下维度打分：
    │         ├── 浏览器兼容？(不能是 Node-only)
    │         ├── Bundle 大小？(PWA 优先 <50KB gzip)
    │         ├── 维护状态？(最近一年有更新, 下载量趋势)
    │         ├── API 简洁？(一行能搞定的不要十行)
    │         └── 生态验证？(dependents 数量 > 100)
    │
    ├── 3. 对比 ──→ 2-3 个候选，输出对比表
    │         ──→ 标注推荐 + 理由
    │
    └── 4. 集成 ──→ npm install → 验证 build → 写 handler/组件
              ──→ 更新 SPEC.md 记录选型决策
```

## 评估维度

| 维度 | 权重 | 问题 |
|------|------|------|
| 浏览器兼容 | 🔴 否决项 | 能在浏览器跑吗？有没有 `global`/`process`/`fs` 引用？ |
| Bundle 大小 | 🟡 高 | gzip 后多大？有没有 CDN 选项避免打包？ |
| 维护状态 | 🟡 高 | 最近 commit？issues 响应速度？ |
| API 简洁 | 🟢 中 | 集成需要多少行？有无 React 封装？ |
| 生态验证 | 🟢 中 | npm 周下载量？dependents 数量？ |

## 已形成的选型结论（可直接复用）

| 需求 | 方案 | 理由 |
|------|------|------|
| 编码检测 | `chardet` | 22KB, Pure TS, 25 encodings, 1477 dependents |
| TOML 解析 | `smol-toml` | 1.6KB, 浏览器兼容, 替换了 `@iarna/toml` |
| 快捷键 | `react-hotkeys-hook` | <3KB, 2.5M 周下载 |
| i18n | `react-i18next` | ~5KB gzip, React 最主流 |
| PDF 查看 | `react-pdf` + CDN worker | React 封装, worker 1MB 走 CDN 不打包 |
| 压缩包 | `fflate` | 30KB, 最快纯 JS, ZIP 支持仅 +3KB |
| CSV 表格 | TanStack Table + PapaParse | 业内标准 |
| 图片编辑 | TUI Image Editor | 功能最完整 |
| 代码编辑 | CodeMirror 6 | 浏览器最成熟 |
| JSON 编辑 | vanilla-jsoneditor | 树形+代码双模式 |

## 反模式

| ❌ 不要 | ✅ 要 |
|---------|------|
| 自己写编码检测逻辑 | 用 `chardet` |
| 手写 UTF-8→GBK 回退 | 交给专业库 |
| 自己实现 CSV 解析 | 用 `papaparse` |
| 自己写 PDF 渲染 | 用 `react-pdf` / `pdfjs-dist` |
| 自己写 ZIP 解压 | 用 `fflate` |
| 引入 Node-only 包碰运气 | 先验证浏览器兼容 |

## 选型记录规范

每次选型后，在 SPEC.md 或 commit message 中记录：

```
feat: add PDF handler using react-pdf
- Selected react-pdf over pdfjs-dist raw: React wrapper, ~50KB
- Worker loaded via CDN to avoid 1MB bundle
- Alternatives considered: native <iframe> (too limited), Nutrient (paid)
```

## 参考

- `references/phase3-research.md` — open-any Phase 3 调研实例（PDF/压缩包/音视频/主题/i18n/快捷键/CI）