Web・iOS・Androidの画面を、読み上げやキーボード操作に対応させ、ラベル、配色、操作対象の大きさなどをWCAG 2.2に沿って設計・点検するスキル。
- アイコンボタンの説明を付けたいとき
- キーボード操作とモーダルの点検
- コントラストや操作対象の大きさの確認
SF SymbolsやIconify APIからiOS・macOS向けのアイコンを選び、既存の配色やサイズに合わせてXcode用のPNG素材一式を生成するスキル。
Generate iOS app icons as PNG imagesets for Xcode asset catalogs from SF Symbols (5000+ Apple-native) or Iconify API (275k+ open source icons from 200+ collections). Use when generating icons, creating icon assets, adding icons to asset catalog, or searching for icons for iOS projects.
SF SymbolsやIconify APIからアイコンを選び、Xcodeのアセットカタログに取り込めるPNG素材を生成します。1x・2x・3xの画像とContents.jsonをまとめた.imagesetを作成します。色やサイズを指定でき、SF Symbolsでは線の太さも調整できます。既存のアイコンの寸法や配色を確認し、見た目をそろえる手順も含まれます。
iOS・macOSアプリの画面に使うアイコンを用意したいときや、仮置きの素材を差し替えたいときに向いています。Iconifyの複数のコレクションから用途や作風に合う候補を探し、生成前にプレビューする流れにも対応します。
cameraを使い、Assets.xcassetsに画像一式を追加して」Iconify APIの利用にはインターネット接続が必要です。SF Symbolsによる生成はmacOS専用で、Swiftのスクリプトを使います。生成後は画像を目視確認し、プロジェクトをビルドしてXcodeが素材を認識するか確かめます。
この紹介文は、公開されている SKILL.md をもとに AI(Claude Haiku)が作成しました。正確な仕様は下の原文を確認してください。
インストールする前に、エージェントに与えられる指示の中身を確認できます。
Generate PNG icon imagesets for Xcode asset catalogs from two sources.
Both sources produce identical Xcode-compatible imagesets. Choose based on need:
| Source | Icons | Requires | Best for |
|---|---|---|---|
| Iconify API | 275,000+ from 200+ collections | Internet | Wide selection, specific styles, open source icons |
| SF Symbols | 5,000+ Apple symbols | macOS only | Apple-native style, offline use |
Before generating, check the project's existing icons for size, color, and weight consistency.
Both methods produce a complete Xcode imageset:
<output-dir>/<asset-name>.imageset/
Contents.json
<asset-name>.png # 1x (68px default)
<asset-name>@2x.png # 2x (136px default)
<asset-name>@3x.png # 3x (204px default)
Determine icon needs: what the icon represents, preferred style, target color, and size.
If the project already has icons, check existing style:
# Check dimensions of existing icon
sips -g pixelWidth -g pixelHeight path/to/existing@2x.png
Iconify API (recommended for wide selection):
# Search all collections
$SKILL_DIR/scripts/iconify_gen.sh search "receipt"
# Search within a specific collection
$SKILL_DIR/scripts/iconify_gen.sh search "business card" --prefix mdi
# List available collections
$SKILL_DIR/scripts/iconify_gen.sh collections
SF Symbols (for Apple-native style): Browse the SF Symbols app or reference common names:
| Use Case | Symbol Name |
|---|---|
| Document | doc.text, doc.fill |
| Receipt | doc.text.below.ecg, receipt |
| Person | person.crop.rectangle, person.text.rectangle |
| Camera | camera, camera.fill |
| Scan | doc.viewfinder, qrcode.viewfinder |
| Settings | gearshape, slider.horizontal.3 |
# Iconify preview
$SKILL_DIR/scripts/iconify_gen.sh preview mdi:receipt-text-outline
Iconify API:
# Basic generation
$SKILL_DIR/scripts/iconify_gen.sh mdi:receipt-text-outline editTool_expenseReport
# Custom color and output location
$SKILL_DIR/scripts/iconify_gen.sh mdi:receipt-text-outline myIcon --color 007AFF --output ./Assets.xcassets/icons
Options: --size <pt> (default: 68), --color <hex> (default: 8E8E93), --output <dir> (default: /tmp/icons)
SF Symbols:
# Basic generation
swift $SKILL_DIR/scripts/generate_icons.swift doc.text.below.ecg editTool_expenseReport
# Custom color, weight, and output
swift $SKILL_DIR/scripts/generate_icons.swift person.crop.rectangle myIcon --color 007AFF --weight regular --output ./Assets.xcassets/icons
Options: --size <pt> (default: 68), --color <hex> (default: 8E8E93), --weight <name> (default: thin), --output <dir> (default: /tmp/icons)
cp -r /tmp/icons/<name>.imageset path/to/Assets.xcassets/<group>/
| Prefix | Name | Count | Style |
|---|---|---|---|
mdi | Material Design Icons | 7400+ | Filled + outline variants |
ph | Phosphor | 9000+ | 6 weights per icon |
solar | Solar | 7400+ | Bold, linear, outline |
tabler | Tabler Icons | 6000+ | Consistent stroke width |
lucide | Lucide | 1700+ | Clean, minimal |
ri | Remix Icon | 3100+ | Filled + line variants |
carbon | Carbon | 2400+ | IBM design language |
heroicons | HeroIcons | 1200+ | Tailwind CSS companion |
Browse all: https://icon-sets.iconify.design/
| Script | Source | Path |
|---|---|---|
iconify_gen.sh | Iconify API (275k+ icons) | $SKILL_DIR/scripts/iconify_gen.sh |
generate_icons.swift | SF Symbols (5k+ icons) | $SKILL_DIR/scripts/generate_icons.swift |
--output ./Assets.xcassets/icons to skip manual copyingまだレビューはありません。使ってみた感想をお寄せください。
概要と使いどころ
Web・iOS・Androidの画面を、読み上げやキーボード操作に対応させ、ラベル、配色、操作対象の大きさなどをWCAG 2.2に沿って設計・点検するスキル。
AIエージェントの不調を、指示・記憶・ツール実行・画面表示など12の層から調べるスキル。コードやログを根拠に原因を整理し、重要度順の指摘と修正案をまとめます。
実際の開発課題で複数のコーディングエージェントを比較するスキル。成功率、取得可能なAPI費用、所要時間、繰り返し実行の安定性を測り、選定や更新後の評価に使えます。
AIエージェントが使うツールの種類や入出力、エラーからの復帰手順を設計・見直します。文脈の情報量も整理し、作業完了率や再試行回数で改善を評価します。
AIエージェントが失敗や同じ操作を繰り返す原因を、エラーと実行状況から整理します。小さな復旧操作を試し、結果と根拠を引き継げる報告にまとめるスキルです。
AIエージェントの失敗や同じ操作の繰り返しを記録し、原因の切り分け、小さな復旧操作、結果の報告まで進める手順を示して、根拠のある再試行につなげるスキル。