New: 97,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Add Component

by AstraFoundry in AstraFoundry/KumoApp

Add a SwiftUI component from ShipSwift recipes. An agent skill from AstraFoundry/KumoApp.

AGPL-3.0Auto-check passedMobile

Install Add Component

skills CLI
$ npx skills add AstraFoundry/KumoApp --skill add-component -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install AstraFoundry/KumoApp add-component --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/AstraFoundry/KumoApp.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/add-component .claude/skills/add-component && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
add-component
GitHub stars
290
Token cost
~737 tokens
SKILL.md length
337 words
Files
1
Skills in repo
6
Repo updated
First seen
Licence
AGPL-3.0

At a glance

Add a SwiftUI component from ShipSwift recipes. An agent skill from AstraFoundry/KumoApp.

  • Works in 5 steps: Identify the component type: Determine… → Search for the recipe: Use searchRecipes… → Fetch the full recipe: Use getRecipe… → …
  • The user says add component
  • SKILL.md covers Prerequisites Check, Workflow, Guidelines and Pro Recipes
  • Calls npx; needs SHIPSWIFT_API_KEY

What it does

Add Component is an agent skill from AstraFoundry/KumoApp. 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.

Its SKILL.md is about 740 tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Mobile, covering iOS development. It works with SwiftUI. The repository describes itself as: A calm, native macOS client for the Mihomo proxy core, built with SwiftUI and a shared agent-friendly CLI. The licence is AGPL-3.0.

When your agent uses it

  • The user says add component
  • Wants a specific UI element

Example prompts

  • “add component”
  • “add a view”
  • “add X view”
  • “/add-component”

Requirements

  • Node.js
  • A credential in SHIPSWIFT_API_KEY

Workflow steps

5 steps, taken from the first numbered list in SKILL.md.

  1. Identify the component type: Determine what kind of component the user needs
  2. Search for the recipe: Use searchRecipes with the component name or type. For example
  3. Fetch the full recipe: Use getRecipe with the recipe ID to get the complete implementation, including
  4. Integrate into the project: Adapt the recipe code to fit the user's project
  5. Verify integration: Walk through the recipe's integration checklist to ensure nothing is missed (dependencies, Info.plist entries, etc.).

What it can do on your machine

Read from SKILL.md and the folder at commit 990ff36. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Shell commands in SKILL.md call:

    • npx

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    Links to these hosts (documentation or services it may open):

    • shipswift.app

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names these keys or tokens, usually read from environment variables:

    • SHIPSWIFT_API_KEY

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Add Component loads about 737 tokens when it runs. Until then it costs about 49 tokens; SKILL.md has 337 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~49
When it runs · the whole SKILL.md, loaded when a task matches
~737

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from AstraFoundry/KumoApp at commit 990ff36, republished under its AGPL-3.0 licence (© AstraFoundry). 337 words, ~737 tokens.

