Adobe Express Dev Skill

Adobe Express人工智能编码助理开发技巧

Adobe Express插件开发专家指南 通过MCP服务器集成、OAuth模式和全面的代码示例目录。

  

这是什么？

一 代理技能 AI编码助手为开发Adobe Express插件提供专业知识和工具。使用 Cursor、GitHub Copilot、Windsurf、Claude Code、Continue.dev、谷歌反重力，以及任何兼容MCP的IDE。

当您处理Adobe Express项目时，此技能会自动激活，以帮助您：

• 📚 通过MCP服务器访问最新的Adobe Express API文档
• 🔐 实现OAuth 2.0身份验证（PKCE流）
• 🎨 使用Spectrum Web组件构建用户界面
• 📦 了解项目结构和架构
• 💾 数据持久性和存储模式
• 🖼️ 文档操作（形状、文本、图像、音频、视频）
• 🔄 iframe运行时和文档沙盒之间的通信
• 🛠️ 常见问题排查

特性

✅ MCP服务器集成 -使用Adobe Express MCP服务器获取最新文档\ ✅ OAuth 2.0指南 -与4家云提供商完成PKCE实施\ ✅ 13代码示例目录 -带有详细说明的官方Adobe示例\ ✅ OAuthUtils.js参考 -可重用的OAuth帮助模块\ ✅ 8个分步工作流程 -常见开发任务\ ✅ 生产模式 -真实世界的实施示例\ ✅ 最佳实践 -安全、性能和用户体验指南

安装

1.将此存储库克隆到您的技能目录

对于Cursor/Windsurf/Continue.dev：

cd ~/.continue/skills/  # or ~/.windsurf/skills/ or ~/.cursor/skills/
git clone https://github.com/YOUR_USERNAME/adobe-express-dev-skill.git adobe-express-dev

对于GitHub Copilot（VS代码）：

cd ~/.copilot/skills/
git clone https://github.com/YOUR_USERNAME/adobe-express-dev-skill.git adobe-express-dev

对于Claude Desktop：

cd ~/Library/Application\ Support/Claude/skills/  # macOS
git clone https://github.com/YOUR_USERNAME/adobe-express-dev-skill.git adobe-express-dev

对于谷歌反重力：

cd ~/.gemini/antigravity/global_skills/  # Global (all workspaces)
git clone https://github.com/YOUR_USERNAME/adobe-express-dev-skill.git adobe-express-dev

# OR for workspace-specific:
cd /.agent/skills/
git clone https://github.com/YOUR_USERNAME/adobe-express-dev-skill.git adobe-express-dev

2.配置Adobe Express MCP服务器（官方+社区）

为了获得最佳的开发体验，请配置两个MCP服务器：

对于VS代码/光标/风帆：\ 增添 .vscode/mcp.json 或IDE的MCP设置：

{
  "mcpServers": {
    "adobe-express": {
      "command": "npx",
      "args": [
        "-y",
        "@adobe/express-developer-mcp@latest"
      ]
    },
    "adobe-express-community": {
      "command": "npx",
      "args": [
        "-y",
        "community-express-dev-mcp"
      ]
    }
  }
}

对于Claude Desktop：\ 增添 ~/Library/Application Support/Claude/claude_desktop_config.json:

{
  "mcpServers": {
    "adobe-express": {
      "command": "npx",
      "args": ["-y", "@adobe/express-developer-mcp@latest"]
    },
    "adobe-express-community": {
      "command": "npx",
      "args": ["-y", "community-express-dev-mcp"]
    }
  }
}

为什么是两台服务器？

• ✅ 官方Adobe服务器：核心SDK、API、文档操作
• ✅ 社区服务器: Live Spectrum Web组件文档 用于UI构建

3.重新启动AI编码助手

当您处理Adobe Express附加项目时，该技能将自动激活。

包含什么

主要技能(SKILL.md)

• 何时使用：触发关键字和场景
• 关键概念：两种运行时架构、导入模式、SDK使用
• 8工作流程：API文档访问、项目结构、文档内容、UI构建、OAuth、通信、示例、调试
• 最佳实践：安全、性能、测试
• 故障排除：常见问题和解决方案

OAuth实施指南(references/oauth-implementation.md)

• PKCE流程分步代码示例
• OAuthUtils.js辅助模块文档
• 提供商配置：Dropbox、OneDrive、Google Drive、Box
• 具有客户端存储API的令牌存储
• 登录/注销UI模式
• 错误处理示例
• 生产就绪代码片段

代码示例目录(references/code-samples.md)

13个官方Adobe Express示例的综合指南：

• 使用oauth导入图像 ⭐ - 完整的OAuth+云存储
• 使用客户端存储 -数据持久性模式
• 出口样品 -导出格式副本（JPEG、PNG、PDF、MP4）
• 录音插件 -媒体处理
• 像素 -基于画布的高级编辑器
• 另外8个，涵盖React、Vue、Spectrum等

