remove all non-flex-suite recipes

Author: rezrah

.changeset/clear-pages-compose.md

@@ -2,4 +2,7 @@
 '@primer/brand-mcp': patch
 ---
 
-Improves guidance delivered through the `primer_brand_review` tool.
+Improves guidance and examples delivered through the Primer Brand MCP tools:
+
+- Improves guidance delivered through the `primer_brand_review` tool.
+- Cleaner output from the `primer_brand_examples` tool.

packages/e2e/scripts/playwright/axe-clean.spec.ts

@@ -40,8 +40,6 @@ const testsToSkip = [
   'components-videoplayer-features--with-poster', // video makes this too flakey
   'components-videoplayer-features--without-branding', // video makes this too flakey
   'components-videoplayer--playground', // video makes this too flakey
-  'recipes-feature-previews-level-1--level-one-side-by-side-enterprise', // video makes this too flakey
-  'recipes-feature-previews-level-1--level-one-side-by-side', // custom, unrelated background image
   'components-eyebrowbanner-features--on-custom-background-dark', // custom, unrelated background image
   'components-eyebrowbanner-features--on-custom-background-light', // custom, unrelated background image
   'components-subdomainnavbar--skip-to-main-tag', // contains main tag which is in conflict with the default role="main" element
@@ -60,7 +58,7 @@ const testsToSkip = [
 
 const ignoreViolations = {
   'landmark-one-main': {except: []}, // on most of the stories we don't have a main landmark
-  'page-has-heading-one': {except: ['components-hero', 'recipes-feature-previews']}, // on some stories we dont have a heading,
+  'page-has-heading-one': {except: ['components-hero']}, // on some stories we dont have a heading,
   region: {except: []}, // on most of the stories we don't have a region landmark
 }
 

packages/e2e/scripts/playwright/playwright.generate-tests.ts

@@ -65,41 +65,11 @@ const waitForTimeoutLookup = {
   'components-box-features--animation': 6000, // for the animation
   'components-ide--playground': 2000, // for the animation
   'components-ide--default': 2000, // for the animation
-  'recipes-seo-article-page--playground': 5000, // for the animation
-  'recipes-seo-article-page--all-headings': 5000, // for the animation
-  'recipes-seo-article-page--ai-theme': 5000, // for the animation
-  'recipes-seo-article-page--collaboration-theme': 5000, // for the animation
-  'recipes-seo-article-page--enterprise-theme': 5000, // for the animation
-  'recipes-seo-article-page--security-theme': 5000, // for the animation
-  'recipes-seo-article-page--productivity-theme': 5000, // for the animation
-  'recipes-seo-article-page--light-hero-image': 5000, // for the animation
-  'recipes-seo-article-page--dark-hero-image': 5000, // for the animation
-  'recipes-solutions-categorypage--light': 4000, // for the animation
-  'recipes-solutions-categorypage--dark': 4000, // for the animation
-  'recipes-solutions-solution-industry--maximum': 3500, // for the animation
-  'recipes-solutions-solution-industry--maximum-dark': 3500, // for the animation
-  'recipes-solutions-solution-industry--minimum': 3500, // for the animation
-  'recipes-solutions-solution-industry--minimum-dark': 3500, // for the animation
-  'recipes-solutions-solution-org-size--maximum': 3500, // for the animation
-  'recipes-solutions-solution-org-size--maximum-dark': 3500, // for the animation
-  'recipes-solutions-solution-org-size--minimum': 3500, // for the animation
-  'recipes-solutions-solution-org-size--minimum-dark': 3500, // for the animation
-  'recipes-solutions-solution-use-case--minimum': 2000, // for the footer logos
-  'recipes-solutions-solution-use-case--minimum-dark': 2000, // for the footer logos
-  'recipes-solutions-solution-use-case--maximum-dark': 2000, // for the footer logos
-  'recipes-solutions-solution-use-case--maximum': 2000, // for the footer logos
-  'recipes-solutions-overview--light': 3500, // for the animation
-  'recipes-solutions-overview--dark': 3500, // for the animation
   'components-riverstoryscroll--default': 3500, // for the animation
   'components-riverstoryscroll-features--with-timeline': 3500, // for the animation
   'components-riverstoryscroll-features--with-timeline-narrow': 3500, // for the animation
   'components-riverstoryscroll-features--enterprise-example': 3500, // for the animation
   'components-riverstoryscroll-features--enterprise-example-narrow': 3500, // for the animation
-  'recipes-feature-previews-level-2--level-two-playground': 4000, // for the animation
-  'recipes-feature-previews-level-2--level-two-point-one': 4000, // for the animation
-  'recipes-feature-previews-level-2--level-two-point-two': 4000, // for the animation
-  'recipes-feature-previews-level-2--level-two-point-three': 4000, // for the animation
-  'recipes-feature-previews-level-2--level-two-point-four': 4000, // for the animation
   'components-textrevealanimation--playground': 3000, // for the animation
   'components-textrevealanimation-examples--with-large-testimonial': 3000, // for the animation
   'components-textrevealanimation-examples--with-hero': 3000, // for the animation
@@ -131,9 +101,7 @@ const waitForTimeoutLookup = {
   'components-videoplayer-features--tooltip-visible-on-focus': 5000, // for video metadata to load
   'components-hero-features-images-and-videos--with-video-block-end-default': 5000, // for video metadata to load
   'components-hero-features-images-and-videos--with-video-inline-end': 5000, // for video metadata to load
-  'recipes-flextemplate-flextemplate--default': 4000, // for video metadata to load
   'components-textcursoranimation--playground': 4000, // for the animation to complete
-  'recipes-flextemplate-flexsection--default': 1000, // longer load time
   'components-subnav-features--delayed-active-link': 2000, // because the story sets an initial delay,
   'components-logosuite-features--grid-line-expressive-kitchen-sink': 3000, // for the animation to complete
   'components-logosuite-features--takeover-button': 3000, // for the animation to complete
@@ -177,7 +145,6 @@ const skipTestLookup = [
   'components-logosuite-features--mixed-width', // animation only
   'components-logosuite-features--following-hero', // animation only
   'components-logosuite-features--stacked', // animation only
-  'recipes-feature-previews-level-1--level-one-side-by-side-enterprise', // video makes this too flakey
   'components-subdomainnavbar--overflow-menu-open', // flakey despite timeout
   'components-ide-features--editor-only', // animation too long
   'components-ide-features--editor-no-replay-button', // animation too long
@@ -187,7 +154,6 @@ const skipTestLookup = [
   'components-ide-features--perspective-example-light', // animation too long
   'components-ide-features--all-glass', // animation too long
   'components-ide-features--editor-custom-icons', // animation too long
-  'recipes-seo-category-page--default', // template contains randomisation
   'components-statistic-features--animations', // animation only
   'components-riverstoryscroll-features--video-narrow', // video makes this too flakey
   'components-riverstoryscroll-features--video', // video makes this too flakey

packages/mcp/scripts/generate-catalog.mjs

@@ -4,7 +4,7 @@
  * pages, installed icon packages, and built design tokens.
  */
 import {existsSync, mkdirSync, readdirSync, readFileSync, writeFileSync} from 'node:fs'
-import {dirname, join, resolve} from 'node:path'
+import {dirname, join, relative, resolve} from 'node:path'
 import {fileURLToPath} from 'node:url'
 
 const scriptDir = dirname(fileURLToPath(import.meta.url))
@@ -581,8 +581,8 @@ function buildTokens() {
 // Recipes
 // ---------------------------------------------------------------------------
 
-/** Search metadata for the page recipes. The composition itself has one source: the .tsx below. */
-const RECIPE_META = {
+/** An explicit allow-list to help discovery. */
+const RECIPE_SEARCH_OVERRIDES = {
   FlexSuiteAIOverview: {
     title: 'Product feature overview landing page',
     keywords: [
@@ -634,12 +634,18 @@ const RECIPE_META = {
 
 // Copies the full recipe verbatim
 function buildRecipes() {
-  const recipesRoot = join(reactSrc, 'recipes', 'Flexsuite')
+  const recipesRoot = join(reactSrc, 'recipes')
   if (!existsSync(recipesRoot)) {
     // eslint-disable-next-line i18n-text/no-en
-    writeStderrLog('Flexsuite recipes not found; skipping recipe templates')
+    writeStderrLog('no recipes found; skipping recipe catalog.')
     return []
   }
+  const sanitize = value =>
+    value
+      .replace(/([a-z0-9])([A-Z])/g, '$1 $2')
+      .replace(/([A-Z]+)([A-Z][a-z])/g, '$1 $2')
+      .replace(/[-_]+/g, ' ')
+      .trim()
   const recipes = []
   const walk = dir => {
     for (const entry of readdirSync(dir, {withFileTypes: true})) {
@@ -650,7 +656,12 @@ function buildRecipes() {
         const name = entry.name.slice(0, -'.tsx'.length)
         const source = readFileOrNull(fullPath)
         if (!source) continue
-        const meta = RECIPE_META[name] ?? {title: name, keywords: ['page', 'template', 'full page']}
+        const relativeDirectory = relative(recipesRoot, dirname(fullPath))
+        const inferredKeywords = relativeDirectory.split(/[\\/]/).map(sanitize).filter(Boolean)
+        const meta = RECIPE_SEARCH_OVERRIDES[name] ?? {
+          title: sanitize(name),
+          keywords: [...inferredKeywords, 'page', 'template', 'full page'],
+        }
         recipes.push({name, title: meta.title, keywords: meta.keywords, source: source.trim()})
       }
     }
@@ -676,7 +687,7 @@ function main() {
     writeStderrLog('WARNING: 0 design tokens — build @primer/brand-primitives (npm run build:lib) to include them')
   }
   if (recipes.length === 0) {
-    writeStderrLog('Error: 0 recipe templates — check packages/react/src/recipes/Flexsuite')
+    writeStderrLog('Error: 0 recipe templates — check packages/react/src/recipes')
   }
 
   const generatedFromVersion = (() => {

packages/mcp/src/tools/primer-brand-examples/primer-brand-examples.test.ts

@@ -29,13 +29,13 @@ describe('primer_brand_examples', () => {
 
   it('leads page-level goals with the closest full-page template', async () => {
     const result = await primerBrandExamplesTool.run({goal: 'category page'}, makeContext())
-    expect(result.text).toContain('Full-page template')
+    expect(result.text).toContain('Full-page template — goal-matched recipe source')
     expect(result.text).toContain('category landing page')
   })
 
   it('combines the general page recipe with goal-specific form examples', async () => {
     const result = await primerBrandExamplesTool.run({goal: 'early access form page'}, makeContext())
-    expect(result.text).toContain('Full-page template — general composition reference')
+    expect(result.text).toContain('Full-page template — default FlexSuite overview recipe source')
     expect(result.text).toContain('Product feature overview landing page')
     expect(result.text).toContain('overview recipe source')
     expect(result.text).toContain('### CTAForm')

packages/mcp/src/tools/primer-brand-examples/primer-brand-examples.ts

@@ -16,7 +16,7 @@ const inputSchema = z.object({
 
 type Input = z.infer<typeof inputSchema>
 
-const description = `Get ranked, copy-and-adapt examples of correct Primer Brand usage for a goal. Page goals include a current-brand Flexsuite recipe for overall composition, while independently ranked component examples provide goal-specific detail.
+const description = `Get ranked, copy-and-adapt examples of correct Primer Brand usage for a goal. Page goals include a current-brand full-page recipe for overall composition, while independently ranked component examples provide goal-specific detail.
 Pass a target use-case like "pricing section", "category page", or "education landing page"; unmatched page types use the general overview recipe, while unmatched component goals use a foundational set.
 Examples are real source, so they may carry demo scaffolding (a \`content\` object, internal fixture imports, CSS-module class names, repo-relative imports, \`{...args}\` spreads) — mirror the composition and props, then rebuild with your own content and \`@primer/react-brand\` imports. Don't paste verbatim.`
 
@@ -101,9 +101,9 @@ export const primerBrandExamplesTool: ToolModule<Input> = {
         ? rank(meaningfulGoal, ctx.catalog.recipes, recipeSearchFields).map(entry => entry.item)
         : []
     const defaultRecipe = ctx.catalog.recipes.find(recipe => recipe.name === 'FlexSuiteAIOverview')
-    const usesGeneralRecipe = isPageGoal && specificRecipes.length === 0 && Boolean(defaultRecipe)
+    const useDefaultRecipe = isPageGoal && specificRecipes.length === 0 && Boolean(defaultRecipe)
     const matchedRecipes =
-      specificRecipes.length > 0 ? specificRecipes : usesGeneralRecipe && defaultRecipe ? [defaultRecipe] : []
+      specificRecipes.length > 0 ? specificRecipes : useDefaultRecipe && defaultRecipe ? [defaultRecipe] : []
     const topRecipe = matchedRecipes[0]
 
     const sections = [`# Examples for "${goal}"`]
@@ -114,9 +114,9 @@ export const primerBrandExamplesTool: ToolModule<Input> = {
         : ''
       sections.push(
         [
-          `## Full-page template — ${usesGeneralRecipe ? 'general composition reference' : 'start here'}: ${
-            topRecipe.title
-          }`,
+          `## Full-page template — ${
+            useDefaultRecipe ? 'default FlexSuite overview recipe source' : 'goal-matched recipe source'
+          }: ${topRecipe.title}`,
           `This is the **actual current-brand recipe source** from \`@primer/react-brand\`, wired for our demo harness: a \`content\` object supplies the copy, imagery comes from internal fixtures, styling uses internal CSS-module class names, and imports are repo-relative. Ignore that scaffolding — mirror the page structure and gridline composition, then use the goal-specific component examples below for deeper context.${also}`,
           `\`\`\`tsx\n${topRecipe.source}\n\`\`\``,
         ].join('\n\n'),

packages/react/src/EyebrowBanner/EyebrowBanner.features.stories.tsx

@@ -4,7 +4,7 @@ import {EyebrowBanner, EyebrowBannerIconColors, EyebrowBannerLabelColors} from '
 import {Stack} from '../Stack'
 import {MarkGithubIcon, SparkleFillIcon} from '@primer/octicons-react'
 import backgroundImageDark from '../fixtures/images/background-stars.png'
-import backgroundImageLight from '../recipes/FeaturePreviewLPs/fixtures/images/other/light-bg.png'
+import backgroundImageLight from '../fixtures/images/eyebrow-banner-light-bg.png'
 import {ThemeProvider} from '../ThemeProvider'
 import {Box} from '../Box'
 

packages/react/src/IDE/IDE.features.stories.tsx

@@ -10,9 +10,9 @@ import {Box} from '../Box'
 import {Grid} from '../Grid'
 import {Heading} from '../Heading'
 import {Link} from '../Link'
-import backgroundImageDark from '../recipes/FeaturePreviewLPs/fixtures/images/productivity/river-bg-dark-1.png'
-import backgroundImageLight1 from '../recipes/FeaturePreviewLPs/fixtures/images/productivity/river-bg-light-1.png'
-import backgroundImageLight2 from '../recipes/FeaturePreviewLPs/fixtures/images/productivity/river-bg-light-2.png'
+import backgroundImageDark from '../fixtures/images/ide-river-bg-dark.png'
+import backgroundImageLight1 from '../fixtures/images/ide-river-bg-light-1.png'
+import backgroundImageLight2 from '../fixtures/images/ide-river-bg-light-2.png'
 import {River, RiverBreakout} from '../river'
 import {Text} from '../Text'
 import {ThemeProvider, useTheme} from '../ThemeProvider'