Does it work with Vite and standard React SPAs?

Absolutely. It is designed to recognize various project configurations including Vite, Create React App (CRA), and custom webpack setups.

Can it detect which state management library a project uses?

Yes, it automatically scans for Redux Toolkit, Zustand, Recoil, Jotai, MobX, and native React Context providers to explain the data flow.

What kind of documentation does it generate?

It produces a structured report including a project overview, screen inventory, component hierarchy diagrams, and a recommended reading order for key files.

Does this skill support the Next.js App Router?

Yes, it fully supports both the Next.js App Router (v13+) and the traditional Pages Router, identifying layouts, server components, and API routes.

React Project Onboarding

Name: React Project Onboarding
Author: runxgalee

byrunxgalee

学習とドキュメンテーション

Analyzes React and Next.js codebases to map component architecture, routing structures, and state management patterns.

概要

This skill streamlines the developer onboarding process by providing a comprehensive structural audit of React-based projects, supporting Next.js (App and Pages router), Vite, and standard SPA architectures. It automatically identifies page routing, custom hooks, state management solutions like Redux or Zustand, and UI library usage, generating detailed reports and Mermaid diagrams to help developers grasp complex frontend hierarchies in minutes rather than hours.

主な機能

Visual architecture representation using Mermaid diagrams for easier navigation
0 GitHub stars
Automated mapping of Next.js and React component hierarchies
Deep analysis of state management patterns including Context, Zustand, and Redux
Comprehensive inventory of routes, pages, and dynamic path structures
Discovery and documentation of custom hooks and shared business logic

ユースケース

Generating up-to-date architectural documentation for frontend teams
Auditing project structure and dependencies before major refactors
Rapidly onboarding to a new or legacy React codebase

概要

主な機能

Visual architecture representation using Mermaid diagrams for easier navigation
0 GitHub stars
Automated mapping of Next.js and React component hierarchies
Deep analysis of state management patterns including Context, Zustand, and Redux
Comprehensive inventory of routes, pages, and dynamic path structures
Discovery and documentation of custom hooks and shared business logic

ユースケース

Generating up-to-date architectural documentation for frontend teams
Auditing project structure and dependencies before major refactors
Rapidly onboarding to a new or legacy React codebase