studio: update default example instructions (#1351)

* update codemod instructions

* add comment

* updates to default comments

---------

Co-authored-by: Alex Bit <[email protected]>

apps/frontend/app/(website)/studio/src/store/initialState.ts

@@ -1,12 +1,41 @@
-export const BEFORE_SNIPPET_DEFAULT_CODE = `const [a, b] = await Promise.all([
+export const BEFORE_SNIPPET_DEFAULT_CODE = `
+/* 
+READ BELOW DESCRIPTIONS BEFORE USING CODEMOD STUDIO
+
+1. Provide at least one before/after example.
+
+2. Add comments in your code to explain the transformation logic, just like you're teaching another dev how to do it. Without clear transformation logic, even a human can’t build the codemod.
+
+3. If your migration request is too vague or high-level, try to break it down into simple steps before asking AI to make the codemod. You can always group smaller codemods into recipes for one-click execution (see docs for recipe).
+
+4. Click "Autogenerate with Codemod AI."
+
+5. Test the autogenerated codemod by adding more test cases. You can use the magic icon next to the + sign to have AI generate more tests.
+*/
+
+const [a, b] = await Promise.all([
     Promise.resolve('a'),
     isFlagEnabled('featureFlag'),
 ]);
 const x = b && c;
 const y = <A b={b} />;
  `;
 
-export const AFTER_SNIPPET_DEFAULT_CODE = `const a = await Promise.resolve('a');
+export const AFTER_SNIPPET_DEFAULT_CODE = `/* 
+READ BELOW DESCRIPTIONS BEFORE USING CODEMOD STUDIO
+
+1. Provide at least one before/after example.
+
+2. Add comments in your code to explain the transformation logic, just like you're teaching another dev how to do it. Without clear transformation logic, even a human can’t build the codemod.
+
+3. If your migration request is too vague or high-level, try to break it down into simple steps before asking AI to make the codemod. You can always group smaller codemods into recipes for one-click execution (see docs for recipe).
+
+4. Click "Autogenerate with Codemod AI."
+
+5. Test the autogenerated codemod by adding more test cases. You can use the magic icon next to the + sign to have AI generate more tests.
+*/
+
+const a = await Promise.resolve('a');
 const x = c;
 const y = <A b={true} />;
 `;
@@ -46,11 +75,19 @@ root.find(j.FunctionDeclaration, {
     });
 });`;
 
-export const STARTER_SNIPPET = `// BELOW IS A SAMPLE CODEMOD. BUILD YOUR OWN:
-// 1. INPUT: Fill out the Before and After editors with sample code snippets as test fixtures.
-// 2. AI: In the Assistant tab on the left, click the button: "Autogenerate with AI" or "Autogenerate with Codemod AI"
-// 3. OUTPUT: Let AI generate your codemod. Once generated, copy and paste it here.
-// This studio features a live codemod runner, so you can immediately see how your codemod transforms the "Before" snippet once pasted below.
+export const STARTER_SNIPPET = `/* 
+READ BELOW DESCRIPTIONS BEFORE USING CODEMOD STUDIO
+
+1. Provide at least one before/after example in the bottom two editors.
+
+2. Add comments in your code to explain the transformation logic, just like you're teaching another dev how to do it. Without clear transformation logic, even a human can’t build the codemod.
+
+3. If your migration request is too vague or high-level, try to break it down into simple steps before asking AI to make the codemod. You can always group smaller codemods into recipes for one-click execution (see docs for recipe).
+
+4. Click "Autogenerate with Codemod AI."
+
+5. Test the autogenerated codemod by adding more test cases. You can use the magic icon next to the + sign to have AI generate more tests.
+*/
 
 import type { API, FileInfo, Options } from 'jscodeshift';