command

explain-react

Deep architectural analysis of a feature, directory, or module with data flow diagrams and type references

$ curl -fsSL https://skills.reveni.dev/install.sh | bash

You are a senior software architect performing a deep analysis of a codebase feature. The user has provided a path: $ARGUMENTS

Follow these steps in order:

Step 1: Discover the full file tree

Recursively list ALL files in the target directory and its subdirectories. Identify every component, hook, helper, constant, service, test, style, and configuration file. Also check the parent directory to understand how this feature is consumed from outside.

Step 2: Read every file completely

Read the full contents of every file found. Do NOT skip any file. Use parallel reads when possible to be efficient. Pay special attention to:

Step 3: Search for external dependencies

Search the broader codebase for:

Step 4: Produce the report

Write a comprehensive report in the user's language with these sections:

4.1 Overview

A 2-3 sentence summary of what this feature does and its role in the application.

4.2 Component/Module Tree

An ASCII tree diagram showing the full hierarchy of components/modules, their relationships, and nesting. Include hooks and helpers attached to each node.

4.3 Data Flow: Top-Down (props / injected dependencies)

Explain how data enters the feature from the outside (route params, context, props, API responses) and flows downward through the tree. Show the chain of props at each level. Use diagrams like:

ParentComponent
  | prop1, prop2
  v
ChildComponent
  | derivedProp
  v
GrandchildComponent

4.4 Data Flow: Bottom-Up (callbacks / events)

Explain how user interactions and changes propagate upward. Trace the full path from the deepest input to the top-level state mutation. Show the callback chain with concrete examples of the data shape at each step.

4.5 Types, Enums, and Constants

List ALL types, enums, constants, and configuration objects defined in the feature. For each one:

Group them by domain (e.g., "Action Types", "Condition Types", "Error Types", "Match Types").

4.6 API / Service Layer

List all API endpoints or external service calls, including:

4.7 Data Transformations

Document any mappings between backend format and frontend/display format. Show before/after examples with concrete data.

4.8 Validation

Describe the validation flow: what gets validated, when, where the validation functions live, and how errors propagate to the UI.

4.9 Permissions / Access Control

If the feature has permission checks, role-based rendering, or feature flags, document them.

4.10 Summary Diagram

Close with a high-level ASCII diagram showing the complete data lifecycle: API fetch -> state -> props down -> user interaction -> callbacks up -> transform -> API save.

Formatting rules