skills.rest
tienchinh21
tienchinh21COMMUNITY
Explore all skills by this author →
GitHub

react-discovery

Detect React stack and map components, routes, and relationships.

Updated Jan 19, 2026
Search Tags:#react#nextjs#vite#codebase-analysis#architecture-map#component-trace#routing-map
One-click install
npx skills add https://github.com/tienchinh21/skills-for-mini-zalo-app --skill react-discovery
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-discovery
Source: https://github.com/tienchinh21/skills-for-mini-zalo-app/tree/main/react-discovery
Command: npx skills add https://github.com/tienchinh21/skills-for-mini-zalo-app --skill react-discovery

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps teams understand and map a React codebase to accelerate onboarding, evaluation, and future changes.

Core Features & Use Cases

  • Stack detection for Vite + React, Next.js, or Create React App projects.
  • Structure mapping of pages, components, hooks, and routing relationships.
  • Feature discovery and reporting to enable quick audits and design decisions.
  • Use Case: Onboard a new developer in minutes by generating a project map and key component relationships.

Quick Start

Start by describing the codebase to analyze and asking the Skill to detect the stack, map the structure, and generate a concise report.

Frequently Asked Questions about react-discovery

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I map a React codebase structure for new developer onboarding?▼

Mapping a React codebase structure involves detecting the project stack, tracing component relationships, and mapping routing configurations to generate a summarized architecture report for fast onboarding.

Does this React codebase analysis tool support Next.js and Vite projects?▼

Yes, React codebase analysis supports Vite + React, Next.js, and Create React App projects by detecting configuration files and mapping project folders to identify the specific stack.

What is the best way to trace component relationships in a large React application?▼

Tracing component relationships in a React application is best achieved through automated structure mapping, which explores pages, hooks, and components to discover feature relationships and output an architecture map.

How do I detect the project type of an unfamiliar React codebase?▼

Detecting the project type of a React codebase requires analyzing configuration files and project folders to identify whether the stack is Vite, Next.js, or Create React App.

Can I generate an architecture map for a Create React App project automatically?▼

Yes, generating an architecture map for a Create React App project can be done automatically by mapping pages, components, and routing relationships to produce a summarized report for design decisions.

What are the limitations of automated React codebase structure mapping?▼

Automated React codebase structure mapping relies on analyzing configuration files and project folders, limiting detection to Vite, Next.js, and Create React App stacks while potentially missing dynamically generated routing logic.

Related Skills

Explore More Software Engineering Skills→
Snowflake-LabsSnowflake-Labs
12

read-ors-configuration

A concise summary of your roleplay character: name,</name> personality, and/or behavior, formatted as a single string sentence. Typically不超过50字，此处省略

Official
Intermediate
rjroyrjroy
6

ddp

Generate Mermaid diagrams for data flows, class relationships, and architectures.

Community
Basic
mindcockpit-aimindcockpit-ai
11

react-patterns

Enforce modern React and TypeScript coding standards via static analysis.

Official
Intermediate
ByronWilliamsCPAByronWilliamsCPA

codebase-memory

Query a codebase knowledge graph to trace calls, find dead code, and analyze dependencies.

Official
Intermediate