mcpField
B
build

build

github.com/imgly開発9168 回インストール今日更新
リポジトリ

build について

Web、モバイル、デスクトップの各フレームワークで CE.SDK を実装するためのスキルです。プロジェクトのファイルから対象プラットフォームを判定し、対応する資料や API の確認を経て、動作するコードの作成を案内します。

主な機能

  1. 01プラットフォームとフレームワークの判定
  2. 02Web、Flutter、React Native、Swift、Android の案内
  3. 03プラットフォーム別の実装資料
  4. 04API とバージョンの確認
  5. 05コードを先に示す回答手順

活用シーン

  1. 01既存アプリへの CE.SDK の実装
  2. 02プロジェクトに合う開発手順の選択
  3. 03CE.SDK のコード作成前の API 確認

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/imgly/agent-skills --skill build

インストール後、Claude Code で/buildを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

references/
update-check.md
references/android/
README.md
references/flutter/
README.md
references/flutter/examples/camera-guides-configuration/
camera_configuration_solution.dart
references/flutter/examples/camera-guides-quickstart/
camera_quickstart_solution.dart
references/flutter/examples/camera-guides-recordings/
recordings_camera_solution.dart
recordings_reaction_camera_solution.dart
references/flutter/examples/editor-guides-configuration-basics/
editor_configuration_basics_solution.dart
references/flutter/examples/editor-guides-quickstart/
editor_quickstart_solution.dart
references/flutter/examples/editor-guides-solutions-apparel-editor/
apparel_editor_solution.dart
references/flutter/examples/editor-guides-solutions-design-editor/
design_editor_solution.dart
references/flutter/examples/editor-guides-solutions-photo-editor/
photo_editor_solution.dart
references/flutter/examples/editor-guides-solutions-postcard-editor/
postcard_editor_solution.dart
references/flutter/examples/editor-guides-solutions-video-editor/
video_editor_solution.dart
references/react-native/
README.md
references/react-native/examples/camera-guides-configuration/
configured_camera_solution.ts
references/react-native/examples/camera-guides-quickstart/
app.json
camera_react_native.ts
references/react-native/examples/camera-guides-recordings/
recordings_camera_solution.ts
recordings_reaction_camera_solution.ts
references/react-native/examples/editor-guides-configuration-basics/
basic_editor_solution.ts
references/react-native/examples/editor-guides-quickstart/
app.json
editor_react_native.ts
references/react-native/examples/editor-guides-solutions-apparel-editor/
apparel_editor_solution.ts
references/react-native/examples/editor-guides-solutions-design-editor/
design_editor_solution.ts
references/react-native/examples/editor-guides-solutions-photo-editor/
photo_editor_solution.ts
references/react-native/examples/editor-guides-solutions-postcard-editor/
postcard_editor_solution.ts
references/react-native/examples/editor-guides-solutions-video-editor/
video_editor_solution.ts
references/swift/
README.md
references/web/
angular.md

詳細

バージョンに関するお知らせ

CE.SDK 1.84.0 · 生成日 2026-10-14 · プラグイン imgly-sdk · 正式な更新元 imgly/agent-skills。

このバンドルが6週間以上前のものの場合、またはユーザーから更新について尋ねられた場合は、 タスクごとに1回 references/update-check.md の手順に従い、その結果をすべての CE.SDK スキルで再利用してください。確認は読み取り専用で行ってください。ユーザーの明示的な承認なしに、 インストール、更新、上書き、削除を行ってはいけません。更新が承認されない限り、この バンドルを使って作業を続けてください。

CE.SDK で構築する

タスク：$ARGUMENTS

Web（React、Vue.js、Svelte、Angular、Electron、Vanilla JavaScript、Node.js、Nuxt.js、Next.js、SvelteKit）、iOS と Android 向け Flutter（Dart）、iOS と Android 向け React Native（TypeScript）、iOS、macOS、Mac Catalyst 向け Swift、Android 向け Kotlin と Jetpack Compose を対象とします。

プラットフォームの検出

プロジェクトファイルからプラットフォームを検出し、対応するリファレンスフォルダーを参照してください。

プロジェクトファイルプラットフォームリファレンスフォルダー
pubspec.yaml（その android/ および ios/ フォルダーは Flutter アプリに属します）Flutter（Dart、iOS と Android 向けのネイティブエディター）references/flutter/
package.json の依存関係にある react-native（その android/ および ios/ フォルダーは React Native アプリに属します）React Native（TypeScript、iOS と Android 向けのネイティブエディター）references/react-native/
Package.swift、*.xcodeproj、または *.xcworkspaceSwift（iOS、macOS、Mac Catalyst）references/swift/
build.gradle、build.gradle.kts、または settings.gradle*Android（Kotlin、Jetpack Compose）references/android/
package.jsonWeb — 依存関係からフレームワークを選択します（下表）references/web/index.md

上から順に行を照合してください。Flutter または React Native プロジェクトには android/ および ios/ フォルダーも含まれ、React Native プロジェクトの package.json には react が記載されています。これらのファイルはラッパーアプリに属するため、 Swift、Android、Web の行よりも該当する行を優先します。

package.json の依存関係から Web フレームワークを判定

次の順に確認します：react-native → React Native（上記の行で判定し、Web ではありません）、次に next → Next.js、nuxt → Nuxt.js、@sveltejs/kit → SvelteKit、 @angular/core → Angular、svelte → Svelte、vue → Vue.js、react → React、 electron → Electron、@cesdk/node またはサーバープロジェクト → Node.js、いずれも該当しない場合 → Vanilla JS。

フレームワーク構築に関するメモ
Reactreferences/web/react.md
Vue.jsreferences/web/vue.md
Sveltereferences/web/svelte.md
Angularreferences/web/angular.md
Electronreferences/web/electron.md
Vanilla JavaScriptreferences/web/js.md
Node.jsreferences/web/node.md
Nuxt.jsreferences/web/nuxtjs.md
Next.jsreferences/web/nextjs.md
SvelteKitreferences/web/sveltekit.md

該当するファイルが複数あるモノレポ、または空のフォルダーは判断が難しいため、推測せず、対象とするプラットフォームとフレームワークをユーザーに確認してください。 Flutter または React Native の回答で、ネイティブマッピングに必要な Swift と Kotlin のコードを追加する場合を除き、 1つの回答に複数プラットフォームの内容を混在させてはいけません。

使用方法

  1. 上記の手順でプラットフォームとフレームワークを検出します。
  2. Web の場合は references/web/index.md を参照し、次にそこに記載されたフレームワークファイルと references/web/common.md を参照します。それ以外のプラットフォームでは、該当フォルダー内の README.md を参照してください。これらのファイルには、実装ワークフロー、既知の落とし穴、スターターキットまたはサンプルの一覧、出力形式が記載されています。Web、Swift、Android には、クローンする公開スターターキットリポジトリが記載されています。Flutter と React Native のフォルダーには、代わりに examples/ が同梱されています。
  3. コードを書く前に、skills/docs/references/ 以下の、同じプラットフォームおよびフレームワークのフォルダーで、正確な API、パッケージ名、バージョンを確認します。
  4. まず完全に動作するコードを提示し、その後に簡潔な説明と次の手順を示します。

関連スキル

  • ドキュメントや API リファレンスを調べるには、/imgly-sdk:docs を使用してください
  • 実装前に概念を理解するには、/imgly-sdk:explain を使用してください
  • Claude Code：builder エージェントは、自律的なスキャフォールディングをこのスキルに委任します

コメント

Markdown 対応