Agent Skills › AstraFoundry/KumoApp › add-component

add-component

GitHub

通过 ShipSwift 技能库搜索、获取并集成 SwiftUI 组件,包括动画、图表及 UI 模块。支持自动适配项目命名规范与数据模型,确保代码符合生产标准并正确集成到现有应用中。

.agents/skills/add-component/SKILL.md AstraFoundry/KumoApp

Trigger Scenarios

用户请求添加特定 SwiftUI 视图或组件 用户需要添加动画效果(如 shimmer) 用户需要添加图表(如 donut chart) 用户希望集成第三方 UI 模块

Install

npx skills add AstraFoundry/KumoApp --skill add-component -g -y
More Options

Non-standard path

npx skills add https://github.com/AstraFoundry/KumoApp/tree/main/.agents/skills/add-component -g -y

Use without installing

npx skills use AstraFoundry/KumoApp@add-component

指定 Agent (Claude Code)

npx skills add AstraFoundry/KumoApp --skill add-component -a claude-code -g -y

安装 repo 全部 skill

npx skills add AstraFoundry/KumoApp --all -g -y

预览 repo 内 skill

npx skills add AstraFoundry/KumoApp --list

SKILL.md

Frontmatter
{
    "name": "add-component",
    "description": "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."
}

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.

Version History

  • 0.0.15 Current 2026-07-24 12:26

Dependencies

  • suggested signerlabs/shipswift-skills

Same Skill Collection

.agents/skills/ios-app-intents/SKILL.md
.agents/skills/ios-debugger-agent/SKILL.md
.agents/skills/ios-ettrace-performance/SKILL.md
.agents/skills/ios-memgraph-leaks/SKILL.md
.agents/skills/liquid-glass-design/SKILL.md
.agents/skills/macos-design-guidelines/SKILL.md
.agents/skills/swiftui-liquid-glass/SKILL.md
.agents/skills/swiftui-performance-audit/SKILL.md
.agents/skills/swiftui-ui-patterns/SKILL.md
.agents/skills/swiftui-view-refactor/SKILL.md
.claude/skills/liquid-glass-design/SKILL.md
.claude/skills/swiftui-liquid-glass/SKILL.md
.claude/skills/swiftui-performance-audit/SKILL.md
.claude/skills/swiftui-ui-patterns/SKILL.md
.claude/skills/swiftui-view-refactor/SKILL.md
.agents/skills/build-feature/SKILL.md
.agents/skills/explore-recipes/SKILL.md
.agents/skills/swiftui-animation/SKILL.md
.agents/skills/swiftui-expert-skill/SKILL.md
.claude/skills/swiftui-animation/SKILL.md
.claude/skills/swiftui-expert-skill/SKILL.md

Metadata

Files
0
Version
0.0.15
Hash
c6c3b06a
Indexed
2026-07-24 12:26

Главная - Вики-сайт
Copyright © 2011-2026 iteam. Current version is 2.155.2. UTC+08:00, 2026-09-30 06:38
浙ICP备14020137号-1