skills.rest
daniyarseifolla
daniyarseifollaCOMMUNITY
Explore all skills by this author →
GitHub

scan-ui-inventory

Scan apps and libs directories to catalog UI components, SCSS mixins, and design tokens into .claude/ui-inventory.md.

Updated Aug 23, 2026
Search Tags:#automation#documentation#frontend#inventory#ui-components#design-tokens#scss-mixins
One-click install
npx skills add https://github.com/daniyarseifolla/agent-skills --skill scan-ui-inventory
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: scan-ui-inventory
Source: https://github.com/daniyarseifolla/agent-skills/tree/main/scan-ui-inventory
Command: npx skills add https://github.com/daniyarseifolla/agent-skills --skill scan-ui-inventory

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Scans a codebase to identify and document reusable UI assets—components, SCSS mixins, and design tokens—and outputs a centralized inventory file.

Core Features & Use Cases

  • Detects project structure for UI assets across apps/* and libs/*.
  • Generates or updates .claude/ui-inventory.md with categorized entries for shared components, library components, SCSS mixins, and design tokens.
  • Serves as a starting point for onboarding, design-system refreshes, and keeping UI assets in sync.

Quick Start

Run the skill on a project that has no existing .claude/ui-inventory.md to generate the inventory.

Frequently Asked Questions about scan-ui-inventory

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

FAQPage Schema
How do I inventory UI components and design tokens in my codebase?▼

To inventory UI components and design tokens, run the skill to inspect apps/* and libs/* directories for shared components, SCSS mixins, and tokens, generating a categorized .claude/ui-inventory.md file.

What is a UI asset inventory and when do I need one?▼

A UI asset inventory catalogs reusable components, SCSS mixins, and design tokens into a single source of truth. You need one during project setup, after adding shared UI assets, or when refreshing a design system.

Can I use this to document SCSS mixins and design tokens across multiple directories?▼

Yes, you can document SCSS mixins and design tokens across multiple directories. The skill scans apps/* and libs/* paths to detect and categorize shared and library components alongside your tokens.

What's the best way to generate a single source of truth for frontend design tokens?▼

The best way to establish a single source of truth for design tokens is scanning the codebase for SCSS assets and outputting a centralized .claude/ui-inventory.md file with categorized entries for tokens and mixins.

Does this UI inventory skill require an existing .claude/ui-inventory.md file to run?▼

No, the UI inventory skill does not require an existing file. You run it on a project lacking a .claude/ui-inventory.md to generate the initial inventory from scratch.

Related Skills

Explore More Design & Creative Skills→
TypiCMSTypiCMS
1.6k

Bootstrap 5.3 SCSS

Write maintainable Bootstrap 5.3 SCSS using mixins and variables.

Official
Intermediate
dylantarredylantarre
38

component-docs

Generate Markdown component API docs from TypeScript interfaces.

Community
Intermediate
erclxerclx
2

claude-ux-audit

Audit UI surfaces against design tokens and wireframes for consistency.

Community
Intermediate
Legal-and-GeneralLegal-and-General
23

canopy-mixins

Documents Canopy SCSS mixins for consistent Angular component styling.

Official
Intermediate