block-inventory

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Block Inventory

块清单

Survey and catalog available blocks to understand what authoring options exist.

调查并分类可用块，了解现有的创作选项。

When to Use This Skill

何时使用此Skill

Use this skill when:

Starting a page import to understand available blocks
Planning content structure and need to know block options
An author would see a block library and choose from available options

Do NOT use this skill when:

You already know which specific block you need
Building new blocks from scratch
Only checking if one specific block exists (use block-collection-and-party directly)

使用此Skill的场景：

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

请勿使用此Skill的场景：

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

Why This Skill Exists

此Skill的存在意义

Real authors see a block library in their authoring tools. They think: "I want a hero section... oh, there's a Hero block!"

This skill provides that same context - understanding what blocks are available BEFORE making authoring decisions.

实际的内容创作者在其创作工具中会看到块库。他们会想："我需要一个英雄区域……哦，这里有Hero块！"

此Skill提供相同的上下文——在做出创作决策前先了解可用的块。

Related Skills

Block Inventory Workflow

块清单工作流程

Step 1: Scan Local Project Blocks

步骤1：扫描本地项目块

Check what blocks already exist in the project:

bash

undefined

检查项目中已有的块：

bash

undefined

List all local blocks

列出所有本地块

ls -d blocks/*/


**For each block found:**
- Record block name
- Note: Purpose/description comes from block code or documentation

**Output:** List of local block names

---

ls -d blocks/*/


**对于每个找到的块：**
- 记录块名称
- 注意：用途/描述来自块代码或文档

**输出：** 本地块名称列表

---

Step 2: Search Block Collection for Common Blocks

步骤2：在Block Collection中搜索常用块

Search for commonly-used blocks that might not be in the project yet.

Common blocks to search (run in parallel):

bash

undefined

搜索可能尚未在项目中的常用块。

要搜索的常用块（并行运行）：

bash

undefined

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


**Why these specific blocks:**
- hero - Large prominent content at page top
- cards - Grid of items with images/text
- columns - Side-by-side content layouts
- accordion - Expandable Q&A sections
- tabs - Switchable content panels
- carousel - Rotating image/content displays
- quote - Highlighted testimonials or quotes
- fragment - Reusable content sections

**Output:** Block Collection blocks with live example URLs

---


**为何选择这些特定块：**
- hero - 页面顶部的大型显眼内容
- cards - 包含图片/文本的项目网格
- columns - 并排内容布局
- accordion - 可展开的问答部分
- tabs - 可切换的内容面板
- carousel - 旋转的图片/内容展示
- quote - 突出显示的推荐语或引用
- fragment - 可复用的内容部分

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

---

Step 3: Get Block Purposes

步骤3：获取块用途

For each block found (local or Block Collection):

If from Block Collection:

Purpose is clear from live example URL

Visit live example to understand usage:

https://main--aem-block-collection--adobe.aem.live/block-collection/{block-name}

If local block:

Check for README or comments in block code
Infer from block name and structure
May need to describe based on code examination

Output: Block name + purpose/description

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

如果来自Block Collection：

用途可从在线示例URL中明确得知

访问在线示例了解用法：

https://main--aem-block-collection--adobe.aem.live/block-collection/{block-name}

如果是本地块：

查看块代码中的README或注释
从块名称和结构推断
可能需要根据代码检查来描述

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

Step 4: Consolidate Block Inventory

步骤4：整合块清单

Create comprehensive block palette:

Format:

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

Important notes in output:

Local blocks are already available for use
Block Collection blocks can be added if needed
Link to Block Collection for authors to see examples

Output: Complete block inventory

创建全面的块选项列表：

格式：

可用块：

本地块：
- {block-name}: {purpose}
- {block-name}: {purpose}

Block Collection（可添加）：
- hero: 页面顶部的大型标题、文本和按钮
- cards: 包含图片、标题和描述的项目网格
- columns: 2-3列的并排内容布局
- accordion: 可展开的问答
- tabs: 按可切换标签组织的内容
- carousel: 旋转的图片或内容面板
- quote: 突出显示的推荐语或引用
- fragment: 可复用的内容部分

输出中的重要说明：

本地块已可直接使用
Block Collection中的块可按需添加
提供Block Collection的链接，供创作者查看示例

输出： 完整的块清单

Usage Example

使用示例

Scenario: Starting WKND Trendsetters homepage import

Step 1 - Local blocks:

bash

ls -d blocks/*/

场景： 开始WKND Trendsetters首页导入

步骤1 - 本地块：

bash

ls -d blocks/*/

Output: (none found - new project)

输出：（未找到 - 新项目）


**Step 2 - Block Collection search:**
```bash


**步骤2 - Block Collection搜索：**
```bash

Run parallel searches

运行并行搜索

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 &

... (all common blocks)

...（所有常用块）

wait


**Results:**
- hero ✅ Found
- cards ✅ Found
- columns ✅ Found
- accordion ✅ Found
- tabs ✅ Found
- carousel ✅ Found
- quote ✅ Found
- fragment ✅ Found

**Step 3 - Get purposes:**
Visit live examples or read descriptions from search results

**Step 4 - Consolidated output:**

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

---

wait


