component-inventory

Derive a reusable UI component library from a screen inventory.

1|Updated Apr 3, 2026

Search Tags:#ui #documentation #component #inventory #design-system #screens #variants

Ready to run

npx skills add https://github.com/bflandev/threadline-ai --skill component-inventory

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: component-inventory
Source: https://github.com/bflandev/threadline-ai/tree/main/skills/component-inventory
Command: npx skills add https://github.com/bflandev/threadline-ai --skill component-inventory

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Use this skill to derive a reusable UI component library from a screen inventory, identifying common elements and variants to accelerate design-system work and handoffs.

Core Features & Use Cases

Extract raw components from screens (inputs, buttons, records, badges, navigation, empty states, modals, data views)
Consolidate into named components (e.g., FormFieldBlock, RecordRow, StatusBadge)
Define variants for each component (empty, filled, required-error, type-error, disabled, hidden)
Identify shared components and plan for design-system consolidation
Support for actor-specific or permission-based variants and mapping to design assets

Quick Start

Generate a component inventory from your screen inventory to outline reusable UI components and their variants for design-system planning.

Frequently Asked Questions about component-inventory

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

FAQPage Schema

How do I extract reusable UI components from existing design screens?▼

Consolidating shared elements from a screen inventory derives a reusable UI component library. This extraction process identifies common interface patterns and maps them into named components for design-system planning and handoff.

What is a component inventory and how does it support design-system consolidation?▼

A component inventory catalogs extracted UI elements and their variants to support design-system consolidation. It enforces naming conventions and documents supporting assets, creating a structured foundation for building a scalable, reusable design library.

How do I define UI component variants for different states and permissions?▼

Defining UI component variants involves specifying state conditions like empty, filled, disabled, or required-error for each extracted element. The inventory also supports mapping actor-specific and permission-based variants to handle complex application logic.

Can I use a component inventory to prepare design-system artifacts for Figma?▼

Yes, deriving a component inventory prepares design-system artifacts for tools like Figma. It extracts raw components from your screens, enforces naming conventions, and organizes supporting assets directories to streamline the handoff process.

What's the best way to map application screens to a reusable design library?▼

The best way to map screens to a reusable design library is to systematically extract raw components, consolidate shared elements into named blocks, and define their respective state variants to ensure comprehensive design-system coverage.