Derive a reusable UI component library from a screen inventory.
npx skills add https://github.com/bflandev/threadline-ai --skill component-inventory
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
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.
Generate a component inventory from your screen inventory to outline reusable UI components and their variants for design-system planning.
High-intent search queries and answers about installing and using this skill.
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.
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.
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.
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.
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.
bflandevTranslate component inventories into framework-specific component specifications with props and state mappings.
spontus-reachAudit Figma component libraries for naming, coverage, and variant gaps.
vneseyoungsterExtract design assets, metadata, and tokens from Figma files.
niiiusburoExtract reusable UI components and design tokens from a codebase.