快速入门示例

访问最新的API文档

Ask: "How do I create text in Adobe Express?"
→ Skill uses MCP server to fetch current documentation

为Dropbox实施OAuth

Ask: "How do I implement OAuth for Dropbox?"
→ Skill references oauth-implementation.md
→ Provides PKCE flow code + OAuthUtils.js link

查找代码示例

Ask: "Show me Adobe Express samples for drag and drop"
→ Skill references code-samples.md
→ Returns relevant samples with GitHub links

文件结构

adobe-express-dev/
├── SKILL.md                              # Main skill instructions
├── README.md                             # This file
├── LICENSE                               # MIT License
└── references/
    ├── oauth-implementation.md           # OAuth 2.0 complete guide
    └── code-samples.md                   # 13 official samples catalog

当此技能激活时

当您执行以下操作时，您的AI助手会自动使用此技能：

• 提及“Adobe Express”、“附加组件”、“Express文档sdk”
• 使用文档沙盒或iframe运行时
• 实现OAuth身份验证
• 使用Spectrum Web组件
• 询问Adobe Express API或开发模式

兼容： Cursor、GitHub Copilot、Windsurf、Claude Code、Continue.dev、Google Antigravity和任何兼容MCP的IDE。

先决条件

• AI编码助手 -其中之一：

- 光标（推荐-免费） - GitHub Copilot（VS Code，JetBrains） - 风帆冲浪（Codeium） - 克劳德密码（人类学） - Continue.dev（开源） - 谷歌反重力（谷歌） - 任何兼容MCP的IDE

• Adobe Express MCP服务器 在IDE中配置
• Node.js 18+ 用于本地插件开发
• Adobe Express帐户 用于测试附加组件

运作原理

1. 你问了一个问题 关于Adobe Express开发
2. 技能检测 相关关键字（插件、OAuth、文档沙盒等）
3. 技能激活 并提供：

- 参考捆绑指南（OAuth，示例） - MCP服务器查询最新API文档 - 代码示例和模式 - 官方资源链接

1. 您将获得准确、可操作的指导 无需离开IDE

与以下设备无缝协作： Cursor、GitHub Copilot、Windsurf、Claude Code、Continue.dev、Google Antigravity以及所有与MCP兼容的AI编码助手。

这个技能不能做什么

❌ 不复制整个代码示例（提供链接）\ ❌ 不替换MCP服务器（补充它）\ ❌ 不包括完整的OAuthUtils.js文件（源代码链接）\ ❌ 不复制所有API文件（最新使用MCP）

相反：提供精心策划的指南、模式和指向权威来源的指针。

行动技能示例

示例1:OAuth实现

你：“如何将Google Drive OAuth添加到我的附加组件中？”

技能反应:

• 参考文献 oauth-implementation.md
• 提供Google Drive OAuth配置
• 显示PKCE流代码
• 指向OAuthUtils.js帮助程序的链接
• 解释manifest.json更新

示例2：代码示例

你：“我需要一个客户端存储示例”

技能反应:

• 参考文献 code-samples.md
• 指向 use-client-storage 样品
• 描述它所展示的内容
• 提供GitHub clone命令
• 解释如何运行示例

示例3：最新API

你：“addAudio（）接受哪些参数？”

技能反应:

• 查询MCP服务器以获取最新文档
• 返回API签名
• 注意到 title 是强制性的
• 提供代码示例

贡献

欢迎投稿！如果您有改进、其他模式或更新的示例：

1. 分叉存储库
2. 创建要素分支
3. 进行更改
4. 提交拉取请求

请确保：

• 不重复完整的示例代码（链接代替）
• 图案经过生产测试
• 文件清晰简洁

相关资源

• Adobe Express附加组件: https://developer.adobe.com/express/add-ons/
• 官方样品: https://github.com/AdobeDocs/express-add-on-samples
• OAuthUtils.js: https://github.com/AdobeDocs/express-add-on-samples/blob/main/samples/import-images-using-oauth/src/utils/OAuthUtils.js
• 光谱网络组件: https://opensource.adobe.com/spectrum-web-components/
• Adobe Express MCP服务器: https://www.npmjs.com/package/@土坯/express-developer-mcp@latest

许可证

MIT许可证-请参阅 许可证 文件以获取详细信息。

作者

杰弗里·恩瓦楚库\ 专为Adobe Express开发人员社区创建。

致谢

• Adobe Express团队提供优秀的文档和MCP服务器
• Adobe Express附加组件示例存储库贡献者
• 创建Agent技能规范的拟人化
• Agent技能社区（Cursor、GitHub Copilot、Windsurf、Claude、Continue.dev、Google Antigravity用户）

______________________________________________________________________

由...制作❤️ 适用于Adobe Express开发人员

如果这项技能对你有帮助，请⭐ 将存储库星化并与其他开发人员共享！