skills.rest
armanisadeghi
armanisadeghiCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

provider-and-init-rules

Enforce provider initialization and data-fetch rules in app shell code.

2|1|Updated Aug 24, 2024
Search Tags:#architecture#frontend#patterns#initialization#redux#provider
One-click install
npx skills add https://github.com/armanisadeghi/ai-matrx --skill provider-and-init-rules
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: provider-and-init-rules
Source: https://github.com/armanisadeghi/ai-matrx/tree/main/.cursor/skills/provider-and-init-rules
Command: npx skills add https://github.com/armanisadeghi/ai-matrx --skill provider-and-init-rules

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Enforces initialization, provider, and data-fetching rules for the app shell, layout, and global provider tree. Use when working on app/Providers.tsx, app/DeferredSingletons.tsx, any layout.tsx, any provider file, any context that wraps children globally, StoreProvider, or when adding new providers, data-fetching to the startup path, or useEffect calls that run on mount in upper-level components. Also use when someone references Redux user state, auth checks, isAdmin, isGuest, or fingerprintId on the client side.

Core Features & Use Cases

  • Empty-shell pattern: mount providers as zero-cost shells and expose an idempotent initialize() to trigger data loading on demand.
  • Duplicate-provider guard: ensure a single provider instance in the global tree; call initialize() only from the existing context.
  • Redux-first guidance: migrate legacy contexts to Redux where feasible and document exceptions.
  • Client-side auth safeguards: avoid client-side Supabase auth calls; use server-side or Redux selectors for user identity.

Quick Start

Refactor your app’s providers to mount as empty shells with an idempotent initialize() and trigger initialization only when data is actually required.

Frequently Asked Questions about provider-and-init-rules

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

FAQPage Schema
How do I prevent data fetching on mount in React providers?▼

To prevent data fetching on mount, implement the empty-shell pattern so providers mount as zero-cost shells and expose an idempotent initialize() method to trigger data loading only when required.

What is the empty-shell pattern for app provider initialization?▼

The empty-shell pattern mounts app-wide providers as zero-cost shells without immediate data loading, exposing an idempotent initialize() method to trigger data fetching predictably on demand.

How do I avoid duplicate provider instances in a global React layout?▼

Avoid duplicate provider instances in a global React layout by applying a duplicate-provider guard, ensuring a single provider instance in the global tree and calling initialize() only from the existing context.

Why should client-side auth checks be avoided in favor of Redux state?▼

Client-side auth checks should be avoided to prevent redundant initializations; use server-side or Redux selectors for user identity to ensure predictable, scalable startup behavior.

When do I need to migrate React Context to Redux for app state?▼

You need to migrate React Context to Redux for app state when enforcing Redux-first guidance across the app shell, documenting exceptions only where migration is not feasible.

Does this approach work with Next.js layout.tsx and global context wrappers?▼

Yes, this approach works with Next.js layout.tsx and global context wrappers by applying zero-fetch initialization rules and provider guards across the app shell to ensure scalable startup.

Related Skills

Explore More Software Engineering Skills→
grvpanchalgrvpanchal

state-store

Configure a Redux store with redux-saga middleware and rootSaga.

Community
Intermediate
ZhaoyuWuZhaoyuWu

harness-kickoff

Loads session context, constraints, and workflow state for kickoff.

Community
Intermediate
PolarCoding85PolarCoding85
17

convex-clerk

Integrate Clerk authentication with Convex using ConvexProviderWithClerk and webhooks.

Community
Advanced
beemanbeeman
12

vercel-composition-patterns

Refactor React component libraries into explicit variants with shared context providers.

Community
Intermediate