diff --git a/package-lock.json b/package-lock.json
index 19784b84c8c..6228214bc3f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,9 @@
         "packages/*",
         "docusaurus/website"
       ],
+      "dependencies": {
+        "react-scripts": "^5.0.1"
+      },
       "devDependencies": {
         "@testing-library/jest-dom": "^5.15.1",
         "@testing-library/react": "^12.1.2",
diff --git a/package.json b/package.json
index d4217526b63..50ce28d05e6 100644
--- a/package.json
+++ b/package.json
@@ -56,5 +56,8 @@
     "*.{js,json,yml,yaml,css,scss,ts,tsx,md}": [
       "prettier --write"
     ]
+  },
+  "dependencies": {
+    "react-scripts": "^5.0.1"
   }
 }
diff --git a/tasks/screencast-start.js b/tasks/screencast-start.js
index 4e02d4069ff..ae066fa26ee 100644
--- a/tasks/screencast-start.js
+++ b/tasks/screencast-start.js
@@ -13,46 +13,53 @@ const execa = require('execa');
 const meow = require('meow');
 const multimatch = require('multimatch');
 
+//The main entry point for the program, which starts execution based on CLI arguments 
 main(meow());
 
+//Main function that controls the execution of the command specified by the user
 function main(cli) {
-  let count = 0;
+  let count = 0;// Keeps track of the times the pattern has matched
 
-  const start = Date.now();
-  const duration = parseInt(cli.flags.timeout, 10) * 1000;
+  const start = Date.now();//start time for the process
+  const duration = parseInt(cli.flags.timeout, 10) * 1000;//time limit in milliseconds
   const cp = execa(cli.flags.command, { shell: true });
 
   const target = parseInt(cli.flags.patternCount || '1', 10);
 
+  //listening to standard output (stdout) of the running command.
   cp.stdout.on('data', data => {
     process.stdout.write(data);
     const matches = multimatch([String(data)], cli.flags.pattern);
     const errMatches = multimatch([String(data)], cli.flags.errorPattern);
 
     if (matches.length > 0) {
-      count++;
+      count++;//increment the match count
     }
 
     if (errMatches.length > 0) {
-      process.exit(1);
+      process.exit(1);//exits the err if err is found
     }
 
+    //if the target number of matches is reached, exit after a delay.
     if (count >= target) {
       setTimeout(() => {
-        process.exit(0);
+        process.exit(0);//exits successfully (code 0)
       }, duration);
     }
   });
 
+  //Handles when command exits
   cp.on('exit', e => {
-    const elapsed = Date.now() - start;
+    const elapsed = Date.now() - start;//Calculate the elapsed time since the command started
 
+    //if the process took longer than the timeout, exit immediately
     if (elapsed >= duration) {
       return;
     }
 
+    //Waiting for the remaining duration before exiting with the same exit code
     setTimeout(() => {
-      process.exit(e.exitCode);
+      process.exit(e.exitCode);//exit with the code returned by the command
     }, duration - elapsed);
   });
 }
diff --git a/tasks/screencast.js b/tasks/screencast.js
index 79dd2290ca5..6657d4f0170 100644
--- a/tasks/screencast.js
+++ b/tasks/screencast.js
@@ -9,66 +9,77 @@
 
 'use strict';
 
+// Import necessary modules
 const fs = require('fs');
 const path = require('path');
 const execa = require('execa');
 const tempy = require('tempy');
 
-main();
+main();// Execute the main function
 
 function main() {
-  const previous = process.cwd();
-  const cwd = tempy.directory();
+  const previous = process.cwd();// Store the current working directory
+  const cwd = tempy.directory();// Create a temporary directory for the screencast
 
-  const cast = path.join(cwd, 'screencast.json');
-  const script = path.join(__dirname, 'screencast.sh');
-  const out = path.join(previous, 'screencast.svg');
+  const cast = path.join(cwd, 'screencast.json');// Path for the screencast JSON file
+  const script = path.join(__dirname, 'screencast.sh');// Path for the shell script to run
+  const out = path.join(previous, 'screencast.svg'); // Path for the output SVG file
 
+    // Define functions to identify specific lines in the output
   const resolveLine = l => l.indexOf('🔍  Resolving packages...') > -1;
   const fetchLine = l => l.indexOf('🚚  Fetching packages...') > -1;
   const countLine = l => l.match(/Saved [0-9]+ new dependencies/);
   const doneLine = l => l.indexOf('✨  Done in') > -1;
 
   try {
-    process.chdir(cwd);
-    console.log(`Recording screencast ...`);
+    process.chdir(cwd);// Change to the temporary directory
+    console.log(`Recording screencast ...`);// Log the recording start message
+    // Execute the 'asciinema' command to record the output of the shell script
     execa.sync('asciinema', ['rec', '--command', `sh ${script}`, cast], {
       cwd,
-      stdio: 'inherit',
+      stdio: 'inherit',// Inherit stdio to see the output
     });
 
-    console.log('Cleaning data ...');
-    const data = require(cast);
+    console.log('Cleaning data ...');// Log the data cleaning start message
+    const data = require(cast); // Load the recorded screencast data
 
+     // Cut the recorded frames to keep only relevant parts
     cut(data.stdout, { start: resolveLine, end: fetchLine });
     cut(data.stdout, { start: countLine, end: doneLine });
+    // Replace the current working directory in the frames with '~' for privacy
     replace(data.stdout, [{ in: cwd, out: '~' }]);
 
+    // Write the cleaned data back to the screencast JSON file
     fs.writeFileSync(cast, JSON.stringify(data, null, '  '));
 
-    console.log('Rendering SVG ...');
+    console.log('Rendering SVG ...');// Log the SVG rendering start message
+       // Execute the 'svg-term' command to render the screencast into an SVG file
     execa.sync('svg-term', ['--window', '--in', cast, '--out', out]);
 
+    // Log success messages for both the recorded screencast and rendered SVG
     console.log(`Recorded screencast to ${cast}`);
     console.log(`Rendered SVG to ${out}`);
   } finally {
-    process.chdir(previous);
+    process.chdir(previous);// Ensure the working directory is restored
   }
 }
 
+// Function to cut the frames based on specified start and end conditions
 function cut(frames, { start, end }) {
-  const si = frames.findIndex(([, l]) => start(l));
-  const ei = frames.findIndex(([, l]) => end(l));
+  const si = frames.findIndex(([, l]) => start(l)); // Find the start index
+  const ei = frames.findIndex(([, l]) => end(l));// Find the end index
 
+   // If either index is not found, exit the function
   if (si === -1 || ei === -1) {
     return;
   }
 
+    // Remove the frames between the start and end indices
   frames.splice(si + 1, ei - si - 1);
 }
-
+// Function to replace specified strings in the frames
 function replace(frames, replacements) {
   frames.forEach(frame => {
-    replacements.forEach(r => (frame[1] = frame[1].split(r.in).join(r.out)));
+    replacements.forEach(r => (frame[1] = frame[1].split(r.in).join(r.out)));// Replace occurrences of 'in' with 'out'
   });
 }