Building Blocks 是面向 Adobe AEM Edge Delivery 的区块开发技能，用于指导开发者创建新的区块或修改已有区块，并遵循内容驱动开发（Content Driven Development，CDD）原则。区块是 AEM 站点的可复用构建单元，每个区块通过 JavaScript 装饰（decoration）和 CSS 样式，将作者编写的内容转换为丰富的交互体验。
用途 该技能覆盖区块开发的完整流程：理解内容模型、实现装饰逻辑、应用样式，以及维护代码质量标准。它只能在 content-driven-development 技能的 Phase 2（实现阶段）被调用。如果尚未遵循 CDD 流程，应先停止并调用 content-driven-development 技能，以确保测试内容和内容模型已就绪。
主要能力 该技能处理以下工作：创建新的区块文件与结构；实现 JavaScript 装饰；添加 CSS 样式；代码质量与测试。
前置条件 使用前必须满足：测试内容已存在（位于 CMS 或本地草稿）；内容模型已定义；测试内容 URL 可用。所需信息包括：区块名称、内容模型（作者将使用的结构）、测试内容 URL。
使用方式 流程概览为：验证前置条件（CDD 已完成）→ 查找相似区块（用于参考模式与复用）→ 创建或修改区块结构（文件与目录）→ 实现 JavaScript 装饰（DOM 转换）→ 添加 CSS 样式（作用域内、响应式）→ 测试实现（本地测试、lint）→ 编写区块文档（面向开发者与作者）。
详细步骤
- 验证前置条件：向用户确认是否已创建测试内容（URL 或路径）、是否已定义内容模型；若未满足，停止并调用 content-driven-development 技能；若满足，获取测试内容 URL 后继续。
- 查找相似区块：对于新块或重大修改，在代码库中搜索可能提供有用模式或可复用代码的相似区块，并使用 block-collection-and-party 技能查找相关参考区块；对于已有区块的小修改，直接跳到第 3 步。
- 创建或修改区块结构：新块需创建目录 blocks/{block-name}/，创建 {block-name}.js 和 {block-name}.css 文件，使用样板结构（或参考 resources/ 中的模板）；JS 文件导出默认的 decorate(block) 函数（必要时可为 async），CSS 文件以 .{block-name} 类为目标。已有区块则定位 blocks/{block-name}/ 目录，查看当前实现后再修改。
- 实现 JavaScript 装饰：遵循 resources/js-guidelines.md 中的模式与约定，使用 DOM API 转换初始区块 HTML 结构，保持装饰逻辑聚焦且单一用途，适当处理变体（检查 block.classList 中的变体类），沿用相似区块的既有模式。
- 添加 CSS 样式：遵循 resources/css-guidelines.md 中的模式与约定，所有 CSS 选择器必须限定在区块作用域内（以 .{block-name} 开头），在区块作用域内使用类 BEM 命名，利用 CSS 自定义属性实现主题化，编写移动优先的响应式样式，保持低特异性。
- 测试实现：实现完成后调用 testing-blocks 技能，该技能会指导编写逻辑密集工具的单元测试、进行浏览器测试验证区块行为、截图用于验证与 PR 文档、运行 lint 并修复问题、验证 GitHub 检查通过。需向 testing-blocks 提供区块名称、测试内容 URL（来自 CDD 流程）以及需要测试的变体。测试完成后返回本技能继续第 7 步。
- 编写区块文档：区块需要两类文档。开发者文档方面，大多数区块简单且自包含，只需代码注释；若区块特别复杂（变体多或代码复杂），可在区块文件夹中添加简短的 README.md，保持简短以便快速浏览。面向作者的文档方面，帮助内容作者理解如何在 CMS 中使用区块，通常以草稿/库内容形式存在于 CMS 中而非代码库。几乎所有区块都应有面向作者的文档，例外包括：已弃用但尚不能移除的区块、极少使用且按需知悉的特殊用途区块、不应由作者直接使用的自动区块。作者文档必须与区块实现保持同步：变体增删改时更新、内容结构变化时更新、区块行为或功能变化时更新。作者文档的存放方式因项目而异：Sidekick Library（Google Drive/SharePoint 编写）使用 https://github.com/adobe/franklin-sidekick-library，检查代码库中是否存在 /tools/sidekick/library.html，若存在则引导用户在库中添加/更新区块文档；Document Authoring (DA) Library 使用 https://docs.da.live/administrators/guides/setup-library，实现方式与 Sidekick Library 不同，若在使用则引导用户更新 DA 库中的区块文档；Universal Editor (UE) 项目通常跳过专门的作者文档库，可能使用内联帮助或其他机制；简单文档页面：部分项目在 /drafts 或 /docs 下维护文档，页面包含编写指南和区块示例。作者文档的具体内容因项目而异，作为代理应：识别需要创建或更新作者文档；确定项目使用哪种文档方式（检查 /tools/sidekick/library.html 作为信号）；根据所做更改引导用户确定应记录区块的哪些方面；基于项目的文档方式提供具体指导。
相关技能 content-driven-development：使用本技能前必须调用，以确保内容和内容模型已就绪。block-collection-and-party：用于查找相似区块以获取模式。testing-blocks：实现后自动调用以进行全面测试。
参考材料 resources/js-guidelines.md、resources/css-guidelines.md。
适用场景与限制 适用于 AEM Edge Delivery 项目的区块开发与修改，且必须已处于 CDD 流程的实现阶段。若前置条件不满足，不应使用本技能。关于收费、价格、平台支持范围等具体信息，资料中暂未提供。