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 migration 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-migration - 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 migration

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