add-slots

Merge per-module slot contributions into a typed AppSlots registry.

1|Updated Mar 27, 2026
One-click install
npx skills add https://github.com/kibertoad/tanstack-react-modules --skill add-slots
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: add-slots
Source: https://github.com/kibertoad/tanstack-react-modules/tree/main/skills/add-slots
Command: npx skills add https://github.com/kibertoad/tanstack-react-modules --skill add-slots

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Slots are the extensibility primitive for collecting contributions from many modules into a single place. Each slot is a named array — modules contribute items, and the registry concatenates them at resolve time. The shell reads the merged result via useSlots().

Core Features & Use Cases

  • The registry merges per-module slot contributions into a single AppSlots map.
  • Modules can contribute to multiple slots, enabling extensibility points like command palettes, dashboards, or system registrations.
  • The host shell consumes the merged slots to render UI extensions and integrations.

Quick Start

Install the module that defines slots, register it with the registry, and observe the combined slot items appear in the shell.

Frequently Asked Questions about add-slots

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

FAQPage Schema
What are slots in a modular React architecture?

Slots are an extensibility primitive for collecting contributions from multiple modules into named arrays. The registry merges per-module contributions at resolve time, allowing a host shell to consume combined items via useSlots().

How do I build a command palette that aggregates items from multiple modules?

You can build a command palette by defining typed AppSlots and registering module contributions. The registry concatenates items from each module, exposing the merged result to the host shell through the useSlots() hook.

Can a single module contribute to multiple plugin system slots?

Yes, a single module can contribute to multiple slots. This enables extensibility points across different UI regions like dashboards, command palettes, and system registrations, all aggregated through the AppSlots map.

What is the best way to type slot contributions in a React plugin system?

The best way to type slot contributions is by using an AppSlots generic. This provides typed contribution points for the module registry, ensuring type safety when modules add items and the shell consumes them via useSlots().

Does this slot registry support default values for contribution points?

Yes, the slot registry supports default slot values. This ensures the host shell has fallback content when modules do not actively contribute items to a specific named slot.