skills.rest
kibertoad
kibertoadCOMMUNITY
Explore all skills by this author →
Website𝕏@kibertoadGitHub

wire-shared-dependencies

Wire cross-cutting dependencies into the AppDependencies contract and register them for module use.

1|Updated Mar 27, 2026
Search Tags:#react#registry#zustand#modular#dependency-injection#wire#shared-dependencies
One-click install
npx skills add https://github.com/kibertoad/tanstack-react-modules --skill wire-shared-dependencies
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: wire-shared-dependencies
Source: https://github.com/kibertoad/tanstack-react-modules/tree/main/skills/wire-shared-dependencies
Command: npx skills add https://github.com/kibertoad/tanstack-react-modules --skill wire-shared-dependencies

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Shared dependencies are how modules access cross-cutting concerns (auth, config, HTTP client, analytics, feature flags). They come in three flavors:

  • Zustand stores - reactive state that components subscribe to via useStore().
  • Plain services - stable instances (HTTP clients, loggers) that don't trigger re-renders. Accessed via useService().
  • Reactive services - external sources you observe but don't control (call adapters, websockets, presence systems). Accessed via useReactiveService().

CLI shortcut for stores: reactive create store <name> automates steps 1-4 for Zustand stores. Use manual wiring for plain services, reactive services, or when the CLI doesn't fit.

Core Features & Use Cases

  • Declares dependencies as contracts (zustand stores, plain services, reactive services) and wires them into the host app.
  • Enables modules to access services via typed hooks (useStore, useService, useReactiveService) against AppDependencies.
  • Supports optional dependencies via useOptional and optionalRequires for environment-specific wiring.

Quick Start

Define the contract, implement in the shell, register in the registry, and use it from modules via the corresponding hook.

Frequently Asked Questions about wire-shared-dependencies

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

FAQPage Schema
How do I wire shared dependencies into a React app for module access?▼

Shared dependencies provide modules access to cross-cutting concerns like auth, config, and analytics. They are declared as contracts, implemented in the shell, registered in the registry, and consumed via typed hooks to ensure modular separation.

How do I add a Zustand store to my app's dependency registry?▼

To add a Zustand store, define it in the AppDependencies contract, implement the store, register it in the registry, and consume it from modules using the useStore hook, or use the reactive create store CLI shortcut to automate these steps.

What is the difference between plain services and reactive services for dependency injection?▼

Plain services are stable instances like HTTP clients accessed via useService that don't trigger re-renders. Reactive services are external observed sources like websockets accessed via useReactiveService that provide reactive updates to consuming modules.

Can I register optional dependencies for environment-specific module wiring?▼

Yes, optional dependencies can be registered using useOptional and optionalRequires. This allows modules to safely access environment-specific services like feature flags without requiring global registration across all application contexts.

When should I manually wire a service instead of using the CLI shortcut?▼

Manual wiring is required for plain services and reactive services, or when the CLI shortcut doesn't fit your use case. The reactive create store CLI shortcut only automates wiring for Zustand stores.

Related Skills

Explore More Software Engineering Skills→
AndreaCadonnaAndreaCadonna

spec-driven-architecture

Define implementation-ready specifications for software architecture blocks before coding.

Community
Advanced
harlan-zwharlan-zw
174

tanstack-vue-store-skilld

Manage Vue application state with typed, hot-reloadable stores.

Community
Intermediate
anderskevanderskev
75

zustand-state

Create typed Zustand stores with selectors, persistence, and middleware.

Community
Intermediate
durabullhqdurabullhq
33

vercel-composition-patterns

Architect React component patterns to reduce boolean prop proliferation.

Official
Advanced