Add Component
Drop production-ready SwiftUI views and modules from ShipSwift recipes into an iOS project.
Overview
Add Component is an agent skill for the Build phase that adds production-ready SwiftUI components from ShipSwift recipes via search and fetch tools.
Install
npx skills add https://github.com/signerlabs/shipswift-skills --skill add-componentWhat is this skill?
- ShipSwift recipe workflow: listRecipes, searchRecipes, getRecipe for copy-paste SwiftUI
- Animation recipes: shimmer, typewriter, glow-scan, mesh-gradient, orbit, scan, viewfinder, before-after
- Chart recipes: line, bar, area, donut, ring, radar, scatter, heatmap
- UI and module coverage: alerts, onboarding, auth, camera, chat, settings, subscriptions
- Prerequisites gate checks recipe server via listRecipes before fetching implementations
- Nine named animation recipe types including shimmer and mesh-gradient
- Eight chart types from line through heatmap
- Four-step workflow: identify type, search, fetch, integrate
Adoption & trust: 627 installs on skills.sh; 28 GitHub stars; 2/3 security scanners passed (skills.sh audits).
What problem does it solve?
You know the UI you want—a donut chart or auth flow—but lack a vetted SwiftUI implementation to paste into Xcode.
Who is it for?
Indie iOS developers using agent-assisted coding who want curated SwiftUI instead of generic chat snippets.
Skip if: Android or React Native UIs, greenfield apps with no SwiftUI stack, or teams blocked from external recipe MCP tools.
When should I use this skill?
User says add component, add a view, add X view, I need a chart, add animation, or wants a specific UI element.
What do I get? / Deliverables
A matched ShipSwift recipe lands in your project with architecture documentation so the agent can integrate the component correctly.
- Integrated SwiftUI component from a ShipSwift recipe
- Architecture notes from the recipe for project placement
- Search-matched recipe source for the requested UI type
Recommended Skills
Journey fit
How it compares
Recipe-driven SwiftUI kit skill—not a generic Figma-to-code or web component generator.
Common Questions / FAQ
Who is add-component for?
Solo builders on SwiftUI who use Claude Code or Cursor with ShipSwift skills to ship polished mobile UI faster.
When should I use add-component?
During build/frontend when the user asks to add a view, chart, animation, shimmer, authentication module, or similar ShipSwift-backed UI.
Is add-component safe to install?
Review the Security Audits panel on this Prism page and confirm ShipSwift recipe server access matches your data and network policies.
SKILL.md
READMESKILL.md - 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 tools are not available, guide the user to visit [shipswift.app](https://shipswift.app) for setup instructions, or run `npx skills add signerlabs/shipswift-skills` to install. ## 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 a Pro license ($89 one-time). If a recipe returns a purchase prompt, the user can buy at [shipswift.app/pricing](https://shipswift.app/pricing) and set `SHIPSWIFT_API_KEY` in their environment.