App Builder
You have access to:
- - INLINECODE0
- INLINECODE1
- INLINECODE2
If you use these tools, and find out that you don't have them or are not logged in, prompt the user to install them and log in.
All apps live in: INLINECODE3
Ground rules
- - Always create/edit projects in
~/apps/<app-name>. - Before making changes, read
AGENTS.md in the repo root; also read ~/apps/<app-name>/AGENTS.md if it exists. - For now, always push to
main. - Every app must be:
1) pushed to GitHub
2) deployed on Vercel
Workflow: create a new app
- 1. Pick an app folder name
- Ensure
~/apps exists.
- The project will end up at
~/apps/<app-name>.
- 2. Create an Instant appId + token
- Run:
-
npx instant-cli init-without-files
- Capture the returned
appId and
token.
- 3. Generate the Next.js app
- Run this from inside
~/apps (because the command creates the project folder):
-
cd ~/apps
- INLINECODE15
- 4. Initialise git + GitHub repo (if needed)
- From
~/apps/<app-name>:
-
git init (if not already)
-
git add -A && git commit -m "Init" (if needed)
-
gh repo create <repo-name> --private --source . --remote origin --push
- Use
--public if the user requests.
- 5. Vercel: create/link project and deploy
- From
~/apps/<app-name>:
-
vercel link (or
vercel project add /
vercel depending on prompts)
- INLINECODE25
- 6. Implement requested changes
- Use a coding agent (Codex CLI or equivalent) from within the app directory to make changes.
- Prefer small, reviewable commits.
- 7. Commit + push (main)
-
git add -A
-
git commit -m "<clear message>"
- INLINECODE28
- 8. Deploy update
- INLINECODE29
Workflow: edit an existing app
- 1. INLINECODE30
- Read relevant
AGENTS.md. - Pull latest:
-
git checkout main && git pull
- 4. Make changes via coding agent / normal edits.
- Test/build as appropriate.
- Commit + push to
main. - Deploy to Vercel (
vercel --prod).
Environment variables (.env)
When you first push to vercel, it likely won't have environment variables. Use the CLI to push the environment variables you do have in the local .env file.
Notes / guardrails
- - If
create-instant-app created the repo + remote already, do not re-create it—just ensure origin exists and main is pushed. - If Vercel is already linked, do not re-link—just deploy.
Communicating
When you start using this skill, send a message saying "Okay, getting ready to use my app builder skill".
Then send period updates as you make progress. Building an app takes a while. Make it fun for the user.
App Builder
你可以使用以下工具：
- - npx instant-cli
- gh
- vercel
如果你使用这些工具时发现尚未安装或未登录，请提示用户进行安装和登录。
所有应用都存放在：~/apps
基本规则
- - 始终在 ~/apps/<应用名称> 中创建/编辑项目。
- 在进行更改之前，请阅读仓库根目录下的 AGENTS.md；如果存在 ~/apps/<应用名称>/AGENTS.md，也请一并阅读。
- 目前，始终推送到 main 分支。
- 每个应用必须：
1) 推送到 GitHub
2) 部署到 Vercel
工作流程：创建新应用
- 1. 选择应用文件夹名称
- 确保 ~/apps 目录存在。
- 项目最终将位于 ~/apps/<应用名称>。
- 2. 创建 Instant appId 和 token
- 运行：
- npx instant-cli init-without-files
- 记录返回的 appId 和 token。
- 3. 生成 Next.js 应用
- 在 ~/apps 目录内运行（因为该命令会创建项目文件夹）：
- cd ~/apps
- npx create-instant-app <应用名称> --next --codex --app
--token
- 4. 初始化 git 和 GitHub 仓库（如需要）
- 在 ~/apps/<应用名称> 目录中：
- git init（如果尚未初始化）
- git add -A && git commit -m Init（如需要）
- gh repo create <仓库名称> --private --source . --remote origin --push
- 如果用户要求，可使用 --public。
- 5. Vercel：创建/关联项目并部署
- 在 ~/apps/<应用名称> 目录中：
- vercel link（或根据提示使用 vercel project add / vercel）
- vercel --prod
- 6. 实现所需更改
- 在应用目录内使用编码代理（Codex CLI 或类似工具）进行更改。
- 优先进行小型、可审查的提交。
- 7. 提交并推送（main 分支）
- git add -A
- git commit -m <清晰的信息>
- git push -u origin main
- 8. 部署更新
- vercel --prod
工作流程：编辑现有应用
- 1. cd ~/apps/<应用名称>
- 阅读相关的 AGENTS.md。
- 拉取最新代码：
- git checkout main && git pull
- 4. 通过编码代理/常规编辑进行更改。
- 适当进行测试/构建。
- 提交并推送到 main 分支。
- 部署到 Vercel（vercel --prod）。
环境变量（.env）
当你首次推送到 Vercel 时，它可能没有环境变量。请使用 CLI 将本地 .env 文件中已有的环境变量推送过去。
注意事项/防护措施
- - 如果 create-instant-app 已经创建了仓库和远程仓库，请勿重复创建——只需确保 origin 存在且 main 分支已推送即可。
- 如果 Vercel 已经关联，请勿重新关联——只需部署即可。
沟通
当你开始使用此技能时，请发送一条消息：好的，准备使用我的应用构建技能。
然后在进展过程中定期发送更新。构建应用需要一些时间。让用户感到有趣。
