sb-inventory

Audit React and Vite components by import and call-site usage.

18|Updated Jun 16, 2026

Search Tags:#refactoring #react #codebase #audit #vite #storybook #inventory

Ready to run

npx skills add https://github.com/strongeron/storybook-workbench --skill sb-inventory

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: sb-inventory
Source: https://github.com/strongeron/storybook-workbench/tree/main/skills/sb-inventory
Command: npx skills add https://github.com/strongeron/storybook-workbench --skill sb-inventory

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires python3, bash, and includes scripts (resource) and references (resource) components.

What problem does it solve?

This skill eliminates the guesswork and drift inherent in documentation like AGENTS.md or DESIGN.md by providing a ground-truth audit of what components are actually imported and rendered in your React+Vite application.

Core Features & Use Cases

Real vs. Slop Detection: Automatically identifies which components are actively used versus which are dead code, helping you prune your codebase.
Design System Mapping: Detects your dominant design system (e.g., Tailwind, shadcn) based on actual code signals rather than claims.
Component Usage Worklist: Generates a searchable inventory of components ranked by call-site usage, including their nesting hierarchy and the specific pages they appear on.

Quick Start

Run the inventory-project script to generate the project-inventory.json file and audit your component usage.

Frequently Asked Questions about sb-inventory

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I find unused React components in a Vite application?▼

To detect dead React components, run an audit script that analyzes actual import and call-site usage to distinguish active components from dead slop. This generates a comprehensive JSON inventory mapping component usage and nesting hierarchies.

How do I audit design system adoption in a React codebase?▼

You can audit design system adoption by analyzing actual code signals to detect your dominant design system, such as Tailwind or shadcn. This provides a ground-truth audit of what components are actually imported and rendered.

Do I need Python and Bash to audit my React component usage?▼

Yes, you need Python3 and Bash to execute the discovery scripts that audit your React component usage. These scripts analyze your Vite application and produce atomic JSON artifacts for consumption.

What is the best way to generate a component inventory for a React codebase?▼

The best way to generate a component inventory is to run a script that analyzes actual import and call-site usage. This creates a searchable inventory ranked by usage, including nesting hierarchies and specific page appearances.

How do I map component-to-page relationships in a React application?▼

You map component-to-page relationships by analyzing import graphs and call-site usage across your codebase. This generates a data-driven inventory detailing the specific pages where each active component appears.

Can I identify dead code in a Storybook project?▼

Yes, you can identify dead code in a Storybook project by auditing your React and Vite application to distinguish between actively imported components and unused slop. The audit relies on actual call-site usage rather than documentation.