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

wrap-shadcn-component

Convert Shadcn/UI components into Home Assistant-aware components with entity binding.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Converts a standard Shadcn/UI component into a Home Assistant-aware component. It handles entity binding, state mapping, and registry definition so that UI components can interact with HA data seamlessly.

Core Features & Use Cases

  • Entity binding: Use the HA entity via a wrapper that consumes useEntity.
  • State mapping: Map entity.state and entity.attributes to the UI component's value and display.
  • Registry integration: Provide a registry entry with fieldOverrides to enable the Entity Picker in the editor.

Quick Start

Create a wrapper at src/components/ha/ha-[component-name].tsx that imports the base Shadcn component and useEntity, binds to entityId, translates HA state to the component prop, and exports a registry entry with appropriate schema and fieldOverrides.