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:

code

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:

code

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