code-porter

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Code Porter (代码搬运师)

Code Porter

🚚 核心理念: 我是代码搬运师，喜欢搬运优秀的开源项目到自己的项目里。非必要，禁止重复造轮子。

🚚 Core Principle: I'm a Code Porter, who prefers adopting excellent open-source projects into my own projects. Avoid reinventing the wheel unless absolutely necessary.

🔴 第一原则：先搬运，再修改

🔴 First Rule: Adopt First, Modify Later

无论什么代码，都要先找开源方案！

❌ 错误思路: "这是核心逻辑，我要自己写"
✅ 正确思路: "这是核心逻辑，更要找成熟方案，先搬运再改"

❌ 错误思路: "安全代码太重要了，必须自己实现"  
✅ 正确思路: "安全代码太重要了，自己写更危险，用久经考验的开源库"

搬运优先级: 成熟开源库 > Fork修改 > 参考实现 > 最后才自己写

No matter what code you need, always look for open-source solutions first!

❌ Wrong mindset: "This is core logic, I need to write it myself"
✅ Correct mindset: "This is core logic, so I should look for mature solutions first—adopt then modify"

❌ Wrong mindset: "Security code is too important, I must implement it myself"  
✅ Correct mindset: "Security code is too important, writing it myself is riskier—use time-tested open-source libraries"

Adoption Priority: Mature open-source libraries > Fork and modify > Reference implementation > Write from scratch only as a last resort

When to Use This Skill

使用此技能当你需要：

实现一个新功能或模块
选择技术方案或库
评估是否需要自己编写代码
寻找现有解决方案
集成第三方服务或 API

Use this skill when you need to:

Implement a new feature or module
Select technical solutions or libraries
Evaluate whether you need to write code from scratch
Look for existing solutions
Integrate third-party services or APIs

Not For / Boundaries

此技能不适用于：

已有明确技术选型的项目（遵循现有架构）
纯学习目的的练习项目（刻意练习除外）

This skill is not applicable to:

Projects with clear existing technical selections (follow the existing architecture)
Pure learning practice projects (except deliberate practice)

⚠️ 常见误区纠正

⚠️ Common Misconceptions Corrected

误区: "核心业务逻辑必须自己写" 正解: 核心业务逻辑也要先搬运再修改！

交易系统？先看 ccxt、hummingbot
风控引擎？先看 riskfolio-lib
推荐系统？先看 surprise

误区: "安全代码必须自己实现" 正解: 安全代码更要用成熟开源方案！自己写反而更危险！

认证？用 passport、next-auth
加密？用 crypto-js、bcrypt
JWT？用 jose、jsonwebtoken

Misconception: "Core business logic must be written by ourselves" Correction: Core business logic should also be adopted first, then modified!

Trading systems? Check ccxt, hummingbot first
Risk control engines? Check riskfolio-lib first
Recommendation systems? Check surprise first

Misconception: "Security code must be implemented by ourselves" Correction: Security code should use mature open-source solutions even more! Writing it yourself is riskier!

Authentication? Use passport, next-auth
Encryption? Use crypto-js, bcrypt
JWT? Use jose, jsonwebtoken

Quick Reference

🎯 搬运决策流程

🎯 Adoption Decision Process

需求 → 搜索开源方案 → 评估适配性 → 搬运/集成 → 适配调整
         ↓
    找不到合适的 → 最小化自己实现

Requirement → Search for open-source solutions → Evaluate adaptability → Adopt/Integrate → Adapt and adjust
         ↓
    No suitable solution found → Minimal self-implementation

📋 搬运前必问清单

📋 Pre-Adoption Checklist

问题	目的
1. 有没有现成的库/包？	npm/pip/cargo 搜索
2. 有没有类似的开源项目？	GitHub 搜索
3. 官方文档有没有推荐方案？	查阅官方文档
4. 社区有没有最佳实践？	Stack Overflow / Reddit
5. 这个轮子值得自己造吗？	成本/收益分析

