build

这段内容是审核时保存的快照。外部来源才是完整且最新的版本。

---
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 /cesdk: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 /cesdk:build to implement text overlays."
  </example>
argument-hint: "[feature or task]"
---

## Version Notice

> CE.SDK `1.82.1` · generated `2026-09-18` · 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 bundled docs before using pre-trained knowledge — bundled docs are version-verified and may contain API changes not yet 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 `/cesdk:docs-{framework}` skill to look up bundled documentation (e.g. `/cesdk:docs-react`), or use Glob:
`**/skills/docs-{framework}/<path>.md`

Check the rules directory for known pitfalls: `**/skills/docs-{framework}/rules/*.md`

## Workflow

1. **Detect framework**: Identify the framework from project files