SuperAPI AI 工具集
合作ENAI 行业资讯收藏
Skill 广场block-inventory

block-inventory

编程与开发

查看项目

更新于 10-15 10:04

技能介绍

用途

Block Inventory 用于调查和编目 AEM Edge Delivery Services 项目中可用的块（block），帮助理解内容创作时可选择哪些块。它模拟真实作者在创作工具中看到块库的场景：作者会想“我想要一个 hero 区域……哦，这里有一个 Hero 块”。该技能在做出创作决策之前提供这种上下文。

何时使用

  • 开始页面导入，需要了解可用块时
  • 规划内容结构，需要知道块选项时
  • 作者会看到块库并从可用选项中选择时

不适用场景

  • 已经知道需要哪个特定块
  • 从头构建新块
  • 仅检查某个特定块是否存在（应直接使用 block-collection-and-party）

相关工作技能

  • page-import：顶层编排器
  • identify-page-structure：调用本技能来调查块（第 2.5 步）
  • block-collection-and-party：本技能使用它来搜索 Block Collection
  • content-modeling：可以引用块清单，但保持独立判断

工作流程

第 1 步：扫描本地项目块

检查项目中已存在的块：

# List all local blocks
ls -d blocks/*/

对找到的每个块：

  • 记录块名称
  • 用途/描述来自块代码或文档

输出：本地块名称列表。

第 2 步：在 Block Collection 中搜索常见块

搜索项目中可能还没有的常用块。常见块可并行搜索：

# Search all common blocks in parallel
node .claude/skills/block-collection-and-party/scripts/search-block-collection-github.js hero &
node .claude/skills/block-collection-and-party/scripts/search-block-collection-github.js cards &
node .claude/skills/block-collection-and-party/scripts/search-block-collection-github.js columns &
node .claude/skills/block-collection-and-party/scripts/search-block-collection-github.js accordion &
node .claude/skills/block-collection-and-party/scripts/search-block-collection-github.js tabs &
node .claude/skills/block-collection-and-party/scripts/search-block-collection-github.js carousel &
node .claude/skills/block-collection-and-party/scripts/search-block-collection-github.js quote &
node .claude/skills/block-collection-and-party/scripts/search-block-collection-github.js fragment &
wait

选择这些块的原因：

  • hero：页面顶部的大型醒目内容
  • cards：带图片/文本的网格项
  • columns：并排内容布局
  • accordion：可展开的问答部分
  • tabs：可切换的内容面板
  • carousel：轮播图片/内容展示
  • quote：突出显示的评价或引用
  • fragment：可复用的内容区块

输出：带在线示例 URL 的 Block Collection 块。

第 3 步：获取块用途

对找到的每个块（本地或 Block Collection）：

如果来自 Block Collection：用途可从在线示例 URL 得知，访问示例了解用法：https://main--aem-block-collection--adobe.aem.live/block-collection/{block-name}

如果是本地块：检查块代码中的 README 或注释；根据块名称和结构推断；可能需要基于代码检查进行描述。

输出：块名称 + 用途/描述。

第 4 步：整合块清单

创建全面的块选项集合，格式示例：

Available Blocks:

LOCAL BLOCKS:
- {block-name}: {purpose}
- {block-name}: {purpose}

BLOCK COLLECTION (can be added):
- hero: Large heading, text, and buttons at top of page
- cards: Grid of items with images, headings, and descriptions
- columns: Side-by-side content in 2-3 columns
- accordion: Expandable questions and answers
- tabs: Content organized in switchable tabs
- carousel: Rotating images or content panels
- quote: Highlighted testimonial or pullquote
- fragment: Reusable content section

输出中的重要说明：

  • 本地块已可供使用
  • Block Collection 块可按需添加
  • 链接到 Block Collection 供作者查看示例

使用示例

场景：开始 WKND Trendsetters 首页导入

第 1 步 - 本地块：

ls -d blocks/*/
# Output: (none found - new project)

第 2 步 - Block Collection 搜索，并行运行，结果全部找到：hero、cards、columns、accordion、tabs、carousel、quote、fragment。

第 3 步 - 获取用途：访问在线示例或阅读搜索结果中的描述。

第 4 步 - 整合输出（示例）：

Block Inventory for Migration:

LOCAL BLOCKS:
(None - new project)

BLOCK COLLECTION AVAILABLE:
- hero: Large heading, paragraph, and call-to-action buttons for page introductions
  Example: https://main--aem-block-collection--adobe.aem.live/block-collection/hero

- cards: Grid layout of content items with images, headings, and descriptions
  Example: https://main--aem-block-collection--adobe.aem.live/block-collection/cards

- columns: Side-by-side content in 2-3 columns for comparisons or layouts
  Example: https://main--aem-block-collection--adobe.aem.live/block-collection/columns

- accordion: Expandable sections for FAQs or collapsed content
  Example: https://main--aem-block-collection--adobe.aem.live/block-collection/accordion

- tabs: Tabbed interface for organizing related content
  Example: https://main--aem-block-collection--adobe.aem.live/block-collection/tabs

- carousel: Rotating slideshow of images or content
  Example: https://main--aem-block-collection--adobe.aem.live/block-collection/carousel

- quote: Highlighted testimonial or pullquote with attribution
  Example: https://main--aem-block-collection--adobe.aem.live/block-collection/quote

- fragment: Reusable content section that can be embedded across pages
  Example: https://main--aem-block-collection--adobe.aem.live/block-collection/fragment

关键原则

  • 完整性优先于完美：宁可多展示块，也不要遗漏；作者可以忽略不需要的块；事后才发现完美匹配的块会令人沮丧。
  • 实用用途描述：用作者语言而非开发者术语描述块，例如“Grid of items”而非“repeating collection pattern”，“Expandable Q&A”而非“interactive disclosure widget”。
  • 聚焦 Block Collection：优先 Block Collection 块（经过审查、可访问、高性能），这些是规范实现，可添加到任何项目。
  • 速度很重要：并行运行搜索；不要访问每个在线示例（耗时）；获取足够信息以理解用途即可。

常见块参考

块 用途 作者使用场景
hero 页面介绍 “我想要顶部有个大标题”
cards 内容网格 “我想要带图片的网格项”
columns 并排布局 “我想要两个东西并排放”
accordion 可折叠问答 “我有可展开/折叠的 FAQ”
tabs 选项卡内容 “我想要内容在可切换的选项卡里”
carousel 图片轮播 “我想要图片轮播/滑动”
quote 评价引用 “我想要突出显示客户评价”
fragment 可复用内容 “我想要在多个页面复用这个区块”

限制

本技能不：

  • 决定使用哪个块（那是 content-modeling 的职责）
  • 验证块是否正常工作
  • 创建新块
  • 搜索 Block Party（聚焦 Block Collection + 本地）
  • 提供详细实现指导

如有上述需求，请使用相应技能：

  • content-modeling：确定哪个块合适
  • block-collection-and-party：深度搜索和代码检查
  • building-blocks：创建新块
  • content-driven-development：实现指导

分类说明

该技能用于 AEM Edge Delivery Services 项目中的块清单调查，服务于内容建模与页面导入流程，属于编程与开发范畴。