WordPress · aduth · Apr 20, 2026 · Apr 8, 2026 · Apr 15, 2026 · Apr 15, 2026
@@ -81,6 +81,7 @@
 # UI Components
 /packages/components                            @ajitbohra @WordPress/gutenberg-components
 /packages/compose                               @ajitbohra
+/packages/design-system-mcp                     @WordPress/gutenberg-components
 /packages/element                               @ajitbohra
 /packages/notices                               @ajitbohra
 /packages/nux                                   @ajitbohra @peterwilsoncc

@@ -1667,6 +1667,12 @@
 		"markdown_source": "../packages/deprecated/README.md",
 		"parent": "packages"
 	},
+	{
+		"title": "@wordpress/design-system-mcp",
+		"slug": "packages-design-system-mcp",
+		"markdown_source": "../packages/design-system-mcp/README.md",
+		"parent": "packages"
+	},
 	{
 		"title": "@wordpress/docgen",
 		"slug": "packages-docgen",

diff --git a/eslint.config.mjs b/eslint.config.mjs
@@ -737,9 +737,10 @@ export default dedupePlugins( [
 		},
 	},
 
-	// Override: UI package — disable dependency-group.
+	// Override: Packages which have eliminated dependency grouping comments
+	// and explicitly prevent new additions.
 	{
-		files: [ 'packages/ui/src/**' ],
+		files: [ 'packages/ui/**', 'packages/design-system-mcp/**' ],
 		rules: {
 			'@wordpress/dependency-group': [ 'error', 'never' ],
 		},

diff --git a/package-lock.json b/package-lock.json
@@ -10,6 +10,7 @@ import BaseControl, { useBaseControlProps } from '..';
 import Button from '../../button';
 
 const meta: Meta< typeof BaseControl > = {
+	tags: [ 'manifest' ],
 	title: 'Components/Selection & Input/Common/BaseControl',
 	id: 'components-basecontrol',
 	component: BaseControl,

@@ -21,6 +21,7 @@ import {
 import Button from '..';
 
 const meta: Meta< typeof Button > = {
+	tags: [ 'manifest' ],
 	title: 'Components/Actions/Button',
 	id: 'components-button',
 	component: Button,

@@ -16,6 +16,7 @@ import { VStack } from '../../v-stack';
 import { HStack } from '../../h-stack';
 
 const meta: Meta< typeof CheckboxControl > = {
+	tags: [ 'manifest' ],
 	component: CheckboxControl,
 	title: 'Components/Selection & Input/Common/CheckboxControl',
 	id: 'components-checkboxcontrol',

@@ -9,6 +9,7 @@ import type { Meta, StoryFn } from '@storybook/react-vite';
 import ColorIndicator from '..';
 
 const meta: Meta< typeof ColorIndicator > = {
+	tags: [ 'manifest' ],
 	component: ColorIndicator,
 	title: 'Components/Selection & Input/Color/ColorIndicator',
 	id: 'components-colorindicator',

@@ -14,6 +14,7 @@ import { useState } from '@wordpress/element';
 import ColorPalette from '..';
 
 const meta: Meta< typeof ColorPalette > = {
+	tags: [ 'manifest' ],
 	title: 'Components/Selection & Input/Color/ColorPalette',
 	id: 'components-colorpalette',
 	component: ColorPalette,

@@ -10,6 +10,7 @@ import { fn } from 'storybook/test';
 import { ColorPicker } from '../component';
 
 const meta: Meta< typeof ColorPicker > = {
+	tags: [ 'manifest' ],
 	component: ColorPicker,
 	title: 'Components/Selection & Input/Color/ColorPicker',
 	id: 'components-colorpicker',

@@ -35,6 +35,7 @@ const countries = [
 ];
 
 const meta: Meta< typeof ComboboxControl > = {
+	tags: [ 'manifest' ],
 	title: 'Components/Selection & Input/Common/ComboboxControl',
 	id: 'components-comboboxcontrol',
 	component: ComboboxControl,

@@ -16,6 +16,7 @@ import { Composite } from '..';
 import { Tooltip } from '../../tooltip';
 
 const meta: Meta< typeof Composite > = {
+	tags: [ 'manifest' ],
 	title: 'Components/Utilities/Composite',
 	id: 'components-composite',
 	component: Composite,

@@ -24,7 +24,7 @@ const meta: Meta< typeof ConfirmDialog > = {
 			control: false,
 		},
 	},
-	tags: [ 'status-experimental' ],
+	tags: [ 'status-experimental', 'manifest' ],
 	args: {
 		onCancel: fn(),
 		onConfirm: fn(),

@@ -15,6 +15,7 @@ import { useState } from '@wordpress/element';
 import CustomSelectControl from '..';
 
 const meta: Meta< typeof CustomSelectControl > = {
+	tags: [ 'manifest' ],
 	title: 'Components/Selection & Input/Common/CustomSelectControl',
 	component: CustomSelectControl,
 	id: 'components-customselectcontrol',

@@ -18,6 +18,7 @@ import TextareaControl from '../../textarea-control/';
 import { VStack } from '../../v-stack/';
 
 const meta: Meta< typeof Disabled > = {
+	tags: [ 'manifest' ],
 	title: 'Components/Utilities/Disabled',
 	id: 'components-disabled',
 	component: Disabled,

@@ -17,6 +17,7 @@ import DropZone from '..';
 const ICONS = { upload, media };
 
 const meta: Meta< typeof DropZone > = {
+	tags: [ 'manifest' ],
 	component: DropZone,
 	id: 'components-dropzone',
 	title: 'Components/Selection & Input/File Upload/DropZone',

@@ -14,6 +14,7 @@ import MenuItem from '../../menu-item';
 import { DropdownContentWrapper } from '../dropdown-content-wrapper';
 
 const meta: Meta< typeof Dropdown > = {
+	tags: [ 'manifest' ],
 	title: 'Components/Overlays/Dropdown',
 	id: 'components-dropdown',
 	component: Dropdown,

@@ -9,6 +9,7 @@ import type { Meta, StoryFn } from '@storybook/react-vite';
 import ExternalLink from '..';
 
 const meta: Meta< typeof ExternalLink > = {
+	tags: [ 'manifest' ],
 	component: ExternalLink,
 	title: 'Components/Navigation/ExternalLink',
 	id: 'components-externallink',

@@ -14,6 +14,7 @@ import { upload as uploadIcon } from '@wordpress/icons';
 import FormFileUpload from '..';
 
 const meta: Meta< typeof FormFileUpload > = {
+	tags: [ 'manifest' ],
 	title: 'Components/Selection & Input/File Upload/FormFileUpload',
 	id: 'components-formfileupload',
 	component: FormFileUpload,

@@ -14,6 +14,7 @@ import { useState } from '@wordpress/element';
 import FormToggle from '..';
 
 const meta: Meta< typeof FormToggle > = {
+	tags: [ 'manifest' ],
 	component: FormToggle,
 	title: 'Components/FormToggle',
 	argTypes: {

@@ -14,6 +14,7 @@ import { useState } from '@wordpress/element';
 import FormTokenField from '../';
 
 const meta: Meta< typeof FormTokenField > = {
+	tags: [ 'manifest' ],
 	component: FormTokenField,
 	title: 'Components/Selection & Input/Common/FormTokenField',
 	id: 'components-formtokenfield',

@@ -15,6 +15,7 @@ import { useState } from '@wordpress/element';
 import GradientPicker from '..';
 
 const meta: Meta< typeof GradientPicker > = {
+	tags: [ 'manifest' ],
 	title: 'Components/Selection & Input/Color/GradientPicker',
 	id: 'components-gradientpicker',
 	component: GradientPicker,

@@ -16,6 +16,7 @@ import Icon from '..';
 import { VStack } from '../../v-stack';
 
 const meta: Meta< typeof Icon > = {
+	tags: [ 'manifest' ],
 	title: 'Components/Icon',
 	component: Icon,
 	parameters: {

@@ -31,7 +31,7 @@ const meta: Meta< typeof InputControl > = {
 		type: { control: { type: 'text' } },
 		value: { control: { disable: true } },
 	},
-	tags: [ 'status-experimental' ],
+	tags: [ 'status-experimental', 'manifest' ],
 	args: {
 		onChange: fn(),
 		onValidate: fn(),

@@ -19,7 +19,7 @@ const meta: Meta< typeof ItemGroup > = {
 		as: { control: false },
 		children: { control: false },
 	},
-	tags: [ 'status-experimental' ],
+	tags: [ 'status-experimental', 'manifest' ],
 	parameters: {
 		controls: { expanded: true },
 		docs: { canvas: { sourceState: 'shown' } },

@@ -9,6 +9,7 @@ import type { Meta, StoryFn } from '@storybook/react-vite';
 import KeyboardShortcuts from '..';
 
 const meta: Meta< typeof KeyboardShortcuts > = {
+	tags: [ 'manifest' ],
 	component: KeyboardShortcuts,
 	title: 'Components/Utilities/KeyboardShortcuts',
 	id: 'components-keyboardshortcuts',

@@ -16,6 +16,7 @@ import MenuItem from '../../menu-item';
 import MenuItemsChoice from '../../menu-items-choice';
 
 const meta: Meta< typeof MenuGroup > = {
+	tags: [ 'manifest' ],
 	title: 'Components/Actions/MenuGroup',
 	component: MenuGroup,
 	id: 'components-menugroup',

@@ -16,6 +16,7 @@ import MenuItem from '..';
 import Shortcut from '../../shortcut';
 
 const meta: Meta< typeof MenuItem > = {
+	tags: [ 'manifest' ],
 	component: MenuItem,
 	title: 'Components/Actions/MenuItem',
 	id: 'components-menuitem',

@@ -15,6 +15,7 @@ import MenuItemsChoice from '..';
 import MenuGroup from '../../menu-group';
 
 const meta: Meta< typeof MenuItemsChoice > = {
+	tags: [ 'manifest' ],
 	component: MenuItemsChoice,
 	title: 'Components/Actions/MenuItemsChoice',
 	id: 'components-menuitemschoice',

@@ -18,6 +18,7 @@ import Modal from '../';
 import type { ModalProps } from '../types';
 
 const meta: Meta< typeof Modal > = {
+	tags: [ 'manifest' ],
 	component: Modal,
 	title: 'Components/Overlays/Modal',
 	id: 'components-modal',

@@ -12,6 +12,7 @@ import { HStack } from '../../h-stack';
 import { Navigator, useNavigator } from '../';
 
 const meta: Meta< typeof Navigator > = {
+	tags: [ 'manifest' ],
 	component: Navigator,
 	subcomponents: {
 		Screen: Navigator.Screen,

@@ -18,6 +18,7 @@ import NoticeList from '../list';
 import type { NoticeListProps } from '../types';
 
 const meta: Meta< typeof Notice > = {
+	tags: [ 'manifest' ],
 	title: 'Components/Feedback/Notice',
 	id: 'components-notice',
 	component: Notice,

@@ -25,7 +25,7 @@ const meta: Meta< typeof NumberControl > = {
 		type: { control: { type: 'text' } },
 		value: { control: false },
 	},
-	tags: [ 'status-experimental' ],
+	tags: [ 'status-experimental', 'manifest' ],
 	parameters: {
 		controls: { expanded: true },
 		docs: { canvas: { sourceState: 'shown' } },

@@ -17,6 +17,7 @@ import PanelBody from '../body';
 import InputControl from '../../input-control';
 
 const meta: Meta< typeof Panel > = {
+	tags: [ 'manifest' ],
 	title: 'Components/Containers/Panel',
 	id: 'components-panel',
 	component: Panel,

@@ -33,6 +33,7 @@ const AVAILABLE_PLACEMENTS: PopoverProps[ 'placement' ][] = [
 ];
 
 const meta: Meta< typeof Popover > = {
+	tags: [ 'manifest' ],
 	title: 'Components/Overlays/Popover',
 	id: 'components-popover',
 	component: Popover,

@@ -9,6 +9,7 @@ import type { Meta, StoryFn } from '@storybook/react-vite';
 import { ProgressBar } from '..';
 
 const meta: Meta< typeof ProgressBar > = {
+	tags: [ 'manifest' ],
 	component: ProgressBar,
 	title: 'Components/Feedback/ProgressBar',
 	id: 'components-progressbar',

@@ -14,6 +14,7 @@ import { useState } from '@wordpress/element';
 import RadioControl from '..';
 
 const meta: Meta< typeof RadioControl > = {
+	tags: [ 'manifest' ],
 	component: RadioControl,
 	title: 'Components/Selection & Input/Common/RadioControl',
 	id: 'components-radiocontrol',