OpenTangl
Configure a self-driving development loop for any JavaScript/TypeScript project. This skill detects your project setup, generates configuration files, and prepares OpenTangl to run autonomously.
Follow these steps in order. Complete each step fully before moving to the next. Wait for user confirmation at every gate before proceeding. Do not skip steps or combine them — the user needs to complete actions on their end between steps.
Prerequisites
The user must have OpenTangl cloned and installed before using this skill. If they haven't, provide these commands for them to run:
CODEBLOCK0
Do not run these commands on the user's behalf. Wait for confirmation that OpenTangl is installed.
Once confirmed, verify the required tools are present. Run each check and report the results:
- - Node.js ≥ 18 — run
node --version and show the output - git — run
git --version and show the output - GitHub CLI — run
gh auth status and show the output (needed for PR creation and merging)
Report all results to the user. If anything is missing, tell them exactly how to install it and stop until resolved.
Step 1 — Determine the Target Project
Ask the user:
Are you improving (a) an existing project, or (b) starting from scratch?
Path A: Existing Project
- 1. Ask: "Where is your project?" Accept a path. If they say "this directory," use cwd.
- Tell the user you'll read config files in their project directory to detect the setup. Only inspect files in the directory the user provided — do not scan outside it. Check:
-
Type:
tsconfig.json → TypeScript,
vite.config.ts → Vite,
next.config.* → Next.js,
serverless.yml → Serverless
-
Package manager:
package-lock.json → npm,
yarn.lock → yarn,
pnpm-lock.yaml → pnpm
-
Build/test commands: Read
package.json scripts for
build,
test,
lint,
typecheck
-
Source dirs: Default to
src/ if it exists
-
Target branch: Check
git symbolic-ref refs/remotes/origin/HEAD or look for
main vs
master
- 3. Show everything you detected and confirm with the user before proceeding.
- Ask: "Are there other repos that are part of this same product?" If yes, repeat detection for each.
Path B: New Project
Tell the user to scaffold and initialize their project before continuing. Suggest the appropriate tool based on what they want to build:
- - React + Vite: INLINECODE19
- Next.js: INLINECODE20
- Express: create
package.json + src/index.ts manually
They should also initialize git and create a GitHub repo:
CODEBLOCK1
Do not run these commands on the user's behalf. Once they confirm the project exists with a GitHub remote, continue.
Step 2 — Generate projects.yaml
Create projects.yaml in the OpenTangl root directory. Each project entry needs:
CODEBLOCK2
Supported types: typescript-node, serverless-js, serverless-ts, react-vite, react-next, express (or any descriptive string).
For multi-project setups, add an environment field to group related projects under a shared vision:
CODEBLOCK3
Step 3 — Create the Vision Doc
Create docs/environments/{environment}/product-vision.md (use the project id as environment name for single projects, or the environment field for multi-project).
The vision doc has two sections:
Origin & Direction (human-authored, never modified by OpenTangl)
Ask the user to describe:
- - What This Is — 2-3 sentences about the project
- Where It's Going — long-term direction, 6-12 months out
- What Matters Most — 3-5 principles guiding decisions
Current Priorities (maintained by OpenTangl after each run)
Ask: "What are the first 3-5 things you want built or improved?"
Write them as Active Initiatives:
CODEBLOCK4
If the user isn't sure, offer to read the codebase and suggest priorities.
Step 4 — Configure the LLM
The user needs to create a .env file in the OpenTangl root with their API key. Do not accept or handle API keys directly — provide the template and let the user create the file themselves.
First, verify that .env appears in the project's .gitignore by reading the file. If it does not, add it and tell the user.
Then provide the appropriate template for the user to fill in:
For OpenAI:
CODEBLOCK5
For Anthropic (Claude):
CODEBLOCK6
Tell the user: "Create a .env file in the OpenTangl root and paste one of the templates above with your key. This file is gitignored and will never be committed."
Wait for confirmation before continuing.
Step 5 — Prepare the First Run
Initialize an empty task queue:
CODEBLOCK7
Then provide the user with the command to start the autopilot. Do not run this command on the user's behalf — show it and let them execute it:
For a single project:
CODEBLOCK8
For multi-project:
CODEBLOCK9
What happens during a cycle:
- 1. OpenTangl reads the vision doc and scans the codebase
- It proposes tasks aligned with the vision
- It executes each task — writes code, runs verification
- It creates PRs, reviews them with the LLM, merges if clean
- It updates the vision doc with progress
Tell the user to review the results after the first run — check the generated PRs and the updated vision doc.
Troubleshooting
- - "No pending tasks" — The queue is empty. Run autopilot to have the LLM propose tasks, or add more specific priorities to the vision doc.
- Build failures — OpenTangl retries up to 3 times with error feedback. If all attempts fail, the task is marked failed and skipped.
- Escalated PRs — The LLM reviewer flagged critical concerns. Check the GitHub issue it created for details.
- "OPENAIAPIKEY is required" — Create
.env and add your key (see Step 4). - Merge conflicts — OpenTangl has a built-in conflict resolver. If it can't resolve automatically, the PR is escalated for human review.
OpenTangl
为任何 JavaScript/TypeScript 项目配置自动驾驶开发循环。该技能会检测你的项目设置,生成配置文件,并让 OpenTangl 准备好自主运行。
请按顺序执行以下步骤。 在进入下一步之前,必须完全完成当前步骤。在每个关卡等待用户确认后再继续。不要跳过步骤或合并它们——用户需要在步骤之间自行完成操作。
前置条件
用户必须先克隆并安装 OpenTangl 才能使用此技能。如果尚未安装,请提供以下命令供其运行:
git clone https://github.com/8co/opentangl.git
cd opentangl
npm install
不要代用户运行这些命令。 等待确认 OpenTangl 已安装。
确认后,验证所需工具是否就绪。运行每项检查并报告结果:
- - Node.js ≥ 18 — 运行 node --version 并显示输出
- git — 运行 git --version 并显示输出
- GitHub CLI — 运行 gh auth status 并显示输出(创建和合并 PR 时需要)
向用户报告所有结果。如果缺少任何内容,准确告知如何安装,并停止操作直至问题解决。
步骤 1 — 确定目标项目
询问用户:
你是在改进 (a) 现有项目,还是 (b) 从头开始?
路径 A:现有项目
- 1. 询问:你的项目在哪里? 接受路径。如果他们说当前目录,则使用当前工作目录。
- 告知用户你将读取其项目目录中的配置文件以检测设置。仅检查用户提供的目录中的文件——不要扫描目录之外的内容。检查:
-
类型:tsconfig.json → TypeScript,vite.config.ts → Vite,next.config.* → Next.js,serverless.yml → Serverless
-
包管理器:package-lock.json → npm,yarn.lock → yarn,pnpm-lock.yaml → pnpm
-
构建/测试命令:读取 package.json 中的 build、test、lint、typecheck 脚本
-
源码目录:如果存在 src/ 则默认使用
-
目标分支:检查 git symbolic-ref refs/remotes/origin/HEAD 或查找 main 与 master
- 3. 显示所有检测到的内容,并在继续前与用户确认。
- 询问:是否有其他仓库属于同一产品? 如果是,对每个仓库重复检测。
路径 B:新项目
告知用户在继续之前搭建并初始化项目。根据他们想要构建的内容推荐合适的工具:
- - React + Vite:npm create vite@latest {name} -- --template react-ts
- Next.js:npx create-next-app@latest {name} --typescript
- Express:手动创建 package.json + src/index.ts
他们还应该初始化 git 并创建 GitHub 仓库:
cd {name}
git init && git add . && git commit -m Initial scaffold
gh repo create {name} --public --source . --push
不要代用户运行这些命令。 一旦他们确认项目存在且已关联 GitHub 远程仓库,继续操作。
步骤 2 — 生成 projects.yaml
在 OpenTangl 根目录创建 projects.yaml。每个项目条目需要:
yaml
projects:
- id: my-app # 短横线命名法的短 ID(用于 CLI 标志)
name: my-app # 人类可读的名称
path: ../my-app # 从 OpenTangl 根目录到项目的相对路径
type: react-vite # 项目类型(见下文)
description: React dashboard app # 一行描述
scan_dirs:
- src # 包含源代码的目录
skip_patterns:
- node_modules
- dist
- .test.
verify: # 提交前必须通过的命令
- command: npm
args: [run, build]
package_manager: npm # npm | yarn | pnpm
merge:
target_branch: main # PR 合并到的目标分支
支持的类型: typescript-node、serverless-js、serverless-ts、react-vite、react-next、express(或任何描述性字符串)。
对于多项目设置,添加 environment 字段将相关项目分组到共享愿景下:
yaml
- id: my-api
environment: my-product
# ...
- id: my-frontend
environment: my-product
# ...
步骤 3 — 创建愿景文档
创建 docs/environments/{environment}/product-vision.md(对于单个项目,使用项目 id 作为环境名称;对于多项目,使用 environment 字段)。
愿景文档包含两个部分:
起源与方向(人工编写,OpenTangl 永不修改)
请用户描述:
- - 这是什么 — 2-3 句关于项目的描述
- 发展方向 — 长期方向,6-12 个月
- 最重要的是什么 — 指导决策的 3-5 条原则
当前优先级(每次运行后由 OpenTangl 维护)
询问:你希望首先构建或改进的 3-5 件事是什么?
将其写为活跃计划:
markdown
活跃计划
- 1. {优先级} — {内容及原因}
- 状态:未开始
如果用户不确定,主动提出阅读代码库并建议优先级。
步骤 4 — 配置 LLM
用户需要在 OpenTangl 根目录创建包含其 API 密钥的 .env 文件。不要直接接受或处理 API 密钥——提供模板,让用户自行创建文件。
首先,通过读取文件验证 .env 是否已出现在项目的 .gitignore 中。如果没有,添加并告知用户。
然后提供适当的模板供用户填写:
对于 OpenAI:
OPENAIAPIKEY=sk-...
OPENAI_MODEL=gpt-4o
DEFAULT_AGENT=openai
对于 Anthropic (Claude):
ANTHROPICAPIKEY=sk-ant-...
ANTHROPIC_MODEL=claude-sonnet-4-20250514
DEFAULT_AGENT=anthropic
告知用户:在 OpenTangl 根目录创建一个 .env 文件,并粘贴上述模板之一,填入你的密钥。此文件已被 gitignore,永远不会被提交。
等待确认后再继续。
步骤 5 — 准备首次运行
初始化空任务队列:
bash
mkdir -p tasks
echo tasks: [] > tasks/queue.yaml
然后向用户提供启动自动驾驶的命令。不要代用户运行此命令——显示命令并让他们自行执行:
对于单个项目:
npx tsx src/cli.ts autopilot --projects {project-id} --cycles 1 --feature-ratio 0.8
对于多项目:
npx tsx src/cli.ts autopilot --projects {api-id},{ui-id} --cycles 1 --feature-ratio 0.8
一个周期内发生的事情:
- 1. OpenTangl 读取愿景文档并扫描代码库
- 提出与愿景一致的任务
- 执行每个任务——编写代码,运行验证
- 创建 PR,用 LLM 审查,如果干净则合并
- 用进度更新愿景文档
告知用户在首次运行后检查结果——查看生成的 PR 和更新后的愿景文档。
故障排除
- - 没有待处理任务 — 队列为空。运行 autopilot 让 LLM 提出任务,或在愿景文档中添加更具体的优先级。
- 构建失败 — OpenTangl 会重试最多 3 次,并附带错误反馈。如果所有尝试都失败,任务将被标记为失败并跳过。
- 升级的 PR — LLM 审查者标记了关键问题。查看它为此创建的 GitHub issue 了解详情。
- 需要 OPENAIAPIKEY — 创建 .env 并添加你的密钥(参见步骤 4)。
- 合并冲突 — OpenTangl 有内置冲突解决器。如果无法自动解决,PR 将升级供人工审查。