How do I install the Component Catalog skill?

Run npx skillmds@latest add tomevault-io/component-catalog in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Component Catalog safe to use?

This skill has not completed SkillMD's automated safety review yet. Independent scanners report: SkillSpector: PASS, Skill Scanner: PASS. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Component Catalog?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Component Catalog free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Component Catalog?

tomevault-io (@tomevault-io) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Component Catalog

Name: Component Catalog
Author: tomevault-io

How to access metadata about Vivid components. Use to list available components or query their API. Use when this capability is needed.

tomevault-io Updated Sep 17, 2026

Web & Frontend

Install

Press C to copy

$ npx skillmds@latest add tomevault-io/component-catalog

Installs into ~/.claude/skills (or .claude/skills inside a project). Restart Claude Code to pick it up.

Download .zip

＋ Add to plugin

README badge

[![SkillMD](https://skillmd.com/badge/tomevault-io/component-catalog.svg)](https://skillmd.com/skills/tomevault-io/component-catalog)

Trust & safety

2 of 3 audits passed

Last audited Sep 19, 2026 · commit 11f66a5

Works with: Claude Code Claude.ai OpenAI Codex +

File contents

The API of all components is defined in libs/components/metadata.json. Since the file is very large, always use scripting (e.g. with jq) to extract just the data that you need.

The content of the file has the type Metadata defined in libs/metadata-extractor/src/metadata/format.ts. Read the TypeScript definition to understand the structure.

Source: Vonage/vivid-3 — distributed by TomeVault.

tomevault-io/skills-registry/tree/main/vonage--vivid-3--vivid-3 commit 11f66a561b

Frequently asked questions

npx skillmds@latest add tomevault-io/component-catalog