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

add-zones

Assign React components to named shell zones via route staticData or module descriptors.

1|Updated Mar 27, 2026
Search Tags:#layout#react#routing#workspace#shell#modular#zones
One-click install
npx skills add https://github.com/kibertoad/tanstack-react-modules --skill add-zones
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: add-zones
Source: https://github.com/kibertoad/tanstack-react-modules/tree/main/skills/add-zones
Command: npx skills add https://github.com/kibertoad/tanstack-react-modules --skill add-zones

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Zones are named layout regions in the shell that modules populate with React components. Unlike slots (arrays concatenated across all modules), each zone holds a single component contributed by the currently active route or module.

Core Features & Use Cases

  • Route-based zones: deepest matched route can provide a component for a zone, overriding higher-level definitions.
  • Descriptor zones: workspace-style modules can contribute zones to be merged with route zones, with module-provided zones taking precedence.
  • Use cases include header actions, detail panels, and contextual regions that change with navigation or active modules.

Quick Start

Define the AppZones interface to declare available zones, then contribute zone components via route staticData or module descriptors and render them in the shell layout.

Frequently Asked Questions about add-zones

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

FAQPage Schema
How do I render dynamic React layout components based on the active route?▼

You can assign React components to named shell zones via route staticData. The deepest matched route dynamically determines which component renders in each layout region.

What is the difference between shell zones and slots in modular React routing?▼

Shell zones hold a single component contributed by the active route or module, unlike slots which concatenate arrays of components across all modules. Zones ensure only one component renders per layout region.

How do I customize workspace layouts when using module descriptors in React?▼

Workspace-style modules can declare zones within their descriptors. These module-provided zones merge with route zones, with module overrides taking precedence to customize the shell layout dynamically.

Can I override header actions for specific routes in a React shell layout?▼

Yes, header actions can be defined as named zones. The deepest matched route provides a component for that zone, overriding higher-level definitions to display route-specific header actions.

How do I get started with defining shell zones for route-driven layouts?▼

Define an AppZones interface to declare available zones, contribute zone components via route staticData or module descriptors, and render those zones directly within your shell layout.

Related Skills

Explore More Software Engineering Skills→
ColdBoxColdBox

coldbox-routing-development

Configure ColdBox Router.cfc routes with constraints and named routes.

Official
Intermediate
RomualdPRomualdP

Parallel Routes Generator

Implement parallel routes-based modals in Next.js layouts.

Community
Intermediate
kibertoadkibertoad
1

create-module

Generate a complete TanStack React module scaffold with routes, navigation, and packaging.

Community
Intermediate
BrunoAMSilvaBrunoAMSilva

composition-pattern

Design UI component APIs with children, named slots, and polymorphic rendering.

Community
Intermediate