docs: Add documentation for vibe coding

sources/platform/actors/development/quick_start/index.mdx

@@ -57,3 +57,14 @@ This is the fastest way to kick-start your Actor development and try out the Api
         to="/platform/actors/development/quick-start/web-ide"
     />
 </CardGrid>
+
+## Vibe Coding
+
+Use the Apify toolset for vibe coding:
+
+<CardGrid>
+    <Card
+        title="Start with vibe coding"
+        to="/platform/actors/development/quick-start/vibe-coding"
+    />
+</CardGrid>

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

@@ -9,6 +9,10 @@ slug: /actors/development/quick-start/locally
 
 ---
 
+import PromptButton from "@site/src/components/PromptButton";
+
+<PromptButton/>
+
 ## What you'll learn
 
 This guide walks you through the full lifecycle of an Actor. You'll start by creating and running it locally with the Apify CLI, then learn to configure its input and data storage. Finally, you will deploy the Actor to the Apify platform, making it ready to run in the cloud.
@@ -46,7 +50,7 @@ The CLI will:
 Now, you can navigate to your new Actor directory:
 
 ```bash
-cd your-actor-name
+cd `your-actor-name`
 ```
 
 ### Step 2: Run your Actor

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

@@ -0,0 +1,104 @@
+---
+title: Vibe coding
+sidebar_position: 3
+description: Learn how to set up your environment, choose the right tools, and establish workflows for effective vibe coding
+slug: /actors/development/quick-start/vibe-coding
+toc_max_heading_level: 4
+---
+
+**Set up your environment, choose tools, and build workflows for effective vibe coding.**
+
+---
+
+import { RULES_AND_INSTRUCTIONS_PROMPT } from "@site/src/utils/ai-prompts";
+import PromptButton from "@site/src/components/PromptButton";
+
+This guide explains how to enhance your development workflow by leveraging `llms.txt` and `llms-full.txt` with an AI assistant. You will learn how to provide foundational context and further refine AI's behavior with specific rules and instruction files.
+
+## `llms.txt` and `llms-full.txt`
+
+Search engines weren't built for Large Language Models (LLMs), but they needs context. That's why we've created `[llms.txt](https://docs.apify.com/llms.txt)` and `[llms-full.txt](https://docs.apify.com/llms-full.txt)` for our documentation. These files follow the [growing standard](https://llmstxt.org/) for LLMs consumption.
+
+| File | Purpose | Impact on LLM Processing |
+| :--- | :--- | :--- |
+| `/robots.txt` | Tells crawlers where to go. | It doesn't help with content understanding. |
+| `/sitemap.xml` | Lists pages. | It doesn't help with content. LLM systems still need to parse complex HTML and handle extra info, which clutters the context window. |
+| `/llms.txt` | Solves LLMs problems by presenting content optimized for LLM processing. | It overcomes context window limits and removes markup and scripts. |
+
+### Use llms.txt and llms-full.txt
+
+LLMs don't automatically discover llms.txt files, you need to add the link manually. Some tools like [Cursor](https://www.cursor.com/) provide settings for this.
+
+#### Cursor
+
+Go to: **Settings -> Cursor Settings -> Indexing & Docs -> Add Doc**.
+
+Now, you can just provide the link to Apify `llms-full.txt`:
+
+```markdown
+https://docs.apify.com/llms-full.txt
+```
+
+![Add llms-full.txt to Cursor](./images/cursor.png)
+
+#### Windsurf
+
+Open Windsurf Cascade, and add context via `@web`:
+
+![Add llms-full.txt to Windsurf](./images/windsurf.png)
+
+:::note Windsurf @docs
+
+Windsurf provides the `@docs` command, but you cannot customize it. It means that you cannot add your own documentation.
+
+:::
+
+#### GitHub Copilot
+
+Open Copilot Chat mode, and add context via `#fetch`:
+
+![Add llms.txt to Copilot](./images/github-copilot.png)
+
+:::note GitHub Copilot and documentation
+
+Similar to Windsurf, GitHub Copilot does not provide an option for adding your own documentation.
+
+:::
+
+#### Ask AI
+
+New to Apify? Ask questions and provide the `llms.txt` link. Popular AI models can search the web. With the right context, you get better answers:
+
+![Ask about Apify](./images/claude.png)
+
+## Add rules
+
+To get the most from AI IDEs, add rules or instructions.
+
+See how to set up rules for your AI IDEs:
+
+- [Cursor Rules](https://docs.cursor.com/en/context/rules)
+- [Windsurf Rules](https://docs.windsurf.com/windsurf/cascade/memories#rules)
+- [GitHub Copilot instructions](https://docs.github.com/en/copilot/how-tos/configure-custom-instructions/add-repository-instructions)
+
+### Apify rules and instructions
+
+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}/>
+
+:::info Keep your rules and instructions up to date
+
+As the project evolves, you might introduce new things. Always make sure that your rules and instructions are up to date.
+
+:::
+
+## Best practices
+
+- _Small tasks_: Don't ask AI for many tasks at once. Break complex problems into smaller pieces. Solve them step by step.
+
+- _Iterative approach_: Work iteratively with clear steps. Start with a basic implementation and gradually add complexity.
+
+- _Versioning_: Version your changes often using git. This lets you track changes, roll back if needed, and maintain a clear history.
+
+- _Security_: Don't expose API keys, secrets, or sensitive information in your code or conversations with LLM assistants.

src/components/PromptButton.jsx

@@ -0,0 +1,78 @@
+import React, { useEffect, useRef, useState } from 'react';
+
+import { QUICK_START_PROMPT } from '../utils/ai-prompts';
+import styles from './PromptButton.module.css';
+
+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);
+
+    useEffect(() => {
+        return () => {
+            if (timeoutRef.current) {
+                clearTimeout(timeoutRef.current);
+            }
+        };
+    }, []);
+
+    const handleCopy = async () => {
+        if (window.analytics) {
+            window.analytics.track('Clicked', {
+                app: 'docs',
+                button_text: 'Copy prompt',
+                element: 'prompt-button.copyButton',
+            });
+        }
+
+        try {
+            await navigator.clipboard.writeText(prompt);
+
+            if (timeoutRef.current) {
+                clearTimeout(timeoutRef.current);
+            }
+
+            setCopied(true);
+            timeoutRef.current = setTimeout(() => setCopied(false), 2000);
+        } catch (err) {
+            console.error('Failed to copy prompt:', err);
+        }
+    };
+
+    const togglePrompt = () => {
+        setShowPrompt(!showPrompt);
+    };
+
+    return (
+        <>
+            <div className={styles['prompt-card']}>
+                <div className={styles['prompt-content']}>
+                    <div className={styles['prompt-text']}>
+                        <span>{title}</span>
+                    </div>
+                </div>
+                <div className={styles['button-container']}>
+                    <button
+                        className={styles['toggle-button']}
+                        onClick={togglePrompt}
+                    >
+                        {showPrompt ? 'Hide the prompt' : 'Show the prompt'}
+                    </button>
+                    <button
+                        className={`${styles['copy-button']} ${copied ? styles.copied : ''}`}
+                        onClick={handleCopy}
+                    >
+                        {copied ? 'Copied!' : 'Copy prompt'}
+                    </button>
+                </div>
+            </div>
+            {showPrompt && (
+                <div className={styles['full-prompt-container']}>
+                    <div className={styles['full-prompt']}>
+                        <pre>{prompt}</pre>
+                    </div>
+                </div>
+            )}
+        </>
+    );
+}