skills.rest
johnneerdael
johnneerdaelCOMMUNITY
Explore all skills by this author →
GitHub

generate-registry-entry

Generate TypeScript ComponentRegistry entries from React component props, variants, and events.

1|Updated Dec 31, 2025
Search Tags:#automation#typescript#react#component#registry#home-assistant#component-definition
One-click install
npx skills add https://github.com/johnneerdael/shadcn-ui-ha-card --skill generate-registry-entry
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: generate-registry-entry
Source: https://github.com/johnneerdael/shadcn-ui-ha-card/tree/main/.claude/skills/generate-registry-entry
Command: npx skills add https://github.com/johnneerdael/shadcn-ui-ha-card --skill generate-registry-entry

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill automates the creation of ComponentRegistry entries by analyzing the React component's props, variants, and events to produce a TypeScript object that matches the ComponentDefinition interface.

Core Features & Use Cases

  • Component Analysis: Inspect the component's props, variants, and event handlers to derive registry fields.
  • Structured Output: Generates a TypeScript object with fields like name, displayName, description, category, icon, component, props, defaultAction, and binding.
  • Usage Pattern: When asked to register a component or add it to config, returns only the code block with the registry entry.

Quick Start

When prompted to register a new component, supply the React component and receive a ready-to-use UiComponentName registry block.