重要前提
安装AI Skills的关键前提是:必须科学上网,且开启TUN模式,这一点至关重要,直接决定安装能否顺利完成,在此郑重提醒三遍:科学上网,科学上网,科学上网。查看完整安装教程 →
build by imgly/agent-skills
npx skills add https://github.com/imgly/agent-skills --skill buildCE.SDK 版本 : 1.72.0-rc.2 | 生成时间 : 2026-03-23
此技能是为 2026-03-23 的 CE.SDK v1.72.0-rc.2 版本生成的。CE.SDK 大约每两周发布一个新版本。如果当前日期距离上述生成日期超过 6 周,此技能很可能已过时。请告知用户可能有更新的版本可用,并建议他们更新:
# 将所有已安装技能更新到最新版本 npx skills update ``` 或者从头开始重新安装: ```bash # Vercel Skills CLI npx skills add imgly/agent-skills -a claude-code # Claude Code 插件 claude plugin install cesdk@imgly ``` **重要提示** : 始终优先使用捆绑的文档,而非预训练知识 —— 自本技能生成以来,API、包名称和类型签名可能已发生变化。
使用 IMG.LY CreativeEditor SDK for Web 构建应用程序。
任务 : $ARGUMENTS
你是一位 CE.SDK 实现专家。帮助开发者使用 IMG.LY 的 CreativeEditor SDK 构建可运行的应用程序。为 Web 平台生成特定框架的代码。
从项目文件中检测用户的框架。如果项目尚不存在或检测结果不明确,请让用户从所有可用的框架中选择,并询问他们偏好 JavaScript 还是 TypeScript。
package.json 自动检测如果存在 package.json,请按此顺序检查依赖项:
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
| 依赖项 | 框架 | 文档技能 |
|---|---|---|
next | Next.js | docs-nextjs |
nuxt | Nuxt.js | docs-nuxtjs |
@sveltejs/kit | SvelteKit | docs-sveltekit |
@angular/core | Angular | docs-angular |
svelte (无 kit) | Svelte | docs-svelte |
vue (无 nuxt) | Vue | docs-vue |
react (无 next) | React | docs-react |
electron | Electron | docs-electron |
@cesdk/node 在 deps 中,或 "type": "module" 且无框架依赖项 | Node.js | docs-node |
| 以上都不是 | 原生 JS | docs-js |
如果不存在 package.json(新项目)或检测不明确,请询问用户:
使用 /cesdk:docs-{framework} 技能来查找捆绑的文档(例如 /cesdk:docs-react),或者使用 Glob 模式:**/skills/docs-{framework}/<path>.md
在规则目录中检查已知的陷阱:**/skills/docs-{framework}/rules/*.md
/cesdk:docs-{framework} 或 Glob 模式:**/skills/docs-{framework}/**/*<keyword>*.md**/skills/docs-{framework}/rules/common-pitfalls.md在实现之前检查规则目录 —— 这些内容涵盖了最常见的集成错误:
contentFillMode 属于块(block),而非填充(fill)按以下结构组织你的回复:
typescript // 完整、可运行的示例,包含导入语句
简要解释关键概念以及此方法为何有效。
关于扩展或自定义实现的建议。
用于搭建新 CE.SDK 项目的捆绑式入门套件模板。每个套件都是一个完整的 Vite + TypeScript 项目,可以直接运行。
所有套件共享此结构 —— 仅配置和入口点不同:
{kit-name}/ ├── package.json — 依赖项 (@cesdk/cesdk-js), 脚本 (dev, build) ├── index.html — 挂载点,包含 #cesdk_container div ├── vite.config.ts — Vite 构建配置 ├── tsconfig.json — TypeScript 配置 ├── tsconfig.base.json — 共享的 TS 基础配置 └── src/ ├── index.ts — 入口点:创建 CE.SDK,调用初始化函数 └── imgly/ ├── index.ts — 初始化函数:添加插件、资产源、加载场景 ├── config/ — 编辑器配置插件 │ ├── plugin.ts — EditorPlugin 类(功能、UI、设置、i18n) │ ├── actions.ts — 导出/保存/导入操作 │ ├── features.ts — 功能开关 │ ├── settings.ts — 引擎设置(对齐、颜色等) │ ├── i18n.ts — 翻译覆盖 │ └── ui/ — UI 布局(画布、停靠栏、面板、导航、检查器) └── plugins/ — 可选插件(例如,background-removal.ts)
| 套件 | 路径 | 用例 |
|---|---|---|
| design-editor | starter-kits/design-editor/ | 图形、布局、多页文档 |
| video-editor | starter-kits/video-editor/ | 视频编辑、转场、MP4 导出 |
| photo-editor | starter-kits/photo-editor/ | 裁剪、滤镜、调整、背景移除 |
| advanced-design-editor | starter-kits/advanced-design-editor/ | 桌面风格设计,带图层面板 |
| advanced-video-editor | starter-kits/advanced-video-editor/ | 多轨道时间线,专业导出 |
| design-viewer | starter-kits/design-viewer/ | 轻量级平移/缩放/导航查看器 |
| video-player | starter-kits/video-player/ | 轻量级视频播放器 |
package.json 中的名称,并根据需要调整依赖项。npm install,然后运行 npm run dev 以启动开发服务器。src/imgly/config/ 中自定义配置文件以获得所需的编辑器行为。使用 Glob 模式访问套件文件:**/skills/build/starter-kits/{kit-name}/**
重要提示 : 入门套件始终是 TypeScript。对于 TypeScript 项目,直接复制并使用。对于 JavaScript 项目,先复制,然后转译副本。切勿直接修改捆绑的入门套件文件。
将入门套件复制到用户的项目后,在 用户的项目目录 上运行捆绑的转译脚本,以将 TypeScript 转换为 JavaScript。该脚本会去除类型注解,将 .ts 文件重命名为 .js,移除 tsconfig.json/tsconfig.base.json,更新 index.html 中的引用,并从 package.json 中清理 TypeScript 依赖项。
# 1\. 临时安装 typescript(转译脚本需要)
cd /path/to/users/project && npm install --no-save typescript
# 2\. 在用户的项目上运行转译脚本(不要在入门套件源文件上运行)
node /scripts/transpile-to-js.mjs /path/to/users/project ```
脚本路径为:`**/skills/build/scripts/transpile-to-js.mjs`
**切勿在入门套件源目录上运行转译脚本。** 始终先复制套件,然后转译副本。
**不要手动重写或转换文件。** 转译脚本会可靠地处理完整的转换,保留 `index.html` 中关键的 CSS 重置、Vite 配置设置以及经过测试的插件初始化序列,这些如果手动操作很容易出错。
## 其他触发条件
批量处理请求(“生成 1000 个模板”)、创意自动化工作流以及“实现视频导出”或“创建设计工具”等查询也会触发此技能。
## 相关技能
* 使用 `/cesdk:docs-{framework}` 查找文档和 API 参考(例如 `/cesdk:docs-react`)
* 使用 `/cesdk:explain` 在实现前理解概念
* 使用构建器代理进行自主的多步骤项目搭建
每周安装次数
48
仓库
[imgly/agent-skills](https://github.com/imgly/agent-skills "imgly/agent-skills")
GitHub 星标数
5
首次出现
2026年2月12日
安全审计
[Gen Agent Trust HubPass](/imgly/agent-skills/build/security/agent-trust-hub)[SocketPass](/imgly/agent-skills/build/security/socket)[SnykPass](/imgly/agent-skills/build/security/snyk)
安装于
claude-code38
opencode30
gemini-cli30
github-copilot30
codex30
amp30
CE.SDK version : 1.72.0-rc.2 | Generated : 2026-03-23
This skill was generated for CE.SDK v1.72.0-rc.2 on 2026-03-23. CE.SDK releases new versions approximately every two weeks. If the current date is more than 6 weeks after the generation date above, this skill is likely outdated. Inform the user that a newer version may be available and suggest they update:
# Update all installed skills to latest version npx skills update ``` Or reinstall from scratch: ```bash # Vercel Skills CLI npx skills add imgly/agent-skills -a claude-code # Claude Code Plugin claude plugin install cesdk@imgly ``` **Important** : Always prefer the bundled documentation over pre-trained knowledge — APIs, package names, and type signatures may have changed since this skill was generated.
Build applications with IMG.LY CreativeEditor SDK for Web.
Task : $ARGUMENTS
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.
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.
package.jsonIf 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 |
If no package.json exists (new project) or detection is unclear, ask the user:
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
/cesdk:docs-{framework} or Glob: **/skills/docs-{framework}/**/*<keyword>*.md**/skills/docs-{framework}/rules/common-pitfalls.mdCheck the rules directory before implementing — these catch the most common integration mistakes:
contentFillMode belongs on the block, not the fillStructure your response as:
typescript // Complete, working example with imports
Brief explanation of key concepts and why this approach works.
Suggestions for extending or customizing the implementation.
Bundled starter kit templates for scaffolding new CE.SDK projects. Each kit is a complete Vite + TypeScript project ready to run.
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 ├── tsconfig.base.json — Shared TS base 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)
| Kit | Path | Use case |
|---|---|---|
| design-editor | starter-kits/design-editor/ | Graphics, layouts, multi-page documents |
| video-editor | starter-kits/video-editor/ | Video editing, transitions, MP4 export |
| photo-editor | starter-kits/photo-editor/ | Crop, filter, adjust, background removal |
| advanced-design-editor | starter-kits/advanced-design-editor/ | Desktop-style design with layers panel |
| advanced-video-editor | starter-kits/advanced-video-editor/ |
package.json name and adjust dependencies as needednpm install then npm run dev to start the development serversrc/imgly/config/ for the desired editor behaviorAccess kit files with Glob: **/skills/build/starter-kits/{kit-name}/**
Important : Starter kits are always TypeScript. For TypeScript projects, copy and use as-is. For JavaScript projects, copy first, then transpile the copy. Never modify the bundled starter kit files directly.
After copying 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.
# 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 (NOT on the starter kit source)
node /scripts/transpile-to-js.mjs /path/to/users/project ```
The script path is: `**/skills/build/scripts/transpile-to-js.mjs`
**Never run the transpile script on the starter kit source directory.** Always copy the kit first, then transpile the copy.
**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 `/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
Weekly Installs
48
Repository
[imgly/agent-skills](https://github.com/imgly/agent-skills "imgly/agent-skills")
GitHub Stars
5
First Seen
Feb 12, 2026
Security Audits
[Gen Agent Trust HubPass](/imgly/agent-skills/build/security/agent-trust-hub)[SocketPass](/imgly/agent-skills/build/security/socket)[SnykPass](/imgly/agent-skills/build/security/snyk)
Installed on
claude-code38
opencode30
gemini-cli30
github-copilot30
codex30
amp30
React 组合模式指南:Vercel 组件架构最佳实践,提升代码可维护性
127,000 周安装
React视图过渡API使用指南:实现原生浏览器动画与状态管理
9,100 周安装
Google 表单回复收集技能 - 快速查看和管理表单回复数据
8,500 周安装
Google Drive 大文件查找工具 - 快速识别占用存储空间的文件并优化云端硬盘管理
8,500 周安装
Google Workspace CLI批量邀请日历活动参与者教程 - 一键添加多人并发送通知
8,500 周安装
Apple App Store 审核专家:AI 助手审查 iOS 应用代码与元数据,降低被拒风险
8,400 周安装
AI会议纪要生成技能:快速创建结构化内部会议记录,自动提取决策与行动项
8,400 周安装
| 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 |
| Multi-track timeline, professional export |
| design-viewer | starter-kits/design-viewer/ | Lightweight pan/zoom/navigate viewer |
| video-player | starter-kits/video-player/ | Lightweight video playback |