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 &
waitWhy 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 sectionImportant 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)
waitResults:
- 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/fragmentKey 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