Block Inventory

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

When to Use This 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)

Why This Skill Exists

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.

Related Skills

page-import - Top-level orchestrator
identify-page-structure - Invokes this skill to survey blocks (Step 2.5)
block-collection-and-party - This skill uses it to search Block Collection
content-modeling - Can reference block inventory but maintains independent judgment

Block Inventory Workflow

Step 1: Scan Local Project Blocks

Check what blocks already exist in the project:

bash

# 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

Step 2: Search Block Collection for Common Blocks

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

Common blocks to search (run in parallel):

bash

# 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

Step 3: Get Block Purposes

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

Step 4: Consolidate Block Inventory

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

Usage Example

Scenario: Starting WKND Trendsetters homepage import

Step 1 - Local blocks:

bash

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

Step 2 - Block Collection search:

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

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

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"

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

block-inventory

NPX Install

Tags

SKILL.md Content

Block Inventory

When to Use This Skill

Why This Skill Exists

Related Skills

Block Inventory Workflow

Step 1: Scan Local Project Blocks

Step 2: Search Block Collection for Common Blocks

Step 3: Get Block Purposes

Step 4: Consolidate Block Inventory

Usage Example

Key Principles

Common Blocks Reference

Limitations