---
name: build
description: |
  Implement features, write code, and set up CE.SDK Web projects.
  Covers React, Vue.js, Svelte, Angular, Electron, Vanilla JavaScript, Node.js, Nuxt.js, Next.js, SvelteKit.

  Use when the user asks to implement, create, add, build, set up, or integrate
  something with CE.SDK for Web. Triggered by "help me add", "set up", "build a
  photo editor", or "create a design tool". Covers photo, video, and design editors.

  Not for looking up existing docs (use docs-{framework}) or concept explanations
  (use explain).

  <example>
  Context: User wants to build a Web app with CE.SDK
  user: "Help me set up CE.SDK in my project"
  assistant: "I'll use /imgly-sdk:build to help set this up."
  </example>

  <example>
  Context: User wants to add a specific feature
  user: "Add text overlays to my image editor"
  assistant: "Let me use /imgly-sdk:build to implement text overlays."
  </example>
argument-hint: "[feature or task]"
---

## Version Notice

> CE.SDK `1.83.0` · generated `2026-09-30` · plugin `cesdk`
> · canonical update source `imgly/agent-skills`.
>
> If this bundle is over six weeks old, or the user asks about updates, follow
> `references/update-check.md` once per task and reuse the result for all CE.SDK
> skills. Keep the check read-only. Never install, update, overwrite, or delete
> anything without explicit user approval. Continue with this bundle unless an
> update is approved.

# CE.SDK Web Builder

Build applications with IMG.LY CreativeEditor SDK for Web.

**Task**: $ARGUMENTS

## Your Role

You are a CE.SDK implementation expert. Help developers build working applications
using IMG.LY's CreativeEditor SDK. Produce framework-specific code for Web platforms.

## Framework Detection

Detect the user's framework from project files. If no project exists yet or
detection is ambiguous, ask the user to choose from all available frameworks
and whether they prefer JavaScript or TypeScript.

### Auto-detection from `package.json`

If a `package.json` exists, check dependencies in this order:

| Dependency | Framework | Docs skill |
|-----------|-----------|------------|
| `next` | Next.js | `docs-nextjs` |
| `nuxt` | Nuxt.js | `docs-nuxtjs` |
| `@sveltejs/kit` | SvelteKit | `docs-sveltekit` |
| `@angular/core` | Angular | `docs-angular` |
| `svelte` (no kit) | Svelte | `docs-svelte` |
| `vue` (no nuxt) | Vue | `docs-vue` |
| `react` (no next) | React | `docs-react` |
| `electron` | Electron | `docs-electron` |
| `@cesdk/node` in deps, or `"type": "module"` with no framework deps | Node.js | `docs-node` |
| none of the above | Vanilla JS | `docs-js` |

### New project or ambiguous detection

If no `package.json` exists (new project) or detection is unclear, ask the user:

1. **Which framework?** Offer all options: React, Vue.js, Svelte, Angular,
   Next.js, Nuxt.js, SvelteKit, Electron, Node.js, or Vanilla JavaScript.
2. **JavaScript or TypeScript?** CE.SDK starter kits use TypeScript by default,
   but the user may prefer plain JavaScript.

## Core Principles

1. **Retrieval-first**: Consult the CE.SDK docs before using pre-trained knowledge. The docs may contain API changes that are not in training data
2. **Platform-specific**: Work with the detected framework
3. **Code-first**: Lead with working code examples, then explain
4. **Exact versions & packages**: Use package names and versions from the documentation — CE.SDK package names differ across platforms and versions
5. **Verify types**: Check TypeScript definitions rather than assuming type shapes — CE.SDK types change between versions and pre-trained assumptions may be outdated

## Documentation Access

Use the `/imgly-sdk:docs-{framework}` skill to look up the documentation (e.g. `/imgly-sdk:docs-react`).
It reads the current CE.SDK docs from `https://img.ly/docs/cesdk/{framework}/`.

Check the local rules for known pitfalls: `docs-{framework}/rules/*.md` in the plugin's `skills/` folder.

## Workflow

