@triptease/design-system-mcp 0.0.3

package/src/manifests/components/types.ts

@@ -0,0 +1,64 @@
+interface UsageGuidance {
+  whenToUse: string[];
+  bestPractices?: string[];
+  accessibility?: string[];
+  avoid?: string[];
+}
+
+interface PackageInstallationBase {
+  includesTypes: boolean;
+  optional: boolean;
+  guidance?: string;
+}
+
+interface NPMPackage extends PackageInstallationBase {
+  name: string;
+}
+
+interface CDNPackage extends PackageInstallationBase {
+  name: string;
+  latestVersionUrl: string;
+  pinnedMajorVersionUrl: string;
+  pinnedVersionUrl: string;
+}
+
+interface Installation {
+  npm?: NPMPackage[];
+  cdn?: CDNPackage[];
+}
+
+interface DataAttribute {
+  type: string;
+  values?: (string | undefined)[];
+  default?: string;
+  description: string;
+}
+
+interface HTMLAttribute {
+  type?: string;
+  values?: string[];
+  default?: string;
+  description?: string;
+}
+
+interface ExampleUsage {
+  title: string;
+  description?: string;
+  code: string;
+}
+
+export interface ComponentConfig {
+  name: string;
+  description: string;
+  ssrSafe?: boolean;
+  element: string;
+  usageGuidance?: UsageGuidance;
+  installation?: Installation;
+  dataAttributes?: Record<string, DataAttribute>;
+  classes?: Record<string, string>;
+  attributes?: Record<string, HTMLAttribute>;
+  states?: string[];
+  examples?: ExampleUsage[];
+}
+
+export type ComponentManifest = Record<string, ComponentConfig>;

package/src/tools/getCSSTokens/__snapshots__/handler.test.ts.snap

