skills.rest
LedgerHQ
LedgerHQOFFICIAL
Explore all skills by this author →
WebsiteGitHub

wire-devtool

Wire devtool packages into Ledger Live desktop, mobile, and web-tools host apps.

615|491|Updated Jan 4, 2022
Search Tags:#DevTools#React hooks#bindings#Monorepo#wire#ledger-live#Integration
One-click install
npx skills add https://github.com/LedgerHQ/ledger-live --skill wire-devtool
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: wire-devtool
Source: https://github.com/LedgerHQ/ledger-live/tree/main/.agents/skills/wire-devtool
Command: npx skills add https://github.com/LedgerHQ/ledger-live --skill wire-devtool

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Integrating a new devtool package into Ledger Live host apps requires knowing the correct wiring pattern across LLD, LLM, and web-tools, including bindings hooks and config entries, which is easy to get wrong without guidance.

Core Features & Use Cases

  • Host App Wiring: Adds devtool entries to the DevTools config in ledger-live-desktop, ledger-live-mobile, and web-tools with the correct import pattern.
  • Bindings Hook Creation: Generates a use<ToolName>Props hook in @devtools/bindings when the tool has props, and re-exports it from the bindings index.
  • Use Case: You created a new devtool package with pnpm --filter @devtools/registry add-tool and now need it to appear in the DevTools screen of the desktop and mobile apps with its props wired from host state.

Quick Start

Wire the devtool package named my-tool into the LLD and LLM host apps and create a bindings hook for its props.

Frequently Asked Questions about wire-devtool

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

FAQPage Schema
How do I add a devtool to Ledger Live DevTools screen?▼

Add an entry to the DevToolsConfig array in the host app's useDevToolsScreenViewModel file with the tool id and config. Propless tools use config: undefined; tools with props use a bindings hook from @devtools/bindings.

How to create a bindings hook for a devtool with props?▼

Create a use<ToolName>Props.ts file in devtools/bindings/src that returns the tool's props type from host state, then re-export it from devtools/bindings/src/index.ts. Import and call it in the host's view model.

Which packages should not be wired as devtools?▼

The internal platform packages bindings, protocols, registry, shell, transport, transport-panel, and wire must not be wired as tools. Only actual tool packages like feature-flags should be wired into host apps.

Does the host app need a dependency on the devtool package?▼

No, the host never imports from @devtools/<tool> directly and needs no workspace dependency on it. The props type is inferred from DevToolsConfig via @devtools/shell and @devtools/registry based on the tool id.

What if the devtool package does not exist yet?▼

Generate it first by running pnpm --filter @devtools/registry add-tool. The wiring skill stops and instructs you to create the tool before proceeding with host integration.

Related Skills

Explore More Software Engineering Skills→
chad3814chad3814

TypeScript Type Definitions

Define strongly-typed TypeScript interfaces for video data structures.

Community
Intermediate
GP-SoftwareDivisionGP-SoftwareDivision

optimize

Identify frontend performance bottlenecks and implement UI speed optimizations with before/after metrics.

Official
Advanced
TanStackTanStack
28.3k

vue/compose-with-tanstack-devtools

Register Vue TanStack Table instances with TanStack Devtools for live state inspection.

Official
Intermediate
NousResearchNousResearch
239.1k

excalidraw

Generate hand-drawn Excalidraw JSON diagrams for architecture, flow, and sequence visualizations.

Official
Intermediate