Update UI Inventory Skill

When to Activate

Activate this skill when:

• Adding new UI components to the engine

• Removing or deprecating components

• The component-inventory CI check fails

• You want to verify docs match the actual component count

• After merging PRs that add/remove components

Files Involved

File Purpose

.github/component-inventory.json

Source of truth for component counts

docs/design-system/COMPONENT-REFERENCE.md

User-facing component documentation

libs/engine/src/lib/ui/components/

Actual component source files

Inventory Structure

The inventory tracks 13 component categories:

{ "components": { "total": 186, "breakdown": { "primitives": 45, "nature": 64, "ui": 29, "typography": 11, "chrome": 6, "terrarium": 7, "gallery": 4, "charts": 4, "content": 4, "states": 4, "forms": 3, "indicators": 3, "icons": 2 } } }

Step-by-Step Process

1. Count Components in Each Category

Run these commands to get actual counts:

Count .svelte files in each category

for dir in primitives nature ui typography chrome terrarium gallery charts content states forms indicators icons; do count=$(find libs/engine/src/lib/ui/components/$dir -name "*.svelte" 2>/dev/null | wc -l | tr -d ' ') echo "$dir: $count" done

2. Compare with Inventory

Read the current inventory and compare:

cat .github/component-inventory.json

3. Identify Discrepancies

Look for:

• New components: Files exist but aren't in the count

• Removed components: Count includes files that no longer exist

• Moved components: Component relocated to different category

4. Update Inventory JSON

Edit .github/component-inventory.json :

{ "lastUpdated": "YYYY-MM-DD", "lastAuditedBy": "claude/<context>", "components": { "total": <sum of all categories>, "breakdown": { "<category>": <new count>, ... } } }

5. Update Component Reference

Edit docs/design-system/COMPONENT-REFERENCE.md :

Update the intro line:

186 components organized by category...

Update Quick Links (the anchor links include counts):

• ui/ - Core UI Components

Update section headers:

ui/ - Core UI Components (29)

Add new component to relevant table (if significant): For Glass components, add to "Other Glass Components" table:

| GlassNewComponent | Description of what it does |

Update the last updated date at the bottom:

Last updated: YYYY-MM-DD

6. Commit Changes

git add .github/component-inventory.json docs/design-system/COMPONENT-REFERENCE.md git commit -m "docs: update component inventory

• Update <category> count: X -> Y
• Add <ComponentName> to COMPONENT-REFERENCE.md
• Bump total: A -> B"

Quick Reference: Counting Commands

Single category count

find libs/engine/src/lib/ui/components/ui -name "*.svelte" | wc -l

List all files in a category (to identify new ones)

ls libs/engine/src/lib/ui/components/ui/*.svelte

Find Glass components specifically

ls libs/engine/src/lib/ui/components/ui/ | grep -i glass

Total across all categories

find libs/engine/src/lib/ui/components -name "*.svelte" | wc -l

Documentation Guidelines

When adding components to COMPONENT-REFERENCE.md:

Glass Components (Always Document)

Glass components define Grove's visual language - always add them to the "Other Glass Components" table with a clear description.

Standard Components

Add to the "Standard Components" table if it's a general-purpose wrapper.

Specialized Components

For category-specific components (nature, charts, etc.), add to the appropriate section if it's significant or has unique props worth documenting.

Example: Adding a New Glass Component

After adding GlassStatusWidget.svelte :

Count confirms ui went from 28 to 29

Update inventory:

"ui": 29, "total": 186, "lastUpdated": "2026-01-21"

Update COMPONENT-REFERENCE.md:

• Line 3: > 186 components...

• Line 13: - ui/ - Core UI Components

• Line 74: ## ui/ - Core UI Components (29)

• After line 209, add to table: | GlassStatusWidget | Real-time status widget with auto-refresh |

• Last line: Last updated: 2026-01-21

CI Integration

The .github/workflows/component-inventory.yml workflow:

• Runs on PRs touching libs/engine/src/lib/ui/components/**

• Counts actual components vs inventory

• Fails if there's a mismatch

• Provides helpful output showing discrepancies

When CI fails, run this skill to fix the mismatch.

Checklist

Before finishing:

• All category counts match actual file counts

• Total equals sum of all categories

• lastUpdated date is today

• COMPONENT-REFERENCE.md counts match inventory

• New significant components added to appropriate documentation table

• Quick Links anchors updated if section headers changed

• Changes committed with descriptive message