@@ -0,0 +1,78 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`getCSSTokens handler > should return all border tokens 1`] = `
+{
+  "content": [
+    {
+      "text": "[{"token":"--border-radius","value":"0.5rem"}]",
+      "type": "text",
+    },
+  ],
+}
+`;
+
+exports[`getCSSTokens handler > should return all border-radius tokens 1`] = `
+{
+  "content": [
+    {
+      "text": "[{"token":"--border-radius-50","value":"0.25rem"},{"token":"--border-radius-100","value":"0.5rem"},{"token":"--border-radius-200","value":"1rem"}]",
+      "type": "text",
+    },
+  ],
+}
+`;
+
+exports[`getCSSTokens handler > should return all box-shadows tokens 1`] = `
+{
+  "content": [
+    {
+      "text": "[{"token":"--box-shadow-sm","value":"0px 2px 5px rgba(0, 0, 0, 0.1)"},{"token":"--box-shadow-lg","value":"0px 2px 20px rgba(0, 0, 0, 0.1)"},{"token":"--box-shadow-lg-hover","value":"0px 10px 20px rgba(0, 0, 0, 0.2)"}]",
+      "type": "text",
+    },
+  ],
+}
+`;
+
+exports[`getCSSTokens handler > should return all color tokens 1`] = `
+{
+  "content": [
+    {
+      "text": "[{"token":"--color-alert-100","value":"#FFD6D6"},{"token":"--color-alert-200","value":"#FF9999"},{"token":"--color-alert-300","value":"#F93939"},{"token":"--color-alert-400","value":"#DA0707"},{"token":"--color-alert-500","value":"#A80505"},{"token":"--color-border-100","value":"#E8EAEC"},{"token":"--color-border-200","value":"#E0E1E5"},{"token":"--color-border-300","value":"#D7D9DD"},{"token":"--color-border-400","value":"#C5C8CE"},{"token":"--color-border-500","value":"#B7BBC2"},{"token":"--color-text-100","value":"#FFFFFF"},{"token":"--color-text-200","value":"#B5B0B5"},{"token":"--color-text-300","value":"#575157"},{"token":"--color-text-400","value":"#3B353B"},{"token":"--color-text-500","value":"#0D0C0D"},{"token":"--color-text-inverted-100","value":"#0D0C0D"},{"token":"--color-text-inverted-200","value":"#77758A"},{"token":"--color-text-inverted-300","value":"#9D9CAB"},{"token":"--color-text-inverted-400","value":"#D3D3DA"},{"token":"--color-text-inverted-500","value":"#FFFFFF"},{"token":"--color-info-100","value":"#E5F3FF"},{"token":"--color-info-200","value":"#C2E3FF"},{"token":"--color-info-300","value":"#8FCBFF"},{"token":"--color-info-400","value":"#0B99FF"},{"token":"--color-info-500","value":"#007DD6"},{"token":"--color-primary-100","value":"#F3F0FA"},{"token":"--color-primary-200","value":"#E8E3F6"},{"token":"--color-primary-300","value":"#CFC6ED"},{"token":"--color-primary-400","value":"#5E43C2"},{"token":"--color-primary-500","value":"#4D35A1"},{"token":"--color-success-100","value":"#E8F6E3"},{"token":"--color-success-200","value":"#C8E9BB"},{"token":"--color-success-300","value":"#A7DB93"},{"token":"--color-success-400","value":"#86D06D"},{"token":"--color-success-500","value":"#65C345"},{"token":"--color-surface-100","value":"#FFFFFF"},{"token":"--color-surface-200","value":"#F9FAFB"},{"token":"--color-surface-300","value":"#F1F2F4"},{"token":"--color-surface-400","value":"#E8EAEC"},{"token":"--color-surface-500","value":"#E0E1E5"},{"token":"--color-surface-600","value":"#D7D9DD"},{"token":"--color-surface-700","value":"#75767E"},{"token":"--color-surface-800","value":"#1C1B27"},{"token":"--color-surface-inverted-100","value":"#1C1B27"},{"token":"--color-surface-inverted-200","value":"#3A384D"},{"token":"--color-surface-inverted-300","value":"#5B5974"},{"token":"--color-surface-inverted-400","value":"#7F7D95"},{"token":"--color-surface-inverted-500","value":"#ACAABC"},{"token":"--color-warning-100","value":"#FFEDD6"},{"token":"--color-warning-200","value":"#FFE0B8"},{"token":"--color-warning-300","value":"#FFCE8F"},{"token":"--color-warning-400","value":"#FFB95E"},{"token":"--color-warning-500","value":"#FF9D1F"}]",
+      "type": "text",
+    },
+  ],
+}
+`;
+
+exports[`getCSSTokens handler > should return all font tokens 1`] = `
+{
+  "content": [
+    {
+      "text": "[{"token":"--font-family-serif","value":"'Noe Text', 'PT Serif', serif"},{"token":"--font-family-sans","value":"'Roboto', sans-serif"},{"token":"--font-family-inter","value":"'Inter', 'Helvetica Neue', sans-serif"},{"token":"--font-line-height-100","value":"1.4"},{"token":"--font-line-height-200","value":"1.5"},{"token":"--font-line-height-300","value":"1.3"},{"token":"--font-line-height-400","value":"1.4"},{"token":"--font-line-height-500","value":"1.3"},{"token":"--font-line-height-600","value":"1.5"},{"token":"--font-size-100","value":"0.875rem"},{"token":"--font-size-200","value":"1rem"},{"token":"--font-size-300","value":"1.125rem"},{"token":"--font-size-400","value":"1.25rem"},{"token":"--font-size-500","value":"1.5rem"},{"token":"--font-size-600","value":"2rem"}]",
+      "type": "text",
+    },
+  ],
+}
+`;
+
+exports[`getCSSTokens handler > should return all spacing tokens 1`] = `
+{
+  "content": [
+    {
+      "text": "[{"token":"--space-scale-1","value":"0.5rem"},{"token":"--space-scale-2","value":"1rem"},{"token":"--space-scale-3","value":"1.5rem"},{"token":"--space-scale-4","value":"2.5rem"},{"token":"--space-scale-5","value":"3.5rem"},{"token":"--space-scale-6","value":"4.5rem"},{"token":"--space-scale-7","value":"5.5rem"},{"token":"--space-scale-8","value":"6.5rem"},{"token":"--space-scale-9","value":"7.5rem"},{"token":"--space-scale-10","value":"8.5rem"},{"token":"--space-scale-0-5","value":"0.25rem"},{"token":"--space-scale-1-5","value":"0.75rem"},{"token":"--space-scale-2-5","value":"1.25rem"},{"token":"--space-scale-3-5","value":"2rem"},{"token":"--space-scale-4-5","value":"3rem"},{"token":"--space-scale-5-5","value":"4rem"},{"token":"--space-scale-6-5","value":"5rem"},{"token":"--space-scale-7-5","value":"6rem"},{"token":"--space-scale-8-5","value":"7rem"},{"token":"--space-scale-9-5","value":"8rem"}]",
+      "type": "text",
+    },
+  ],
+}
+`;
+
+exports[`getCSSTokens handler > should return error on invalid category 1`] = `
+{
+  "content": [
+    {
+      "text": "{"error":"Invalid category 'doctorWhoIsTheBestShowInTheWorld'","available":["color","font","space","border","border-radius","box-shadow"]}",
+      "type": "text",
+    },
+  ],
+}
+`;

