SkillHub ClubShip Full StackFull Stack

Packages Devtools

Your approach to handling packages devtools. Use this skill when working on files where packages devtools 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-devtools

debuggingdependency-injectionvisualizationdocumentationdevtools

Repository

leaderiop/hex-di

Skill path: .claude/skills/packages-devtools

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

Open repository

Best for

Primary workflow: Ship Full Stack.

Technical facets: Full Stack.

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 Devtools into Claude Code, Codex CLI, Gemini CLI, or OpenCode workflows
Review https://github.com/leaderiop/hex-di before adding Packages Devtools to shared team environments
Use Packages Devtools for development workflows

Works across

Claude CodeCodex CLIGemini CLIOpenCode

Favorites: 0.

Sub-skills: 0.

Aggregator: No.

Original source / Raw SKILL.md

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

# Packages Devtools

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

## Instructions

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


---

## Referenced Files

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

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

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

## Purpose
Inspection, debugging, and learning tools. This optional package provides visibility into the DI system.

## Core Responsibilities
- Visualize dependency graphs
- Inspect runtime container state
- Aid debugging and learning
- Export architectural documentation

## Design Constraints

### Optional Package
- Not required for production use
- Tree-shakeable if imported
- Development dependency typically

### Non-Intrusive
- Observes but doesn't modify behavior
- No performance impact when not used
- Can be stripped in production builds

## Graph Visualization

### Static Analysis
- Generate graph from Graph object
- Show ports and adapters
- Display dependency relationships
- Highlight lifetime scopes

### Export Formats
- JSON for tooling integration
- DOT format for Graphviz
- Mermaid for documentation
- Interactive HTML viewer

## Runtime Inspection

### Container State
- List resolved services
- Show instance lifetimes
- Display scope hierarchy

### Resolution Tracing
- Trace resolution order
- Identify slow factories
- Debug circular dependency issues

## Browser DevTools

### React DevTools Integration
- Optional DevTools panel
- Show container in component tree
- Link services to components using them

### Console Utilities
- Global inspection helpers (dev only)
- Pretty-print container state
- Quick debugging commands

## Documentation Generation
- Generate architecture docs from graph
- List all ports and their adapters
- Document dependency relationships

## Success Criteria
- Developers can visualize architecture
- Debugging is straightforward
- Learning curve is reduced
- AI tools can consume graph data

```