Search Docs
Loading...
Skip to content

Agent Skills

The CE.SDK Agent Skills plugin gives AI coding assistants bundled documentation, guided code generation, and project scaffolding for building applications with CreativeEditor SDK across 10 Web frameworks, Swift on Apple platforms, Kotlin with Jetpack Compose on Android, and the Flutter and React Native wrappers.

What Are Agent Skills?#

Agent Skills are portable knowledge packs that plug into AI coding assistants. By installing the CE.SDK skills, you get:

  • Offline documentation: All guides, API references, and best practices bundled locally — no external API calls
  • Guided code generation: Build and explain skills that walk through CE.SDK implementation step by step
  • Autonomous scaffolding: The build skill creates and verifies complete CE.SDK projects from scratch

Available Skills#

One cesdk plugin contains three skills. Each skill detects the platform and framework from your project and reads the matching bundled references:

Skill Description
docs Look up CE.SDK guides and API reference for your platform and framework
explain Explain how CE.SDK features work — concepts, architecture, workflows
build Implement features and scaffold complete CE.SDK projects from bundled starter kits

Claude Code additionally receives a thin optional builder agent adapter that delegates to the same build skill. Codex uses the build skill directly.

The bundled references cover:

Platform Frameworks and modules
Web React, Vue.js, Svelte, SvelteKit, Angular, Next.js, Nuxt.js, Electron, Vanilla JS, Node.js
Swift IMGLYEngine, IMGLYCore, IMGLYCoreUI, IMGLYCamera, IMGLYEditor on iOS, macOS, Mac Catalyst
Android Engine, editor, and camera Kotlin APIs with Jetpack Compose
Flutter imgly_editor and imgly_camera (Dart); the native editor on iOS and Android
React Native @imgly/editor-react-native and @imgly/camera-react-native (TypeScript); the native editor on iOS and Android

IMGLYEngine is available on iOS, macOS, and Mac Catalyst. The prebuilt editor, camera, UI modules, and bundled starter kits are iOS-only. When available, the skills prefer live Xcode symbols for the installed SDK and use bundled API digests as a portable fallback. The Android API reference is distilled from first-party Dokka Markdown into compact per-type digests.

The Flutter and React Native references hold the wrapper’s own Dart or TypeScript API as per-type digests, the wrapper guides, runnable examples from the showcases apps, and a mapping document that says which customizations are written in Swift and Kotlin. For those, the skills read the bundled Swift and Android references, so a wrapper project never needs a second install. To change part of a prebuilt editor, such as its dock, the skills start from the wrapper’s own Swift and Kotlin sources, which the plugin bundles with their IMG.LY license.

When a project mixes platforms, or the platform is not clear from the files, the skill asks which platform you mean before it reads any reference.

Setup Instructions#

Claude Code Plugin#

Add the marketplace and install the plugin:

Terminal window
# Add the marketplace (one-time setup)
claude plugin marketplace add imgly/agent-skills
# Install the plugin
claude plugin install cesdk@imgly

Codex Plugin#

Add the same marketplace and install the plugin in Codex:

Terminal window
# Add the marketplace (one-time setup)
codex plugin marketplace add imgly/agent-skills
# Install the plugin
codex plugin add cesdk@imgly

Vercel Skills CLI#

Install using the Vercel Skills CLI:

Terminal window
# Claude Code
npx skills add imgly/agent-skills -a claude-code
# Other agents: change the -a value, e.g. codex or cursor
npx skills add imgly/agent-skills -a codex
# Install a specific skill only
npx skills add imgly/agent-skills --skill docs -a claude-code
# List the skills first
npx skills add imgly/agent-skills --list

Manual Copy#

For any skills-compatible agent, copy skill folders directly from the GitHub repository:

Terminal window
# Clone the repo
git clone https://github.com/imgly/agent-skills.git
# Copy a skill into your agent's skills directory
cp -r agent-skills/plugins/cesdk/skills/docs <skills-directory>/docs
cp -r agent-skills/plugins/cesdk/skills/explain <skills-directory>/explain
cp -r agent-skills/plugins/cesdk/skills/build <skills-directory>/build

Keeping Skills Current#