Download SKILL.mdSave it as .claude/skills/add-component/SKILL.md (or your agent's skills folder).
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.

© AstraFoundry, AGPL-3.0. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

Just SKILL.md in .agents/skills/add-component of AstraFoundry/KumoApp.

Open the folder on GitHubat commit 990ff36

Compare with similar skills

Add Component next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Add Component compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Add Component this skillAstraFoundry/KumoApp290—~737Automated safety check: PassAGPL-3.0
Swiftui Protwostraws/SwiftUI-Agent-Skill5k2 repos~1kAutomated safety check: PassMIT
Swiftui UI PatternsAFK-surf/OpenBridge4304 repos~887Automated safety check: PassMIT
Swiftui Performance Auditharperreed/dotfiles3348 repos~1.4kAutomated safety check: PassNone
Hig Project Contextraintree-technology/hig-doctor1425 repos~1.2kAutomated safety check: PassMIT
Hig Components Contentraintree-technology/hig-doctor1425 repos~1.3kAutomated safety check: PassMIT

Similar skills

  • Swiftui Pro

    twostraws/SwiftUI-Agent-Skill

    Comprehensively reviews SwiftUI code for best practices on modern APIs, maintainability, and performance.

    5k GitHub starsUsed in 2 repos~1k tokens
    MobileAuto-check passed

  • Swiftui UI Patterns

    AFK-surf/OpenBridge

    Best practices and example-driven guidance for building SwiftUI views and components.

    430 GitHub starsUsed in 4 repos~887 tokens
    MobileAuto-check passed

  • Swiftui Performance Audit

    harperreed/dotfiles

    Audit and improve SwiftUI runtime performance from code review and architecture.

    334 GitHub starsUsed in 8 repos~1.4k tokens
    MobileAuto-check passed

  • Hig Project Context

    raintree-technology/hig-doctor

    Create or update a shared Apple design context document that other HIG skills use to tailor guidance.

    142 GitHub starsUsed in 5 repos~1.2k tokens
    MobileAuto-check passed

  • Hig Components Content

    raintree-technology/hig-doctor

    Apple Human Interface Guidelines for content display components.

    142 GitHub starsUsed in 5 repos~1.3k tokens
    MobileAuto-check passed

  • Chunui

    liseami/ChunUI

    Build iOS apps with the ChunUI design system (Monochrome texture extracted from the production app Zinner/Chat0IM).

    523 GitHub stars~642 tokensUpdated 14 days ago
    MobileAuto-check passed

More from AstraFoundry/KumoApp

  • Liquid Glass Design

    AstraFoundry/KumoApp

    iOS 26 Liquid Glass design system — dynamic glass material with blur, reflection, and interactive morphing for SwiftUI, UIKit, and WidgetKit.

    290 GitHub starsUsed in 5 repos~2.3k tokens
    Auto-check passed

  • Swiftui Animation

    AstraFoundry/KumoApp

    Implement, review, or improve SwiftUI animations and transitions.

    290 GitHub stars~4.1k tokensUpdated 4 mo ago
    Auto-check passed

  • Build Feature

    AstraFoundry/KumoApp

    Build an iOS feature using ShipSwift component recipes. An agent skill from AstraFoundry/KumoApp.

    290 GitHub stars~632 tokensUpdated 4 mo ago
    Auto-check passed

  • Explore Recipes

    AstraFoundry/KumoApp

    Explore and browse available ShipSwift recipes. An agent skill from AstraFoundry/KumoApp.

    290 GitHub stars~621 tokensUpdated 4 mo ago
    Auto-check passed

  • Kumo CLI

    AstraFoundry/KumoApp

    Drive Kumo from coding agents and automation through the kumo command-line interface.

    290 GitHub stars~758 tokensUpdated 4 mo ago
    Auto-check passed

Works with

Categories

Questions about Add Component

What does Add Component do?

Add a SwiftUI component from ShipSwift recipes. An agent skill from AstraFoundry/KumoApp. Add Component is an agent skill from AstraFoundry/KumoApp. Add a SwiftUI component from ShipSwift recipes.

When should I use Add Component?

Add Component fits situations like: the user says add component; wants a specific UI element.

How do I install Add Component in Claude Code?

Run `npx skills add AstraFoundry/KumoApp --skill add-component -a claude-code`. Or copy the skill folder (.agents/skills/add-component in AstraFoundry/KumoApp) into .claude/skills/add-component in your project. Claude Code loads it when a task matches its description.

How do I install Add Component in Codex?

Run `npx skills add AstraFoundry/KumoApp --skill add-component -a codex`. Or copy the skill folder (.agents/skills/add-component in AstraFoundry/KumoApp) into .agents/skills/add-component in your project. Codex loads it when a task matches its description.

Can I use Add Component in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add AstraFoundry/KumoApp --skill add-component -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/add-component, .gemini/skills/add-component, .github/skills/add-component and .opencode/skills/add-component in your project.

What does Add Component need to run?

Going by SKILL.md and its folder, Add Component needs the command-line tools its instructions call (npx) and credentials named SHIPSWIFT_API_KEY. Our summary lists: Node.js; A credential in SHIPSWIFT_API_KEY.

Does Add Component access the network?

SKILL.md names 1 domain. As links in the text: shipswift.app. This is read from the text; nothing was executed.

Is Add Component safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Add Component use?

Add Component is published under the AGPL-3.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Add Component use?

About 737 tokens (SKILL.md is roughly 2.9k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Add Component?

Skills that share tags, products or a category with Add Component: Swiftui Pro (twostraws/SwiftUI-Agent-Skill, 5k stars), Swiftui UI Patterns (AFK-surf/OpenBridge, 430 stars), Swiftui Performance Audit (harperreed/dotfiles, 334 stars) and Hig Project Context (raintree-technology/hig-doctor, 142 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Add Component?

AstraFoundry (a GitHub organization) maintains it in AstraFoundry/KumoApp, which has 290 GitHub stars. The repository holds 6 skills in this directory. The repository was last updated on June 5, 2026.

Source: AstraFoundry/KumoApp on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.