React Composition Patterns

7 steps · start to finish.

1. 1
   Step 1

   Environment Setup

   ▶

   # Verify Node.js and npm are available
   command -v node >/dev/null || { echo "ERROR: node not installed"; exit 1; }
   command -v npx  >/dev/null || { echo "ERROR: npx not installed"; exit 1; }
   command -v git  >/dev/null || { echo "ERROR: git not installed"; exit 1; }
   
   # Install Python dependencies
   pip install pyyaml markdown-it-py
   
   # Create output directory
   mkdir -p /app/results
   
   # Verify target codebase path is set
   if [ -z "$TARGET_CODEBASE" ]; then
     echo "ERROR: TARGET_CODEBASE environment variable is not set"
     exit 1
   fi
   echo "Auditing: $TARGET_CODEBASE"
   

2. 2
   Step 2

   Load Rule Definitions

   ▶

   Fetch the rule set from the vercel-labs/agent-skills GitHub repository and load all rule files from the skills/composition-patterns/rules/ directory.

3. 3
   Step 3

   Scan Codebase for Violations

   ▶

   Apply each rule to every .tsx / .jsx / .js component file in the target codebase. Record violations with file path, line number, rule ID, and severity.

4. 4
   Step 4

   Generate Audit Report

   ▶

   Produce audit_report.md and rule_coverage.json from the violations found in Step 3.

5. 5
   Step 5

   Generate Refactored Examples

   ▶

   For each flagged pattern, produce a before/after refactoring example following the composition patterns described in the source skill.

6. 6
   Step 6

   Iterate on Errors (max 3 rounds)

   ▶

   If Step 4 or 5 produced empty output files or scanning errors:

7. 7
   Step 7

   Write Summary

   ▶

   import json, pathlib