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。
它不会一上来就新增数据库表,而是先检查现有表是否可以复用,例如post、taxonomy、config、credit等。只有在确实需要时,才新增 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