From ios-development
Implements SwiftUI Views from Figma designs using Figma MCP tools (figma:get_design_context, figma:get_screenshot, figma:get_variable_defs, figma:get_metadata). Splits large designs into appropriately-sized components, respects existing codebase conventions, and adds previews for each component. Use when implementing SwiftUI from Figma design URLs (e.g., figma.com/design/...), converting designs to code, or building iOS UI from Figma mockups. Do NOT call Figma MCP tools directly without reading this skill first.
npx claudepluginhub xtone/ai_development_tools --plugin ios-developmentThis skill uses the workspace's default tool permissions.
以下のチェックリストをコピーして進捗を管理する：
Searches, retrieves, and installs Agent Skills from prompts.chat registry using MCP tools like search_skills and get_skill. Activates for finding skills, browsing catalogs, or extending Claude.
Searches prompts.chat for AI prompt templates by keyword or category, retrieves by ID with variable handling, and improves prompts via AI. Use for discovering or enhancing prompts.
Checks Next.js compilation errors using a running Turbopack dev server after code edits. Fixes actionable issues before reporting complete. Replaces `next build`.
以下のチェックリストをコピーして進捗を管理する：
- [ ] Step 1: デザイン情報を収集（Figma MCP）
- [ ] Step 2: 既存コードベースを確認
- [ ] Step 3: コンポーネント構造を計画
- [ ] Step 4: ユーザーに方針を確認
- [ ] Step 5: プレビュー付きで実装
- [ ] Step 6: デザインと照合して検証
Figma MCPツールを完全修飾名で使用する：
1. figma:get_design_context(nodeId, clientLanguages: "swift", clientFrameworks: "swiftui")
→ コード生成用のデザインデータを取得
2. figma:get_screenshot(nodeId)
→ 実装時の視覚的リファレンス
3. figma:get_variable_defs(nodeId)
→ 色・フォント・スペーシング変数をSwiftUIにマッピング
4. figma:get_metadata(nodeId) [構造が複雑な場合]
→ 子ノード一覧を取得してコンポーネント分割を検討
システムUIは除外: ステータスバー、ホームインジケーター、セーフエリア表示。
実装前に確認する：
分割する場合：
分割しない場合：
不明な場合は実装前に確認する：
| トピック | 確認例 |
|---|---|
| 命名 | 「既存のCommonHeaderViewを使用？新規でProductDetailHeaderViewを作成？」 |
| ファイル配置 | 「Features/ProductDetail/に配置？」 |
| 既存コンポーネント | 「類似のPriceLabelが存在—再利用？バリアント作成？」 |
| デザイン解釈 | 「このスペーシングが曖昧—16pt？20pt？」 |
| 状態管理 | 「@Stateで管理？親から渡す？」 |
選択肢が明確な場合はAskUserQuestionツールを使用する（例：既存コンポーネントの再利用 vs 新規作成、複数のファイル配置オプション）。
すべてのViewに#Previewを追加する：
#Preview { ComponentView(model: .preview) }
// 複数の状態がある場合
#Preview("Default") { ComponentView(model: .preview) }
#Preview("Loading") { ComponentView(model: .previewLoading) }
Figmaの値を正確に使用する—丸めたり近似したりしない。
figma:get_variable_defsの出力を既存のColor/Font extensionにマッピングする（利用可能な場合）。
実装したViewでは警告が残らないようする。
実装中でも不明点があればユーザーに確認を行う。
figma:get_screenshotの出力と実装を比較して正確性を確認する。