@atlaskit/ads-mcp 0.1.8 → 0.2.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/ads-mcp
 
+## 0.2.0
+
+### Minor Changes
+
+- [#172423](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/172423)
+  [`ec1b840853a1d`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/ec1b840853a1d) -
+  Adds contentGuidelines to multiple component details responses.
+
+## 0.1.9
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 0.1.8
 
 ### Patch Changes

package/README.md

@@ -13,29 +13,30 @@ Add an entry to your `mcp.json` (eg. `~/.cursor/mcp.json` or wherever your MCP c
 
 ```json
 {
-  "mcpServers": {
-    "ads": {
-      "command": "npx",
-      "args": ["-y", "@atlaskit/ads-mcp"]
-    }
-  }
+	"mcpServers": {
+		"ads": {
+			"command": "npx",
+			"args": ["-y", "@atlaskit/ads-mcp"]
+		}
+	}
 }
 ```
 
 ## Development
 
-You may automatically be served the local version of `@atlaskit/ads-mcp` depending on where you're running it from, but you should force it like so:
+You may automatically be served the local version of `@atlaskit/ads-mcp` depending on where you're
+running it from, but you should force it like so:
 
 ```json
 {
-  "mcpServers": {
-    "ads": {
-      "command": "npx",
-      "args": [
-        "-y",
-        "~/git/atlassian/atlassian-frontend-monorepo/platform/packages/design-system/ads-mcp"
-      ]
-    }
-  }
+	"mcpServers": {
+		"ads": {
+			"command": "npx",
+			"args": [
+				"-y",
+				"~/git/atlassian/atlassian-frontend-monorepo/platform/packages/design-system/ads-mcp"
+			]
+		}
+	}
 }
 ```

package/dist/cjs/tools/get-components/components.js

@@ -11,6 +11,7 @@ var components = exports.components = [{
   releasePhase: 'general_availability',
   category: 'Forms and Input',
   example: "import Button from '@atlaskit/button/new';\nimport CopyIcon from '@atlaskit/icon/core/copy';\nimport AddIcon from '@atlaskit/icon/core/add';\n\n<Button appearance=\"success\" iconAfter={AddIcon}>Create</Button>\n<Button appearance=\"primary\" iconBefore={CopyIcon}>Copy text</Button>",
+  contentGuidelines: ['Use action verbs that describe the interaction', 'Keep text concise (1-3 words ideal)', 'Avoid generic terms like "Submit" or "Click here"', 'Use sentence case', 'Use buttons for actions, links for navigation', 'Only include one primary call to action (CTA) per area', "Start with the verb and specify what's being acted on", "Don't use punctuation in button labels"],
   props: [{
     name: 'appearance',
     description: 'Visual style of the button',
@@ -357,6 +358,7 @@ var components = exports.components = [{
   releasePhase: 'general_availability',
   category: 'Forms and Input',
   example: "import Form, { Field, FormFooter, FormHeader, FormSection, HelperMessage, ErrorMessage } from '@atlaskit/form';\nimport Button from '@atlaskit/button/new';\nimport TextField from '@atlaskit/textfield';\nimport { Checkbox } from '@atlaskit/checkbox';\n\n// Basic form with validation\n<Form onSubmit={data => console.log('form data', data)}>\n\t{({ formProps }) => (\n\t\t<form {...formProps}>\n\t\t\t<FormHeader title=\"Sign in\">\n\t\t\t\t<p>Required fields are marked with an asterisk *</p>\n\t\t\t</FormHeader>\n\n\t\t\t<FormSection>\n\t\t\t\t<Field name=\"username\" label=\"Username\" isRequired>\n\t\t\t\t\t{({ fieldProps, error }) => (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t<TextField autoComplete=\"username\" {...fieldProps} />\n\t\t\t\t\t\t\t{!error && <HelperMessage>You can use letters, numbers & periods.</HelperMessage>}\n\t\t\t\t\t\t\t{error && <ErrorMessage>This username is already in use.</ErrorMessage>}\n\t\t\t\t\t\t</>\n\t\t\t\t\t)}\n\t\t\t\t</Field>\n\n\t\t\t\t<Field\n\t\t\t\t\tname=\"password\"\n\t\t\t\t\tlabel=\"Password\"\n\t\t\t\t\tisRequired\n\t\t\t\t\tvalidate={value => (value && value.length < 8 ? 'TOO_SHORT' : undefined)}\n\t\t\t\t>\n\t\t\t\t\t{({ fieldProps, error, valid }) => (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t<TextField type=\"password\" {...fieldProps} />\n\t\t\t\t\t\t\t{!error && !valid && (\n\t\t\t\t\t\t\t\t<HelperMessage>\n\t\t\t\t\t\t\t\t\tUse 8 or more characters with letters, numbers & symbols.\n\t\t\t\t\t\t\t\t</HelperMessage>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t{error && <ErrorMessage>Password must be at least 8 characters.</ErrorMessage>}\n\t\t\t\t\t\t</>\n\t\t\t\t\t)}\n\t\t\t\t</Field>\n\n\t\t\t\t<Field name=\"remember\" defaultValue={false}>\n\t\t\t\t\t{({ fieldProps }) => (\n\t\t\t\t\t\t<Checkbox {...fieldProps} label=\"Remember me\" />\n\t\t\t\t\t)}\n\t\t\t\t</Field>\n\t\t\t</FormSection>\n\n\t\t\t<FormFooter>\n\t\t\t\t<Button type=\"submit\" appearance=\"primary\">Sign in</Button>\n\t\t\t</FormFooter>\n\t\t</form>\n\t)}\n</Form>",
+  contentGuidelines: ['Use clear, concise labels', 'Write helpful placeholder text', 'Provide specific error messages', 'Use consistent terminology', 'Use single column layout for better comprehension', 'Mark required fields with an asterisk (*)', 'Always include a visible label (exception: search fields)', 'Match field length to intended content length'],
   props: [{
     name: 'onSubmit',
     description: 'Callback when the form is submitted with valid data',
@@ -657,6 +659,8 @@ var components = exports.components = [{
   releasePhase: 'general_availability',
   category: 'Messaging',
   example: "import Banner from '@atlaskit/banner';\n\n<Banner\n\tappearance=\"announcement\"\n\tisOpen={true}\n\ticon={<Icon />}\n>\n\tImportant announcement\n</Banner>",
+  contentGuidelines: ['Reserved for critical system-level messaging', 'Use for warnings about data/functionality loss'],
+  usageGuidelines: ['This should appear at the top of the screen'],
   props: [{
     name: 'appearance',
     description: 'Visual style of the banner',
@@ -681,6 +685,8 @@ var components = exports.components = [{
   releasePhase: 'general_availability',
   category: 'Messaging',
   example: "import Flag, { FlagGroup } from '@atlaskit/flag';\n\n<FlagGroup>\n\t<Flag\n\t\tid=\"flag-1\"\n\t\ticon={<Icon label=\"Info\" />}\n\t\ttitle=\"Flag Title\"\n\t\tdescription=\"Flag description\"\n\t\tactions={[\n\t\t\t{\n\t\t\t\tcontent: 'Action',\n\t\t\t\tonClick: () => {},\n\t\t\t\ttestId: 'action-test'\n\t\t\t}\n\t\t]}\n\t\tappearance=\"normal\"\n\t\ttestId=\"flag-test\"\n\t/>\n</FlagGroup>",
+  contentGuidelines: ['Use for confirmations and alerts needing minimal interaction', 'Display event-driven messages', 'Be clear about what went wrong for errors', 'Provide specific steps to resolve issues', 'Use a helpful, non-threatening tone', 'Clearly state potential consequences for warnings', 'Confirm outcome then get out of the way for success messages'],
+  usageGuidelines: ['This should appear at the bottom left of the screen, emerging from the navigation sidebar'],
   props: [{
     name: 'id',
     description: 'A unique identifier used for rendering and onDismissed callbacks',
@@ -713,6 +719,7 @@ var components = exports.components = [{
   releasePhase: 'general_availability',
   category: 'Messaging',
   example: "import InlineMessage from '@atlaskit/inline-message';\n\n<InlineMessage\n  title=\"Inline Message Title\"\n  secondaryText=\"Secondary text\"\n  appearance=\"info\"\n  testId=\"inline-message-test\"\n>\n  <p>Content that appears in the dialog when opened</p>\n</InlineMessage>",
+  contentGuidelines: ['Alerts for required actions or important information', 'Includes icon, message, and optional secondary text', 'Interactive elements reveal full message'],
   props: [{
     name: 'title',
     description: 'Text to display first, bolded for emphasis',
@@ -737,6 +744,7 @@ var components = exports.components = [{
   releasePhase: 'general_availability',
   category: 'Messaging',
   example: "import { Spotlight } from '@atlaskit/onboarding';\n\n<Spotlight\n  target=\"target-element\"\n  content=\"Feature description\"\n/>",
+  contentGuidelines: ['Introduces features through focused messages or tours', 'Flexible layout options', 'Used for feature discovery and guidance', 'Keep messages to two lines in length', 'Focus on single changes and their benefits', 'Avoid just naming functions', 'Write in sentence case', 'Include clear call-to-action', 'Communicate main benefit to user in headings', 'Keep headings to a few words', 'Personalize where possible', 'Include benefits and importance to the user', 'Put important keywords at start of sentence', 'Only reference UI elements visible on screen', 'Use "Next" for step progression', 'Use "OK" for final step or closing action', 'Always offer way to opt out', 'Show one spotlight at a time', 'Keep tours to 3-4 steps maximum', 'Sequence tasks logically', 'Drive content by user benefits and value', 'Be thoughtful of user context and state', 'Focus on key benefits and quick wins for new users', 'Highlight value before mechanics for feature introduction'],
   props: [{
     name: 'target',
     description: 'Target element ID',
@@ -757,6 +765,7 @@ var components = exports.components = [{
   releasePhase: 'general_availability',
   category: 'Messaging',
   example: "import SectionMessage from '@atlaskit/section-message';\n\n<SectionMessage\n  appearance=\"information\"\n  title=\"Section Message Title\"\n  testId=\"section-message-test\"\n>\n  <p>Section message content</p>\n  <SectionMessage.Actions>\n    <SectionMessage.Action href=\"#\">Action</SectionMessage.Action>\n  </SectionMessage.Actions>\n</SectionMessage>",
+  contentGuidelines: ['Alerts about section-specific events', 'Appears above affected area', 'Used for contextual information'],
   props: [{
     name: 'appearance',
     description: 'The appearance styling to use for the section message',
@@ -981,6 +990,7 @@ var components = exports.components = [{
   releasePhase: 'general_availability',
   category: 'Overlays and Layering',
   example: "import Tooltip from '@atlaskit/tooltip';\n\n<Tooltip content=\"Tooltip content\">\n  <button>Hover me</button>\n</Tooltip>",
+  contentGuidelines: ['Keep it brief (ideally 1-3 words, max 8 words)', 'Use sentence case', 'No punctuation at the end', 'Use clear, direct language', 'Avoid technical jargon', 'Never include links or interactive elements', "Don't truncate tooltip text"],
   props: [{
     name: 'content',
     description: 'Tooltip content',
@@ -1025,6 +1035,8 @@ var components = exports.components = [{
   releasePhase: 'general_availability',
   category: 'Status Indicators',
   example: "import EmptyState from '@atlaskit/empty-state';\n\n<EmptyState\n  header=\"No items\"\n  description=\"Add items to get started\"\n/>",
+  contentGuidelines: ['Use when nothing to display in a view', 'Appropriate for: no tasks, cleared inbox, no search results', 'Explain why the state is empty', 'Provide clear next steps', 'Keep tone helpful and encouraging', 'Consider all scenarios causing the empty state', 'Use inspirational, motivating tone for first-time view'],
+  usageGuidelines: ['Can appear full-screen or within containers'],
   props: [{
     name: 'header',
     description: 'Empty state header',
@@ -1653,6 +1665,7 @@ var components = exports.components = [{
   releasePhase: 'general_availability',
   category: 'Messaging',
   example: "import React, { Fragment, useCallback, useState } from 'react';\nimport Button from '@atlaskit/button/new';\nimport Modal, {\n\tModalBody,\n\tModalFooter,\n\tModalHeader,\n\tModalTitle,\n\tModalTransition,\n} from '@atlaskit/modal-dialog';\n\nexport default function Example() {\n\tconst [isOpen, setIsOpen] = useState(false);\n\tconst openModal = useCallback(() => setIsOpen(true), []);\n\tconst closeModal = useCallback(() => setIsOpen(false), []);\n\n\treturn (\n\t\t<Fragment>\n\t\t\t<Button aria-haspopup=\"dialog\" appearance=\"primary\" onClick={openModal}>\n\t\t\t\tOpen modal\n\t\t\t</Button>\n\n\t\t\t<ModalTransition>\n\t\t\t\t{isOpen && (\n\t\t\t\t\t<Modal onClose={closeModal}>\n\t\t\t\t\t\t<ModalHeader hasCloseButton>\n\t\t\t\t\t\t\t<ModalTitle>Default modal header</ModalTitle>\n\t\t\t\t\t\t</ModalHeader>\n\t\t\t\t\t\t<ModalBody>\n\t\t\t\t\t\t\tYour modal content.\n\t\t\t\t\t\t</ModalBody>\n\t\t\t\t\t\t<ModalFooter>\n\t\t\t\t\t\t\t<Button appearance=\"subtle\">About modals</Button>\n\t\t\t\t\t\t\t<Button appearance=\"primary\" onClick={closeModal}>\n\t\t\t\t\t\t\t\tClose\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t</ModalFooter>\n\t\t\t\t\t</Modal>\n\t\t\t\t)}\n\t\t\t</ModalTransition>\n\t\t</Fragment>\n\t);\n}",
+  contentGuidelines: ['Present short-term tasks', 'Displays content above page layer', 'Used for focused interactions', 'Use clear, descriptive titles', 'Keep content focused on a single task or message', 'Include clear action buttons', 'Use sentence case for all text'],
   props: [{
     name: 'autoFocus',
     description: 'Focus is moved to the first interactive element or specified element',

package/dist/es2019/tools/get-components/components.js

@@ -10,6 +10,7 @@ import AddIcon from '@atlaskit/icon/core/add';
 
 <Button appearance="success" iconAfter={AddIcon}>Create</Button>
 <Button appearance="primary" iconBefore={CopyIcon}>Copy text</Button>`,
+  contentGuidelines: ['Use action verbs that describe the interaction', 'Keep text concise (1-3 words ideal)', 'Avoid generic terms like "Submit" or "Click here"', 'Use sentence case', 'Use buttons for actions, links for navigation', 'Only include one primary call to action (CTA) per area', "Start with the verb and specify what's being acted on", "Don't use punctuation in button labels"],
   props: [{
     name: 'appearance',
     description: 'Visual style of the button',
@@ -764,6 +765,7 @@ import { Checkbox } from '@atlaskit/checkbox';
 		</form>
 	)}
 </Form>`,
+  contentGuidelines: ['Use clear, concise labels', 'Write helpful placeholder text', 'Provide specific error messages', 'Use consistent terminology', 'Use single column layout for better comprehension', 'Mark required fields with an asterisk (*)', 'Always include a visible label (exception: search fields)', 'Match field length to intended content length'],
   props: [{
     name: 'onSubmit',
     description: 'Callback when the form is submitted with valid data',
@@ -1159,6 +1161,8 @@ import CommentIcon from '@atlaskit/icon/core/comment';
 >
 	Important announcement
 </Banner>`,
+  contentGuidelines: ['Reserved for critical system-level messaging', 'Use for warnings about data/functionality loss'],
+  usageGuidelines: ['This should appear at the top of the screen'],
   props: [{
     name: 'appearance',
     description: 'Visual style of the banner',
@@ -1201,6 +1205,8 @@ import CommentIcon from '@atlaskit/icon/core/comment';
 		testId="flag-test"
 	/>
 </FlagGroup>`,
+  contentGuidelines: ['Use for confirmations and alerts needing minimal interaction', 'Display event-driven messages', 'Be clear about what went wrong for errors', 'Provide specific steps to resolve issues', 'Use a helpful, non-threatening tone', 'Clearly state potential consequences for warnings', 'Confirm outcome then get out of the way for success messages'],
+  usageGuidelines: ['This should appear at the bottom left of the screen, emerging from the navigation sidebar'],
   props: [{
     name: 'id',
     description: 'A unique identifier used for rendering and onDismissed callbacks',
@@ -1242,6 +1248,7 @@ import CommentIcon from '@atlaskit/icon/core/comment';
 >
   <p>Content that appears in the dialog when opened</p>
 </InlineMessage>`,
+  contentGuidelines: ['Alerts for required actions or important information', 'Includes icon, message, and optional secondary text', 'Interactive elements reveal full message'],
   props: [{
     name: 'title',
     description: 'Text to display first, bolded for emphasis',
@@ -1271,6 +1278,7 @@ import CommentIcon from '@atlaskit/icon/core/comment';
   target="target-element"
   content="Feature description"
 />`,
+  contentGuidelines: ['Introduces features through focused messages or tours', 'Flexible layout options', 'Used for feature discovery and guidance', 'Keep messages to two lines in length', 'Focus on single changes and their benefits', 'Avoid just naming functions', 'Write in sentence case', 'Include clear call-to-action', 'Communicate main benefit to user in headings', 'Keep headings to a few words', 'Personalize where possible', 'Include benefits and importance to the user', 'Put important keywords at start of sentence', 'Only reference UI elements visible on screen', 'Use "Next" for step progression', 'Use "OK" for final step or closing action', 'Always offer way to opt out', 'Show one spotlight at a time', 'Keep tours to 3-4 steps maximum', 'Sequence tasks logically', 'Drive content by user benefits and value', 'Be thoughtful of user context and state', 'Focus on key benefits and quick wins for new users', 'Highlight value before mechanics for feature introduction'],
   props: [{
     name: 'target',
     description: 'Target element ID',
@@ -1302,6 +1310,7 @@ import CommentIcon from '@atlaskit/icon/core/comment';
     <SectionMessage.Action href="#">Action</SectionMessage.Action>
   </SectionMessage.Actions>
 </SectionMessage>`,
+  contentGuidelines: ['Alerts about section-specific events', 'Appears above affected area', 'Used for contextual information'],
   props: [{
     name: 'appearance',
     description: 'The appearance styling to use for the section message',
@@ -1616,6 +1625,7 @@ import { Help, NavLogo } from '@atlassian/navigation-system/top-nav-items';
 <Tooltip content="Tooltip content">
   <button>Hover me</button>
 </Tooltip>`,
+  contentGuidelines: ['Keep it brief (ideally 1-3 words, max 8 words)', 'Use sentence case', 'No punctuation at the end', 'Use clear, direct language', 'Avoid technical jargon', 'Never include links or interactive elements', "Don't truncate tooltip text"],
   props: [{
     name: 'content',
     description: 'Tooltip content',
@@ -1671,6 +1681,8 @@ import { Help, NavLogo } from '@atlassian/navigation-system/top-nav-items';
   header="No items"
   description="Add items to get started"
 />`,
+  contentGuidelines: ['Use when nothing to display in a view', 'Appropriate for: no tasks, cleared inbox, no search results', 'Explain why the state is empty', 'Provide clear next steps', 'Keep tone helpful and encouraging', 'Consider all scenarios causing the empty state', 'Use inspirational, motivating tone for first-time view'],
+  usageGuidelines: ['Can appear full-screen or within containers'],
   props: [{
     name: 'header',
     description: 'Empty state header',
@@ -2457,6 +2469,7 @@ export default function Example() {
 		</Fragment>
 	);
 }`,
+  contentGuidelines: ['Present short-term tasks', 'Displays content above page layer', 'Used for focused interactions', 'Use clear, descriptive titles', 'Keep content focused on a single task or message', 'Include clear action buttons', 'Use sentence case for all text'],
   props: [{
     name: 'autoFocus',
     description: 'Focus is moved to the first interactive element or specified element',

package/dist/esm/tools/get-components/components.js

@@ -5,6 +5,7 @@ export var components = [{
   releasePhase: 'general_availability',
   category: 'Forms and Input',
   example: "import Button from '@atlaskit/button/new';\nimport CopyIcon from '@atlaskit/icon/core/copy';\nimport AddIcon from '@atlaskit/icon/core/add';\n\n<Button appearance=\"success\" iconAfter={AddIcon}>Create</Button>\n<Button appearance=\"primary\" iconBefore={CopyIcon}>Copy text</Button>",
+  contentGuidelines: ['Use action verbs that describe the interaction', 'Keep text concise (1-3 words ideal)', 'Avoid generic terms like "Submit" or "Click here"', 'Use sentence case', 'Use buttons for actions, links for navigation', 'Only include one primary call to action (CTA) per area', "Start with the verb and specify what's being acted on", "Don't use punctuation in button labels"],
   props: [{
     name: 'appearance',
     description: 'Visual style of the button',
@@ -351,6 +352,7 @@ export var components = [{
   releasePhase: 'general_availability',
   category: 'Forms and Input',
   example: "import Form, { Field, FormFooter, FormHeader, FormSection, HelperMessage, ErrorMessage } from '@atlaskit/form';\nimport Button from '@atlaskit/button/new';\nimport TextField from '@atlaskit/textfield';\nimport { Checkbox } from '@atlaskit/checkbox';\n\n// Basic form with validation\n<Form onSubmit={data => console.log('form data', data)}>\n\t{({ formProps }) => (\n\t\t<form {...formProps}>\n\t\t\t<FormHeader title=\"Sign in\">\n\t\t\t\t<p>Required fields are marked with an asterisk *</p>\n\t\t\t</FormHeader>\n\n\t\t\t<FormSection>\n\t\t\t\t<Field name=\"username\" label=\"Username\" isRequired>\n\t\t\t\t\t{({ fieldProps, error }) => (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t<TextField autoComplete=\"username\" {...fieldProps} />\n\t\t\t\t\t\t\t{!error && <HelperMessage>You can use letters, numbers & periods.</HelperMessage>}\n\t\t\t\t\t\t\t{error && <ErrorMessage>This username is already in use.</ErrorMessage>}\n\t\t\t\t\t\t</>\n\t\t\t\t\t)}\n\t\t\t\t</Field>\n\n\t\t\t\t<Field\n\t\t\t\t\tname=\"password\"\n\t\t\t\t\tlabel=\"Password\"\n\t\t\t\t\tisRequired\n\t\t\t\t\tvalidate={value => (value && value.length < 8 ? 'TOO_SHORT' : undefined)}\n\t\t\t\t>\n\t\t\t\t\t{({ fieldProps, error, valid }) => (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t<TextField type=\"password\" {...fieldProps} />\n\t\t\t\t\t\t\t{!error && !valid && (\n\t\t\t\t\t\t\t\t<HelperMessage>\n\t\t\t\t\t\t\t\t\tUse 8 or more characters with letters, numbers & symbols.\n\t\t\t\t\t\t\t\t</HelperMessage>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t{error && <ErrorMessage>Password must be at least 8 characters.</ErrorMessage>}\n\t\t\t\t\t\t</>\n\t\t\t\t\t)}\n\t\t\t\t</Field>\n\n\t\t\t\t<Field name=\"remember\" defaultValue={false}>\n\t\t\t\t\t{({ fieldProps }) => (\n\t\t\t\t\t\t<Checkbox {...fieldProps} label=\"Remember me\" />\n\t\t\t\t\t)}\n\t\t\t\t</Field>\n\t\t\t</FormSection>\n\n\t\t\t<FormFooter>\n\t\t\t\t<Button type=\"submit\" appearance=\"primary\">Sign in</Button>\n\t\t\t</FormFooter>\n\t\t</form>\n\t)}\n</Form>",
+  contentGuidelines: ['Use clear, concise labels', 'Write helpful placeholder text', 'Provide specific error messages', 'Use consistent terminology', 'Use single column layout for better comprehension', 'Mark required fields with an asterisk (*)', 'Always include a visible label (exception: search fields)', 'Match field length to intended content length'],
   props: [{
     name: 'onSubmit',
     description: 'Callback when the form is submitted with valid data',
@@ -651,6 +653,8 @@ export var components = [{
   releasePhase: 'general_availability',
   category: 'Messaging',
   example: "import Banner from '@atlaskit/banner';\n\n<Banner\n\tappearance=\"announcement\"\n\tisOpen={true}\n\ticon={<Icon />}\n>\n\tImportant announcement\n</Banner>",
+  contentGuidelines: ['Reserved for critical system-level messaging', 'Use for warnings about data/functionality loss'],
+  usageGuidelines: ['This should appear at the top of the screen'],
   props: [{
     name: 'appearance',
     description: 'Visual style of the banner',
@@ -675,6 +679,8 @@ export var components = [{
   releasePhase: 'general_availability',
   category: 'Messaging',
   example: "import Flag, { FlagGroup } from '@atlaskit/flag';\n\n<FlagGroup>\n\t<Flag\n\t\tid=\"flag-1\"\n\t\ticon={<Icon label=\"Info\" />}\n\t\ttitle=\"Flag Title\"\n\t\tdescription=\"Flag description\"\n\t\tactions={[\n\t\t\t{\n\t\t\t\tcontent: 'Action',\n\t\t\t\tonClick: () => {},\n\t\t\t\ttestId: 'action-test'\n\t\t\t}\n\t\t]}\n\t\tappearance=\"normal\"\n\t\ttestId=\"flag-test\"\n\t/>\n</FlagGroup>",
+  contentGuidelines: ['Use for confirmations and alerts needing minimal interaction', 'Display event-driven messages', 'Be clear about what went wrong for errors', 'Provide specific steps to resolve issues', 'Use a helpful, non-threatening tone', 'Clearly state potential consequences for warnings', 'Confirm outcome then get out of the way for success messages'],
+  usageGuidelines: ['This should appear at the bottom left of the screen, emerging from the navigation sidebar'],
   props: [{
     name: 'id',
     description: 'A unique identifier used for rendering and onDismissed callbacks',
@@ -707,6 +713,7 @@ export var components = [{
   releasePhase: 'general_availability',
   category: 'Messaging',
   example: "import InlineMessage from '@atlaskit/inline-message';\n\n<InlineMessage\n  title=\"Inline Message Title\"\n  secondaryText=\"Secondary text\"\n  appearance=\"info\"\n  testId=\"inline-message-test\"\n>\n  <p>Content that appears in the dialog when opened</p>\n</InlineMessage>",
+  contentGuidelines: ['Alerts for required actions or important information', 'Includes icon, message, and optional secondary text', 'Interactive elements reveal full message'],
   props: [{
     name: 'title',
     description: 'Text to display first, bolded for emphasis',
@@ -731,6 +738,7 @@ export var components = [{
   releasePhase: 'general_availability',
   category: 'Messaging',
   example: "import { Spotlight } from '@atlaskit/onboarding';\n\n<Spotlight\n  target=\"target-element\"\n  content=\"Feature description\"\n/>",
+  contentGuidelines: ['Introduces features through focused messages or tours', 'Flexible layout options', 'Used for feature discovery and guidance', 'Keep messages to two lines in length', 'Focus on single changes and their benefits', 'Avoid just naming functions', 'Write in sentence case', 'Include clear call-to-action', 'Communicate main benefit to user in headings', 'Keep headings to a few words', 'Personalize where possible', 'Include benefits and importance to the user', 'Put important keywords at start of sentence', 'Only reference UI elements visible on screen', 'Use "Next" for step progression', 'Use "OK" for final step or closing action', 'Always offer way to opt out', 'Show one spotlight at a time', 'Keep tours to 3-4 steps maximum', 'Sequence tasks logically', 'Drive content by user benefits and value', 'Be thoughtful of user context and state', 'Focus on key benefits and quick wins for new users', 'Highlight value before mechanics for feature introduction'],
   props: [{
     name: 'target',
     description: 'Target element ID',
@@ -751,6 +759,7 @@ export var components = [{
   releasePhase: 'general_availability',
   category: 'Messaging',
   example: "import SectionMessage from '@atlaskit/section-message';\n\n<SectionMessage\n  appearance=\"information\"\n  title=\"Section Message Title\"\n  testId=\"section-message-test\"\n>\n  <p>Section message content</p>\n  <SectionMessage.Actions>\n    <SectionMessage.Action href=\"#\">Action</SectionMessage.Action>\n  </SectionMessage.Actions>\n</SectionMessage>",
+  contentGuidelines: ['Alerts about section-specific events', 'Appears above affected area', 'Used for contextual information'],
   props: [{
     name: 'appearance',
     description: 'The appearance styling to use for the section message',
@@ -975,6 +984,7 @@ export var components = [{
   releasePhase: 'general_availability',
   category: 'Overlays and Layering',
   example: "import Tooltip from '@atlaskit/tooltip';\n\n<Tooltip content=\"Tooltip content\">\n  <button>Hover me</button>\n</Tooltip>",
+  contentGuidelines: ['Keep it brief (ideally 1-3 words, max 8 words)', 'Use sentence case', 'No punctuation at the end', 'Use clear, direct language', 'Avoid technical jargon', 'Never include links or interactive elements', "Don't truncate tooltip text"],
   props: [{
     name: 'content',
     description: 'Tooltip content',
@@ -1019,6 +1029,8 @@ export var components = [{
   releasePhase: 'general_availability',
   category: 'Status Indicators',
   example: "import EmptyState from '@atlaskit/empty-state';\n\n<EmptyState\n  header=\"No items\"\n  description=\"Add items to get started\"\n/>",
+  contentGuidelines: ['Use when nothing to display in a view', 'Appropriate for: no tasks, cleared inbox, no search results', 'Explain why the state is empty', 'Provide clear next steps', 'Keep tone helpful and encouraging', 'Consider all scenarios causing the empty state', 'Use inspirational, motivating tone for first-time view'],
+  usageGuidelines: ['Can appear full-screen or within containers'],
   props: [{
     name: 'header',
     description: 'Empty state header',
@@ -1647,6 +1659,7 @@ export var components = [{
   releasePhase: 'general_availability',
   category: 'Messaging',
   example: "import React, { Fragment, useCallback, useState } from 'react';\nimport Button from '@atlaskit/button/new';\nimport Modal, {\n\tModalBody,\n\tModalFooter,\n\tModalHeader,\n\tModalTitle,\n\tModalTransition,\n} from '@atlaskit/modal-dialog';\n\nexport default function Example() {\n\tconst [isOpen, setIsOpen] = useState(false);\n\tconst openModal = useCallback(() => setIsOpen(true), []);\n\tconst closeModal = useCallback(() => setIsOpen(false), []);\n\n\treturn (\n\t\t<Fragment>\n\t\t\t<Button aria-haspopup=\"dialog\" appearance=\"primary\" onClick={openModal}>\n\t\t\t\tOpen modal\n\t\t\t</Button>\n\n\t\t\t<ModalTransition>\n\t\t\t\t{isOpen && (\n\t\t\t\t\t<Modal onClose={closeModal}>\n\t\t\t\t\t\t<ModalHeader hasCloseButton>\n\t\t\t\t\t\t\t<ModalTitle>Default modal header</ModalTitle>\n\t\t\t\t\t\t</ModalHeader>\n\t\t\t\t\t\t<ModalBody>\n\t\t\t\t\t\t\tYour modal content.\n\t\t\t\t\t\t</ModalBody>\n\t\t\t\t\t\t<ModalFooter>\n\t\t\t\t\t\t\t<Button appearance=\"subtle\">About modals</Button>\n\t\t\t\t\t\t\t<Button appearance=\"primary\" onClick={closeModal}>\n\t\t\t\t\t\t\t\tClose\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t</ModalFooter>\n\t\t\t\t\t</Modal>\n\t\t\t\t)}\n\t\t\t</ModalTransition>\n\t\t</Fragment>\n\t);\n}",
+  contentGuidelines: ['Present short-term tasks', 'Displays content above page layer', 'Used for focused interactions', 'Use clear, descriptive titles', 'Keep content focused on a single task or message', 'Include clear action buttons', 'Use sentence case for all text'],
   props: [{
     name: 'autoFocus',
     description: 'Focus is moved to the first interactive element or specified element',

package/dist/types/tools/get-components/components.d.ts

@@ -14,6 +14,7 @@ export interface Component {
     example: string;
     accessibilityGuidelines?: string[];
     usageGuidelines?: string[];
+    contentGuidelines?: string[];
     props: Prop[];
 }
 export declare const components: Component[];

package/dist/types-ts4.5/tools/get-components/components.d.ts

@@ -14,6 +14,7 @@ export interface Component {
     example: string;
     accessibilityGuidelines?: string[];
     usageGuidelines?: string[];
+    contentGuidelines?: string[];
     props: Prop[];
 }
 export declare const components: Component[];

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/ads-mcp",
-	"version": "0.1.8",
+	"version": "0.2.0",
 	"description": "The official Atlassian Design System MCP server to develop apps and user interfaces matching the Atlassian style.",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -30,8 +30,8 @@
 		"./package.json": "./package.json"
 	},
 	"dependencies": {
-		"@atlaskit/icon": "^26.4.0",
-		"@atlaskit/tokens": "^5.2.0",
+		"@atlaskit/icon": "^27.0.0",
+		"@atlaskit/tokens": "^5.3.0",
 		"@babel/runtime": "^7.0.0",
 		"@modelcontextprotocol/sdk": "^1.8.0",
 		"zod": "^3.23.8",

package/src/tools/get-components/components.tsx

@@ -16,6 +16,7 @@ export interface Component {
 	example: string;
 	accessibilityGuidelines?: string[];
 	usageGuidelines?: string[];
+	contentGuidelines?: string[];
 	props: Prop[];
 }
 
@@ -32,6 +33,16 @@ import AddIcon from '@atlaskit/icon/core/add';
 
 <Button appearance="success" iconAfter={AddIcon}>Create</Button>
 <Button appearance="primary" iconBefore={CopyIcon}>Copy text</Button>`,
+		contentGuidelines: [
+			'Use action verbs that describe the interaction',
+			'Keep text concise (1-3 words ideal)',
+			'Avoid generic terms like "Submit" or "Click here"',
+			'Use sentence case',
+			'Use buttons for actions, links for navigation',
+			'Only include one primary call to action (CTA) per area',
+			"Start with the verb and specify what's being acted on",
+			"Don't use punctuation in button labels",
+		],
 		props: [
 			{
 				name: 'appearance',
@@ -852,6 +863,16 @@ import { Checkbox } from '@atlaskit/checkbox';
 		</form>
 	)}
 </Form>`,
+		contentGuidelines: [
+			'Use clear, concise labels',
+			'Write helpful placeholder text',
+			'Provide specific error messages',
+			'Use consistent terminology',
+			'Use single column layout for better comprehension',
+			'Mark required fields with an asterisk (*)',
+			'Always include a visible label (exception: search fields)',
+			'Match field length to intended content length',
+		],
 		props: [
 			{
 				name: 'onSubmit',
@@ -1322,6 +1343,11 @@ import CommentIcon from '@atlaskit/icon/core/comment';
 >
 	Important announcement
 </Banner>`,
+		contentGuidelines: [
+			'Reserved for critical system-level messaging',
+			'Use for warnings about data/functionality loss',
+		],
+		usageGuidelines: ['This should appear at the top of the screen'],
 		props: [
 			{
 				name: 'appearance',
@@ -1370,6 +1396,18 @@ import CommentIcon from '@atlaskit/icon/core/comment';
 		testId="flag-test"
 	/>
 </FlagGroup>`,
+		contentGuidelines: [
+			'Use for confirmations and alerts needing minimal interaction',
+			'Display event-driven messages',
+			'Be clear about what went wrong for errors',
+			'Provide specific steps to resolve issues',
+			'Use a helpful, non-threatening tone',
+			'Clearly state potential consequences for warnings',
+			'Confirm outcome then get out of the way for success messages',
+		],
+		usageGuidelines: [
+			'This should appear at the bottom left of the screen, emerging from the navigation sidebar',
+		],
 		props: [
 			{
 				name: 'id',
@@ -1421,6 +1459,11 @@ import CommentIcon from '@atlaskit/icon/core/comment';
 >
   <p>Content that appears in the dialog when opened</p>
 </InlineMessage>`,
+		contentGuidelines: [
+			'Alerts for required actions or important information',
+			'Includes icon, message, and optional secondary text',
+			'Interactive elements reveal full message',
+		],
 		props: [
 			{
 				name: 'title',
@@ -1456,6 +1499,32 @@ import CommentIcon from '@atlaskit/icon/core/comment';
   target="target-element"
   content="Feature description"
 />`,
+		contentGuidelines: [
+			'Introduces features through focused messages or tours',
+			'Flexible layout options',
+			'Used for feature discovery and guidance',
+			'Keep messages to two lines in length',
+			'Focus on single changes and their benefits',
+			'Avoid just naming functions',
+			'Write in sentence case',
+			'Include clear call-to-action',
+			'Communicate main benefit to user in headings',
+			'Keep headings to a few words',
+			'Personalize where possible',
+			'Include benefits and importance to the user',
+			'Put important keywords at start of sentence',
+			'Only reference UI elements visible on screen',
+			'Use "Next" for step progression',
+			'Use "OK" for final step or closing action',
+			'Always offer way to opt out',
+			'Show one spotlight at a time',
+			'Keep tours to 3-4 steps maximum',
+			'Sequence tasks logically',
+			'Drive content by user benefits and value',
+			'Be thoughtful of user context and state',
+			'Focus on key benefits and quick wins for new users',
+			'Highlight value before mechanics for feature introduction',
+		],
 		props: [
 			{
 				name: 'target',
@@ -1492,6 +1561,11 @@ import CommentIcon from '@atlaskit/icon/core/comment';
     <SectionMessage.Action href="#">Action</SectionMessage.Action>
   </SectionMessage.Actions>
 </SectionMessage>`,
+		contentGuidelines: [
+			'Alerts about section-specific events',
+			'Appears above affected area',
+			'Used for contextual information',
+		],
 		props: [
 			{
 				name: 'appearance',
@@ -1864,6 +1938,15 @@ import { Help, NavLogo } from '@atlassian/navigation-system/top-nav-items';
 <Tooltip content="Tooltip content">
   <button>Hover me</button>
 </Tooltip>`,
+		contentGuidelines: [
+			'Keep it brief (ideally 1-3 words, max 8 words)',
+			'Use sentence case',
+			'No punctuation at the end',
+			'Use clear, direct language',
+			'Avoid technical jargon',
+			'Never include links or interactive elements',
+			"Don't truncate tooltip text",
+		],
 		props: [
 			{
 				name: 'content',
@@ -1930,6 +2013,16 @@ import { Help, NavLogo } from '@atlassian/navigation-system/top-nav-items';
   header="No items"
   description="Add items to get started"
 />`,
+		contentGuidelines: [
+			'Use when nothing to display in a view',
+			'Appropriate for: no tasks, cleared inbox, no search results',
+			'Explain why the state is empty',
+			'Provide clear next steps',
+			'Keep tone helpful and encouraging',
+			'Consider all scenarios causing the empty state',
+			'Use inspirational, motivating tone for first-time view',
+		],
+		usageGuidelines: ['Can appear full-screen or within containers'],
 		props: [
 			{
 				name: 'header',
@@ -2887,6 +2980,15 @@ export default function Example() {
 		</Fragment>
 	);
 }`,
+		contentGuidelines: [
+			'Present short-term tasks',
+			'Displays content above page layer',
+			'Used for focused interactions',
+			'Use clear, descriptive titles',
+			'Keep content focused on a single task or message',
+			'Include clear action buttons',
+			'Use sentence case for all text',
+		],
 		props: [
 			{
 				name: 'autoFocus',