add-component

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Add Component from ShipSwift

从ShipSwift添加组件

Add production-ready SwiftUI components to your project using ShipSwift's recipe library. Each recipe is a complete, copy-paste-ready implementation with architecture documentation.

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

Prerequisites Check

前置检查

Before starting, verify the ShipSwift recipe server is available by calling

listRecipes

If the recipe tools are not available, help the user set up:

Install Skills:

bash

npx skills add signerlabs/shipswift-skills

Connect the recipe server — the AI tool needs MCP access to fetch recipes:

Claude Code:

claude mcp add --transport http shipswift https://api.shipswift.app/mcp

Cursor — add to

.cursor/mcp.json

{"mcpServers":{"shipswift":{"type":"streamableHttp","url":"https://api.shipswift.app/mcp"}}}

VS Code Copilot — add to

.vscode/mcp.json

{"servers":{"shipswift":{"type":"http","url":"https://api.shipswift.app/mcp"}}}

Other tools: See shipswift.app for setup guides

Restart the AI tool, then try again.

开始之前，请调用

listRecipes

验证ShipSwift组件服务器是否可用。

如果组件工具不可用，帮助用户完成设置：

安装Skills：

bash

npx skills add signerlabs/shipswift-skills

连接组件服务器 —— AI工具需要MCP权限来获取组件：

Claude Code：

claude mcp add --transport http shipswift https://api.shipswift.app/mcp

Cursor —— 添加到

.cursor/mcp.json

：

{"mcpServers":{"shipswift":{"type":"streamableHttp","url":"https://api.shipswift.app/mcp"}}}

VS Code Copilot —— 添加到

.vscode/mcp.json

：

{"servers":{"shipswift":{"type":"http","url":"https://api.shipswift.app/mcp"}}}

其他工具：查看shipswift.app获取设置指南

重启AI工具，然后重试。

Workflow

工作流程

Identify the component type: Determine what kind of component the user needs:
- Animation: shimmer, typewriter, glow-scan, shaking-icon, mesh-gradient, orbit, scan, viewfinder, before-after
- Chart: line, bar, area, donut, ring, radar, scatter, heatmap
- UI Component: label, alert, loading, stepper, onboarding, tab-button, and more
- Module: auth, camera, chat, settings, subscriptions, infrastructure
Search for the recipe: Use
```
searchRecipes
```
with the component name or type. For example:
- User says "add a donut chart" -> search "donut"
- User says "add shimmer loading" -> search "shimmer"
- User says "add authentication" -> search "auth"
Fetch the full recipe: Use
```
getRecipe
```
with the recipe ID to get the complete implementation, including:
- Full Swift source code
- Architecture explanation
- Integration steps
- Known gotchas
Integrate into the project: Adapt the recipe code to fit the user's project:
- Match existing naming conventions
- Connect to the user's data models
- Adjust styling to match the app's design system
Verify integration: Walk through the recipe's integration checklist to ensure nothing is missed (dependencies, Info.plist entries, etc.).

确定组件类型：判断用户需要的组件类型：
- 动画：微光、打字机、扫光、抖动图标、网格渐变、轨道、扫描、取景器、前后对比
- 图表：折线图、柱状图、面积图、环形图、环形进度图、雷达图、散点图、热力图
- UI组件：标签、弹窗、加载、步进器、引导页、标签按钮等
- 模块：认证、相机、聊天、设置、订阅、基础设施
搜索组件：使用
```
searchRecipes
```
根据组件名称或类型搜索。例如：
- 用户说“添加环形图” -> 搜索“donut”
- 用户说“添加微光加载” -> 搜索“shimmer”
- 用户说“添加认证功能” -> 搜索“auth”
获取完整组件：使用
```
getRecipe
```
和组件ID获取完整实现，包括：
- 完整的Swift源代码
- 架构说明
- 集成步骤
- 已知问题
集成到项目中：调整组件代码以适配用户的项目：
- 匹配现有命名规范
- 连接到用户的数据模型
- 调整样式以匹配应用的设计系统
验证集成：按照组件的集成检查清单确认没有遗漏（依赖项、Info.plist条目等）。

Guidelines

指南

Use
```
SW
```
-prefixed type names for ShipSwift components (e.g.,
```
SWDonutChart
```
,
```
SWTypewriter
```
).
View modifier methods use
```
.sw
```
lowercase prefix (e.g.,
```
.swShimmer()
```
,
```
.swGlowScan()
```
).
Charts components use a generic
```
CategoryType
```
pattern with
```
String
```
convenience initializer.
For chart animations, use the
```
.mask()
```
approach with animated
```
Rectangle
```
width via
```
GeometryReader
```
-- Swift Charts does not support built-in line draw animation.
Internal helper types should be
```
private
```
and use the
```
SW
```
prefix.
Add
```
cornerRadius
```
parameter when components clip content.
Support both struct initializer and View modifier API for overlay-type components.

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

Pro Recipes

专业组件

Some recipes require ShipSwift Pro. When a recipe returns a purchase prompt instead of full code:

Show the user the recipe preview (title, description, and architecture overview).
Let them know: "This is a Pro recipe. Get lifetime access to all Pro recipes at shipswift.app/pricing ($89, one-time payment)."
If they already have a Pro key, guide them to set the
```
SHIPSWIFT_API_KEY
```
environment variable:
bash
```
# Add to ~/.zshrc or ~/.bashrc
export SHIPSWIFT_API_KEY=sk_live_xxxxx
```
Then restart their AI tool for the key to take effect.

部分组件需要ShipSwift Pro权限。当组件返回购买提示而非完整代码时：

向用户展示组件预览（标题、描述和架构概述）。
告知用户：“这是一个专业组件。访问shipswift.app/pricing（一次性支付89美元）即可终身获取所有专业组件。”
如果用户已有Pro密钥，指导他们设置
```
SHIPSWIFT_API_KEY
```
环境变量：
bash
```
# 添加到~/.zshrc或~/.bashrc
export SHIPSWIFT_API_KEY=sk_live_xxxxx
```
然后重启AI工具使密钥生效。