Question	Purpose
1. Are there any existing libraries/packages?	Search npm/pip/cargo
2. Are there similar open-source projects?	Search GitHub
3. Does the official documentation recommend any solutions?	Check official docs
4. Are there community best practices?	Stack Overflow / Reddit
5. Is it worth reinventing this wheel?	Cost/benefit analysis

🔍 搜索策略

🔍 Search Strategies

bash

undefined

bash

undefined

1. 包管理器搜索

1. Package manager search

npm search <keyword> pip search <keyword> # 或 pip index versions <package>

npm search <keyword> pip search <keyword> # Or pip index versions <package>

2. GitHub 搜索

2. GitHub search

按 stars 排序: stars:>1000 <keyword>

Sort by stars: stars:>1000 <keyword>

按语言过滤: language:typescript <keyword>

Filter by language: language:typescript <keyword>

按最近更新: pushed:>2024-01-01 <keyword>

Filter by recent updates: pushed:>2024-01-01 <keyword>

3. Awesome 列表

3. Awesome lists

搜索 "awesome-<domain>" 仓库

Search for "awesome-<domain>" repositories

undefined

undefined

✅ 开源项目评估标准

✅ Open-Source Project Evaluation Criteria

指标	合格线	优秀线
Stars	>100	>1000
最近更新	<6个月	<1个月
Issues 响应	有回复	24h内回复
文档质量	有 README	有完整文档站
测试覆盖	有测试	>80% 覆盖
许可证	MIT/Apache	MIT
依赖数量	<20	<5

Metric	Passing Line	Excellent Line
Stars	>100	>1000
Recent Update	<6 months	<1 month
Issue Response	Has responses	Responses within 24h
Documentation Quality	Has README	Has complete documentation site
Test Coverage	Has tests	>80% coverage
License	MIT/Apache	MIT
Number of Dependencies	<20	<5

🚫 禁止造轮子清单

🚫 Wheel-Reinvention Prohibited List

以下场景必须使用现有方案：

领域	推荐方案
HTTP 请求	axios, fetch, ky
状态管理	zustand, jotai, redux-toolkit
表单验证	zod, yup, joi
日期处理	date-fns, dayjs
UI 组件	shadcn/ui, radix-ui, headless-ui
图表	recharts, chart.js, echarts
动画	framer-motion, react-spring
数据库 ORM	drizzle, prisma, typeorm
API 客户端	openapi-typescript, trpc
测试	vitest, jest, playwright
构建工具	vite, esbuild, turbopack
代码格式化	prettier, eslint
认证授权	next-auth, passport, lucia
加密哈希	bcrypt, argon2, crypto-js
JWT 处理	jose, jsonwebtoken
交易系统	ccxt, hummingbot
风控引擎	riskfolio-lib, pyfolio
量化分析	qlib, backtrader, zipline

You must use existing solutions for the following scenarios:

Domain	Recommended Solutions
HTTP Requests	axios, fetch, ky
State Management	zustand, jotai, redux-toolkit
Form Validation	zod, yup, joi
Date Processing	date-fns, dayjs
UI Components	shadcn/ui, radix-ui, headless-ui
Charts	recharts, chart.js, echarts
Animations	framer-motion, react-spring
Database ORM	drizzle, prisma, typeorm
API Clients	openapi-typescript, trpc
Testing	vitest, jest, playwright
Build Tools	vite, esbuild, turbopack
Code Formatting	prettier, eslint
Authentication & Authorization	next-auth, passport, lucia
Encryption & Hashing	bcrypt, argon2, crypto-js
JWT Handling	jose, jsonwebtoken
Trading Systems	ccxt, hummingbot
Risk Control Engines	riskfolio-lib, pyfolio
Quantitative Analysis	qlib, backtrader, zipline

🔧 搬运集成模式

🔧 Adoption & Integration Patterns

模式 1: 直接安装

bash

npm install <package>

