Add Component

Add Component from 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.

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:

1. Install Skills:

   npx skills add signerlabs/shipswift-skills
   

2. 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

3. Restart the AI tool, then try again.

Workflow

1. 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

2. 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"

3. 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

4. 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

5. Verify integration: Walk through the recipe's integration checklist to ensure nothing is missed (dependencies, Info.plist entries, etc.).

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.

Pro Recipes

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

1. Show the user the recipe preview (title, description, and architecture overview).
2. Let them know: "This is a Pro recipe. Get lifetime access to all Pro recipes at shipswift.app/pricing ($89, one-time payment)."
3. If they already have a Pro key, guide them to set the SHIPSWIFT_API_KEY environment variable:

   # Add to ~/.zshrc or ~/.bashrc
   export SHIPSWIFT_API_KEY=sk_live_xxxxx
   

   Then restart their AI tool for the key to take effect.