add-component

从 ShipSwift 添加组件

使用 ShipSwift 的配方库，为项目添加可用于生产环境的 SwiftUI 组件。每个配方都是完整的实现，可直接复制粘贴，并附有架构文档。

前置条件检查

开始之前，先调用 listRecipes，确认 ShipSwift 配方服务可用。

如果工具不可用，请引导用户访问 shipswift.app 查看设置说明，或运行 npx skills add signerlabs/shipswift-skills 进行安装。

工作流

1. 确定组件类型：判断用户需要哪种组件：

   • 动画：shimmer、typewriter、glow-scan、shaking-icon、mesh-gradient、orbit、scan、viewfinder、before-after
   • 图表：line、bar、area、donut、ring、radar、scatter、heatmap
   • UI 组件：label、alert、loading、stepper、onboarding、tab-button 等
   • 模块：auth、camera、chat、settings、subscriptions、infrastructure

2. 搜索配方：使用 searchRecipes 搜索组件名称或类型。例如：

   • 用户说“添加一个环形图” -> 搜索“donut”
   • 用户说“添加 shimmer 加载效果” -> 搜索“shimmer”
   • 用户说“添加身份验证” -> 搜索“auth”

3. 获取完整配方：使用配方 ID 调用 getRecipe，获取完整实现，包括：

   • 完整的 Swift 源代码
   • 架构说明
   • 集成步骤
   • 已知注意事项

4. 集成到项目中：调整配方代码以适配用户的项目：

   • 遵循现有的命名约定
   • 接入用户的数据模型
   • 调整样式，使其符合应用的设计系统

5. 验证集成：按照配方的集成检查清单逐项确认，确保没有遗漏（依赖项、Info.plist 条目等）。

指南

• ShipSwift 组件的类型名称使用 SW 前缀（例如，SWDonutChart、SWTypewriter）。
• View 修饰符方法使用小写的 .sw 前缀（例如，.swShimmer()、.swGlowScan()）。
• 图表组件使用通用的 CategoryType 模式，并提供便捷的 String 初始化器。
• 对于图表动画，使用 .mask() 方案，通过 GeometryReader 为动画 Rectangle 设置宽度 —— Swift Charts 不支持内置的线条绘制动画。
• 内部辅助类型应设为 private，并使用 SW 前缀。
• 如果组件会裁剪内容，请添加 cornerRadius 参数。
• 对于覆盖层类型的组件，同时支持结构体初始化器和 View 修饰符 API。

Pro 配方

部分配方需要 Pro 许可证（一次性支付 $89）。如果配方提示购买，用户可以前往 shipswift.app/pricing 购买，并在环境中设置 SHIPSWIFT_API_KEY。