package/src/tools/getCSSTokens/handler.test.ts

@@ -0,0 +1,39 @@
+import handler from './handler.js';
+import { describe, expect, it } from 'vitest';
+
+describe('getCSSTokens handler', () => {
+  it('should return all color tokens', () => {
+    const result = handler({ category: 'color' });
+    expect(result).toMatchSnapshot();
+  });
+
+  it('should return all spacing tokens', () => {
+    const result = handler({ category: 'space' });
+    expect(result).toMatchSnapshot();
+  });
+
+  it('should return all font tokens', () => {
+    const result = handler({ category: 'font' });
+    expect(result).toMatchSnapshot();
+  });
+
+  it('should return all box-shadows tokens', () => {
+    const result = handler({ category: 'box-shadow' });
+    expect(result).toMatchSnapshot();
+  });
+
+  it('should return all border tokens', () => {
+    const result = handler({ category: 'border' });
+    expect(result).toMatchSnapshot();
+  });
+
+  it('should return all border-radius tokens', () => {
+    const result = handler({ category: 'border-radius' });
+    expect(result).toMatchSnapshot();
+  });
+
+  it('should return error on invalid category', () => {
+    const result = handler({ category: 'doctorWhoIsTheBestShowInTheWorld' });
+    expect(result).toMatchSnapshot();
+  });
+});

package/src/tools/getCSSTokens/handler.ts

@@ -0,0 +1,36 @@
+import { CallToolResult } from '@modelcontextprotocol/sdk/types.js';
+import designTokens from '@triptease/stylesheet/tokens' with { type: 'json' };
+import { buildTokens } from '@/tools/getCSSTokens/utils.js';
+
+export interface GetDesignTokensArgs {
+  category: string;
+}
+
+export default (args: GetDesignTokensArgs): CallToolResult => {
+  const category = args.category;
+  const tokens = buildTokens(designTokens);
+
+  const categories = Object.keys(tokens);
+  if (!categories.includes(category)) {
+    return {
+      content: [
+        {
+          type: 'text',
+          text: JSON.stringify({
+            error: `Invalid category '${category}'`,
+            available: categories,
+          }),
+        },
+      ],
+    };
+  }
+
+  return {
+    content: [
+      {
+        type: 'text',
+        text: JSON.stringify(tokens[category]),
+      },
+    ],
+  };
+};

