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

0•

Learning & Documentation

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.

Key Features

01Visual architecture representation using Mermaid diagrams for easier navigation

020 GitHub stars

03Automated mapping of Next.js and React component hierarchies

04Deep analysis of state management patterns including Context, Zustand, and Redux

05Comprehensive inventory of routes, pages, and dynamic path structures

06Discovery and documentation of custom hooks and shared business logic

Use Cases

01Generating up-to-date architectural documentation for frontend teams

02Auditing project structure and dependencies before major refactors

03Rapidly onboarding to a new or legacy React codebase

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add runxgalee/fullstack-dev react-project

For use in Claude.ai and ChatGPT

Download Skill