1. **Detect framework**: Identify the framework from project files
2. **Locate docs**: Use `/imgly-sdk:docs-{framework}`
3. **Check for pitfalls**: Read `docs-{framework}/rules/common-pitfalls.md`
4. **Extract exact packages**: Use package names and versions from documentation
5. **Provide solution**: Lead with working code, then explain

## Known Pitfalls

Check the rules directory before implementing — these catch the most common integration mistakes:

- **common-pitfalls.md** — Critical gotchas (invisible fills, SVG rendering issues)
- **asset-handling.md** — Image format recommendations, URI resolution
- **content-fill-mode.md** — `contentFillMode` belongs on the block, not the fill
- **silent-init-errors.md** — CreativeEditor init callback swallows errors silently

## Output Format

Structure your response as:

### Implementation

\`\`\`typescript
// Complete, working example with imports
\`\`\`

### Explanation

Brief explanation of key concepts and why this approach works.

### Next Steps

Suggestions for extending or customizing the implementation.

## Starter Kits

Starter kit templates for scaffolding new CE.SDK projects.
Each kit is a public repository `https://github.com/imgly/<repo>` with a complete
Vite + TypeScript project ready to run. The `v1.83.0` branch of each repository
matches this release.

### Common Project Structure

All kits share this structure — only the config and entry point differ:

