docs: slash commands topic (#6333)

Co-authored-by: Angie Jones <jones.angie@gmail.com>

documentation/docs/guides/config-files.md

@@ -146,7 +146,7 @@ GOOSE_SEARCH_PATHS:
 These paths are prepended to the system PATH when running extension commands, ensuring your custom tools are found without modifying your global PATH.
 
 ## Recipe Command Configuration
-You can optionally set up [custom slash commands](/docs/guides/recipes/session-recipes.md#custom-recipe-commands) to run recipes that you create. List the command (without the leading `/`) along with the path to the recipe:
+You can optionally set up [custom slash commands](/docs/guides/context-engineering/slash-commands) to run recipes that you create. List the command (without the leading `/`) along with the path to the recipe:
 
 ```yaml
 slash_commands:

documentation/docs/guides/context-engineering/index.mdx

@@ -25,11 +25,21 @@ import styles from '@site/src/components/Card/styles.module.css';
       description="Create reusable instruction sets containing workflows, scripts, and other resources that goose can load on demand."
       link="/docs/guides/context-engineering/using-skills"
     />
+    <Card 
+      title="Custom Slash Commands"
+      description="Create custom shortcuts to quickly run reusable instructions in any chat session with simple slash commands."
+      link="/docs/guides/context-engineering/slash-commands"
+    />
     <Card 
       title="Memory Extension"
       description="Teach goose persistent knowledge it can recall across sessions. Save commands, code snippets, and preferences for consistent assistance."
       link="/docs/mcp/memory-mcp"
     />
+    <Card 
+      title="Research → Plan → Implement Pattern"
+      description="See how slash commands make it easy to integrate instructions into interactive RPI workflows."
+      link="/docs/tutorials/rpi"
+    />
   </div>
 </div>
 

documentation/docs/guides/context-engineering/slash-commands.md

@@ -0,0 +1,110 @@
+---
+sidebar_position: 4
+title: Custom Slash Commands
+sidebar_title: Slash Commands
+description: "Create custom shortcuts to quickly apply reusable instructions in any goose chat session"
+---
+
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import { PanelLeft, Terminal } from 'lucide-react';
+
+Custom slash commands are personalized shortcuts to run [recipes](/docs/guides/recipes). If you have a recipe that runs a daily report, you can create a custom slash command to invoke that recipe from within a session:
+
+```
+/daily-report
+```
+
+
+## Create Slash Commands
+
+Assign a custom command to a recipe.
+
+<Tabs groupId="interface">
+  <TabItem value="ui" label="goose Desktop" default>
+   1. Click the <PanelLeft className="inline" size={16} /> button in the top-left to open the sidebar
+   2. Click `Recipes` in the sidebar
+   3. Find the recipe you want to use and click the <Terminal className="inline" size={16} /> button
+   4. In the modal that pops up, type your custom command (without the leading `/`)
+   5. Click `Save`
+ 
+  The command appears under the recipe in your `Recipes` menu. For recipes that aren't in your Recipe Library, follow the `goose CLI` steps.
+
+  </TabItem>
+  <TabItem value="cli" label="goose CLI">
+
+  Configure slash commands in your [configuration file](/docs/guides/config-files). List the command (without the leading `/`) along with the path to the recipe file on your computer:
+
+```yaml title="~/.config/goose/config.yaml"
+slash_commands:
+  - command: "run-tests"
+    recipe_path: "/path/to/recipe.yaml"
+  - command: "daily-report"
+    recipe_path: "/Users/me/.local/share/goose/recipes/report.yaml"
+```
+
+   </TabItem>
+</Tabs>
+
+## Use Slash Commands
+
+In any chat session, type your custom command with a leading slash at the start of your message:
+
+<Tabs groupId="interface">
+  <TabItem value="ui" label="goose Desktop" default>
+
+```
+/run-tests
+```
+
+:::tip Available Commands
+Typing `/` in goose Desktop shows a popup menu with the available slash commands.
+:::
+
+  </TabItem>
+  <TabItem value="cli" label="goose CLI">
+
+```sh
+Context: ●○○○○○○○○○ 5% (9695/200000 tokens)
+( O)> /run-tests
+```
+
+  </TabItem>
+</Tabs>
+
+You can pass one parameter after the command (if needed). Quotation marks are optional:
+
+```
+/translator where is the library
+```
+
+When you run a recipe using a slash command, the recipe's instructions and prompt fields are sent to your model and loaded into the conversation, but not displayed in chat. The model responds using the recipe's context and instructions just as if you opened it directly.
+
+## Limitations
+
+- Slash commands accept only one [parameter](/docs/guides/recipes/recipe-reference#parameters). Any additional parameters in the recipe must have default values.
+- Command names are case-insensitive (`/Bug` and `/bug` are treated as the same command).
+- Command names must be unique and contain no spaces.
+- You cannot use names that conflict with [built-in CLI slash commands](/docs/guides/goose-cli-commands#slash-commands) like `/recipe`, `/compact`, or `/help`.
+- If the recipe file is missing or invalid, the command will be treated as regular text sent to the model.
+
+## Additional Resources
+
+import ContentCardCarousel from '@site/src/components/ContentCardCarousel';
+
+<ContentCardCarousel
+  items={[
+    {
+      type: 'topic',
+      title: 'Recipes',
+      description: 'Check out the Recipes guide for more docs, tools, and resources to help you master goose recipes.',
+      linkUrl: '/goose/docs/guides/recipes'
+    },
+    {
+      type: 'topic',
+      title: 'Research → Plan → Implement Patterns',
+      description: 'See how slash commands make it easy to integrate instructions into interactive RPI workflows.',
+      linkUrl: '/goose/docs/tutorials/rpi'
+    }
+  ]}
+/>

documentation/docs/guides/goose-cli-commands.md

@@ -600,7 +600,7 @@ Once you're in an interactive session (via `goose session` or `goose run --inter
 # Clear the current conversation history
 /clear
 ```
-You can also create [custom slash commands for running recipes](/docs/guides/recipes/session-recipes.md#custom-recipe-commands) in goose Desktop or the CLI. 
+You can also create [custom slash commands for running recipes](/docs/guides/context-engineering/slash-commands) in goose Desktop or the CLI. 
 
 ---
 

documentation/docs/guides/recipes/index.mdx

@@ -38,6 +38,11 @@ import VideoCarousel from '@site/src/components/VideoCarousel';
       description="Complete technical reference for creating and customizing recipes in goose via the CLI."
       link="/docs/guides/recipes/recipe-reference"
     />
+    <Card 
+      title="Custom Slash Commands"
+      description="Create custom shortcuts to quickly run recipes in any chat session with simple slash commands."
+      link="/docs/guides/context-engineering/slash-commands"
+    />
     <Card 
       title="goose Recipes Tutorial"
       description="Learn how to create and use goose recipes with prompts, parameters, MCP servers, and more."
@@ -115,4 +120,4 @@ import VideoCarousel from '@site/src/components/VideoCarousel';
     }
   ]}
 />
-</div>
+</div>

documentation/docs/guides/recipes/session-recipes.md

@@ -229,6 +229,10 @@ You can turn your current goose session into a reusable recipe that includes the
          3. Find your recipe in the Recipe Library
          4. Click `Use` next to the recipe you want to open
 
+     **Slash Command:**
+
+         1. Enter a [custom slash command](/docs/guides/context-engineering/slash-commands) in any goose chat session
+
   2. The first time you run a recipe, a warning dialog displays the recipe's title, description, and instructions for you to review. If you trust the recipe content, click `Trust and Execute` to continue. You won't be prompted again for the same recipe unless it changes.
 
   3. If the recipe contains parameters, enter your values in the `Recipe Parameters` dialog and click `Start Recipe`.
@@ -361,6 +365,8 @@ You can turn your current goose session into a reusable recipe that includes the
        goose run --recipe recipe.yaml --params language=Python
        ```
 
+       **Slash Command** - Enter a [custom slash command](/docs/guides/context-engineering/slash-commands) in any goose chat session
+
      </TabItem>
 
      <TabItem value="github" label="GitHub Recipe">
@@ -416,55 +422,6 @@ You can turn your current goose session into a reusable recipe that includes the
    </TabItem>
 </Tabs>
 
-## Custom Recipe Commands
-Create shortcuts to quickly run recipes in any goose chat session. Type a custom command like `/daily-report` to instantly apply that recipe's instructions.
-
-<Tabs groupId="interface">
-  <TabItem value="ui" label="goose Desktop" default>
-   1. Click the <PanelLeft className="inline" size={16} /> button in the top-left to open the sidebar
-   2. Click `Recipes` in the sidebar
-   3. Find the recipe you want to edit and click the <Terminal className="inline" size={16} /> button
-   4. In the modal that pops up, type your custom command (without the leading `/`) into the text box
-   5. Click `Save`.
- 
-  Once you assign a custom command, the `Recipes` menu displays that command in purple text under the recipe's creation date. Typing `/` into the goose Desktop chat window shows a popup menu with the available recipe commands.
-
-To run the recipe, type your custom command with a leading slash into any chat session in the desktop app: 
-```
-/run-tests
-```
-
- </TabItem>
-  <TabItem value="cli" label="goose CLI">
-
-  Custom slash commands are configured in your goose [configuration file](/docs/guides/config-files.md). List the command (without the leading `/`) along with the path to the recipe:
-
-```yaml title="~/.config/goose/config.yaml"
-slash_commands:
-  - command: "run-tests"
-    recipe_path: "/path/to/recipe.yaml"
-  - command: "daily-standup"
-    recipe_path: "/Users/me/.local/share/goose/recipes/standup.yaml"
-  ```
-
-  To run the recipe, type your custom command with a leading slash into any goose chat session: 
-  ```sh
-  Context: ●○○○○○○○○○ 5% (9695/200000 tokens)
-  ( O)> /run-tests
-  ```
-   </TabItem>
-</Tabs>
-
-When you run a recipe using a slash command, the recipe's instructions and prompt fields are sent to your model and loaded into the conversation, but not displayed in chat. The model responds using the recipe's context and instructions just as if you opened it directly. 
-
-:::info
-- Custom Recipe commands don't support parameters or arguments.
-- Command names are case-insensitive (`/Bug` and `/bug` are treated as the same command).
-- Commands must be unique and contain no spaces.
-- You cannot use names that conflict with [built-in CLI slash commands](/docs/guides/goose-cli-commands.md#slash-commands) like `/recipe`, `/compact`, or `/help`. 
-- If the recipe file is missing or invalid, the command will be treated as regular text sent to the model. 
-:::
-
 ## Validate Recipe
 
 <Tabs groupId="interface">

documentation/docs/tutorials/rpi.md

@@ -38,7 +38,7 @@ curl -sL https://raw.githubusercontent.com/block/goose/main/documentation/src/pa
 <details>
 <summary>2. Add Custom Slash Commands</summary>
 
-Now that the recipes are imported, to quickly invoke them in-session [add custom slash commands](/docs/guides/recipes/session-recipes/#custom-recipe-commands) for each of the following recipes:
+Now that the recipes are imported, to quickly invoke them in-session [add custom slash commands](/docs/guides/context-engineering/slash-commands) for each of the following recipes:
 
 | Recipe | Slash Command |
 |--------|---------------|

documentation/src/components/ContentCard.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
+import { BookOpen } from 'lucide-react';
 
-type ContentType = 'video' | 'blog';
+type ContentType = 'video' | 'blog' | 'topic';
 
 interface ContentCardProps {
   type: ContentType;
@@ -113,6 +114,13 @@ const styles = {
     justifyContent: 'space-between',
     marginTop: 'auto',
   },
+
+  hoverBookIcon: {
+    width: '20px',
+    height: '20px',
+    color: 'white',
+    marginLeft: '4px',
+  },
 };
 
 export default function ContentCard({
@@ -183,6 +191,41 @@ export default function ContentCard({
     });
   };
 
+  if (type === 'topic') {
+    const topicOverlayStyle = {
+      ...styles.hoverOverlay,
+      opacity: 1,
+      ...(size === 'large' ? {
+        padding: '2.00rem',
+      } : {}),
+    };
+
+    return (
+      <a
+        href={linkUrl}
+        style={containerStyle}
+        onMouseEnter={() => !isTouchDevice && setIsHovering(true)}
+        onMouseLeave={() => !isTouchDevice && setIsHovering(false)}
+      >
+        <div style={styles.mainArea}>
+          <div style={topicOverlayStyle}>
+            <h3 style={hoverTitleStyle}>{title}</h3>
+            <p style={hoverDescriptionStyle}>{description}</p>
+            <div style={hoverMetadataStyle}>
+              <div>
+                <span>DOCUMENTATION</span>
+              </div>
+              <div></div>
+              <div style={{ display: 'flex', alignItems: 'center' }}>
+                <BookOpen style={styles.hoverBookIcon} />
+              </div>
+            </div>
+          </div>
+        </div>
+      </a>
+    );
+  }
+
   return (
     <a
       href={linkUrl}

documentation/src/components/ContentCardCarousel.tsx

@@ -7,7 +7,7 @@ import 'swiper/css/pagination';
 import 'swiper/css/free-mode';
 import ContentCard from './ContentCard';
 
-type ContentType = 'video' | 'blog' ;
+type ContentType = 'video' | 'blog' | 'topic';
 
 interface ContentItem {
   type: ContentType;