Pattern 1: Direct Installation

bash

npm install <package>

或

Or

pnpm add <package>


**模式 2: 复制代码片段**
```typescript
// 来源: https://github.com/xxx/yyy
// 许可证: MIT
// 原作者: @author
// 修改说明: 适配本项目的 TypeScript 类型

// ... 代码 ...

模式 3: Fork + 定制

bash

undefined

pnpm add <package>


**Pattern 2: Copy Code Snippets**
```typescript
// Source: https://github.com/xxx/yyy
// License: MIT
// Original Author: @author
// Modification Notes: Adapted for TypeScript types in this project

// ... Code ...

Pattern 3: Fork + Customize

bash

undefined

1. Fork 仓库

1. Fork the repository

2. 修改适配

2. Modify and adapt

3. 作为 git submodule 或私有包引入

3. Import as a git submodule or private package


**模式 4: 参考实现**
```typescript
// 参考: https://github.com/xxx/yyy/blob/main/src/utils.ts
// 基于原实现重写，适配本项目架构


**Pattern 4: Reference Implementation**
```typescript
// Reference: https://github.com/xxx/yyy/blob/main/src/utils.ts
// Rewritten based on the original implementation to adapt to this project's architecture

Examples

Example 1: 需要实现 WebSocket 实时通信

Example 1: Need to Implement WebSocket Real-Time Communication

Input: "我需要在 React 项目中实现 WebSocket 实时通信"

Steps:

搜索现有方案:
```
npm search websocket react
```

发现候选:

socket.io-client

@tanstack/react-query

+ WebSocket,

use-websocket

评估
```
use-websocket
```
:
- Stars: 1.8k ✅
- 最近更新: 2024 ✅
- TypeScript 支持: 完整 ✅
- 文档: 清晰 ✅
决策: 使用
```
use-websocket
```

Expected Output:

bash

pnpm add react-use-websocket

typescript

import useWebSocket from 'react-use-websocket';

function MyComponent() {
  const { sendMessage, lastMessage } = useWebSocket('wss://api.example.com');
  // ...
}

Input: "I need to implement WebSocket real-time communication in a React project"

Steps:

Search for existing solutions:
```
npm search websocket react
```

Found candidates:

socket.io-client

@tanstack/react-query

+ WebSocket,

use-websocket

Evaluate
```
use-websocket
```
:
- Stars: 1.8k ✅
- Recent Update: 2024 ✅
- TypeScript Support: Complete ✅
- Documentation: Clear ✅
Decision: Use
```
use-websocket
```

Expected Output:

bash

pnpm add react-use-websocket

typescript

import useWebSocket from 'react-use-websocket';

function MyComponent() {
  const { sendMessage, lastMessage } = useWebSocket('wss://api.example.com');
  // ...
}

Example 2: 需要实现 Markdown 渲染

Example 2: Need to Implement Markdown Rendering

Input: "需要在页面中渲染 Markdown 内容，支持代码高亮"

Steps:

搜索:
```
npm search markdown react
```
候选:
```
react-markdown
```
,
```
marked
```
,
```
markdown-it
```
评估
```
react-markdown
```
:
- Stars: 12k+ ✅
- 生态: 支持 remark/rehype 插件 ✅
- 代码高亮: 配合
```
react-syntax-highlighter
```
  ✅
决策: 使用
```
react-markdown
```
+
```
react-syntax-highlighter
```

Expected Output:

bash

pnpm add react-markdown react-syntax-highlighter @types/react-syntax-highlighter

Input: "Need to render Markdown content on a page, with code highlighting support"

Steps:

Search:
```
npm search markdown react
```
Candidates:
```
react-markdown
```
,
```
marked
```
,
```
markdown-it
```
Evaluate
```
react-markdown
```
:
- Stars: 12k+ ✅
- Ecosystem: Supports remark/rehype plugins ✅
- Code Highlighting: Works with
```
react-syntax-highlighter
```
  ✅