Every generated skill records its CE.SDK version, generation date, and plugin identifier. When a bundle is over six weeks old, or when you ask about updates, the assistant can compare it with the matching stable, prerelease, or nightly IMG.LY channel. This check is read-only.

Before changing anything, the assistant must identify whether the active skill came from Claude Code, Codex, the Skills CLI, a Git checkout, or a manual copy. It reports unknown or ambiguous installations instead of guessing and requests explicit approval for the exact update command and target.

Prerelease and Nightly Versions#

By default every install method above tracks the latest stable CE.SDK release. If you build against a prerelease or nightly engine build (for example @cesdk/node-native on the next or dev npm dist-tag), you can install the matching skills from a dedicated release channel. The channels mirror the npm dist-tag names:

Channel Branch Matches engine dist-tag Contents
Stable main / latest latest Latest stable release (default)
Prerelease next next Latest release candidate (e.g. 1.77.0-rc.4)
Nightly dev dev Latest nightly build (e.g. 1.78.0-nightly.20260630)

Every published version is also available under an exact v<version> Git tag. Use the channel-specific instructions below to track a moving channel or pin one published build.

Claude Code Plugin#

Pin the marketplace to a channel branch or a version tag with the @<ref> suffix:

Terminal window
# Prerelease (release candidate) channel — latest rc
claude plugin marketplace add imgly/agent-skills@next
claude plugin install cesdk@imgly
# Nightly channel — latest nightly
claude plugin marketplace add imgly/agent-skills@dev
claude plugin install cesdk@imgly
# A specific published version
claude plugin marketplace add imgly/agent-skills@v1.78.0-nightly.20260630
claude plugin install cesdk@imgly

Codex Plugin#

Add the matching marketplace ref:

Terminal window
# Prerelease channel
codex plugin marketplace add imgly/agent-skills@next
codex plugin add cesdk@imgly
# Nightly channel
codex plugin marketplace add imgly/agent-skills@dev
codex plugin add cesdk@imgly
# A specific published version
codex plugin marketplace add imgly/agent-skills@v1.78.0-nightly.20260630
codex plugin add cesdk@imgly

Vercel Skills CLI#

Put the channel branch or version tag in the /tree/<ref> segment of the repository URL:

Terminal window
# Nightly channel — latest nightly
npx skills add https://github.com/imgly/agent-skills/tree/dev -a claude-code
# A specific published version
npx skills add https://github.com/imgly/agent-skills/tree/v1.78.0-nightly.20260630 -a claude-code
# A single skill from a pinned version
npx skills add https://github.com/imgly/agent-skills/tree/v1.78.0-nightly.20260630 --skill docs -a claude-code

Manual Copy#

Clone a specific channel branch or an exact version tag:

Terminal window
# Nightly channel — latest nightly
git clone -b dev https://github.com/imgly/agent-skills.git
# A specific published version
git clone -b v1.78.0-nightly.20260630 https://github.com/imgly/agent-skills.git

Usage#

Ask naturally and let your assistant select the right skill. For explicit selection, type / in Claude Code or $ in Codex, then select the matching skill from the installed CE.SDK plugin. Name the platform or framework in your request when the project does not make it obvious.

Look up documentation#

Use the docs skill to look up CE.SDK configuration for React.
Use the docs skill for getting started with Vue.
Use the docs skill to look up IMGLYEngine asset sources.
Use the docs skill to look up BlockApi.create on Android.

Build a feature#

Use the build skill to add text overlays to images.
Use the build skill to create a photo editor with filters in Next.js.
Use the build skill to create an iOS photo editor.
Use the build skill to create a Compose photo editor.

Explain a concept#

Use the explain skill to describe how the block hierarchy works.
Use the explain skill to describe the export pipeline and output formats.
Use the explain skill to describe custom editor UI on macOS.
Use the explain skill to describe the EditorConfiguration.remember lifecycle.

How It Works#

The docs skill bundles the complete CE.SDK guides and API references for every supported Web framework, the Swift modules, and the Android APIs as plain Markdown under references/. Skills read directly from these local files — no external services or MCP servers are required.

The build skill includes starter kit templates for common use cases like design editors, video editors, and photo editors. It selects the matching Web, Swift, or Android project structure and generates code accordingly.