SkillHub ClubShip Full StackFull StackFrontend

Packages React

Your approach to handling packages react. Use this skill when working on files where packages react comes into play.

Packaged view

This page reorganizes the original catalog entry around fit, installability, and workflow context first. The original raw source lives below.

Stars

Hot score

Updated

March 20, 2026

Overall rating

C2.0

Composite score

2.0

Best-practice grade

C61.2

Install command

npx @skill-hub/cli install leaderiop-hex-di-packages-react

reactdependency-injectionfrontendcoding-standards

Repository

leaderiop/hex-di

Skill path: .claude/skills/packages-react

Your approach to handling packages react. Use this skill when working on files where packages react comes into play.

Open repository

Best for

Primary workflow: Ship Full Stack.

Technical facets: Full Stack, Frontend.

Target audience: everyone.

License: Unknown.

Original source

Catalog source: SkillHub Club.

Repository owner: leaderiop.

This is still a mirrored public skill entry. Review the repository before installing into production workflows.

What it helps with

Install Packages React into Claude Code, Codex CLI, Gemini CLI, or OpenCode workflows
Review https://github.com/leaderiop/hex-di before adding Packages React to shared team environments
Use Packages React for development workflows

Works across

Claude CodeCodex CLIGemini CLIOpenCode

Favorites: 0.

Sub-skills: 0.

Aggregator: No.

Original source / Raw SKILL.md

---
name: Packages React
description: Your approach to handling packages react. Use this skill when working on files where packages react comes into play.
---

# Packages React

This Skill provides Claude Code with specific guidance on how to adhere to coding standards as they relate to how it should handle packages react.

## Instructions

For details, refer to the information provided in this file:
[packages react](../../../agent-os/standards/packages/react.md)


---

## Referenced Files

> The following files are referenced in this skill and included for context.

### ../../../agent-os/standards/packages/react.md

```markdown
# @hex-di/react Package Standards

## Purpose
React integration as an adapter layer. This package provides React-idiomatic access to the DI container.

## Core Responsibilities
- Provide container via React context
- Enable type-safe access to ports via hooks
- Integrate with React component lifecycle

## Design Constraints

### React as Peer Dependency
- React is peer dependency, not bundled
- Support React 18+
- Compatible with concurrent features

### No Core Leakage
- React concepts don't leak into core packages
- This is an adapter, not the primary API
- Core works without React

## Provider Component

### Container Provision
- Single provider at app root
- Container passed as prop
- Children access via hooks

### Scope Management
- Optional scoped providers for sub-trees
- Nested providers create nested scopes
- Clear scope boundaries

## Hook API

### `usePort(PortToken)`
- Primary hook for accessing services
- Returns typed service instance
- Throws if provider missing (dev error)

### `useContainer()`
- Access raw container (advanced use)
- For dynamic resolution scenarios
- Prefer `usePort` for normal cases

## Naming Convention
- Use "Port" terminology, not "Service"
- `usePort`, not `useService` or `useInject`
- Consistent with HexDI vocabulary

## SSR Considerations
- Container must be serialization-safe or recreated per request
- Document SSR patterns
- No global singleton containers

## Success Criteria
- Type-safe hook usage
- Compile-time errors for missing providers
- Clean integration with React patterns
- No React leakage into core

```