package/src/tools/getCSSTokens/index.ts

@@ -0,0 +1,15 @@
+import handler from './handler.js';
+import { z } from 'zod';
+
+const toolDefinition = {
+  name: 'get_css_tokens',
+  config: {
+    description: 'Returns the CSS tokens for a specific category.',
+    inputSchema: {
+      category: z.string().describe('Token category: one of the category names returned by the listCSSTokens tool.'),
+    },
+  },
+  handler: handler,
+};
+
+export default toolDefinition;

package/src/tools/getCSSTokens/utils.ts

@@ -0,0 +1,31 @@
+export interface TokenOutput {
+  token: string;
+  value: string;
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const isDesignToken = (v: any): v is { value: string; path: string[] } => {
+  return v && typeof v === 'object' && typeof v.value === 'string' && Array.isArray(v.path);
+};
+
+const processTokenGroup = (prefix: string[], group: object): TokenOutput[] => {
+  return Object.entries(group).flatMap(([key, value]) => {
+    if (isDesignToken(value)) {
+      return { token: `--${[...prefix, key].join('-')}`, value: value.value };
+    } else if (value && typeof value === 'object') {
+      return processTokenGroup([...prefix, key], value);
+    } else {
+      return [];
+    }
+  });
+};
+
+export const buildTokens = (input: Record<string, object>): Record<string, TokenOutput[]> => {
+  const result: Record<string, TokenOutput[]> = {};
+
+  for (const category of Object.keys(input).filter((category) => category !== 'asset')) {
+    result[category] = processTokenGroup([category], input[category]);
+  }
+
+  return result;
+};

package/src/tools/getComponentDocs/__snapshots__/handler.test.ts.snap

@@ -0,0 +1,23 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`getComponentDocs handler > should return not found if the provided component does not exist in the manifest 1`] = `
+{
+  "content": [
+    {
+      "text": "{"error":"Component 'foo' not found","available":["button","textinput","numberinput","textarea","select","checkbox","radio","toggle","badge","card","table","typography","dialog","combobox","date-picker","date-range-picker","bar-chart","line-chart"]}",
+      "type": "text",
+    },
+  ],
+}
+`;
+
+exports[`getComponentDocs handler > should return with the manifest entry if the component exists 1`] = `
+{
+  "content": [
+    {
+      "text": "{"name":"Button","description":"Interactive button component with multiple themes and states","element":"button","usageGuidance":{"whenToUse":["Submitting forms","Triggering actions (save, delete, confirm)","Opening modals or dialogs","Navigation to a new page or state"],"avoid":["For navigation to external pages (use links instead)","To display non-interactive information (use text or badges)"]},"dataAttributes":{"data-theme":{"type":"enum","values":["primary","secondary","tertiary","suggestion","inline","destructive-primary","destructive-secondary","destructive-tertiary"],"default":"primary","description":"Visual theme of the button. Use primary for main actions, secondary for supporting actions, tertiary for minimal emphasis. Use destructive themes for actions that cannot be undone (delete, remove). All themes work with disabled and data-loading attributes."},"data-loading":{"type":"boolean","values":["true",null],"description":"Shows loading spinner. Always pair with aria-busy for accessibility."}},"classes":{"small":"Smaller button size for compact interfaces","large":"Larger button size for emphasis"},"attributes":{"disabled":{"type":"boolean","description":"Disables the button. Pair with aria-disabled for accessibility."}},"states":["default","hover","focus","disabled","loading"],"examples":[{"title":"Basic usage","code":"<button>Click Me</button>"}]}",
+      "type": "text",
+    },
+  ],
+}
+`;

package/src/tools/getComponentDocs/handler.test.ts

