Does this work on production websites?

Yes, though some features like React Fiber traversal work best in development builds where DevTools hooks are exposed. It can still detect frameworks and some global stores in production.

Which state management libraries are supported?

It currently supports Redux, Vuex, Pinia, Zustand, MobX, and Jotai.

Can it track state changes over time?

Yes, the skill is designed to take state snapshots before and after user actions, allowing Claude to diff the results and trace data flow changes.

Do I need to install browser extensions for this to work?

No, this skill uses Playwright to programmatically access internal application state via the browser's console and global hooks, eliminating the need for manual extensions.

Frontend State Inspector

Name: Frontend State Inspector
Author: anouar1991

byanouar1991

•

Browser Automation

Inspects frontend framework internals and application state across React, Vue, Angular, and popular state management libraries.

The State Inspector skill empowers Claude to perform deep-dive debugging and architectural analysis of modern web applications without requiring browser extensions. By leveraging Playwright, it can detect frameworks like React, Vue, or Angular, traverse component trees to read props and hooks, and snapshot global stores like Redux, Pinia, or Zustand. This is particularly useful for tracing data flow, verifying state transitions after user interactions, and understanding the internal structure of unfamiliar codebases during the development or testing phase.

Key Features

01State diffing capabilities to track changes before and after user actions.

02Deep traversal of React Fiber and Vue component trees to extract props and state.

03Automatic detection of React, Vue, Angular, and Svelte frameworks.

041 GitHub stars

05Inspection of global stores including Redux, Pinia, Zustand, and MobX.

06Lightweight debugging that doesn't require manual DevTools interaction.

Use Cases

01Debugging complex component state transitions during end-to-end testing.

02Mapping the component hierarchy and data flow of legacy or unfamiliar frontend applications.

03Verifying that API responses or user inputs correctly update the global application store.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add anouar1991/binarypetsclaude state-inspector

For use in Claude.ai and ChatGPT

Download Skill