[Style Guide] Added guidance for tabs & details (#29666)

* Added guidance for tabs & details

* Update src/content/partials/style-guide/tab-guidance.mdx

Co-authored-by: Pedro Sousa <680496+pedrosousa@users.noreply.github.com>

---------

Co-authored-by: Pedro Sousa <680496+pedrosousa@users.noreply.github.com>

Author: dcpena

src/content/docs/style-guide/components/details.mdx

@@ -4,7 +4,7 @@ styleGuide:
   component: Details
 ---
 
-import { Type, MetaInfo } from "~/components";
+import { Type, MetaInfo, Render } from "~/components";
 
 When you want to provide additional information in context, but you do not want it to clutter up the more important content, use `<Details>` to add a collapsible container.
 
@@ -24,6 +24,10 @@ import { Details } from "~/components";
 </Details>
 ```
 
+## Additional guidance
+
+<Render file="tab-guidance" product="style-guide" />
+
 ## Properties
 
 - `header` <Type text="string" /> <MetaInfo text="required" />

src/content/docs/style-guide/components/tabs.mdx

@@ -13,6 +13,10 @@ This component can help you create a tabbed interface to show related informatio
 - Account-level vs zone-level navigation
 - GRE / IPsec tunnels
 
+## Additional guidance
+
+<Render file="tab-guidance" product="style-guide" />
+
 ```mdx live
 import { Tabs, TabItem } from "~/components";
 

src/content/docs/style-guide/documentation-content-strategy/writing-guidelines.mdx

@@ -5,6 +5,8 @@ sidebar:
   order: 5
 ---
 
+import { Render } from "~/components";
+
 Use the following writing guidelines to create product content that is clear and consistent and demonstrates Cloudflare's brand voice and product tone. The tone we use varies based on customer goals while using certain products and features. We emphasize ease-of-use within our products.
 
 ## Use plain language
@@ -43,6 +45,12 @@ Use a confident and clear tone that prevents customer doubt. Guide from a place
 
 ---
 
+## Always show the primary answer
+
+<Render file="tab-guidance" product="style-guide" />
+
+---
+
 ## Introduce complexity progressively
 
 When introducing technical concepts, start with the basics and gradually build up to more advanced topics. Explain the "why" before the "how".

src/content/docs/style-guide/how-we-docs/ai-consumability.mdx

@@ -39,6 +39,8 @@ Two Content
 
 The references to the panels `id`, usually handled by JavaScript, are visible but non-functional.
 
+<Render file="tab-guidance" product="style-guide" />
+
 ### Turning our components into "Markdownable" HTML
 
 To solve this, we use [Markdown for Agents](/fundamentals/reference/markdown-for-agents/), which converts HTML to Markdown at the Cloudflare network layer. It handles:

src/content/partials/style-guide/tab-guidance.mdx

@@ -0,0 +1,7 @@
+---
+{}
+---
+
+The primary answer or core instruction should always appear in the main content flow, not exclusively inside a tab or collapsible section. 
+
+Use tabs for platform-specific variations (for example, Dashboard versus API versus Terraform) only after stating the general concept. Use Details for supplementary information, not for the primary answer.