---
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]"
---

# 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
2. **Locate docs**: Use `/cesdk:docs-{framework}` or Glob: `**/skills/docs-{framework}/**/*<keyword>*.md`
3. **Check for pitfalls**: Read `**/skills/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.

## 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 \`/cesdk:docs-{framework}\` to look up documentation and API reference (e.g. `/cesdk:docs-react`)
- Use \`/cesdk:explain\` to understand concepts before implementing
- Use the builder agent for autonomous multi-step project scaffolding