Improve the ai assistant docs

Author: patrikbraborec

sources/platform/actors/development/ai_assistant_coding/index.md

@@ -9,6 +9,11 @@ slug: /actors/development/ai-assistants
 
 ---
 
+import { RULES_AND_INSTRUCTIONS_PROMPT } from "@site/src/utils/ai-prompts";
+import PromptButton from "@site/src/components/PromptButton";
+
+The following documents describe how you can leverage llms.txt and llms-full.txt in AI IDEs, create rules and instructions files, and follow best practices for AI assistant coding.
+
 ### Documentation for LLMs: llms.txt and llms-full.txt
 
 Search engines weren't built for Large Language Modals (LLMs), but AI needs context. That's why we created `llms.txt` and `llms-full.txt` for our documentation. These files follow the [growing standard](https://llmstxt.org/) for LLMs consumption.
@@ -86,9 +91,14 @@ See how to set up rules for your AI IDEs:
 
 #### Apify rules and instructions
 
-Use these rules and instructions for your Actors development:
+The best rules and instructions are specific for individual use cases, but we provide a prompt to help you get start with creating rules and instructions:
+
+<PromptButton prompt={RULES_AND_INSTRUCTIONS_PROMPT}/>
+
+#### Keep your rules and instructions up to date
+
+As the project evolves, you might introduce new things. Always make sure that your rules are up to date.
 
-- [Rules and instructions](./rules_and_instructions.md)
 
 ### Best practices
 

sources/platform/actors/development/ai_assistant_coding/rules_and_instructions.md

@@ -9,9 +9,9 @@ slug: /actors/development/quick-start/locally
 
 ---
 
-import QuickStartPromptButton from "@site/src/components/QuickStartPromptButton";
+import PromptButton from "@site/src/components/PromptButton";
 
-<QuickStartPromptButton/>
+<PromptButton/>
 
 ## What you'll learn
 

sources/platform/actors/development/quick_start/start_locally.md

@@ -1,66 +1,9 @@
 import React, { useEffect, useRef, useState } from 'react';
+import { QUICK_START_PROMPT } from '../utils/ai-prompts';
 
-import styles from './QuickStartPromptButton.module.css';
+import styles from './PromptButton.module.css';
 
-const PROMPT = `Follow this step-by-step workflow::
-
-**Step 1: Verify Prerequisites**
-
-First, verify the user's environment by running these commands:
-
-\`\`\`bash
-node --version # Requires Node.js 16 or higher
-npm --version
-apify --version # Check if Apify CLI is already installed
-\`\`\`
-
-If any prerequisites are missing, guide the user through installation before proceeding.
-
-**Step 2: Install/Update Apify CLI**
-\`\`\`bash
-npm install -g apify-cli
-\`\`\`
-
-**Step 3: Create a New Actor**
-
-Explain that this will prompt for actor name and template selection.
-
-\`\`\`bash
-apify create
-\`\`\`
-
-Direct users to explore templates at https://apify.com/templates.
-
-**Step 4: Navigate to the Actor Directory**
-
-\`\`\`bash
-cd [actor-name] # Use the actual name they chose in step 3
-\`\`\`
-
-**Step 5: Run the Actor Locally**
-
-Explain that this will run the actor locally.
-
-\`\`\`bash
-apify run
-\`\`\`
-
-**Step 6: Next Steps**
-
-Explain that the user can deploy the actor to Apify, but they first need to log in to Apify:
-
-\`\`\`bash
-apify login
-\`\`\`
-
-After logging in, you can deploy the actor to Apify:
-
-\`\`\`bash
-apify push
-\`\`\`
-`;
-
-export default function QuickStartPromptButton({ prompt = PROMPT }) {
+export default function PromptButton({ prompt = QUICK_START_PROMPT, title = 'Use pre-built prompt to get started faster.' }) {
     const [copied, setCopied] = useState(false);
     const [showPrompt, setShowPrompt] = useState(false);
     const timeoutRef = useRef(null);
@@ -78,7 +21,7 @@ export default function QuickStartPromptButton({ prompt = PROMPT }) {
             window.analytics.track('Clicked', {
                 app: 'docs',
                 button_text: 'Copy prompt',
-                element: 'quick-start-prompt-button.copyButton',
+                element: 'prompt-button.copyButton',
             });
         }
 
@@ -102,10 +45,10 @@ export default function QuickStartPromptButton({ prompt = PROMPT }) {
 
     return (
         <>
-            <div className={styles['quick-start-prompt-card']}>
+            <div className={styles['prompt-card']}>
                 <div className={styles['prompt-content']}>
                     <div className={styles['prompt-text']}>
-                        <span>Use this pre-built prompt to get started faster.</span>
+                        <span>{title}</span>
                     </div>
                 </div>
                 <div className={styles['button-container']}>

src/components/QuickStartPromptButton.jsx renamed to src/components/PromptButton.jsx

@@ -1,4 +1,4 @@
-.quick-start-prompt-card {
+.prompt-card {
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -13,7 +13,7 @@
 }
 
 /* Light purple glow effect */
-.quick-start-prompt-card::before {
+.prompt-card::before {
   content: '';
   position: absolute;
   top: 0;
@@ -163,7 +163,7 @@
 
 /* Responsive design */
 @media (max-width: 768px) {
-  .quick-start-prompt-card {
+  .prompt-card {
     flex-direction: column;
     gap: 1.2rem;
     text-align: center;