@@ -0,0 +1,14 @@
+import handler from './handler.js';
+import { describe, expect, it } from 'vitest';
+
+describe('getComponentDocs handler', () => {
+  it('should return not found if the provided component does not exist in the manifest', () => {
+    const result = handler({ component: 'foo' });
+    expect(result).toMatchSnapshot();
+  });
+
+  it('should return with the manifest entry if the component exists', () => {
+    const result = handler({ component: 'button' });
+    expect(result).toMatchSnapshot();
+  });
+});

package/src/tools/getComponentDocs/handler.ts

@@ -0,0 +1,34 @@
+import { CallToolResult } from '@modelcontextprotocol/sdk/types.js';
+import { componentManifest } from '@/manifests/components/index.js';
+
+export interface GetComponentDocsArgs {
+  component: string;
+}
+
+export default (args: GetComponentDocsArgs): CallToolResult => {
+  const componentName = args.component.toLowerCase();
+  const component = componentManifest[componentName];
+
+  if (!component) {
+    return {
+      content: [
+        {
+          type: 'text',
+          text: JSON.stringify({
+            error: `Component '${componentName}' not found`,
+            available: Object.keys(componentManifest),
+          }),
+        },
+      ],
+    };
+  }
+
+  return {
+    content: [
+      {
+        type: 'text',
+        text: JSON.stringify(component),
+      },
+    ],
+  };
+};

package/src/tools/getComponentDocs/index.ts

@@ -0,0 +1,15 @@
+import { z } from 'zod';
+import handler from './handler.js';
+
+const toolDefinition = {
+  name: 'get_component_docs',
+  config: {
+    description: 'Get documentation for a design system component (button, input, badge, checkbox, card, etc.)',
+    inputSchema: {
+      component: z.string().describe("Component name (e.g., 'button', 'input', 'badge')"),
+    },
+  },
+  handler,
+};
+
+export default toolDefinition;

package/src/tools/getSetupGuide/__snapshots__/handler.test.ts.snap

@@ -0,0 +1,34 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`getSetupGuide handler > should return a specific guide when type is provided 1`] = `
+{
+  "content": [
+    {
+      "text": "{"error":"Setup guide 'foo' not found","available":[{"key":"npm","name":"NPM Stylesheet Setup","description":"Setup instructions for using the stylesheet package via npm."},{"key":"cdn","name":"CDN Stylesheet Setup","description":"Setup instructions for using the stylesheet via CDN."}]}",
+      "type": "text",
+    },
+  ],
+}
+`;
+
+exports[`getSetupGuide handler > should return all setup guides if no type is given 1`] = `
+{
+  "content": [
+    {
+      "text": "{"message":"Multiple setup options available. Choose based on user preference or project requirements.","options":[{"type":"npm","name":"NPM Stylesheet Setup","description":"Setup instructions for using the stylesheet package via npm.","guide":{"name":"NPM Stylesheet Setup","description":"Setup instructions for using the stylesheet package via npm.","steps":[{"title":"Install the stylesheet package","description":"Choose your package manager:","code":"# NPM\\nnpm install @triptease/stylesheet\\n\\n# Yarn\\nyarn add @triptease/stylesheet\\n\\n# Bun\\nbun add @triptease/stylesheet","language":"bash"},{"title":"Import the stylesheet","description":"Add this import to your application entry point:","code":"import '@triptease/stylesheet';","language":"typescript"}],"notes":["Current version: @triptease/stylesheet@1.4.1"]}},{"type":"cdn","name":"CDN Stylesheet Setup","description":"Setup instructions for using the stylesheet via CDN.","guide":{"name":"CDN Stylesheet Setup","description":"Setup instructions for using the stylesheet via CDN.","steps":[{"title":"Add stylesheet link to HTML","description":"Include this in the <head> of your HTML document:","code":"<head>\\n    <!-- Specific version (recommended) -->\\n    <link rel=\\"stylesheet\\" href=\\"https://cdn.design-system.triptease.io/1.4.1/triptease.css\\">\\n\\n    <!-- Or, latest version (dangerous - breaking changes may occur) -->\\n    <link rel=\\"stylesheet\\" href=\\"https://cdn.design-system.triptease.io/triptease.css\\">\\n</head>","language":"html"}]}}]}",
+      "type": "text",
+    },
+  ],
+}
+`;
+
+exports[`getSetupGuide handler > should return an error for an invalid type 1`] = `
+{
+  "content": [
+    {
+      "text": "{"error":"Setup guide 'invalidtype' not found","available":[{"key":"npm","name":"NPM Stylesheet Setup","description":"Setup instructions for using the stylesheet package via npm."},{"key":"cdn","name":"CDN Stylesheet Setup","description":"Setup instructions for using the stylesheet via CDN."}]}",
+      "type": "text",
+    },
+  ],
+}
+`;

