diff --git a/documentation/docs/guides/recipes/index.md b/documentation/docs/guides/recipes/index.md
index 067dc03fa2..f750cf5b18 100644
--- a/documentation/docs/guides/recipes/index.md
+++ b/documentation/docs/guides/recipes/index.md
@@ -47,6 +47,11 @@ import styles from '@site/src/components/Card/styles.module.css';
description="Learn how a recipe can use sub-recipes to do specific tasks."
link="/docs/guides/recipes/sub-recipes"
/>
+
diff --git a/documentation/docs/guides/recipes/storing-recipes.md b/documentation/docs/guides/recipes/storing-recipes.md
new file mode 100644
index 0000000000..b758822623
--- /dev/null
+++ b/documentation/docs/guides/recipes/storing-recipes.md
@@ -0,0 +1,126 @@
+---
+title: Saving Recipes
+sidebar_position: 4
+sidebar_label: Saving Recipes
+---
+
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+This guide covers storing, organizing, and finding Goose recipes when you need to access them again later.
+
+:::info Desktop UI vs CLI
+- **Goose Desktop** has a visual Recipe Library for browsing and managing saved recipes
+- **Goose CLI** stores recipes as files that you find using file paths or environment variables
+:::
+
+## Understanding Recipe Storage
+
+Before saving recipes, it's important to understand where they can be stored and how this affects their availability.
+
+### Recipe Storage Locations
+
+| Type | Location | Availability | Best For |
+|------|----------|-------------|----------|
+| **Global** | `~/.config/goose/recipes/` | All projects and sessions | Personal workflows, general-purpose recipes |
+| **Local** | `YOUR_WORKING_DIRECTORY/.goose/recipes/` | Only when working in that project | Project-specific workflows, team recipes |
+
+**Choose Global Storage When:**
+- You want the recipe available across all projects
+- It's a personal workflow or general-purpose recipe
+- You're the primary user of the recipe
+
+**Choose Local Storage When:**
+- The recipe is specific to a particular project
+- You're working with a team and want to share the recipe
+- The recipe depends on project-specific files or configurations
+
+
+## Storing Recipes
+
+
+
+
+**Save New Recipe:**
+1. To create a recipe from your chat session, see: [Create Recipe](/docs/guides/recipes/session-recipes#create-recipe)
+2. Once in the Recipe Editor, click **Save Recipe** to save it to your Recipe Library
+
+**Save Modified Recipe:**
+
+If you're already using a recipe and want to save a modified version:
+1. Click the gear icon ⚙️ in the top right corner
+2. Click **Save recipe**
+3. Enter a name for the recipe
+4. [Choose to save globally or locally](#recipe-storage-locations) to your current project
+5. Click **Save Recipe**
+
+
+
+
+ When you [create a recipe](/docs/guides/recipes/recipe-reference), it gets saved to:
+
+ * Your working directory by default: `./recipe.yaml`
+ * Any path you specify: `/recipe /path/to/my-recipe.yaml`
+ * Local project recipes: `/recipe .goose/recipes/my-recipe.yaml`
+
+
+
+
+
+## Finding Your Recipes
+
+
+
+
+**Access Recipe Library:**
+1. Click the gear icon ⚙️ in the top right corner
+2. Click **Recipe Library**
+3. Browse your saved recipes in a list view
+4. Each recipe shows its title, description, and whether it's global or local
+
+
+
+
+To find and configure your saved recipes:
+
+**Browse recipe directories:**
+```bash
+# List recipes in default global location
+ls ~/.config/goose/recipes/
+
+# List recipes in current project
+ls .goose/recipes/
+
+# Search for all recipe files
+find . -name "*.md" -path "*/recipes/*"
+```
+
+:::tip
+Set up [custom recipe paths](/docs/guides/recipes/session-recipes#configure-recipe-location) to organize recipes in specific directories or access recipes from a shared GitHub repository.
+:::
+
+
+
+
+
+
+
+## Using Saved Recipes
+
+
+
+
+1. Click the gear icon ⚙️ in the top right corner
+2. Click **Recipe Library**
+3. Find your recipe in the Recipe Library
+4. Choose one of the following:
+ - Click **Use Recipe** to run it immediately
+ - Click **Preview** to see details first, then click **Load Recipe** to run it
+
+
+
+
+Once you've located your recipe file, [run the recipe](/docs/guides/recipes/session-recipes#run-a-recipe).
+
+
+
diff --git a/documentation/src/css/custom.css b/documentation/src/css/custom.css
index e60a49280c..b43a493ecc 100644
--- a/documentation/src/css/custom.css
+++ b/documentation/src/css/custom.css
@@ -306,6 +306,8 @@ html[data-theme="light"] .hide-in-light {
display: flex;
align-items: center;
transition: opacity 0.3s ease, transform 0.3s ease;
+ padding-left: 0.75rem;
+ padding-right: 0.75rem;
}
.navbar__toggle {
@@ -314,6 +316,19 @@ html[data-theme="light"] .hide-in-light {
transform: scale(0.8);
}
+/*
+ * No margin is needed for the branding right now,
+ * since there is padding on the items and no brand text.
+ * If those things change, you may want to revert this.
+*/
+.navbar__brand {
+ margin-right: 0px;
+}
+
+.navbar__logo {
+ margin-right: 0px;
+}
+
/* Dropdown styles */
.navbar__link--active {
color: var(--text-prominent);
@@ -338,7 +353,7 @@ html[data-theme="light"] .hide-in-light {
}
/* Force hamburger menu to appear earlier to prevent navbar overlap with smooth transitions */
-@media (max-width: 1450px) {
+@media (max-width: 996px) {
.navbar__item {
opacity: 0;
transform: translateX(-10px);
@@ -346,27 +361,34 @@ html[data-theme="light"] .hide-in-light {
/* Use visibility instead of display for smoother transitions */
visibility: hidden;
}
-
+
.navbar__toggle {
opacity: 1 !important;
transform: scale(1) !important;
display: inherit !important;
}
-
+
.navbar-sidebar {
display: block;
}
}
+/* Shrink inkeep search box some on smaller screens */
+@media (max-width: 1450px) {
+ #inkeep {
+ max-width: 180px;
+ }
+}
+
/* Ensure navbar items are visible above the breakpoint */
-@media (min-width: 1451px) {
+@media (min-width: 997px) {
.navbar__item {
opacity: 1;
transform: translateX(0);
pointer-events: auto;
visibility: visible;
}
-
+
.navbar__toggle {
opacity: 0;
transform: scale(0.8);
@@ -378,4 +400,3 @@ html[data-theme="light"] .hide-in-light {
object-fit: cover; /* Ensure the image covers the area while maintaining aspect ratio */
border-radius: 8px; /* Optional: rounded corners */
}
-