skills.rest
cuongnm-dev
cuongnm-devCOMMUNITY
Explore all skills by this author →
GitHub

ui-catalog

Generate a markdown UI component catalog from code and theme tokens.

Updated Aug 23, 2026
Search Tags:#automation#template#documentation#components#design-system#ui-catalog
One-click install
npx skills add https://github.com/cuongnm-dev/team-ai-config --skill ui-catalog
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-catalog
Source: https://github.com/cuongnm-dev/team-ai-config/tree/main/cursor/skills/ui-catalog
Command: npx skills add https://github.com/cuongnm-dev/team-ai-config --skill ui-catalog

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Streamlines creating a centralized UI component catalog by scanning a UI template or Figma kit and exporting to docs/ui-library/component-catalog.md. Run once after installing or upgrading the template to avoid repeated Figma MCP lookups.

Core Features & Use Cases

  • Discover UI components from the template by scanning the codebase (tsx/jsx/vue) and theme tokens.
  • Generate a standardized catalog at docs/ui-library/component-catalog.md that designers and developers can read offline.
  • Use case: after upgrading a template, you only re-run to refresh the catalog once, then design/dev teams rely on static catalog for discovery.

Quick Start

Run the ui-catalog skill to generate docs/ui-library/component-catalog.md from the current UI template.

Frequently Asked Questions about ui-catalog

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

FAQPage Schema
How do I generate a UI component catalog from a template?▼

To generate a UI component catalog, run the skill to scan your template's codebase and theme tokens, outputting a standardized markdown file at docs/ui-library/component-catalog.md for offline design review and development discovery.

What is a centralized UI component catalog used for?▼

A centralized UI component catalog is used to document design details, tokens, and variants extracted from code, providing a static reference for designers and developers to discover components without repeated Figma lookups.

Does the UI catalog generation work with Vue and React components?▼

Yes, UI catalog generation works with React, Vue, and other frameworks by scanning tsx, jsx, and vue code exports alongside theme files to extract component details and variants into the catalog.

When should I regenerate the component catalog after a template update?▼

You should regenerate the component catalog once after installing or upgrading your UI template, refreshing the static markdown documentation so design and development teams can rely on it for subsequent component discovery.

What's the best way to document design tokens and variants for offline review?▼

The best way to document design tokens and variants for offline review is to scan code exports and theme configurations directly, generating a static markdown catalog that captures component details without requiring live Figma connections.

Related Skills

Explore More Design & Creative Skills→
TechsioCZTechsioCZ
2

component-consistency-validation

Validate UI-kit changes across TSX, token CSS, Storybook, and Figma mappings.

Official
Advanced
eserlaneserlan
2

web-component-design

Standardize cross-framework UI component design across React, Vue, and Svelte.

Community
Advanced
NehaTanti-afkNehaTanti-afk

figma-analyze

Analyze Figma designs against Nexus conventions and token consistency.

Community
Advanced
Markson22Markson22

reversa-design-system

Extract design tokens and documentation from CSS, theme files, and screenshots.

Community
Intermediate