**结果：**
- hero ✅ 已找到
- cards ✅ 已找到
- columns ✅ 已找到
- accordion ✅ 已找到
- tabs ✅ 已找到
- carousel ✅ 已找到
- quote ✅ 已找到
- fragment ✅ 已找到

**步骤3 - 获取用途：**
访问在线示例或从搜索结果中读取描述

**步骤4 - 整合输出：**

迁移用块清单：

本地块：（无 - 新项目）

Block Collection可用块：

hero: 用于页面介绍的大型标题、段落和号召性按钮示例：https://main--aem-block-collection--adobe.aem.live/block-collection/hero
cards: 包含图片、标题和描述的内容项网格布局示例：https://main--aem-block-collection--adobe.aem.live/block-collection/cards
columns: 用于对比或布局的2-3列并排内容示例：https://main--aem-block-collection--adobe.aem.live/block-collection/columns
accordion: 用于FAQ或折叠内容的可展开区域示例：https://main--aem-block-collection--adobe.aem.live/block-collection/accordion
tabs: 用于组织相关内容的标签式界面示例：https://main--aem-block-collection--adobe.aem.live/block-collection/tabs
carousel: 图片或内容的轮播幻灯片示例：https://main--aem-block-collection--adobe.aem.live/block-collection/carousel
quote: 带署名的突出显示推荐语或引用示例：https://main--aem-block-collection--adobe.aem.live/block-collection/quote
fragment: 可嵌入到多个页面的可复用内容区域示例：https://main--aem-block-collection--adobe.aem.live/block-collection/fragment

---

Key Principles

核心原则

Completeness over perfection:

Better to show too many blocks than miss one
Authors can ignore blocks they don't need
Discovering a perfect-fit block later is frustrating

Practical purposes:

Describe blocks in author language, not developer terms
"Grid of items" not "repeating collection pattern"
"Expandable Q&A" not "interactive disclosure widget"

Block Collection focus:

Prioritize Block Collection blocks (vetted, accessible, performant)
These are the canonical implementations
Can be added to any project

Speed matters:

Run searches in parallel
Don't visit every live example (time-consuming)
Get enough info to understand purpose

完整优先于完美：

显示过多块比遗漏块更好
创作者可以忽略不需要的块
之后才发现合适的块会令人沮丧

实用的用途描述：

用创作者的语言描述块，而非开发者术语
"项目网格"而非"重复集合模式"
"可展开的问答"而非"交互式披露组件"

聚焦Block Collection：

优先考虑Block Collection中的块（经过审核、可访问、性能良好）
这些是标准实现
可添加到任何项目

速度优先：

并行运行搜索
不要访问每个在线示例（耗时）
获取足够信息以了解用途即可

Common Blocks Reference

常见块参考

Here's a quick reference for the most common blocks:

Block	Purpose	When Authors Use It
hero	Page introduction	"I want a big heading at the top"
cards	Content grid	"I want items in a grid with pictures"
columns	Side-by-side	"I want two things next to each other"
accordion	Collapsible Q&A	"I have FAQs that should expand/collapse"
tabs	Tabbed content	"I want content in switchable tabs"
carousel	Image slider	"I want images that rotate/slide"
quote	Testimonial	"I want to highlight a customer quote"
fragment	Reusable content	"I want to reuse this section on multiple pages"

以下是最常见块的快速参考：

块	用途	创作者何时使用
hero	页面介绍	"我想在顶部放一个大标题"
cards	内容网格	"我想要带图片的项目网格"
columns	并排布局	"我想把两个内容放在一起"
accordion	可折叠FAQ	"我有需要展开/折叠的FAQ"
tabs	标签式内容	"我想把内容放在可切换的标签中"
carousel	图片轮播	"我想要可旋转/滑动的图片"
quote	推荐语	"我想突出显示客户评价"
fragment	可复用内容	"我想在多个页面复用这个区域"

Limitations

局限性

This skill does NOT:

Determine which block to use (that's content-modeling's job)
Validate if blocks work correctly
Create new blocks
Search Block Party (focuses on Block Collection + local)
Provide detailed implementation guidance

For those needs, use the appropriate skills:

content-modeling: Determine which block fits
block-collection-and-party: Deep search and code examination
building-blocks: Create new blocks
content-driven-development: Implementation guidance

此Skill不负责：

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

如需这些功能，请使用相应的Skill：

content-modeling: 确定适合的块
block-collection-and-party: 深度搜索和代码检查
building-blocks: 创建新块
content-driven-development: 实施指导

block-inventory

Original

Translation

Block Inventory

块清单

When to Use This Skill

何时使用此Skill

Why This Skill Exists

此Skill的存在意义

Related Skills

相关Skill

Block Inventory Workflow

块清单工作流程

Step 1: Scan Local Project Blocks

步骤1：扫描本地项目块

List all local blocks

列出所有本地块

Step 2: Search Block Collection for Common Blocks

步骤2：在Block Collection中搜索常用块

Search all common blocks in parallel

并行搜索所有常用块

Step 3: Get Block Purposes

步骤3：获取块用途

Step 4: Consolidate Block Inventory

步骤4：整合块清单

Usage Example

使用示例

Output: (none found - new project)

输出：（未找到 - 新项目）

Run parallel searches

运行并行搜索

... (all common blocks)

...（所有常用块）

Key Principles

核心原则

Common Blocks Reference

常见块参考

Limitations

局限性