source-driven-development

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Source-Driven Development

源驱动开发

Overview

概述

Every framework-specific code decision must be backed by official documentation. Don't implement from memory — verify, cite, and let the user see your sources. Training data goes stale, APIs get deprecated, best practices evolve. This skill ensures the user gets code they can trust because every pattern traces back to an authoritative source they can check.

每个针对特定框架的代码决策都必须有官方文档作为支撑。不要凭记忆实现——要验证、引用来源，并让用户能看到你的参考依据。训练数据会过时，API会被废弃，最佳实践也会不断演变。这项技能可以确保用户获得可信赖的代码，因为每一种实现模式都能追溯到他们可以核验的权威来源。

When to Use

适用场景

The user wants code that follows current best practices for a given framework
Building boilerplate, starter code, or patterns that will be copied across a project
The user explicitly asks for documented, verified, or "correct" implementation
Implementing features where the framework's recommended approach matters (forms, routing, data fetching, state management, auth)
Reviewing or improving code that uses framework-specific patterns
Any time you are about to write framework-specific code from memory

When NOT to use:

Correctness does not depend on a specific version (renaming variables, fixing typos, moving files)
Pure logic that works the same across all versions (loops, conditionals, data structures)
The user explicitly wants speed over verification ("just do it quickly")

用户需要符合指定框架当前最佳实践的代码
开发会在项目中被广泛复用的样板代码、启动代码或通用模式
用户明确要求有文档支撑、经过验证的「正确」实现方案
实现框架有官方推荐实现路径的功能（表单、路由、数据请求、状态管理、鉴权）
评审或优化使用了框架特定模式的代码
任何你准备凭记忆编写框架专属代码的场景

不适用场景：

代码正确性不依赖特定版本的场景（重命名变量、修复拼写错误、移动文件）
跨所有版本表现一致的纯逻辑实现（循环、条件判断、数据结构）
用户明确要求优先级为速度而非验证的场景（「尽快做完就行」）

The Process

流程

DETECT ──→ FETCH ──→ IMPLEMENT ──→ CITE
  │          │           │            │
  ▼          ▼           ▼            ▼
 What       Get the    Follow the   Show your
 stack?     relevant   documented   sources
            docs       patterns

DETECT ──→ FETCH ──→ IMPLEMENT ──→ CITE
  │          │           │            │
  ▼          ▼           ▼            ▼
 What       Get the    Follow the   Show your
 stack?     relevant   documented   sources
            docs       patterns

Step 1: Detect Stack and Versions

步骤1：检测技术栈和版本

Read the project's dependency file to identify exact versions:

package.json    → Node/React/Vue/Angular/Svelte
composer.json   → PHP/Symfony/Laravel
requirements.txt / pyproject.toml → Python/Django/Flask
go.mod          → Go
Cargo.toml      → Rust
Gemfile         → Ruby/Rails

State what you found explicitly:

STACK DETECTED:
- React 19.1.0 (from package.json)
- Vite 6.2.0
- Tailwind CSS 4.0.3
→ Fetching official docs for the relevant patterns.

If versions are missing or ambiguous, ask the user. Don't guess — the version determines which patterns are correct.

读取项目的依赖文件确认准确版本：

package.json    → Node/React/Vue/Angular/Svelte
composer.json   → PHP/Symfony/Laravel
requirements.txt / pyproject.toml → Python/Django/Flask
go.mod          → Go
Cargo.toml      → Rust
Gemfile         → Ruby/Rails

明确告知用户检测到的版本：

STACK DETECTED:
- React 19.1.0 (from package.json)
- Vite 6.2.0
- Tailwind CSS 4.0.3
→ Fetching official docs for the relevant patterns.

如果版本缺失或不明确，询问用户，不要猜测——版本决定了哪些模式是正确的。

Step 2: Fetch Official Documentation

步骤2：获取官方文档

Fetch the specific documentation page for the feature you're implementing. Not the homepage, not the full docs — the relevant page.

Source hierarchy (in order of authority):

Priority	Source	Example
1	Official documentation	react.dev, docs.djangoproject.com, symfony.com/doc
2	Official blog / changelog	react.dev/blog, nextjs.org/blog
3	Web standards references	MDN, web.dev, html.spec.whatwg.org
4	Browser/runtime compatibility	caniuse.com, node.green

Not authoritative — never cite as primary sources:

Stack Overflow answers
Blog posts or tutorials (even popular ones)
AI-generated documentation or summaries
Your own training data (that is the whole point — verify it)

