Catalog components, hooks, pages, stories, and design tokens in frontend codebases.
npx skills add https://github.com/Dragoon0x/dragoon-skills --skill inventory-dragoon0x
Please help me install this Agent Skill. Skill: inventory Source: https://github.com/Dragoon0x/dragoon-skills/tree/main/skills/inventory Command: npx skills add https://github.com/Dragoon0x/dragoon-skills --skill inventory-dragoon0x
This Skill solves the problem of redundant development work and incomplete codebase awareness when building new features or auditing design systems, as teams often lose track of existing components, hooks, pages, stories, and design tokens across their codebase.
Use the inventory skill to generate a complete catalog of all components, hooks, pages, stories, and token files in your current project codebase.
High-intent search queries and answers about installing and using this skill.
To catalog frontend components and hooks, run an asset inventory that uses heuristic pattern matching to identify PascalCase components, useFoo-pattern hooks, pages, stories, and design tokens. This eliminates redundant development by confirming existing assets before scaffolding new features.
You can audit design system assets in Vue, Svelte, and Astro codebases. The inventory process scans jsx, tsx, vue, svelte, and astro file formats to generate grouped inventories of components, stories, and design tokens for coverage tracking and gap analysis.
The best way to find existing UI components is running a pre-development asset check. This heuristic-based scan identifies PascalCase components and design token files without AST parsing, ensuring you maintain codebase consistency and avoid redundant work.
Heuristic pattern matching identifies codebase assets by scanning for naming conventions like PascalCase components and useFoo-pattern hooks directly in jsx, tsx, vue, svelte, and astro files. This avoids heavy AST parsing while still accurately mapping existing frontend resources.
No, you do not need an AST parser to generate a codebase inventory. The cataloging process relies entirely on heuristic-based pattern matching to identify story files and design tokens, providing a lightweight asset mapping solution that outputs JSON for workflow integration.
The limitation of heuristic scanning for frontend asset mapping is that it only applies to jsx, tsx, vue, svelte, and astro file formats. It identifies assets using naming conventions rather than deep structural analysis, meaning non-standard naming patterns may be missed during inventory generation.
camilooscargbaptistaAnalyzes frontend code quality and generates prioritized reports for common defects and inefficiencies.
semicolon-devteamGenerate design-to-development handoff documents with component specs and metadata.
JBonfimCreate and maintain Storybook stories for React components with repository conventions.
rodmena-limitedSearch, refactor, and scan code using Abstract Syntax Tree analysis.
