ShipAny TanStack 的 Agent Skills:把 Claude Code 变成真正懂项目的开发助手

📅 2026/7/9 8:01:10 👁️ 阅读次数 📝 编程学习
ShipAny TanStack 的 Agent Skills:把 Claude Code 变成真正懂项目的开发助手

ShipAny TanStack 的 Agent Skills:把 Claude Code 变成真正懂项目的开发助手

很多人使用 AI 写代码时,会遇到一个问题:AI 看起来很聪明,但它并不真正理解你的项目。

它可能会写出能运行的代码,却不符合目录结构;可能会新增一套重复的 schema;也可能在国际化、API 路由、组件组织、部署流程上偏离项目原本的工程约定。

ShipAny TanStack 的Agent Skills,就是为了解决这个问题。

它不是简单地给 Claude Code 加几条快捷命令,而是把项目自身的开发规范、目录结构、模块模式、国际化方案、schema 复用原则都沉淀进.claude/skills/里,让 Agent 在第一次生成代码时,就尽量贴合当前代码库。

换句话说,Agent Skills 的目标不是“让 AI 会写代码”,而是让 AI按这个项目的方式写代码

为什么 Agent Skills 重要?

传统 AI 编程助手最大的问题,是上下文不稳定。

你可以反复提醒它:

不要乱建目录。

不要重复写 schema。

记得加导航入口。

按已有 service 层模式来。

但每一次新任务,都需要重新解释一遍项目规则。

ShipAny TanStack 的做法是:把这些规则变成可调用的 Skill。开发者只需要在 Claude Code 中输入对应命令,例如/new-page/new-module/deploy-cloudflare,Agent 就会按照预设流程执行。

这让 AI 从“临时帮手”更接近“熟悉项目的工程同事”。

从 0 到 1:/quick-start

/quick-start适合快速创建一个完整 SaaS 项目。

你可以给它一个产品描述、参考网站,甚至内容来源,它会根据这些信息生成项目雏形。

例如:

/quick-start 做一个 AI 写作工具叫 WriteAI,参考 jasper.ai 的网站风格

这类能力特别适合独立开发者、AI 产品站长、出海 SaaS 团队。过去从想法到可运行项目,可能需要先搭框架、配页面、设计结构;现在可以让 Agent 先生成一个符合 ShipAny TanStack 架构的起点,再由开发者继续打磨。

网站复刻:/clone-website

/clone-website面向的是参考站复刻。

它可以逆向分析一个或多个网站,提取页面区块、资源、CSS 和内容,并把研究结果写入docs/research/<hostname>/

例如:

/clone-website https://linear.app

也可以在克隆视觉风格后替换成自己的产品内容:

/clone-website https://jasper.ai 一个 AI 求职信生成器,叫 CoverAI

这个 Skill 的价值在于,它不是让 AI 凭感觉模仿,而是先形成可审计的规格文档,再进入实现阶段。对于想快速做出高质量落地页的项目来说,这比从空白页面开始效率高很多。

一键部署:/deploy-cloudflare

很多 SaaS 项目真正卡住的地方,不是页面,而是部署。

Cloudflare Workers、D1、Hyperdrive、数据库迁移、密钥配置、管理员账号、URL 修正,每一步都可能出错。

/deploy-cloudflare把这些流程串起来:

/deploy-cloudflare

也可以指定域名或管理员账号:

/deploy-cloudflare--domain=app.example.com /deploy-cloudflare --admin-email=admin@example.com --admin-password=secret

它的设计重点是幂等:可以反复运行,用来发布最新代码,而不是一次性脚本。这对持续迭代很重要。

新增业务页面:/new-page

/new-page用来新增 Dashboard 页面。

它会按照 ShipAny TanStack 的项目模式处理路由、API client、service 调用、表格、表单组件和侧边栏导航入口。

例如:

/new-page 一个项目列表页,带新建/编辑/删除弹窗

这类功能看起来普通,但非常适合交给 Agent。因为它通常涉及多个文件:路由、组件、接口、导航、状态处理。如果没有 Skill 约束,AI 很容易漏掉其中一环。

新增静态页面:/new-static-page

很多 SaaS 产品都需要隐私政策、退款政策、关于我们、服务条款等静态页面。

/new-static-page会按语言生成 MDX 页面,并自动处理返回链接和 prose 排版。

例如:

/new-static-page 退款政策,30 天无理由退款

这比手动复制页面模板更稳,也能避免页面风格不一致。

新增后端模块:/new-module

/new-module是更偏工程化的 Skill。

它不会一上来就新增数据库表,而是先检查现有表是否可以复用,例如posttaxonomyconfigcredit等。只有在确实需要时,才新增 schema,然后生成 service 层和 API 路由。

例如:

/new-module notifications -- 存储用户通知,提供已读标记 API

这点很关键。很多 AI 生成代码的问题,不是不会写功能,而是太容易“另起炉灶”。ShipAny 的模块 Skill 强调复用现有结构,能减少后期维护成本。

生成图片:/generate-image

/generate-image用来生成装饰性视觉素材,比如 Hero 图、功能插图、空状态、博客封面等,并保存到public/imgs/generated/

例如:

/generate-image 等距风格插画,一个机器人在整理文件,柔和紫色调

它适合快速补齐产品页面中的视觉资产。

提交前安全审计:/security-scan

AI 写代码之后,最怕的是隐藏安全问题。

/security-scan用于提交前检查,包括密钥泄露、违禁文件、.gitignore覆盖检查,以及人工 diff 审查,关注注入漏洞、鉴权问题和业务逻辑缺陷。

/security-scan

这类 Skill 的意义不只是“扫一遍”,而是把安全审计变成开发流程的一部分。

同步上游:/sync-upstream

ShipAny TanStack 还提供/sync-upstream,用于把上游shipany-next的最新能力移植到当前 TanStack 仓库。

它不是简单 git merge,而是根据框架差异进行适配:共享业务层可以尽量原样迁移,而 Next.js 相关代码会适配到 TanStack 的文件路由和 Paraglide 国际化体系。

/sync-upstream

这对长期维护项目很重要,因为 SaaS boilerplate 最大的价值之一,就是持续吸收上游能力。

总结

ShipAny TanStack 的 Agent Skills,本质上是在解决 AI 编程的一个核心问题:如何让 Agent 不只是会写代码,而是会按项目规范交付代码。

它把常见开发任务拆成一组高频 Skill:

  • /quick-start负责从 0 到 1
  • /clone-website负责参考站复刻
  • /deploy-cloudflare负责部署
  • /new-page负责业务页面
  • /new-static-page负责静态内容页
  • /new-module负责后端模块
  • /generate-image负责视觉素材
  • /security-scan负责安全审计
  • /sync-upstream负责上游同步

如果说传统脚手架解决的是“项目初始化”,那么 ShipAny TanStack 的 Agent Skills 解决的是“项目持续开发”。

它让 AI 不再只是一个代码补全工具,而是一个带着项目上下文、工程约定和交付流程的开发执行层。

参考来源

  • ShipAny Docs - Agent Skills