Decision: Use
```
react-markdown
```
+
```
react-syntax-highlighter
```

Expected Output:

bash

pnpm add react-markdown react-syntax-highlighter @types/react-syntax-highlighter

Example 3: 需要实现拖拽排序

Example 3: Need to Implement Drag-and-Drop Sorting

Input: "列表需要支持拖拽排序功能"

Steps:

搜索:
```
npm search drag drop react
```

候选:

@dnd-kit/core

react-beautiful-dnd

react-dnd

评估
```
@dnd-kit
```
:
- Stars: 11k+ ✅
- 维护: 活跃 ✅
- 性能: 优秀 ✅
- 无障碍: 支持 ✅
决策: 使用
```
@dnd-kit
```

Expected Output:

bash

pnpm add @dnd-kit/core @dnd-kit/sortable @dnd-kit/utilities

Input: "The list needs to support drag-and-drop sorting functionality"

Steps:

Search:
```
npm search drag drop react
```

Candidates:

@dnd-kit/core

react-beautiful-dnd

react-dnd

Evaluate
```
@dnd-kit
```
:
- Stars: 11k+ ✅
- Maintenance: Active ✅
- Performance: Excellent ✅
- Accessibility: Supported ✅
Decision: Use
```
@dnd-kit
```

Expected Output:

bash

pnpm add @dnd-kit/core @dnd-kit/sortable @dnd-kit/utilities

搬运工作流

Adoption Workflow

Phase 1: 需求分析

Phase 1: Requirement Analysis

1. 明确功能需求
2. 确定技术约束（语言、框架、性能要求）
3. 评估复杂度

1. Clarify functional requirements
2. Determine technical constraints (language, framework, performance requirements)
3. Evaluate complexity

Phase 2: 方案搜索

Phase 2: Solution Search

1. 包管理器搜索
2. GitHub 搜索 (stars:>500)
3. Awesome 列表查找
4. 官方文档推荐
5. 社区讨论（Reddit, HN, Twitter）

1. Package manager search
2. GitHub search (stars:>500)
3. Look for Awesome lists
4. Official documentation recommendations
5. Community discussions (Reddit, HN, Twitter)

Phase 3: 方案评估

Phase 3: Solution Evaluation

1. 活跃度检查（最近提交、Issue 响应）
2. 质量检查（测试、文档、TypeScript）
3. 兼容性检查（依赖冲突、版本要求）
4. 许可证检查（MIT/Apache 优先）
5. 安全检查（npm audit, snyk）

1. Activity check (recent commits, issue responses)
2. Quality check (tests, documentation, TypeScript support)
3. Compatibility check (dependency conflicts, version requirements)
4. License check (prefer MIT/Apache)
5. Security check (npm audit, snyk)

Phase 4: 集成实施

Phase 4: Integration Implementation

1. 安装依赖
2. 阅读文档/示例
3. 编写适配代码
4. 测试验证
5. 文档记录（来源、版本、修改）

1. Install dependencies
2. Read documentation/examples
3. Write adaptation code
4. Test and verify
5. Document records (source, version, modifications)

References

```
references/index.md
```
: 导航索引
```
references/awesome-lists.md
```
: 常用 Awesome 列表汇总
```
references/license-guide.md
```
: 开源许可证选择指南

```
references/index.md
```
: Navigation index
```
references/awesome-lists.md
```
: Summary of commonly used Awesome lists
```
references/license-guide.md
```
: Open-source license selection guide

Maintenance

Sources: vibe-coding-cn 方法论, 开源社区最佳实践
Last Updated: 2025-12-30
Known Limits:
- 评估标准为经验值，需根据具体场景调整
- 某些领域可能缺少成熟开源方案

Sources: vibe-coding-cn methodology, open-source community best practices
Last Updated: 2025-12-30
Known Limits:
- Evaluation criteria are empirical values and need to be adjusted according to specific scenarios
- Mature open-source solutions may be lacking in certain fields