add-component

Add a SwiftUI component from ShipSwift recipes. Use when the user says "add component", "add a view", "add X view", "I need a chart", "add animation", or wants a specific UI element.

Safety Notice

This listing is imported from skills.sh public index metadata. Review upstream SKILL.md and repository scripts before running.

Copy this and send it to your AI assistant to learn

Install skill "add-component" with this command: npx skills add signerlabs/shipswift-skills

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 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 and set SHIPSWIFT_API_KEY in their environment.

Source Transparency

This detail page is rendered from real SKILL.md content. Trust labels are metadata-based hints, not a safety guarantee.

Related Skills

Related by shared tags or category signals.

General

build-feature

No summary provided by upstream source.

Repository SourceNeeds Review
General

explore-recipes

No summary provided by upstream source.

Repository SourceNeeds Review
General

Secretary Memory Hook

秘书记忆系统核心 Hook — 会话压缩时自动触发摘要/偏好提取/上下文召回。基于 session:compact:before 和 session:compact:after 事件,实现功能3(会话摘要)、功能4(偏好提取)、功能8(跨会话召回)的自动化。

Registry SourceRecently Updated
General

AI Era Career Planner

AI时代职业规划师技能。专为AI时代职场变化而设计,帮助用户应对AI带来的职业冲击与机遇。当用户询问职业规划、职业建议、选专业、职场转型、未来就业方向时触发。功能包括:收集用户基本信息、霍兰德职业兴趣测评、职业价值观分析、AI时代职业影响评估(高危/中危/低危分级),并输出完整的个性化职业规划报告。关键词:职业规...

Registry SourceRecently Updated