package/src/tools/getSetupGuide/handler.test.ts

@@ -0,0 +1,20 @@
+import handler from './handler.js';
+import { describe, it, expect } from 'vitest';
+
+describe('getSetupGuide handler', () => {
+  it('should return all setup guides if no type is given', () => {
+    const result = handler({});
+    expect(result).toMatchSnapshot();
+  });
+
+  it('should return a specific guide when type is provided', () => {
+    const type = 'foo';
+    const result = handler({ type });
+    expect(result).toMatchSnapshot();
+  });
+
+  it('should return an error for an invalid type', () => {
+    const result = handler({ type: 'invalidType' });
+    expect(result).toMatchSnapshot();
+  });
+});

package/src/tools/getSetupGuide/handler.ts

@@ -0,0 +1,59 @@
+import { setupGuides } from './setupGuides.js';
+import { CallToolResult } from '@modelcontextprotocol/sdk/types.js';
+
+export interface GetSetupGuideArgs {
+  type?: string;
+}
+
+export default (args: GetSetupGuideArgs): CallToolResult => {
+  if (!args.type) {
+    const allGuides = Object.entries(setupGuides).map(([key, guide]) => ({
+      type: key,
+      name: guide.name,
+      description: guide.description,
+      guide,
+    }));
+
+    return {
+      content: [
+        {
+          type: 'text',
+          text: JSON.stringify({
+            message: 'Multiple setup options available. Choose based on user preference or project requirements.',
+            options: allGuides,
+          }),
+        },
+      ],
+    };
+  }
+
+  const guideType = args.type.toLowerCase();
+  const guide = setupGuides[guideType];
+
+  if (!guide) {
+    return {
+      content: [
+        {
+          type: 'text',
+          text: JSON.stringify({
+            error: `Setup guide '${guideType}' not found`,
+            available: Object.keys(setupGuides).map((key) => ({
+              key,
+              name: setupGuides[key].name,
+              description: setupGuides[key].description,
+            })),
+          }),
+        },
+      ],
+    };
+  }
+
+  return {
+    content: [
+      {
+        type: 'text',
+        text: JSON.stringify(guide, null, 2),
+      },
+    ],
+  };
+};

package/src/tools/getSetupGuide/index.ts

@@ -0,0 +1,20 @@
+import { z } from 'zod';
+import handler from './handler.js';
+
+const toolDefinition = {
+  name: 'get_setup_guide',
+  config: {
+    description: 'Get setup and installation instructions for integrating the design system into your project',
+    inputSchema: {
+      type: z
+        .union([z.literal('npm'), z.literal('cdn')])
+        .optional()
+        .describe(
+          'Optional: npm for npm/yarn/bun installation, cdn for CDN link. If omitted, returns both options so you can present them to the user.'
+        ),
+    },
+  },
+  handler: handler,
+};
+
+export default toolDefinition;

package/src/tools/getSetupGuide/setupGuides.ts