Be precise with what you fetch:

BAD:  Fetch the React homepage
GOOD: Fetch react.dev/reference/react/useActionState

BAD:  Search "django authentication best practices"
GOOD: Fetch docs.djangoproject.com/en/6.0/topics/auth/

After fetching, extract the key patterns and note any deprecation warnings or migration guidance.

When official sources conflict with each other (e.g. a migration guide contradicts the API reference), surface the discrepancy to the user and verify which pattern actually works against the detected version.

拉取你要实现的功能对应的特定文档页面，不要拉取首页或者完整文档集，只要相关页面。

来源优先级（按权威度从高到低排序）：

优先级	来源	示例
1	官方文档	react.dev, docs.djangoproject.com, symfony.com/doc
2	官方博客 / 更新日志	react.dev/blog, nextjs.org/blog
3	Web 标准参考	MDN, web.dev, html.spec.whatwg.org
4	浏览器/运行时兼容性参考	caniuse.com, node.green

非权威来源——永远不要作为首要引用来源：

Stack Overflow 回答
博客文章或教程（即使是非常热门的）
AI 生成的文档或总结
你自身的训练数据（这正是本方法的核心——要验证训练数据的正确性）

拉取文档时要精准：

BAD:  Fetch the React homepage
GOOD: Fetch react.dev/reference/react/useActionState

BAD:  Search "django authentication best practices"
GOOD: Fetch docs.djangoproject.com/en/6.0/topics/auth/

拉取文档后，提取核心实现模式，记录所有废弃警告或迁移指引。

如果官方来源之间存在冲突（比如迁移指南和API参考不一致），要将差异告知用户，并结合检测到的版本验证哪种模式实际可用。

Step 3: Implement Following Documented Patterns

步骤3：遵循文档记录的模式实现

Write code that matches what the documentation shows:

Use the API signatures from the docs, not from memory
If the docs show a new way to do something, use the new way
If the docs deprecate a pattern, don't use the deprecated version
If the docs don't cover something, flag it as unverified

When docs conflict with existing project code:

CONFLICT DETECTED:
The existing codebase uses useState for form loading state,
but React 19 docs recommend useActionState for this pattern.
(Source: react.dev/reference/react/useActionState)

Options:
A) Use the modern pattern (useActionState) — consistent with current docs
B) Match existing code (useState) — consistent with codebase
→ Which approach do you prefer?

Surface the conflict. Don't silently pick one.

编写和文档示例一致的代码：

使用文档给出的API签名，不要凭记忆写
如果文档给出了新的实现方式，使用新方式
如果文档标注某个模式已废弃，不要使用废弃版本
如果文档没有覆盖某个场景，要标注为未验证

当文档和现有项目代码冲突时：

CONFLICT DETECTED:
The existing codebase uses useState for form loading state,
but React 19 docs recommend useActionState for this pattern.
(Source: react.dev/reference/react/useActionState)

Options:
A) Use the modern pattern (useActionState) — consistent with current docs
B) Match existing code (useState) — consistent with codebase
→ Which approach do you prefer?

要把冲突公开出来，不要默默选择其中一种。

Step 4: Cite Your Sources

步骤4：引用你的来源

Every framework-specific pattern gets a citation. The user must be able to verify every decision.

In code comments:

typescript

// React 19 form handling with useActionState
// Source: https://react.dev/reference/react/useActionState#usage
const [state, formAction, isPending] = useActionState(submitOrder, initialState);

In conversation:

I'm using useActionState instead of manual useState for the
form submission state. React 19 replaced the manual
isPending/setIsPending pattern with this hook.

Source: https://react.dev/blog/2024/12/05/react-19#actions
"useTransition now supports async functions [...] to handle
pending states automatically"

Citation rules:

Full URLs, not shortened
Prefer deep links with anchors where possible (e.g.
```
/useActionState#usage
```
over
```
/useActionState
```
) — anchors survive doc restructuring better than top-level pages
Quote the relevant passage when it supports a non-obvious decision
Include browser/runtime support data when recommending platform features
If you cannot find documentation for a pattern, say so explicitly:

UNVERIFIED: I could not find official documentation for this
pattern. This is based on training data and may be outdated.
Verify before using in production.

Honesty about what you couldn't verify is more valuable than false confidence.

每个框架专属的实现模式都要加上引用，用户必须能够核验每一个决策的依据。

在代码注释中：