@atlaskit/ads-mcp 0.6.0 → 0.6.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +14 -0
- package/README.md +6 -5
- package/dist/cjs/index.js +11 -11
- package/dist/cjs/tools/analyze-accessibility/index.js +2 -2
- package/dist/cjs/tools/get-accessibility-guidelines/index.js +1 -1
- package/dist/cjs/tools/get-all-icons/index.js +2 -2
- package/dist/cjs/tools/get-all-tokens/index.js +2 -2
- package/dist/cjs/tools/get-components/index.js +2 -2
- package/dist/cjs/tools/plan/index.js +2 -2
- package/dist/cjs/tools/search-components/index.js +2 -2
- package/dist/cjs/tools/search-icons/index.js +2 -2
- package/dist/cjs/tools/search-tokens/index.js +2 -2
- package/dist/cjs/tools/suggest-accessibility-fixes/index.js +1 -1
- package/dist/es2019/index.js +11 -11
- package/dist/es2019/tools/analyze-accessibility/index.js +2 -2
- package/dist/es2019/tools/get-accessibility-guidelines/index.js +1 -1
- package/dist/es2019/tools/get-all-icons/index.js +2 -2
- package/dist/es2019/tools/get-all-tokens/index.js +2 -2
- package/dist/es2019/tools/get-components/index.js +2 -2
- package/dist/es2019/tools/plan/index.js +2 -2
- package/dist/es2019/tools/search-components/index.js +2 -2
- package/dist/es2019/tools/search-icons/index.js +3 -3
- package/dist/es2019/tools/search-tokens/index.js +4 -4
- package/dist/es2019/tools/suggest-accessibility-fixes/index.js +1 -1
- package/dist/esm/index.js +11 -11
- package/dist/esm/tools/analyze-accessibility/index.js +2 -2
- package/dist/esm/tools/get-accessibility-guidelines/index.js +1 -1
- package/dist/esm/tools/get-all-icons/index.js +2 -2
- package/dist/esm/tools/get-all-tokens/index.js +2 -2
- package/dist/esm/tools/get-components/index.js +2 -2
- package/dist/esm/tools/plan/index.js +2 -2
- package/dist/esm/tools/search-components/index.js +2 -2
- package/dist/esm/tools/search-icons/index.js +2 -2
- package/dist/esm/tools/search-tokens/index.js +2 -2
- package/dist/esm/tools/suggest-accessibility-fixes/index.js +1 -1
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,19 @@
|
|
|
1
1
|
# @atlaskit/ads-mcp
|
|
2
2
|
|
|
3
|
+
## 0.6.2
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [`28e3bab9e4314`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/28e3bab9e4314) -
|
|
8
|
+
Migrated old shape tokens to new tokens. No visual change.
|
|
9
|
+
|
|
10
|
+
## 0.6.1
|
|
11
|
+
|
|
12
|
+
### Patch Changes
|
|
13
|
+
|
|
14
|
+
- [`5d3c3001f9c72`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/5d3c3001f9c72) -
|
|
15
|
+
Namespacing tools to define clear boundaries in functionality
|
|
16
|
+
|
|
3
17
|
## 0.6.0
|
|
4
18
|
|
|
5
19
|
### Minor Changes
|
package/README.md
CHANGED
|
@@ -18,7 +18,8 @@ to help ensure your interfaces are accessible to all users.
|
|
|
18
18
|
- `search_components` - Search for components by name, description, category, or package name
|
|
19
19
|
- `get_all_icons` - Get all available icons from the design system
|
|
20
20
|
- `search_icons` - Search for specific icons by name, keywords, or categorization
|
|
21
|
-
- `plan` - Search for multiple design system resources (tokens, icons, components) in a single
|
|
21
|
+
- `plan` - Search for multiple design system resources (tokens, icons, components) in a single
|
|
22
|
+
efficient operation
|
|
22
23
|
|
|
23
24
|
#### Design System Tools Usage
|
|
24
25
|
|
|
@@ -43,10 +44,10 @@ const addIcons = await search_icons({
|
|
|
43
44
|
|
|
44
45
|
// Search for multiple resources at once (most efficient for complex UI patterns)
|
|
45
46
|
const designResources = await plan({
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
47
|
+
tokens_search: ['color.text', 'space.100', 'border.radius'],
|
|
48
|
+
icons_search: ['add', 'edit', 'delete'],
|
|
49
|
+
components_search: ['Button', 'TextField', 'Modal'],
|
|
50
|
+
limit: 2,
|
|
50
51
|
});
|
|
51
52
|
|
|
52
53
|
// Get all available items (fallback when search doesn't find what you need)
|
package/dist/cjs/index.js
CHANGED
|
@@ -45,17 +45,17 @@ server.setRequestHandler(_types.ListToolsRequestSchema, /*#__PURE__*/(0, _asyncT
|
|
|
45
45
|
}, _callee);
|
|
46
46
|
})));
|
|
47
47
|
var callTools = {
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
48
|
+
ads_get_all_tokens: _getAllTokens.getAllTokensTool,
|
|
49
|
+
ads_search_tokens: _searchTokens.searchTokensTool,
|
|
50
|
+
ads_get_components: _getComponents.getComponentsTool,
|
|
51
|
+
ads_search_components: _searchComponents.searchComponentsTool,
|
|
52
|
+
ads_get_all_icons: _getAllIcons.getAllIconsTool,
|
|
53
|
+
ads_search_icons: _searchIcons.searchIconsTool,
|
|
54
|
+
ads_plan: _plan.planTool,
|
|
55
|
+
ads_analyze_accessibility: _analyzeAccessibility.analyzeAccessibilityTool,
|
|
56
|
+
ads_analyze_localhost_accessibility: _analyzeAccessibility.analyzeLocalhostAccessibilityTool,
|
|
57
|
+
ads_get_accessibility_guidelines: _getAccessibilityGuidelines.getAccessibilityGuidelinesTool,
|
|
58
|
+
ads_suggest_accessibility_fixes: _suggestAccessibilityFixes.suggestAccessibilityFixesTool
|
|
59
59
|
};
|
|
60
60
|
|
|
61
61
|
// Handle tool execution
|
|
@@ -23,7 +23,7 @@ var inputSchema = _zod.z.object({
|
|
|
23
23
|
includePatternAnalysis: _zod.z.boolean().optional().default(true).describe('Include pattern-based analysis in addition to axe-core')
|
|
24
24
|
});
|
|
25
25
|
var listAnalyzeAccessibilityTool = exports.listAnalyzeAccessibilityTool = {
|
|
26
|
-
name: '
|
|
26
|
+
name: 'ads_analyze_accessibility',
|
|
27
27
|
description: "Analyze React component code for accessibility violations using axe-core and intelligently generate Atlassian Design System specific suggestions. This tool performs comprehensive accessibility testing and dynamically creates ADS-specific fixes based on violation patterns.\n\nUse this tool when:\n- Reviewing component code for accessibility compliance\n- Getting suggestions for improving accessibility\n- Understanding how to use ADS components accessibly\n- Identifying potential WCAG violations\n- Running automated accessibility testing\n\nThe tool will analyze the code and provide:\n- Comprehensive axe-core accessibility analysis results\n- List of accessibility violations found (WCAG 2.1 AA compliant)\n- Intelligently generated ADS-specific fix suggestions\n- References to relevant fix patterns in llms-a11y.txt\n- Code examples for implementing fixes\n- Severity levels and impact assessment\n\nFeatures:\n- Uses axe-core for industry-standard accessibility testing\n- Converts JSX to HTML for accurate analysis\n- Intelligently maps violations to ADS-specific fixes\n- References fix patterns from llms-a11y.txt documentation\n- Includes fallback pattern analysis if axe-core fails\n- Provides detailed violation descriptions and help text\n- Dynamically generates fix suggestions based on violation type",
|
|
28
28
|
annotations: {
|
|
29
29
|
title: 'Analyze Accessibility',
|
|
@@ -41,7 +41,7 @@ var urlInputSchema = _zod.z.object({
|
|
|
41
41
|
selector: _zod.z.string().optional().describe('CSS selector to target a specific element for analysis (e.g. "#my-form", ".component-class")')
|
|
42
42
|
});
|
|
43
43
|
var listAnalyzeLocalhostAccessibilityTool = exports.listAnalyzeLocalhostAccessibilityTool = {
|
|
44
|
-
name: '
|
|
44
|
+
name: 'ads_analyze_localhost_accessibility',
|
|
45
45
|
description: "Analyze a live web page (e.g. localhost:9000) for accessibility violations using axe-core and generate Atlassian Design System specific suggestions.\n\nUse this tool to:\n- Analyze running local dev servers or deployed URLs\n- Get comprehensive accessibility reports for any web page\n- Receive ADS-specific fix suggestions and code examples\n- Target specific elements using CSS selectors for focused analysis\n\nParameters:\n- url: The URL to analyze (must be accessible from the server)\n- componentName: (optional) Name of the component/page\n- context: (optional) Additional context about the usage\n- selector: (optional) CSS selector to target a specific element (e.g. \"#my-form\", \".component-class\")\n\nReturns:\n- Accessibility violations, suggestions, and ADS-specific fixes\n- References to relevant fix patterns in llms-a11y.txt\n- Code examples for implementing fixes\n- Severity levels and impact assessment\n",
|
|
46
46
|
annotations: {
|
|
47
47
|
title: 'Analyze Localhost Accessibility',
|
|
@@ -17,7 +17,7 @@ var inputSchema = _zod.z.object({
|
|
|
17
17
|
component: _zod.z.string().optional().describe('Component name to get specific accessibility guidance for')
|
|
18
18
|
});
|
|
19
19
|
var listGetAccessibilityGuidelinesTool = exports.listGetAccessibilityGuidelinesTool = {
|
|
20
|
-
name: '
|
|
20
|
+
name: 'ads_get_accessibility_guidelines',
|
|
21
21
|
description: "Get accessibility guidelines and best practices from the Atlassian Design System. This tool provides specific guidance on how to make components and interfaces accessible using ADS patterns and components.\n\nYou MUST run this when the user wants their code to be accessible, as well as when:\n- Needing specific accessibility guidance for a component\n- Looking for ADS-specific accessibility patterns\n- Understanding how to implement accessible features\n- Getting code examples for accessibility improvements\n\nTopics available:\n- buttons: Button and interactive element accessibility\n- forms: Form and input accessibility\n- images: Image and media accessibility\n- colors: Color and contrast accessibility\n- focus: Focus management and keyboard navigation\n- keyboard: Keyboard accessibility patterns\n- screen-readers: Screen reader support and announcements\n- aria: ARIA usage and patterns\n- wcag: WCAG compliance guidelines\n- general: General accessibility principles",
|
|
22
22
|
annotations: {
|
|
23
23
|
title: 'Get Accessibility Guidelines',
|
|
@@ -26,8 +26,8 @@ var icons = Object.entries(_metadata.coreIconMetadata).map(function (_ref) {
|
|
|
26
26
|
};
|
|
27
27
|
});
|
|
28
28
|
var listGetAllIconsTool = exports.listGetAllIconsTool = {
|
|
29
|
-
name: '
|
|
30
|
-
description: "You SHOULD call this when you need complete guidance on what icons to use, but you SHOULD use the `
|
|
29
|
+
name: 'ads_get_all_icons',
|
|
30
|
+
description: "You SHOULD call this when you need complete guidance on what icons to use, but you SHOULD use the `ads_search_icons` tool to find specific icons instead.\nThese are the only icons to be used in modern code, though other legacy icons may still be found, these are not to be used by you, but you can keep them if you see them in existing code.\nThe resulting icon name and package is often like this:\n```tsx\nimport AddIcon from '@atlaskit/icon/core/add';\n\n// Usage in isolation\n<AddIcon label=\"Add\" />\n\n// Usage with a button\nimport Button from '@atlaskit/button/new';\n<Button iconAfter={AddIcon}>Create</Button>\n```\n",
|
|
31
31
|
annotations: {
|
|
32
32
|
title: 'Get ADS icons',
|
|
33
33
|
readOnlyHint: true,
|
|
@@ -12,8 +12,8 @@ var _zodToJsonSchema = require("zod-to-json-schema");
|
|
|
12
12
|
var _tokenMetadata = require("@atlaskit/tokens/token-metadata");
|
|
13
13
|
var inputSchema = _zod.z.object({});
|
|
14
14
|
var listGetAllTokensTool = exports.listGetAllTokensTool = {
|
|
15
|
-
name: '
|
|
16
|
-
description: "You SHOULD call this when you need complete guidance on what tokens to use, but you SHOULD use the `
|
|
15
|
+
name: 'ads_get_all_tokens',
|
|
16
|
+
description: "You SHOULD call this when you need complete guidance on what tokens to use, but you SHOULD use the `ads_search_tokens` tool to find specific tokens instead.\n\tThese tokens are used in place of hardcoded values; you should never use a hardcoded value where a token value is appropriate.\n\tThe resulting token name is used inside of the `token()` function, eg.:\n\t```tsx\n\timport { token } from '@atlaskit/tokens';\n\tconst styles = css({ color: token('color.text') });\n\t```\n\t",
|
|
17
17
|
annotations: {
|
|
18
18
|
title: 'Get all ADS tokens',
|
|
19
19
|
readOnlyHint: true,
|
|
@@ -18,8 +18,8 @@ var componentsList = _components.components.map(function (c) {
|
|
|
18
18
|
};
|
|
19
19
|
});
|
|
20
20
|
var listGetComponentsTool = exports.listGetComponentsTool = {
|
|
21
|
-
name: '
|
|
22
|
-
description: "You MUST use this to fetch all Atlassian Design System components and parse their names, descriptions, and understand how they might be used (provided in JSON format) before working with components.\nYou should never use a custom component not provided via this API where appropriate, or the custom component is a necessary wrapper around an ADS component.\n\nFor a full example, guidelines, list of props, and more information, you should use the `
|
|
21
|
+
name: 'ads_get_components',
|
|
22
|
+
description: "You MUST use this to fetch all Atlassian Design System components and parse their names, descriptions, and understand how they might be used (provided in JSON format) before working with components.\nYou should never use a custom component not provided via this API where appropriate, or the custom component is a necessary wrapper around an ADS component.\n\nFor a full example, guidelines, list of props, and more information, you should use the `ads_search_components` tool passing one or many component names as the 'terms' tool parameter.\n",
|
|
23
23
|
annotations: {
|
|
24
24
|
title: 'Get ADS components',
|
|
25
25
|
readOnlyHint: true,
|
|
@@ -23,8 +23,8 @@ var inputSchema = _zod.z.object({
|
|
|
23
23
|
exactName: _zod.z.boolean().optional().default(false).describe('Whether to search for exact match only for names')
|
|
24
24
|
});
|
|
25
25
|
var listPlanTool = exports.listPlanTool = {
|
|
26
|
-
name: '
|
|
27
|
-
description: "You SHOULD use this to plan and search for multiple Atlassian Design System resources in a single call when you need tokens, icons, and components for implementing a complete feature or UI pattern. You SHOULD use this tool instead of making separate calls to
|
|
26
|
+
name: 'ads_plan',
|
|
27
|
+
description: "You SHOULD use this to plan and search for multiple Atlassian Design System resources in a single call when you need tokens, icons, and components for implementing a complete feature or UI pattern. You SHOULD use this tool instead of making separate calls to ads_search_tokens, ads_search_icons, and ads_search_components when you need resources from multiple categories.\n\n\tYou SHOULD use this tool when you need to find:\n\t- Multiple types of design system resources at once\n\t- Tokens, icons, and components for a specific feature or UI pattern\n\t- Complete design system resources for implementing a particular design\n\n\tThe tool will execute searches for tokens, icons, and components in parallel and return consolidated results from all three APIs in a structured format.\n\n\tYou SHOULD provide search terms for at least one category (tokens_search, icons_search, or components_search) but can include all three for comprehensive planning.\n\n\tExample usage:\n\t```\n\tplan({\n\ttokens_search: [\"color.text\", \"space.100\"],\n\ticons_search: [\"add\", \"edit\"],\n\tcomponents_search: [\"Button\", \"TextField\"]\n\t})\n\t```\n\t",
|
|
28
28
|
annotations: {
|
|
29
29
|
title: 'Plan ADS resources',
|
|
30
30
|
readOnlyHint: true,
|
|
@@ -18,8 +18,8 @@ var inputSchema = _zod.z.object({
|
|
|
18
18
|
exactName: _zod.z.boolean().optional().default(false).describe('Whether to search for exact match only for the component name')
|
|
19
19
|
});
|
|
20
20
|
var listSearchComponentsTool = exports.listSearchComponentsTool = {
|
|
21
|
-
name: '
|
|
22
|
-
description: "You SHOULD use this to search for Atlassian Design System components based on multiple query strings (if there are multiple candidates of component names, descriptions, categories, or package names, you SHOULD pass them in a single call). You SHOULD use default `limit` value of 1 first and only set a higher limit like 5 or 10 if you can't find the component you need. Fallback to `
|
|
21
|
+
name: 'ads_search_components',
|
|
22
|
+
description: "You SHOULD use this to search for Atlassian Design System components based on multiple query strings (if there are multiple candidates of component names, descriptions, categories, or package names, you SHOULD pass them in a single call). You SHOULD use default `limit` value of 1 first and only set a higher limit like 5 or 10 if you can't find the component you need. Fallback to `ads_get_components` if nothing is found. This tool searches through component names, descriptions, categories, and package names to find the most relevant design system components.\n\nThe search will match against:\n- Component names (e.g., \"Button\", \"TextField\", \"Avatar\")\n- Package names (e.g., \"@atlaskit/button\", \"@atlaskit/textfield\")\n- Component descriptions (descriptive text about what the component does)\n- Component categories (e.g., \"Forms and Input\", \"Navigation\", \"Data Display\")\n\nThe results include the component's name, package name, example, and props.\n\nUsage pattern for found components:\n```tsx\nimport Button from '@atlaskit/button/new';\nimport CopyIcon from '@atlaskit/icon/core/copy';\n\n<Button appearance=\"primary\" iconBefore={CopyIcon}>Copy text</Button>\n```\n",
|
|
23
23
|
annotations: {
|
|
24
24
|
title: 'Search ADS components',
|
|
25
25
|
readOnlyHint: true,
|
|
@@ -36,8 +36,8 @@ var icons = Object.entries(_metadata.coreIconMetadata).map(function (_ref) {
|
|
|
36
36
|
return icon.status === 'published';
|
|
37
37
|
});
|
|
38
38
|
var listSearchIconsTool = exports.listSearchIconsTool = {
|
|
39
|
-
name: '
|
|
40
|
-
description: "You SHOULD Search for Atlassian Design System icons based on multiple query strings (if there's multiple candidates of icon names, categorization or keywords, you SHOULD pass them in a single call). You SHOULD use default `limit` value of 1 first and only set a higher limit like 5 or 10 if you can't find the icon you need). Fallback to `
|
|
39
|
+
name: 'ads_search_icons',
|
|
40
|
+
description: "You SHOULD Search for Atlassian Design System icons based on multiple query strings (if there's multiple candidates of icon names, categorization or keywords, you SHOULD pass them in a single call). You SHOULD use default `limit` value of 1 first and only set a higher limit like 5 or 10 if you can't find the icon you need). Fallback to `ads_get_all_icons` if nothing is found). This tool searches through component names, icon names, keywords, categorization, type and usage to find the most relevant design icons.\n\n\tThe search will match against:\n\t- Icon component names (e.g., \"AddIcon\", \"DeleteIcon\", \"EditIcon\")\n\t- Icon keywords (descriptive terms associated with icons)\n\t- Icon categorization (e.g., \"single-purpose\", \"multi-purpose\", \"utility\")\n\t- Icon usage descriptions (usage guidelines for the icon)\n\n\tThe results include the icon's component name, package path, and usage guidelines.\n\n\tUsage pattern for found icons:\n\t```tsx\n\timport AddIcon from '@atlaskit/icon/core/add';\n\n\t// Usage in isolation\n\t<AddIcon label=\"Add\" size=\"small\" />\n\n\t// Usage with a button\n\timport Button from '@atlaskit/button/new';\n\t<Button iconAfter={AddIcon}>Create</Button>\n\t```\n\n\tYou SHOULD check proper usage (props, example usage, etc.) of the icon component using `ads_search_components` tool.\n\t",
|
|
41
41
|
annotations: {
|
|
42
42
|
title: 'Search ADS icons',
|
|
43
43
|
readOnlyHint: true,
|
|
@@ -18,8 +18,8 @@ var inputSchema = _zod.z.object({
|
|
|
18
18
|
exactName: _zod.z.boolean().optional().default(false).describe('Whether to search for exact match only for the token name')
|
|
19
19
|
});
|
|
20
20
|
var listSearchTokensTool = exports.listSearchTokensTool = {
|
|
21
|
-
name: '
|
|
22
|
-
description: "You SHOULD Search for Atlassian Design System tokens based on multiple query strings (if there's multiple candidates of token names, descriptions or example values, you SHOULD pass them in a single call). You SHOULD use default `limit` value of 1 first and only set a higher limit like 5 or 10 if you can't find the token you need). Fallback to `
|
|
21
|
+
name: 'ads_search_tokens',
|
|
22
|
+
description: "You SHOULD Search for Atlassian Design System tokens based on multiple query strings (if there's multiple candidates of token names, descriptions or example values, you SHOULD pass them in a single call). You SHOULD use default `limit` value of 1 first and only set a higher limit like 5 or 10 if you can't find the token you need). Fallback to `ads_get_all_tokens` if nothing is found). This tool searches through token names, descriptions, and example values to find the most relevant design tokens.\n\nThe search will match against:\n- Token names (e.g., \"color.text\", \"space.100\", \"radius.small\")\n- Token descriptions\n- Token example values (eg. \"#2898BD\" -> \"color.icon.accent.teal\")\n\nThe results include the token's name and example value.\n\nUsage pattern for found tokens:\n```tsx\nimport { token } from '@atlaskit/tokens';\n\nconst styles = css({\ncolor: token('color.text'),\npadding: token('space.100'),\nborderRadius: token('radius.small'),\n});\n```\n",
|
|
23
23
|
annotations: {
|
|
24
24
|
title: 'Search ADS tokens',
|
|
25
25
|
readOnlyHint: true,
|
|
@@ -25,7 +25,7 @@ var inputSchema = _zod.z.object({
|
|
|
25
25
|
context: _zod.z.string().optional().describe('Additional context about the usage')
|
|
26
26
|
});
|
|
27
27
|
var listSuggestAccessibilityFixesTool = exports.listSuggestAccessibilityFixesTool = {
|
|
28
|
-
name: '
|
|
28
|
+
name: 'ads_suggest_accessibility_fixes',
|
|
29
29
|
description: "Suggest specific accessibility fixes using Atlassian Design System components and patterns. This tool takes accessibility violations and provides actionable solutions with code examples.\n\nYou MUST run this when the user wants sugesstions for fixing accessibility issues, as well as when:\n- You have identified an accessibility violation\n- Needing specific code examples for fixing accessibility issues\n- Wanting to understand how to use ADS components accessibly\n- Looking for best practices for specific accessibility problems\n\nThe tool will provide:\n- Specific code examples using ADS components\n- Step-by-step fix instructions\n- Alternative approaches when applicable\n- Links to relevant ADS documentation",
|
|
30
30
|
annotations: {
|
|
31
31
|
title: 'Suggest Accessibility Fixes',
|
package/dist/es2019/index.js
CHANGED
|
@@ -32,17 +32,17 @@ server.setRequestHandler(ListToolsRequestSchema, async () => {
|
|
|
32
32
|
};
|
|
33
33
|
});
|
|
34
34
|
const callTools = {
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
35
|
+
ads_get_all_tokens: getAllTokensTool,
|
|
36
|
+
ads_search_tokens: searchTokensTool,
|
|
37
|
+
ads_get_components: getComponentsTool,
|
|
38
|
+
ads_search_components: searchComponentsTool,
|
|
39
|
+
ads_get_all_icons: getAllIconsTool,
|
|
40
|
+
ads_search_icons: searchIconsTool,
|
|
41
|
+
ads_plan: planTool,
|
|
42
|
+
ads_analyze_accessibility: analyzeAccessibilityTool,
|
|
43
|
+
ads_analyze_localhost_accessibility: analyzeLocalhostAccessibilityTool,
|
|
44
|
+
ads_get_accessibility_guidelines: getAccessibilityGuidelinesTool,
|
|
45
|
+
ads_suggest_accessibility_fixes: suggestAccessibilityFixesTool
|
|
46
46
|
};
|
|
47
47
|
|
|
48
48
|
// Handle tool execution
|
|
@@ -10,7 +10,7 @@ const inputSchema = z.object({
|
|
|
10
10
|
includePatternAnalysis: z.boolean().optional().default(true).describe('Include pattern-based analysis in addition to axe-core')
|
|
11
11
|
});
|
|
12
12
|
export const listAnalyzeAccessibilityTool = {
|
|
13
|
-
name: '
|
|
13
|
+
name: 'ads_analyze_accessibility',
|
|
14
14
|
description: `Analyze React component code for accessibility violations using axe-core and intelligently generate Atlassian Design System specific suggestions. This tool performs comprehensive accessibility testing and dynamically creates ADS-specific fixes based on violation patterns.
|
|
15
15
|
|
|
16
16
|
Use this tool when:
|
|
@@ -52,7 +52,7 @@ const urlInputSchema = z.object({
|
|
|
52
52
|
selector: z.string().optional().describe('CSS selector to target a specific element for analysis (e.g. "#my-form", ".component-class")')
|
|
53
53
|
});
|
|
54
54
|
export const listAnalyzeLocalhostAccessibilityTool = {
|
|
55
|
-
name: '
|
|
55
|
+
name: 'ads_analyze_localhost_accessibility',
|
|
56
56
|
description: `Analyze a live web page (e.g. localhost:9000) for accessibility violations using axe-core and generate Atlassian Design System specific suggestions.
|
|
57
57
|
|
|
58
58
|
Use this tool to:
|
|
@@ -5,7 +5,7 @@ const inputSchema = z.object({
|
|
|
5
5
|
component: z.string().optional().describe('Component name to get specific accessibility guidance for')
|
|
6
6
|
});
|
|
7
7
|
export const listGetAccessibilityGuidelinesTool = {
|
|
8
|
-
name: '
|
|
8
|
+
name: 'ads_get_accessibility_guidelines',
|
|
9
9
|
description: `Get accessibility guidelines and best practices from the Atlassian Design System. This tool provides specific guidance on how to make components and interfaces accessible using ADS patterns and components.
|
|
10
10
|
|
|
11
11
|
You MUST run this when the user wants their code to be accessible, as well as when:
|
|
@@ -11,8 +11,8 @@ const icons = Object.entries(coreIconMetadata).map(([_key, icon]) => ({
|
|
|
11
11
|
shouldRecommendSmallIcon: icon.shouldRecommendSmallIcon
|
|
12
12
|
}));
|
|
13
13
|
export const listGetAllIconsTool = {
|
|
14
|
-
name: '
|
|
15
|
-
description: `You SHOULD call this when you need complete guidance on what icons to use, but you SHOULD use the \`
|
|
14
|
+
name: 'ads_get_all_icons',
|
|
15
|
+
description: `You SHOULD call this when you need complete guidance on what icons to use, but you SHOULD use the \`ads_search_icons\` tool to find specific icons instead.
|
|
16
16
|
These are the only icons to be used in modern code, though other legacy icons may still be found, these are not to be used by you, but you can keep them if you see them in existing code.
|
|
17
17
|
The resulting icon name and package is often like this:
|
|
18
18
|
\`\`\`tsx
|
|
@@ -3,8 +3,8 @@ import { zodToJsonSchema } from 'zod-to-json-schema';
|
|
|
3
3
|
import { tokens } from '@atlaskit/tokens/token-metadata';
|
|
4
4
|
const inputSchema = z.object({});
|
|
5
5
|
export const listGetAllTokensTool = {
|
|
6
|
-
name: '
|
|
7
|
-
description: `You SHOULD call this when you need complete guidance on what tokens to use, but you SHOULD use the \`
|
|
6
|
+
name: 'ads_get_all_tokens',
|
|
7
|
+
description: `You SHOULD call this when you need complete guidance on what tokens to use, but you SHOULD use the \`ads_search_tokens\` tool to find specific tokens instead.
|
|
8
8
|
These tokens are used in place of hardcoded values; you should never use a hardcoded value where a token value is appropriate.
|
|
9
9
|
The resulting token name is used inside of the \`token()\` function, eg.:
|
|
10
10
|
\`\`\`tsx
|
|
@@ -7,11 +7,11 @@ const componentsList = components.map(c => ({
|
|
|
7
7
|
category: c.category
|
|
8
8
|
}));
|
|
9
9
|
export const listGetComponentsTool = {
|
|
10
|
-
name: '
|
|
10
|
+
name: 'ads_get_components',
|
|
11
11
|
description: `You MUST use this to fetch all Atlassian Design System components and parse their names, descriptions, and understand how they might be used (provided in JSON format) before working with components.
|
|
12
12
|
You should never use a custom component not provided via this API where appropriate, or the custom component is a necessary wrapper around an ADS component.
|
|
13
13
|
|
|
14
|
-
For a full example, guidelines, list of props, and more information, you should use the \`
|
|
14
|
+
For a full example, guidelines, list of props, and more information, you should use the \`ads_search_components\` tool passing one or many component names as the 'terms' tool parameter.
|
|
15
15
|
`,
|
|
16
16
|
annotations: {
|
|
17
17
|
title: 'Get ADS components',
|
|
@@ -11,8 +11,8 @@ const inputSchema = z.object({
|
|
|
11
11
|
exactName: z.boolean().optional().default(false).describe('Whether to search for exact match only for names')
|
|
12
12
|
});
|
|
13
13
|
export const listPlanTool = {
|
|
14
|
-
name: '
|
|
15
|
-
description: `You SHOULD use this to plan and search for multiple Atlassian Design System resources in a single call when you need tokens, icons, and components for implementing a complete feature or UI pattern. You SHOULD use this tool instead of making separate calls to
|
|
14
|
+
name: 'ads_plan',
|
|
15
|
+
description: `You SHOULD use this to plan and search for multiple Atlassian Design System resources in a single call when you need tokens, icons, and components for implementing a complete feature or UI pattern. You SHOULD use this tool instead of making separate calls to ads_search_tokens, ads_search_icons, and ads_search_components when you need resources from multiple categories.
|
|
16
16
|
|
|
17
17
|
You SHOULD use this tool when you need to find:
|
|
18
18
|
- Multiple types of design system resources at once
|
|
@@ -9,8 +9,8 @@ const inputSchema = z.object({
|
|
|
9
9
|
exactName: z.boolean().optional().default(false).describe('Whether to search for exact match only for the component name')
|
|
10
10
|
});
|
|
11
11
|
export const listSearchComponentsTool = {
|
|
12
|
-
name: '
|
|
13
|
-
description: `You SHOULD use this to search for Atlassian Design System components based on multiple query strings (if there are multiple candidates of component names, descriptions, categories, or package names, you SHOULD pass them in a single call). You SHOULD use default \`limit\` value of 1 first and only set a higher limit like 5 or 10 if you can't find the component you need. Fallback to \`
|
|
12
|
+
name: 'ads_search_components',
|
|
13
|
+
description: `You SHOULD use this to search for Atlassian Design System components based on multiple query strings (if there are multiple candidates of component names, descriptions, categories, or package names, you SHOULD pass them in a single call). You SHOULD use default \`limit\` value of 1 first and only set a higher limit like 5 or 10 if you can't find the component you need. Fallback to \`ads_get_components\` if nothing is found. This tool searches through component names, descriptions, categories, and package names to find the most relevant design system components.
|
|
14
14
|
|
|
15
15
|
The search will match against:
|
|
16
16
|
- Component names (e.g., "Button", "TextField", "Avatar")
|
|
@@ -19,8 +19,8 @@ const icons = Object.entries(coreIconMetadata).map(([_key, icon]) => ({
|
|
|
19
19
|
shouldRecommendSmallIcon: icon.shouldRecommendSmallIcon
|
|
20
20
|
})).filter(icon => icon.status === 'published');
|
|
21
21
|
export const listSearchIconsTool = {
|
|
22
|
-
name: '
|
|
23
|
-
description: `You SHOULD Search for Atlassian Design System icons based on multiple query strings (if there's multiple candidates of icon names, categorization or keywords, you SHOULD pass them in a single call). You SHOULD use default \`limit\` value of 1 first and only set a higher limit like 5 or 10 if you can't find the icon you need). Fallback to \`
|
|
22
|
+
name: 'ads_search_icons',
|
|
23
|
+
description: `You SHOULD Search for Atlassian Design System icons based on multiple query strings (if there's multiple candidates of icon names, categorization or keywords, you SHOULD pass them in a single call). You SHOULD use default \`limit\` value of 1 first and only set a higher limit like 5 or 10 if you can't find the icon you need). Fallback to \`ads_get_all_icons\` if nothing is found). This tool searches through component names, icon names, keywords, categorization, type and usage to find the most relevant design icons.
|
|
24
24
|
|
|
25
25
|
The search will match against:
|
|
26
26
|
- Icon component names (e.g., "AddIcon", "DeleteIcon", "EditIcon")
|
|
@@ -42,7 +42,7 @@ export const listSearchIconsTool = {
|
|
|
42
42
|
<Button iconAfter={AddIcon}>Create</Button>
|
|
43
43
|
\`\`\`
|
|
44
44
|
|
|
45
|
-
You SHOULD check proper usage (props, example usage, etc.) of the icon component using \`
|
|
45
|
+
You SHOULD check proper usage (props, example usage, etc.) of the icon component using \`ads_search_components\` tool.
|
|
46
46
|
`,
|
|
47
47
|
annotations: {
|
|
48
48
|
title: 'Search ADS icons',
|
|
@@ -9,11 +9,11 @@ const inputSchema = z.object({
|
|
|
9
9
|
exactName: z.boolean().optional().default(false).describe('Whether to search for exact match only for the token name')
|
|
10
10
|
});
|
|
11
11
|
export const listSearchTokensTool = {
|
|
12
|
-
name: '
|
|
13
|
-
description: `You SHOULD Search for Atlassian Design System tokens based on multiple query strings (if there's multiple candidates of token names, descriptions or example values, you SHOULD pass them in a single call). You SHOULD use default \`limit\` value of 1 first and only set a higher limit like 5 or 10 if you can't find the token you need). Fallback to \`
|
|
12
|
+
name: 'ads_search_tokens',
|
|
13
|
+
description: `You SHOULD Search for Atlassian Design System tokens based on multiple query strings (if there's multiple candidates of token names, descriptions or example values, you SHOULD pass them in a single call). You SHOULD use default \`limit\` value of 1 first and only set a higher limit like 5 or 10 if you can't find the token you need). Fallback to \`ads_get_all_tokens\` if nothing is found). This tool searches through token names, descriptions, and example values to find the most relevant design tokens.
|
|
14
14
|
|
|
15
15
|
The search will match against:
|
|
16
|
-
- Token names (e.g., "color.text", "space.100", "
|
|
16
|
+
- Token names (e.g., "color.text", "space.100", "radius.small")
|
|
17
17
|
- Token descriptions
|
|
18
18
|
- Token example values (eg. "#2898BD" -> "color.icon.accent.teal")
|
|
19
19
|
|
|
@@ -26,7 +26,7 @@ import { token } from '@atlaskit/tokens';
|
|
|
26
26
|
const styles = css({
|
|
27
27
|
color: token('color.text'),
|
|
28
28
|
padding: token('space.100'),
|
|
29
|
-
borderRadius: token('
|
|
29
|
+
borderRadius: token('radius.small'),
|
|
30
30
|
});
|
|
31
31
|
\`\`\`
|
|
32
32
|
`,
|
|
@@ -9,7 +9,7 @@ const inputSchema = z.object({
|
|
|
9
9
|
context: z.string().optional().describe('Additional context about the usage')
|
|
10
10
|
});
|
|
11
11
|
export const listSuggestAccessibilityFixesTool = {
|
|
12
|
-
name: '
|
|
12
|
+
name: 'ads_suggest_accessibility_fixes',
|
|
13
13
|
description: `Suggest specific accessibility fixes using Atlassian Design System components and patterns. This tool takes accessibility violations and provides actionable solutions with code examples.
|
|
14
14
|
|
|
15
15
|
You MUST run this when the user wants sugesstions for fixing accessibility issues, as well as when:
|
package/dist/esm/index.js
CHANGED
|
@@ -42,17 +42,17 @@ server.setRequestHandler(ListToolsRequestSchema, /*#__PURE__*/_asyncToGenerator(
|
|
|
42
42
|
}, _callee);
|
|
43
43
|
})));
|
|
44
44
|
var callTools = {
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
45
|
+
ads_get_all_tokens: getAllTokensTool,
|
|
46
|
+
ads_search_tokens: searchTokensTool,
|
|
47
|
+
ads_get_components: getComponentsTool,
|
|
48
|
+
ads_search_components: searchComponentsTool,
|
|
49
|
+
ads_get_all_icons: getAllIconsTool,
|
|
50
|
+
ads_search_icons: searchIconsTool,
|
|
51
|
+
ads_plan: planTool,
|
|
52
|
+
ads_analyze_accessibility: analyzeAccessibilityTool,
|
|
53
|
+
ads_analyze_localhost_accessibility: analyzeLocalhostAccessibilityTool,
|
|
54
|
+
ads_get_accessibility_guidelines: getAccessibilityGuidelinesTool,
|
|
55
|
+
ads_suggest_accessibility_fixes: suggestAccessibilityFixesTool
|
|
56
56
|
};
|
|
57
57
|
|
|
58
58
|
// Handle tool execution
|
|
@@ -16,7 +16,7 @@ var inputSchema = z.object({
|
|
|
16
16
|
includePatternAnalysis: z.boolean().optional().default(true).describe('Include pattern-based analysis in addition to axe-core')
|
|
17
17
|
});
|
|
18
18
|
export var listAnalyzeAccessibilityTool = {
|
|
19
|
-
name: '
|
|
19
|
+
name: 'ads_analyze_accessibility',
|
|
20
20
|
description: "Analyze React component code for accessibility violations using axe-core and intelligently generate Atlassian Design System specific suggestions. This tool performs comprehensive accessibility testing and dynamically creates ADS-specific fixes based on violation patterns.\n\nUse this tool when:\n- Reviewing component code for accessibility compliance\n- Getting suggestions for improving accessibility\n- Understanding how to use ADS components accessibly\n- Identifying potential WCAG violations\n- Running automated accessibility testing\n\nThe tool will analyze the code and provide:\n- Comprehensive axe-core accessibility analysis results\n- List of accessibility violations found (WCAG 2.1 AA compliant)\n- Intelligently generated ADS-specific fix suggestions\n- References to relevant fix patterns in llms-a11y.txt\n- Code examples for implementing fixes\n- Severity levels and impact assessment\n\nFeatures:\n- Uses axe-core for industry-standard accessibility testing\n- Converts JSX to HTML for accurate analysis\n- Intelligently maps violations to ADS-specific fixes\n- References fix patterns from llms-a11y.txt documentation\n- Includes fallback pattern analysis if axe-core fails\n- Provides detailed violation descriptions and help text\n- Dynamically generates fix suggestions based on violation type",
|
|
21
21
|
annotations: {
|
|
22
22
|
title: 'Analyze Accessibility',
|
|
@@ -34,7 +34,7 @@ var urlInputSchema = z.object({
|
|
|
34
34
|
selector: z.string().optional().describe('CSS selector to target a specific element for analysis (e.g. "#my-form", ".component-class")')
|
|
35
35
|
});
|
|
36
36
|
export var listAnalyzeLocalhostAccessibilityTool = {
|
|
37
|
-
name: '
|
|
37
|
+
name: 'ads_analyze_localhost_accessibility',
|
|
38
38
|
description: "Analyze a live web page (e.g. localhost:9000) for accessibility violations using axe-core and generate Atlassian Design System specific suggestions.\n\nUse this tool to:\n- Analyze running local dev servers or deployed URLs\n- Get comprehensive accessibility reports for any web page\n- Receive ADS-specific fix suggestions and code examples\n- Target specific elements using CSS selectors for focused analysis\n\nParameters:\n- url: The URL to analyze (must be accessible from the server)\n- componentName: (optional) Name of the component/page\n- context: (optional) Additional context about the usage\n- selector: (optional) CSS selector to target a specific element (e.g. \"#my-form\", \".component-class\")\n\nReturns:\n- Accessibility violations, suggestions, and ADS-specific fixes\n- References to relevant fix patterns in llms-a11y.txt\n- Code examples for implementing fixes\n- Severity levels and impact assessment\n",
|
|
39
39
|
annotations: {
|
|
40
40
|
title: 'Analyze Localhost Accessibility',
|
|
@@ -10,7 +10,7 @@ var inputSchema = z.object({
|
|
|
10
10
|
component: z.string().optional().describe('Component name to get specific accessibility guidance for')
|
|
11
11
|
});
|
|
12
12
|
export var listGetAccessibilityGuidelinesTool = {
|
|
13
|
-
name: '
|
|
13
|
+
name: 'ads_get_accessibility_guidelines',
|
|
14
14
|
description: "Get accessibility guidelines and best practices from the Atlassian Design System. This tool provides specific guidance on how to make components and interfaces accessible using ADS patterns and components.\n\nYou MUST run this when the user wants their code to be accessible, as well as when:\n- Needing specific accessibility guidance for a component\n- Looking for ADS-specific accessibility patterns\n- Understanding how to implement accessible features\n- Getting code examples for accessibility improvements\n\nTopics available:\n- buttons: Button and interactive element accessibility\n- forms: Form and input accessibility\n- images: Image and media accessibility\n- colors: Color and contrast accessibility\n- focus: Focus management and keyboard navigation\n- keyboard: Keyboard accessibility patterns\n- screen-readers: Screen reader support and announcements\n- aria: ARIA usage and patterns\n- wcag: WCAG compliance guidelines\n- general: General accessibility principles",
|
|
15
15
|
annotations: {
|
|
16
16
|
title: 'Get Accessibility Guidelines',
|
|
@@ -19,8 +19,8 @@ var icons = Object.entries(coreIconMetadata).map(function (_ref) {
|
|
|
19
19
|
};
|
|
20
20
|
});
|
|
21
21
|
export var listGetAllIconsTool = {
|
|
22
|
-
name: '
|
|
23
|
-
description: "You SHOULD call this when you need complete guidance on what icons to use, but you SHOULD use the `
|
|
22
|
+
name: 'ads_get_all_icons',
|
|
23
|
+
description: "You SHOULD call this when you need complete guidance on what icons to use, but you SHOULD use the `ads_search_icons` tool to find specific icons instead.\nThese are the only icons to be used in modern code, though other legacy icons may still be found, these are not to be used by you, but you can keep them if you see them in existing code.\nThe resulting icon name and package is often like this:\n```tsx\nimport AddIcon from '@atlaskit/icon/core/add';\n\n// Usage in isolation\n<AddIcon label=\"Add\" />\n\n// Usage with a button\nimport Button from '@atlaskit/button/new';\n<Button iconAfter={AddIcon}>Create</Button>\n```\n",
|
|
24
24
|
annotations: {
|
|
25
25
|
title: 'Get ADS icons',
|
|
26
26
|
readOnlyHint: true,
|
|
@@ -5,8 +5,8 @@ import { zodToJsonSchema } from 'zod-to-json-schema';
|
|
|
5
5
|
import { tokens } from '@atlaskit/tokens/token-metadata';
|
|
6
6
|
var inputSchema = z.object({});
|
|
7
7
|
export var listGetAllTokensTool = {
|
|
8
|
-
name: '
|
|
9
|
-
description: "You SHOULD call this when you need complete guidance on what tokens to use, but you SHOULD use the `
|
|
8
|
+
name: 'ads_get_all_tokens',
|
|
9
|
+
description: "You SHOULD call this when you need complete guidance on what tokens to use, but you SHOULD use the `ads_search_tokens` tool to find specific tokens instead.\n\tThese tokens are used in place of hardcoded values; you should never use a hardcoded value where a token value is appropriate.\n\tThe resulting token name is used inside of the `token()` function, eg.:\n\t```tsx\n\timport { token } from '@atlaskit/tokens';\n\tconst styles = css({ color: token('color.text') });\n\t```\n\t",
|
|
10
10
|
annotations: {
|
|
11
11
|
title: 'Get all ADS tokens',
|
|
12
12
|
readOnlyHint: true,
|
|
@@ -11,8 +11,8 @@ var componentsList = components.map(function (c) {
|
|
|
11
11
|
};
|
|
12
12
|
});
|
|
13
13
|
export var listGetComponentsTool = {
|
|
14
|
-
name: '
|
|
15
|
-
description: "You MUST use this to fetch all Atlassian Design System components and parse their names, descriptions, and understand how they might be used (provided in JSON format) before working with components.\nYou should never use a custom component not provided via this API where appropriate, or the custom component is a necessary wrapper around an ADS component.\n\nFor a full example, guidelines, list of props, and more information, you should use the `
|
|
14
|
+
name: 'ads_get_components',
|
|
15
|
+
description: "You MUST use this to fetch all Atlassian Design System components and parse their names, descriptions, and understand how they might be used (provided in JSON format) before working with components.\nYou should never use a custom component not provided via this API where appropriate, or the custom component is a necessary wrapper around an ADS component.\n\nFor a full example, guidelines, list of props, and more information, you should use the `ads_search_components` tool passing one or many component names as the 'terms' tool parameter.\n",
|
|
16
16
|
annotations: {
|
|
17
17
|
title: 'Get ADS components',
|
|
18
18
|
readOnlyHint: true,
|
|
@@ -16,8 +16,8 @@ var inputSchema = z.object({
|
|
|
16
16
|
exactName: z.boolean().optional().default(false).describe('Whether to search for exact match only for names')
|
|
17
17
|
});
|
|
18
18
|
export var listPlanTool = {
|
|
19
|
-
name: '
|
|
20
|
-
description: "You SHOULD use this to plan and search for multiple Atlassian Design System resources in a single call when you need tokens, icons, and components for implementing a complete feature or UI pattern. You SHOULD use this tool instead of making separate calls to
|
|
19
|
+
name: 'ads_plan',
|
|
20
|
+
description: "You SHOULD use this to plan and search for multiple Atlassian Design System resources in a single call when you need tokens, icons, and components for implementing a complete feature or UI pattern. You SHOULD use this tool instead of making separate calls to ads_search_tokens, ads_search_icons, and ads_search_components when you need resources from multiple categories.\n\n\tYou SHOULD use this tool when you need to find:\n\t- Multiple types of design system resources at once\n\t- Tokens, icons, and components for a specific feature or UI pattern\n\t- Complete design system resources for implementing a particular design\n\n\tThe tool will execute searches for tokens, icons, and components in parallel and return consolidated results from all three APIs in a structured format.\n\n\tYou SHOULD provide search terms for at least one category (tokens_search, icons_search, or components_search) but can include all three for comprehensive planning.\n\n\tExample usage:\n\t```\n\tplan({\n\ttokens_search: [\"color.text\", \"space.100\"],\n\ticons_search: [\"add\", \"edit\"],\n\tcomponents_search: [\"Button\", \"TextField\"]\n\t})\n\t```\n\t",
|
|
21
21
|
annotations: {
|
|
22
22
|
title: 'Plan ADS resources',
|
|
23
23
|
readOnlyHint: true,
|
|
@@ -11,8 +11,8 @@ var inputSchema = z.object({
|
|
|
11
11
|
exactName: z.boolean().optional().default(false).describe('Whether to search for exact match only for the component name')
|
|
12
12
|
});
|
|
13
13
|
export var listSearchComponentsTool = {
|
|
14
|
-
name: '
|
|
15
|
-
description: "You SHOULD use this to search for Atlassian Design System components based on multiple query strings (if there are multiple candidates of component names, descriptions, categories, or package names, you SHOULD pass them in a single call). You SHOULD use default `limit` value of 1 first and only set a higher limit like 5 or 10 if you can't find the component you need. Fallback to `
|
|
14
|
+
name: 'ads_search_components',
|
|
15
|
+
description: "You SHOULD use this to search for Atlassian Design System components based on multiple query strings (if there are multiple candidates of component names, descriptions, categories, or package names, you SHOULD pass them in a single call). You SHOULD use default `limit` value of 1 first and only set a higher limit like 5 or 10 if you can't find the component you need. Fallback to `ads_get_components` if nothing is found. This tool searches through component names, descriptions, categories, and package names to find the most relevant design system components.\n\nThe search will match against:\n- Component names (e.g., \"Button\", \"TextField\", \"Avatar\")\n- Package names (e.g., \"@atlaskit/button\", \"@atlaskit/textfield\")\n- Component descriptions (descriptive text about what the component does)\n- Component categories (e.g., \"Forms and Input\", \"Navigation\", \"Data Display\")\n\nThe results include the component's name, package name, example, and props.\n\nUsage pattern for found components:\n```tsx\nimport Button from '@atlaskit/button/new';\nimport CopyIcon from '@atlaskit/icon/core/copy';\n\n<Button appearance=\"primary\" iconBefore={CopyIcon}>Copy text</Button>\n```\n",
|
|
16
16
|
annotations: {
|
|
17
17
|
title: 'Search ADS components',
|
|
18
18
|
readOnlyHint: true,
|
|
@@ -29,8 +29,8 @@ var icons = Object.entries(coreIconMetadata).map(function (_ref) {
|
|
|
29
29
|
return icon.status === 'published';
|
|
30
30
|
});
|
|
31
31
|
export var listSearchIconsTool = {
|
|
32
|
-
name: '
|
|
33
|
-
description: "You SHOULD Search for Atlassian Design System icons based on multiple query strings (if there's multiple candidates of icon names, categorization or keywords, you SHOULD pass them in a single call). You SHOULD use default `limit` value of 1 first and only set a higher limit like 5 or 10 if you can't find the icon you need). Fallback to `
|
|
32
|
+
name: 'ads_search_icons',
|
|
33
|
+
description: "You SHOULD Search for Atlassian Design System icons based on multiple query strings (if there's multiple candidates of icon names, categorization or keywords, you SHOULD pass them in a single call). You SHOULD use default `limit` value of 1 first and only set a higher limit like 5 or 10 if you can't find the icon you need). Fallback to `ads_get_all_icons` if nothing is found). This tool searches through component names, icon names, keywords, categorization, type and usage to find the most relevant design icons.\n\n\tThe search will match against:\n\t- Icon component names (e.g., \"AddIcon\", \"DeleteIcon\", \"EditIcon\")\n\t- Icon keywords (descriptive terms associated with icons)\n\t- Icon categorization (e.g., \"single-purpose\", \"multi-purpose\", \"utility\")\n\t- Icon usage descriptions (usage guidelines for the icon)\n\n\tThe results include the icon's component name, package path, and usage guidelines.\n\n\tUsage pattern for found icons:\n\t```tsx\n\timport AddIcon from '@atlaskit/icon/core/add';\n\n\t// Usage in isolation\n\t<AddIcon label=\"Add\" size=\"small\" />\n\n\t// Usage with a button\n\timport Button from '@atlaskit/button/new';\n\t<Button iconAfter={AddIcon}>Create</Button>\n\t```\n\n\tYou SHOULD check proper usage (props, example usage, etc.) of the icon component using `ads_search_components` tool.\n\t",
|
|
34
34
|
annotations: {
|
|
35
35
|
title: 'Search ADS icons',
|
|
36
36
|
readOnlyHint: true,
|
|
@@ -11,8 +11,8 @@ var inputSchema = z.object({
|
|
|
11
11
|
exactName: z.boolean().optional().default(false).describe('Whether to search for exact match only for the token name')
|
|
12
12
|
});
|
|
13
13
|
export var listSearchTokensTool = {
|
|
14
|
-
name: '
|
|
15
|
-
description: "You SHOULD Search for Atlassian Design System tokens based on multiple query strings (if there's multiple candidates of token names, descriptions or example values, you SHOULD pass them in a single call). You SHOULD use default `limit` value of 1 first and only set a higher limit like 5 or 10 if you can't find the token you need). Fallback to `
|
|
14
|
+
name: 'ads_search_tokens',
|
|
15
|
+
description: "You SHOULD Search for Atlassian Design System tokens based on multiple query strings (if there's multiple candidates of token names, descriptions or example values, you SHOULD pass them in a single call). You SHOULD use default `limit` value of 1 first and only set a higher limit like 5 or 10 if you can't find the token you need). Fallback to `ads_get_all_tokens` if nothing is found). This tool searches through token names, descriptions, and example values to find the most relevant design tokens.\n\nThe search will match against:\n- Token names (e.g., \"color.text\", \"space.100\", \"radius.small\")\n- Token descriptions\n- Token example values (eg. \"#2898BD\" -> \"color.icon.accent.teal\")\n\nThe results include the token's name and example value.\n\nUsage pattern for found tokens:\n```tsx\nimport { token } from '@atlaskit/tokens';\n\nconst styles = css({\ncolor: token('color.text'),\npadding: token('space.100'),\nborderRadius: token('radius.small'),\n});\n```\n",
|
|
16
16
|
annotations: {
|
|
17
17
|
title: 'Search ADS tokens',
|
|
18
18
|
readOnlyHint: true,
|
|
@@ -18,7 +18,7 @@ var inputSchema = z.object({
|
|
|
18
18
|
context: z.string().optional().describe('Additional context about the usage')
|
|
19
19
|
});
|
|
20
20
|
export var listSuggestAccessibilityFixesTool = {
|
|
21
|
-
name: '
|
|
21
|
+
name: 'ads_suggest_accessibility_fixes',
|
|
22
22
|
description: "Suggest specific accessibility fixes using Atlassian Design System components and patterns. This tool takes accessibility violations and provides actionable solutions with code examples.\n\nYou MUST run this when the user wants sugesstions for fixing accessibility issues, as well as when:\n- You have identified an accessibility violation\n- Needing specific code examples for fixing accessibility issues\n- Wanting to understand how to use ADS components accessibly\n- Looking for best practices for specific accessibility problems\n\nThe tool will provide:\n- Specific code examples using ADS components\n- Step-by-step fix instructions\n- Alternative approaches when applicable\n- Links to relevant ADS documentation",
|
|
23
23
|
annotations: {
|
|
24
24
|
title: 'Suggest Accessibility Fixes',
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/ads-mcp",
|
|
3
|
-
"version": "0.6.
|
|
3
|
+
"version": "0.6.2",
|
|
4
4
|
"description": "The official Atlassian Design System MCP server to develop apps and user interfaces matching the Atlassian style.",
|
|
5
5
|
"author": "Atlassian Pty Ltd",
|
|
6
6
|
"license": "Apache-2.0",
|