@@ -0,0 +1,62 @@
+import packageJson from '@/../package.json' with { type: 'json' };
+
+const stylesheetVersion = packageJson.dependencies['@triptease/stylesheet'];
+
+export interface SetupGuide {
+  name: string;
+  description: string;
+  steps: Array<{
+    title: string;
+    description?: string;
+    code?: string;
+    language?: string;
+  }>;
+  notes?: string[];
+}
+
+export const setupGuides: Record<string, SetupGuide> = {
+  npm: {
+    name: 'NPM Stylesheet Setup',
+    description: 'Setup instructions for using the stylesheet package via npm.',
+    steps: [
+      {
+        title: 'Install the stylesheet package',
+        description: 'Choose your package manager:',
+        code: `# NPM
+npm install @triptease/stylesheet
+
+# Yarn
+yarn add @triptease/stylesheet
+
+# Bun
+bun add @triptease/stylesheet`,
+        language: 'bash',
+      },
+      {
+        title: 'Import the stylesheet',
+        description: 'Add this import to your application entry point:',
+        code: `import '@triptease/stylesheet';`,
+        language: 'typescript',
+      },
+    ],
+    notes: [`Current version: @triptease/stylesheet@${stylesheetVersion}`],
+  },
+  cdn: {
+    name: 'CDN Stylesheet Setup',
+    description: 'Setup instructions for using the stylesheet via CDN.',
+    steps: [
+      {
+        title: 'Add stylesheet link to HTML',
+        description: 'Include this in the <head> of your HTML document:',
+        code: `<head>
+    <!-- Specific version (recommended) -->
+    <link rel="stylesheet" href="https://cdn.design-system.triptease.io/${stylesheetVersion}/triptease.css">
+
+    <!-- Or, latest version (dangerous - breaking changes may occur) -->
+    <link rel="stylesheet" href="https://cdn.design-system.triptease.io/triptease.css">
+</head>`,
+        language: 'html',
+      },
+    ],
+  },
+};

package/src/tools/listCSSTokens/__snapshots__/handler.test.ts.snap

@@ -0,0 +1,12 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`listCSSTokens handler > should summarise all available tokens 1`] = `
+{
+  "content": [
+    {
+      "text": "{"color":{"count":53},"font":{"count":15},"space":{"count":20},"border":{"count":1},"border-radius":{"count":3},"box-shadow":{"count":3}}",
+      "type": "text",
+    },
+  ],
+}
+`;

package/src/tools/listCSSTokens/handler.test.ts

@@ -0,0 +1,9 @@
+import handler from './handler.js';
+import { describe, expect, it } from 'vitest';
+
+describe('listCSSTokens handler', () => {
+  it('should summarise all available tokens', () => {
+    const result = handler();
+    expect(result).toMatchSnapshot();
+  });
+});

package/src/tools/listCSSTokens/handler.ts

@@ -0,0 +1,32 @@
+import { CallToolResult } from '@modelcontextprotocol/sdk/types.js';
+import designTokens from '@triptease/stylesheet/tokens' with { type: 'json' };
+import { buildTokens } from '@/tools/getCSSTokens/utils.js';
+
+interface Summary {
+  count: number;
+}
+
+interface SummaryMap {
+  [category: string]: Summary;
+}
+
+export default (): CallToolResult => {
+  const tokens = buildTokens(designTokens);
+
+  const categories = Object.keys(tokens);
+  const result: SummaryMap = {};
+
+  for (const category of categories) {
+    const tokenCount = tokens[category].length;
+    result[category] = { count: tokenCount };
+  }
+
+  return {
+    content: [
+      {
+        type: 'text',
+        text: JSON.stringify(result),
+      },
+    ],
+  };
+};

package/src/tools/listCSSTokens/index.ts

@@ -0,0 +1,12 @@
+import handler from './handler.js';
+
+const toolDefinition = {
+  name: 'list_css_tokens',
+  config: {
+    description:
+      'Returns a summary of all available CSS tokens with a count of how many tokens exist in each category. Category names are used when using the get_css_tokens tool.',
+  },
+  handler: handler,
+};
+
+export default toolDefinition;