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:

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):

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:

ls -d blocks/*/

Output: (none found - new project)

Step 2 - Block Collection search:

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