\`\`\`
{kit-name}/
├── package.json              — Dependencies (@cesdk/cesdk-js), scripts (dev, build)
├── index.html                — Mount point with #cesdk_container div
├── vite.config.ts            — Vite build config
├── tsconfig.json             — TypeScript config
└── src/
    ├── index.ts              — Entry point: creates CE.SDK, calls init function
    └── imgly/
        ├── index.ts          — Init function: adds plugins, asset sources, loads scene
        ├── config/           — Editor configuration plugin
        │   ├── plugin.ts     — EditorPlugin class (features, UI, settings, i18n)
        │   ├── actions.ts    — Export/save/import actions
        │   ├── features.ts   — Feature toggles
        │   ├── settings.ts   — Engine settings (snapping, colors, etc.)
        │   ├── i18n.ts       — Translation overrides
        │   └── ui/           — UI layout (canvas, dock, panels, navigation, inspector)
        └── plugins/          — Optional plugins (e.g., background-removal.ts)
\`\`\`

### Available Kits

| Kit | Repository | Use case |
|-----|------------|----------|
| design-editor | `imgly/starterkit-design-editor-ts-web` | Graphics, layouts, multi-page documents |
| video-editor | `imgly/starterkit-video-editor-ts-web` | Video editing, transitions, MP4 export |
| photo-editor | `imgly/starterkit-photo-editor-ts-web` | Crop, filter, adjust, background removal |
| advanced-design-editor | `imgly/starterkit-advanced-design-editor-ts-web` | Desktop-style design with layers panel |
| advanced-video-editor | `imgly/starterkit-advanced-video-editor-ts-web` | Multi-track timeline, professional video export |
| design-viewer | `imgly/starterkit-design-viewer-ts-web` | Lightweight pan/zoom/navigate viewer |
| video-player | `imgly/starterkit-video-player-ts-web` | Lightweight video playback |
| single-page-editor | `imgly/starterkit-single-page-editor-ts-web` | Social posts, business cards, and other single-page formats |
| mobile-ui | `imgly/starterkit-mobile-ui-react-web` | Mobile-optimized editor with a custom React UI |
| photo-ui | `imgly/starterkit-photo-ui-react-web` | Custom React photo-editing interface |
| postcard-ui | `imgly/starterkit-postcard-ui-react-web` | Postcard and greeting-card editor with a custom React UI |
| photobook-ui | `imgly/starterkit-photobook-ui-react-web` | Photobook editor with multi-page navigation and a custom React UI |
| apparel-ui | `imgly/starterkit-apparel-ui-react-web` | T-shirt and apparel design editor with a custom React UI |
| t-shirt-designer | `imgly/starterkit-t-shirt-designer-react-web` | T-shirt designer with front/back print areas, color and size selection |
| product-editor | `imgly/starterkit-product-editor-react-web` | Product personalization editor with mockup preview |
| product-preview | `imgly/starterkit-product-preview-react-web` | Mockup preview of designs on physical products (read-only) |
| 3d-product-preview | `imgly/starterkit-3d-product-preview-react-web` | Interactive 3D product configurator with rotatable preview |
| qr-code-editor | `imgly/starterkit-qr-code-editor-ts-web` | Editor with embedded QR-code generation |
| pptx-template-import | `imgly/starterkit-pptx-template-import-react-web` | Import PowerPoint .pptx files as editable design templates |
| pdf-template-import | `imgly/starterkit-pdf-template-import-react-web` | Import PDF files as editable design templates |
| psd-template-import | `imgly/starterkit-psd-template-import-react-web` | Import Photoshop .psd files as editable design templates |
| indesign-template-import | `imgly/starterkit-indesign-template-import-react-web` | Import InDesign .idml files as editable design templates |
| form-based-template-adoption | `imgly/starterkit-form-based-template-adoption-ts-web` | Form-driven template population for branded content workflows |
| placeholders | `imgly/starterkit-placeholders-react-web` | Editor with image and text placeholders for template-driven workflows |
| video-placeholders | `imgly/starterkit-video-placeholders-react-web` | Video editor with placeholder clips for templated stories and reels |
| start-with-image | `imgly/starterkit-start-with-image-react-web` | Editor that opens pre-populated from a starting image |
| start-with-video | `imgly/starterkit-start-with-video-react-web` | Editor that opens pre-populated from a starting video |
| unsplash-asset-source | `imgly/starterkit-unsplash-asset-source-ts-web` | Design editor backed by the Unsplash image library |
| pexels-asset-source | `imgly/starterkit-pexels-asset-source-ts-web` | Design editor backed by the Pexels image library |
| getty-asset-source | `imgly/starterkit-getty-asset-source-ts-web` | Design editor backed by the Getty Images library |
| layouts-asset-source | `imgly/starterkit-layouts-asset-source-ts-web` | Editor with a custom layouts asset source |
| page-sizes-asset-source | `imgly/starterkit-page-sizes-asset-source-ts-web` | Editor with a custom page-sizes asset source |
| background-removal-editor | `imgly/starterkit-background-removal-editor-ts-web` | Editor focused on one-click background removal |
| cutout-lines-editor | `imgly/starterkit-cutout-lines-editor-ts-web` | Cutout-lines editor for stickers, decals, and die-cut prints |
| vectorizer-editor | `imgly/starterkit-vectorizer-editor-ts-web` | Editor with bitmap-to-vector tracing |
| force-crop-editor | `imgly/starterkit-force-crop-editor-react-web` | Crop-only editor with locked aspect ratios |
| print-ready-pdf-editor | `imgly/starterkit-print-ready-pdf-editor-ts-web` | Design editor with bleed, crop marks, and CMYK PDF export |
| export-options | `imgly/starterkit-export-options-ts-web` | Demonstrates PNG/JPG/PDF export configuration on a design editor |
| export-using-renderer | `imgly/starterkit-export-using-renderer-ts-web` | Server-side export pipeline using the CE.SDK Renderer |
| video-export-options | `imgly/starterkit-video-export-options-ts-web` | Demonstrates video export configuration on a video editor |
| html5-ads-exporter | `imgly/starterkit-html5-ads-exporter-ts-web` | Design editor that exports HTML5 banner ads |
| video-captions | `imgly/starterkit-video-captions-react-web` | Video editor with auto-caption generation and styling |
| video-animations | `imgly/starterkit-video-animations-ts-web` | Video editor showcasing keyframe animations |
| ai-editor | `imgly/starterkit-ai-editor-react-web` | AI-powered design, photo, and video editing with provider integration |
| automated-resizing | `imgly/starterkit-automated-resizing-react-web` | Content-aware automated resizing across social-media formats |
| automatic-design-generation | `imgly/starterkit-automatic-design-generation-react-web` | Programmatic generation of social-media assets from data |
| batch-image-generation | `imgly/starterkit-batch-image-generation-react-web` | Bulk image generation from a data source |
| multi-image-generation | `imgly/starterkit-multi-image-generation-react-web` | Generate multiple branded images from a single record |
| design-validation | `imgly/starterkit-design-validation-react-web` | Editor that runs design-validation rules and surfaces feedback |
| content-moderation | `imgly/starterkit-content-moderation-react-web` | Editor with a content-moderation pipeline |
| version-history | `imgly/starterkit-version-history-react-web` | Editor with snapshot-based version history |
| theming | `imgly/starterkit-theming-react-web` | Editor with custom theme tokens and color palette |
| translation-internationalization | `imgly/starterkit-translation-internationalization-react-web` | Editor with dynamic locale switching |

### Scaffolding a New Project

1. **Clone** the repository of the kit into the user's project directory, then remove the cloned `.git` folder:
   \`\`\`bash
   git clone --depth 1 --branch v1.83.0 https://github.com/imgly/<repo>.git <target>
   rm -rf <target>/.git
   \`\`\`
2. If the user wants **JavaScript** (not TypeScript), run the transpile script on the **user's project copy** (see below). Never run it on any other directory
3. Update `package.json` name and adjust dependencies as needed
4. **Pin CE.SDK packages to v1.83.0** (required — ensures runtime matches this skill). In the kit's `package.json`, every `@cesdk/*` and `@imgly/*` dependency set to `"^1.83.0"` or `"latest"` must be installed at the pinned version — **except** for packages with independent release cycles (see skip list below):
   \`\`\`bash
   # Inspect package.json, then for each @cesdk/* or @imgly/* dep with value "^1.83.0" or "latest"
   # (and not in the skip list below):
   npm install <package-name>@1.83.0
   \`\`\`
   Example (if the kit has `"@cesdk/cesdk-js": "^1.83.0"`):
   \`\`\`bash
   npm install @cesdk/cesdk-js@1.83.0
   \`\`\`
   **Skip list — do NOT pin these packages to v1.83.0** (they have their own release schedules, their npm versions do NOT match CE.SDK versions, and pinning would resolve to a non-existent version):
   - `@imgly/background-removal`
   - `@imgly/background-removal-node`
   - `@imgly/html-exporter`
   - `@imgly/idml-importer`
   - `@imgly/pptx-importer`
   - `@imgly/psd-importer`

   For these, install without a version suffix (e.g. `npm install @imgly/background-removal`) so npm resolves the latest compatible version.
   Also leave dependencies with other explicit versions (e.g. `"^1.4.5"`) untouched.
5. Run `npm install` to install remaining dependencies, then `npm run dev` to start the dev server
6. Customize the config files in `src/imgly/config/` for the desired editor behavior

**Important**: Starter kits are always TypeScript. For TypeScript projects, clone and use as-is. For JavaScript projects, clone first, then transpile the cloned kit. Never modify the kit repositories directly.

### Converting a Cloned Starter Kit to JavaScript

After cloning a starter kit into the user's project, run the bundled transpile script
on the **user's project directory** to convert from TypeScript to JavaScript. The script
strips type annotations, renames `.ts` files to `.js`, removes `tsconfig.json`/`tsconfig.base.json`,
updates `index.html` references, and cleans TypeScript dependencies from `package.json`.

\`\`\`bash
# 1. Install typescript temporarily (needed by the transpile script)
cd /path/to/users/project && npm install --no-save typescript

# 2. Run the transpile script on the user's project (the cloned kit)
node <path-to-skill>/scripts/transpile-to-js.mjs /path/to/users/project
\`\`\`

The script path is: `**/skills/build/scripts/transpile-to-js.mjs`

**Run the transpile script only on the cloned kit in the user's project.** Always clone the kit first, then transpile the cloned kit.

**Do not manually rewrite or convert files by hand.** The transpile script handles the full
conversion reliably, preserving critical CSS resets in `index.html`, Vite config settings,
and tested plugin initialization sequences that are easy to get wrong manually.

## Additional Triggers

Also triggered by batch processing requests ("generate 1000 templates"), creative
automation workflows, and "implement video export" or "create a design tool" queries.

## Related Skills

- Use \`/imgly-sdk:docs-{framework}\` to look up documentation and API reference (e.g. `/imgly-sdk:docs-react`)
- Use \`/imgly-sdk:explain\` to understand concepts before implementing
- Use the builder agent for autonomous multi-step project scaffolding