@sit-onyx/modelcontextprotocol 0.1.1-dev-20260630065749 → 0.2.0-dev-20260701075643

package/dist/config.d.ts

@@ -5,6 +5,8 @@ export declare const REGISTRY_URL: string;
  */
 export declare const SIT_ONYX_MIN_VERSION = "1.12.0";
 export declare const SIT_ONYX_COMPONENT_META_FILE = "package/dist/component-meta.json";
+export declare const SIT_ONYX_DESIGN_TOKENS_FILE = "package/src/styles/variables/themes/onyx.css";
+export declare const SIT_ONYX_DESIGN_TOKENS_SPACINGS_FILE = "package/src/styles/variables/spacing.css";
 /**
  * Minimum `@sit-onyx/icons` version that provides the `metadata.json` file
  */

package/dist/index.js

@@ -1,7 +1,9 @@
 #!/usr/bin/env node
 import { createRequire } from "node:module";
 import { error, log } from "node:console";
+import { mkdir, stat, writeFile } from "node:fs/promises";
 import { parseArgs } from "node:util";
+import { resolve } from "node:path";
 import { StreamableHTTPServerTransport } from "@modelcontextprotocol/sdk/server/streamableHttp.js";
 import { createServer as createServer$1 } from "node:http";
 import { McpServer, ResourceTemplate } from "@modelcontextprotocol/sdk/server/mcp.js";
@@ -77,20 +79,101 @@ var package_default = {
 	},
 	dependencies: { "@modelcontextprotocol/sdk": "^1.29.0" },
 	devDependencies: {
+		"@adobe/css-tools": "^4.5.0",
 		"@sit-onyx/shared": "workspace:^",
+		"@types/mdast": "^4.0.4",
 		"@types/node": "catalog:",
 		"@types/tar-stream": "^3.1.4",
+		"@types/unist": "^3.0.3",
 		"query-registry": "^4.3.0",
+		"remark": "^15.0.1",
+		"remark-frontmatter": "^5.0.0",
+		"remark-parse": "^11.0.0",
+		"remark-stringify": "^11.0.0",
 		"tar-stream": "^3.2.0",
 		"typescript": "catalog:",
+		"unified": "^11.0.5",
 		"unplugin-dts": "catalog:",
 		"vite": "catalog:",
 		"vue-component-meta": "catalog:",
+		"yaml": "^2.9.0",
 		"zod": "^4.4.3"
 	},
 	engines: { "node": ">=20" }
 };
 //#endregion
+//#region src/resources/skills/onyx-components/SKILL.md
+var SKILL_exports$2 = /* @__PURE__ */ __exportAll({
+	default: () => SKILL_default$2,
+	frontmatter: () => frontmatter$2,
+	raw: () => raw$2
+});
+var SKILL_default$2 = "# Onyx Components\n\nImplement and configure Onyx Vue 3 UI components using authoritative API definitions.\n\n## Rule: Mandatory Dynamic API Lookups (MCP)\n\nOnyx component APIs are dynamic and change across versions. **NEVER guess or assume props, events, or slots.**\n\n## Onyx MCP Server Installation & Setup\n\nTo allow coding-agents to dynamically query component API specifications and icons, install and configure the official Onyx Model Context Protocol (MCP) server.\n\n### 1. Global Installation\n\nInstall the package globally using your package manager:\n\n```bash\n# Using npm\nnpm install -g @sit-onyx/modelcontextprotocol\n\n# Using pnpm\npnpm install -g @sit-onyx/modelcontextprotocol\n```\n\nVerify the installation is successful:\n\n```bash\nonyx-mcp -h\n```\n\n### 2. General MCP Client Configuration\n\nConfigure the server in your preferred MCP-compliant client (such as Cursor, Claude Desktop, VS Code plugins, or general command-line utilities) using these standard parameters:\n\n* **Command:** `onyx-mcp`\n* **Arguments:** `[\"-r\"]` (Optional: Use the recursive flag depending on environment)\n* **Description:** `\"Information about components of the onyx UI component library\"`\n\n### Step 1: Version Autodiscovery\n\nBefore querying the MCP server, you **MUST** discover the exact Onyx version used in the project:\n\n1. Open and parse the root `package.json`.\n2. Find the version defined under `dependencies` or `devDependencies` for `sit-onyx`.\n3. Use this parsed version number (e.g. `\"1.2.3\"`) as the required `version` parameter for all subsequent MCP tool calls.\n\n### Step 2: Query the MCP Server\n\nUse the connected `onyx-mcp` tools using your discovered version:\n\n* `mcp_onyx-mcp_list-components`: Discover the exact names of available components in this version.\n* `mcp_onyx-mcp_get-component-api`: Retrieve authoritative props, events, and slots for a specific component before writing code.\n* `mcp_onyx-mcp_list-icons`: Retrieve available icon names when implementing components with icon properties.\n\n***\n\n## Component Implementation Rules\n\n### Action Components (Buttons & Links)\n\n* **Props-based Links:** Components like `OnyxButton`, `OnyxIconButton`, `OnyxSystemButton`, `OnyxMenuItem`, and `OnyxNavItem` support a `link` prop. Do not wrap these components in raw `<a>` tags; pass the URL to the `link` prop.\n* **Headless Links:** Use the `useLink` composable (`const { navigate, isActive } = useLink()`) or `OnyxRouterLink` for custom unstyled navigation components.\n\n### Form Elements\n\n* **Labels & Messages:** Always configure standard `Message` and `LabelPositions` properties consistently.\n* **Loading State:** Implement built-in `Skeleton` loading states when loading form data.\n* **Accessibility:** Use proper labels and fieldsets for complex multi-input forms (`date-picker`, `radio-group`, `checkbox-group`).\n\n### Cards & Layout Structure\n\n* Nest and structure basic components (`Accordion`, `Cards`, `Badge`, `Tag`) inside the Onyx grid layout (see `onyx-foundation`) to prevent layout breaking.\n\n***\n\n## Validation & Quality Check\n\nAfter writing or updating components, you **MUST** run the following verification steps:\n\n1. **Type Check:** Run TypeScript verification (e.g., `npx vue-tsc --noEmit` or `npm run type-check`) to confirm no invalid props or event bindings exist.\n2. **Linter Check:** Run standard project linters (e.g., `npm run lint` or `eslint .`) to confirm code style and rules are respected.\n3. **Manual Verification:** Confirm all slots and custom events mapped conform to the authoritative API fetched from the MCP.\n";
+var raw$2 = "---\nname: onyx-components\ndescription: Best practices and dynamic API lookup instructions for Onyx UI components. Use when implementing UI features, forms, or building Vue templates.\nlicense: Apache-2.0\n---\n\n# Onyx Components\n\nImplement and configure Onyx Vue 3 UI components using authoritative API definitions.\n\n## Rule: Mandatory Dynamic API Lookups (MCP)\n\nOnyx component APIs are dynamic and change across versions. **NEVER guess or assume props, events, or slots.**\n\n## Onyx MCP Server Installation & Setup\n\nTo allow coding-agents to dynamically query component API specifications and icons, install and configure the official Onyx Model Context Protocol (MCP) server.\n\n### 1. Global Installation\n\nInstall the package globally using your package manager:\n\n```bash\n# Using npm\nnpm install -g @sit-onyx/modelcontextprotocol\n\n# Using pnpm\npnpm install -g @sit-onyx/modelcontextprotocol\n```\n\nVerify the installation is successful:\n\n```bash\nonyx-mcp -h\n```\n\n### 2. General MCP Client Configuration\n\nConfigure the server in your preferred MCP-compliant client (such as Cursor, Claude Desktop, VS Code plugins, or general command-line utilities) using these standard parameters:\n\n- **Command:** `onyx-mcp`\n- **Arguments:** `[\"-r\"]` (Optional: Use the recursive flag depending on environment)\n- **Description:** `\"Information about components of the onyx UI component library\"`\n\n### Step 1: Version Autodiscovery\n\nBefore querying the MCP server, you **MUST** discover the exact Onyx version used in the project:\n\n1. Open and parse the root `package.json`.\n2. Find the version defined under `dependencies` or `devDependencies` for `sit-onyx`.\n3. Use this parsed version number (e.g. `\"1.2.3\"`) as the required `version` parameter for all subsequent MCP tool calls.\n\n### Step 2: Query the MCP Server\n\nUse the connected `onyx-mcp` tools using your discovered version:\n\n- `mcp_onyx-mcp_list-components`: Discover the exact names of available components in this version.\n- `mcp_onyx-mcp_get-component-api`: Retrieve authoritative props, events, and slots for a specific component before writing code.\n- `mcp_onyx-mcp_list-icons`: Retrieve available icon names when implementing components with icon properties.\n\n---\n\n## Component Implementation Rules\n\n### Action Components (Buttons & Links)\n\n- **Props-based Links:** Components like `OnyxButton`, `OnyxIconButton`, `OnyxSystemButton`, `OnyxMenuItem`, and `OnyxNavItem` support a `link` prop. Do not wrap these components in raw `<a>` tags; pass the URL to the `link` prop.\n- **Headless Links:** Use the `useLink` composable (`const { navigate, isActive } = useLink()`) or `OnyxRouterLink` for custom unstyled navigation components.\n\n### Form Elements\n\n- **Labels & Messages:** Always configure standard `Message` and `LabelPositions` properties consistently.\n- **Loading State:** Implement built-in `Skeleton` loading states when loading form data.\n- **Accessibility:** Use proper labels and fieldsets for complex multi-input forms (`date-picker`, `radio-group`, `checkbox-group`).\n\n### Cards & Layout Structure\n\n- Nest and structure basic components (`Accordion`, `Cards`, `Badge`, `Tag`) inside the Onyx grid layout (see `onyx-foundation`) to prevent layout breaking.\n\n---\n\n## Validation & Quality Check\n\nAfter writing or updating components, you **MUST** run the following verification steps:\n\n1. **Type Check:** Run TypeScript verification (e.g., `npx vue-tsc --noEmit` or `npm run type-check`) to confirm no invalid props or event bindings exist.\n2. **Linter Check:** Run standard project linters (e.g., `npm run lint` or `eslint .`) to confirm code style and rules are respected.\n3. **Manual Verification:** Confirm all slots and custom events mapped conform to the authoritative API fetched from the MCP.\n";
+var frontmatter$2 = {
+	"name": "onyx-components",
+	"description": "Best practices and dynamic API lookup instructions for Onyx UI components. Use when implementing UI features, forms, or building Vue templates.",
+	"license": "Apache-2.0"
+};
+//#endregion
+//#region src/resources/skills/onyx-foundation/SKILL.md
+var SKILL_exports$1 = /* @__PURE__ */ __exportAll({
+	default: () => SKILL_default$1,
+	frontmatter: () => frontmatter$1,
+	raw: () => raw$1
+});
+var SKILL_default$1 = "# Onyx Foundation & Theming\n\nApply Onyx styling foundations, CSS variables, responsive grid, and layout rules.\n\n## Theming & Colors\n\nOnyx supports light and dark themes out-of-the-box. Theme switching is handled automatically.\n\n### Rule: CSS Variables Only\n\n**NEVER hardcode hex, rgb, or hsl color values.** Always use semantic Onyx CSS variables (prefixed with `--onyx-`).\n\n* **Base backgrounds:** `var(--onyx-color-base-background-tinted)`, `var(--onyx-color-base-background-blank)`\n* **Primary brand:** `var(--onyx-color-base-primary-500)`, `var(--onyx-color-base-primary-100)`\n* **Text & icons:** `var(--onyx-color-text-icons-primary-soft)`, `var(--onyx-color-text-icons-primary-medium)`, `var(--onyx-color-text-icons-primary-intense)`\n* **Component states:** `var(--onyx-color-component-cta-default)`, `var(--onyx-color-component-border-primary)`, `var(--onyx-color-component-focus-primary)`\n\n*Note: Access ONLY Semantic variables. Do NOT use global or component variables directly in applications.*\n\n## Density\n\nDensity levels control the vertical white space and heights (base heights: Compact = 32px, Default = 40px, Cozy = 48px).\nApply density via properties on supported components or by adding these CSS classes to any element:\n\n* `.onyx-density-compact`\n* `.onyx-density-default`\n* `.onyx-density-cozy`\n\n## Breakpoints\n\nThe design system defines six standard breakpoints:\n\n* `2xs`: `320px` to `576px` (Max 4 columns)\n* `xs`: `577px` to `768px` (Max 8 columns)\n* `sm`: `769px` to `992px` (Max 8 columns)\n* `md`: `993px` to `1440px` (Max 12 columns)\n* `lg`: `1441px` to `1920px` (Max 12 or 16 columns)\n* `xl`: `1921px` and beyond (Max 12, 16, or 20 columns)\n\n### Responsive SCSS Mixins\n\nImport `\"sit-onyx/breakpoints.scss\"` to apply media or container queries:\n\n```scss\n@use \"sit-onyx/breakpoints.scss\";\n\n// Media queries (compares against whole screen width)\n.my-screen-class {\n  @include breakpoints.screen(max, sm) {\n    /* styles for sm and smaller */\n  }\n  @include breakpoints.screen(min, md) {\n    /* styles for md and larger */\n  }\n}\n\n// Container queries (compares against nearest container width)\n// MUST set container-type on the parent element\n.my-container-class {\n  container-type: inline-size;\n\n  @include breakpoints.container(max, md) {\n    /* styles for md container and smaller */\n  }\n  @include breakpoints.container(min, lg) {\n    /* styles for lg container and larger */\n  }\n}\n```\n\n## Grid System\n\nOnyx uses container-query-based grids. The nearest parent component with `container-type: inline-size;` (automatically set by `OnyxPageLayout`, `OnyxAppLayout`, `OnyxSidebar`) determines the active grid width.\n\n### Grid Classes\n\n* **Container:** `.onyx-grid` (Defines a grid container)\n* **Spanning Columns:** `.onyx-grid-span-<number>` (Define exact span from 1 to 12)\n* **Full Width:** `.onyx-grid-span-full` (Span all available columns)\n* **Breakpoint-Specific Span:** `.onyx-grid-<breakpoint>-span-<number>` (Define column span for a specific breakpoint **and larger**)\n\n### Grid Margin\n\nApply `.onyx-grid-layout` manually to wrap page contents and add outer page margins if not using `OnyxPageLayout`.\n\n```vue\n<template>\n  <div class=\"onyx-grid\">\n    <!-- Spans 4 cols on smaller screens, 6 on md and larger -->\n    <OnyxCard class=\"onyx-grid-span-4 onyx-grid-md-span-6\">Content</OnyxCard>\n\n    <!-- Spans full width always -->\n    <OnyxCard class=\"onyx-grid-span-full\">Footer / Hero</OnyxCard>\n  </div>\n</template>\n```\n\n### Grid Customization\n\nSet these CSS classes on the root element of your application (e.g. `OnyxAppLayout`):\n\n* **Limit Max Width:** `onyx-grid-max-md` (max 1440px) or `onyx-grid-max-lg` (max 1920px)\n* **Alignment:** `onyx-grid-center` (Centers the layout when screen size exceeds max width)\n* **Max Columns (lg and beyond):** `onyx-grid-lg-16` (16 columns) or `onyx-grid-xl-20` (20 columns)\n\n## Page Layout (`OnyxPageLayout`)\n\nImplement the `OnyxPageLayout` component as the root element on every individual page/view to ensure standardized paddings, page-level scroll behavior, and unified outer page margins.\n\n```vue\n<template>\n  <OnyxPageLayout>\n    <OnyxHeadline is=\"h1\">Page Title</OnyxHeadline>\n  </OnyxPageLayout>\n</template>\n```\n\nFor recurring page elements (like sidebars, footers, or sub-navigation), wrap the `OnyxPageLayout` in a reusable component or a Nuxt layout.\n\n## Layout Principles & Page Anatomy\n\nAll custom layout constructions must align with the core Onyx layout guidelines:\n\n### Core Principles\n\n* **Responsive:** Layouts must fluidly adapt to maintain usability and visual hierarchy across all device sizes.\n* **Content-Driven:** Prioritize structural layout decisions based on the content's hierarchy and user needs, not vice versa.\n\n### The Four Page Anatomy Regions\n\n1. **Main Navigation (`OnyxNavBar`):** Persistent top/left area independent of scroll containers, providing access to top-level views.\n2. **Sidebar (`OnyxSidebar`):** Persistent left/right sidebar used for secondary navigation or master-detail detail panels.\n3. **Page Content (`OnyxPageLayout`):** The flexible central area governed by the grid system and acting as the primary scroll container.\n4. **Bottom Bar (`OnyxBottomBar`):** Scroll-independent sticky bar at the bottom for status confirmations or primary page-level triggers.\n\n### Component Alignment Rule\n\n* **STRICT Left-Alignment:** All internal component layout structures must be left-aligned to preserve scannability.\n* **Exception:** Tables and data grids may utilize center/right alignment within specific columns depending on data type formats (e.g. numeric currencies).\n\n### Visual Rhythm & Grouping\n\n* **Spatial Grouping:** Group functionally related components together using generous empty space (white space), typography, or dividers to minimize cognitive load. Ensure balanced proportions across all section distributions.\n\n***\n\n## Validation & Quality Check\n\nAfter writing custom layouts or styling overrides, you **MUST** run the following verification steps:\n\n1. **CSS Variables Audit:** Scan your stylesheets for any hardcoded hex, rgb, or hsl values, or direct global/component variable usages. Replace them with proper `--onyx-` semantic variables.\n2. **Layout Alignment Check:** Verify all custom component interiors are left-aligned (with the exception of specific table/data grid columns).\n3. **Responsive Verification:** Verify your CSS container-query selectors are properly paired with a parent `container-type: inline-size;`. Ensure no breakpoint styles break responsive fluidity.\n";
+var raw$1 = "---\nname: onyx-foundation\ndescription: Styling foundations, CSS variables, layout grid, breakpoints, and responsive mixins for Onyx. Use when writing custom CSS, designing layouts, or ensuring theme compliance.\nlicense: Apache-2.0\n---\n\n# Onyx Foundation & Theming\n\nApply Onyx styling foundations, CSS variables, responsive grid, and layout rules.\n\n## Theming & Colors\n\nOnyx supports light and dark themes out-of-the-box. Theme switching is handled automatically.\n\n### Rule: CSS Variables Only\n\n**NEVER hardcode hex, rgb, or hsl color values.** Always use semantic Onyx CSS variables (prefixed with `--onyx-`).\n\n- **Base backgrounds:** `var(--onyx-color-base-background-tinted)`, `var(--onyx-color-base-background-blank)`\n- **Primary brand:** `var(--onyx-color-base-primary-500)`, `var(--onyx-color-base-primary-100)`\n- **Text & icons:** `var(--onyx-color-text-icons-primary-soft)`, `var(--onyx-color-text-icons-primary-medium)`, `var(--onyx-color-text-icons-primary-intense)`\n- **Component states:** `var(--onyx-color-component-cta-default)`, `var(--onyx-color-component-border-primary)`, `var(--onyx-color-component-focus-primary)`\n\n_Note: Access ONLY Semantic variables. Do NOT use global or component variables directly in applications._\n\n## Density\n\nDensity levels control the vertical white space and heights (base heights: Compact = 32px, Default = 40px, Cozy = 48px).\nApply density via properties on supported components or by adding these CSS classes to any element:\n\n- `.onyx-density-compact`\n- `.onyx-density-default`\n- `.onyx-density-cozy`\n\n## Breakpoints\n\nThe design system defines six standard breakpoints:\n\n- `2xs`: `320px` to `576px` (Max 4 columns)\n- `xs`: `577px` to `768px` (Max 8 columns)\n- `sm`: `769px` to `992px` (Max 8 columns)\n- `md`: `993px` to `1440px` (Max 12 columns)\n- `lg`: `1441px` to `1920px` (Max 12 or 16 columns)\n- `xl`: `1921px` and beyond (Max 12, 16, or 20 columns)\n\n### Responsive SCSS Mixins\n\nImport `\"sit-onyx/breakpoints.scss\"` to apply media or container queries:\n\n```scss\n@use \"sit-onyx/breakpoints.scss\";\n\n// Media queries (compares against whole screen width)\n.my-screen-class {\n  @include breakpoints.screen(max, sm) {\n    /* styles for sm and smaller */\n  }\n  @include breakpoints.screen(min, md) {\n    /* styles for md and larger */\n  }\n}\n\n// Container queries (compares against nearest container width)\n// MUST set container-type on the parent element\n.my-container-class {\n  container-type: inline-size;\n\n  @include breakpoints.container(max, md) {\n    /* styles for md container and smaller */\n  }\n  @include breakpoints.container(min, lg) {\n    /* styles for lg container and larger */\n  }\n}\n```\n\n## Grid System\n\nOnyx uses container-query-based grids. The nearest parent component with `container-type: inline-size;` (automatically set by `OnyxPageLayout`, `OnyxAppLayout`, `OnyxSidebar`) determines the active grid width.\n\n### Grid Classes\n\n- **Container:** `.onyx-grid` (Defines a grid container)\n- **Spanning Columns:** `.onyx-grid-span-<number>` (Define exact span from 1 to 12)\n- **Full Width:** `.onyx-grid-span-full` (Span all available columns)\n- **Breakpoint-Specific Span:** `.onyx-grid-<breakpoint>-span-<number>` (Define column span for a specific breakpoint **and larger**)\n\n### Grid Margin\n\nApply `.onyx-grid-layout` manually to wrap page contents and add outer page margins if not using `OnyxPageLayout`.\n\n```vue\n<template>\n  <div class=\"onyx-grid\">\n    <!-- Spans 4 cols on smaller screens, 6 on md and larger -->\n    <OnyxCard class=\"onyx-grid-span-4 onyx-grid-md-span-6\">Content</OnyxCard>\n\n    <!-- Spans full width always -->\n    <OnyxCard class=\"onyx-grid-span-full\">Footer / Hero</OnyxCard>\n  </div>\n</template>\n```\n\n### Grid Customization\n\nSet these CSS classes on the root element of your application (e.g. `OnyxAppLayout`):\n\n- **Limit Max Width:** `onyx-grid-max-md` (max 1440px) or `onyx-grid-max-lg` (max 1920px)\n- **Alignment:** `onyx-grid-center` (Centers the layout when screen size exceeds max width)\n- **Max Columns (lg and beyond):** `onyx-grid-lg-16` (16 columns) or `onyx-grid-xl-20` (20 columns)\n\n## Page Layout (`OnyxPageLayout`)\n\nImplement the `OnyxPageLayout` component as the root element on every individual page/view to ensure standardized paddings, page-level scroll behavior, and unified outer page margins.\n\n```vue\n<template>\n  <OnyxPageLayout>\n    <OnyxHeadline is=\"h1\">Page Title</OnyxHeadline>\n  </OnyxPageLayout>\n</template>\n```\n\nFor recurring page elements (like sidebars, footers, or sub-navigation), wrap the `OnyxPageLayout` in a reusable component or a Nuxt layout.\n\n## Layout Principles & Page Anatomy\n\nAll custom layout constructions must align with the core Onyx layout guidelines:\n\n### Core Principles\n\n- **Responsive:** Layouts must fluidly adapt to maintain usability and visual hierarchy across all device sizes.\n- **Content-Driven:** Prioritize structural layout decisions based on the content's hierarchy and user needs, not vice versa.\n\n### The Four Page Anatomy Regions\n\n1. **Main Navigation (`OnyxNavBar`):** Persistent top/left area independent of scroll containers, providing access to top-level views.\n2. **Sidebar (`OnyxSidebar`):** Persistent left/right sidebar used for secondary navigation or master-detail detail panels.\n3. **Page Content (`OnyxPageLayout`):** The flexible central area governed by the grid system and acting as the primary scroll container.\n4. **Bottom Bar (`OnyxBottomBar`):** Scroll-independent sticky bar at the bottom for status confirmations or primary page-level triggers.\n\n### Component Alignment Rule\n\n- **STRICT Left-Alignment:** All internal component layout structures must be left-aligned to preserve scannability.\n- **Exception:** Tables and data grids may utilize center/right alignment within specific columns depending on data type formats (e.g. numeric currencies).\n\n### Visual Rhythm & Grouping\n\n- **Spatial Grouping:** Group functionally related components together using generous empty space (white space), typography, or dividers to minimize cognitive load. Ensure balanced proportions across all section distributions.\n\n---\n\n## Validation & Quality Check\n\nAfter writing custom layouts or styling overrides, you **MUST** run the following verification steps:\n\n1. **CSS Variables Audit:** Scan your stylesheets for any hardcoded hex, rgb, or hsl values, or direct global/component variable usages. Replace them with proper `--onyx-` semantic variables.\n2. **Layout Alignment Check:** Verify all custom component interiors are left-aligned (with the exception of specific table/data grid columns).\n3. **Responsive Verification:** Verify your CSS container-query selectors are properly paired with a parent `container-type: inline-size;`. Ensure no breakpoint styles break responsive fluidity.\n";
+var frontmatter$1 = {
+	"name": "onyx-foundation",
+	"description": "Styling foundations, CSS variables, layout grid, breakpoints, and responsive mixins for Onyx. Use when writing custom CSS, designing layouts, or ensuring theme compliance.",
+	"license": "Apache-2.0"
+};
+//#endregion
+//#region src/resources/skills/onyx-setup/SKILL.md
+var SKILL_exports = /* @__PURE__ */ __exportAll({
+	default: () => SKILL_default,
+	frontmatter: () => frontmatter,
+	raw: () => raw
+});
+var SKILL_default = "# Onyx Setup & Integration\n\nConfigure and initialize the Onyx Vue 3 design system, mandatory styles, fonts, internationalization, and root layout scaffolding.\n\n## Setup & Initialization\n\n### Vue 3 Setup\n\n1. Install `sit-onyx`.\n2. Import style files and initialize the Onyx plugin.\n\n```typescript\nimport { createApp } from \"vue\";\nimport { createOnyx } from \"sit-onyx\";\nimport App from \"./App.vue\";\n\n// Mandatory component styles\nimport \"sit-onyx/style.css\";\n\n// Highly recommended global application styles (sets body background, font, etc.)\nimport \"sit-onyx/global.css\";\n\nconst onyx = createOnyx({\n  // router: routerInstance // Option: Pass router instance here\n});\n\nconst app = createApp(App);\napp.use(onyx);\n```\n\n### Nuxt Setup\n\n1. Install `@sit-onyx/nuxt`.\n2. Register the module in `nuxt.config.ts`. Do not manually call `createOnyx()`.\n\n```typescript\nexport default defineNuxtConfig({\n  modules: [\"@sit-onyx/nuxt\"],\n  onyx: {\n    // optional module options here\n  },\n});\n```\n\n## Internationalization (i18n) Setup\n\nEnglish (`en-US`) is default and registered out-of-the-box. Additional languages must be registered manually.\n\n### Vue 3 Integration with `vue-i18n`\n\nTo sync translations, import the JSON file from Onyx and register it in the `createOnyx` initialization options:\n\n```typescript\nimport { createApp } from \"vue\";\nimport { createI18n } from \"vue-i18n\";\nimport { createOnyx } from \"sit-onyx\";\nimport App from \"./App.vue\";\n\n// Import required Onyx translation file\nimport onyxDE from \"sit-onyx/locales/de-DE.json\";\n\nconst i18n = createI18n({\n  legacy: false,\n  locale: \"de-DE\",\n  // your messages setup\n});\n\nconst onyx = createOnyx({\n  i18n: {\n    // Syncs initial language\n    locale: i18n.global.locale,\n    // Message locale name MUST exactly match the code in vue-i18n\n    messages: {\n      \"de-DE\": onyxDE,\n    },\n  },\n});\n\nconst app = createApp(App);\napp.use(i18n).use(onyx);\n```\n\n*Note: Onyx translations update automatically whenever you change the active language inside `vue-i18n`.*\n\n### Nuxt Integration with `@nuxtjs/i18n`\n\nThe `@sit-onyx/nuxt` module automatically registers the corresponding Onyx languages for you.\n\n**Strict BCP 47 Rule:**\nIf you use 2-digit locale codes (e.g. `es` instead of `es-ES`), you **MUST** configure the `language` property inside `nuxt.config.ts` so Onyx can map the translation correctly:\n\n```typescript\nexport default defineNuxtConfig({\n  modules: [\"@sit-onyx/nuxt\", \"@nuxtjs/i18n\"],\n  i18n: {\n    locales: [\n      { code: \"de-DE\" }, // Standard 4-digit code works automatically\n      { code: \"es\", language: \"es-ES\" }, // 2-digit code requires language mapping\n    ],\n  },\n});\n```\n\n## Recommended Font Setup\n\nInstall font packages `@fontsource-variable/source-sans-3` and `@fontsource-variable/source-code-pro`. Import them into your main entrypoint:\n\n### Vue (`main.ts`)\n\n```typescript\nimport \"@fontsource-variable/source-code-pro\";\nimport \"@fontsource-variable/source-sans-3\";\n```\n\n### Nuxt (`nuxt.config.ts`)\n\n```typescript\nexport default defineNuxtConfig({\n  css: [\"@fontsource-variable/source-code-pro\", \"@fontsource-variable/source-sans-3\"],\n});\n```\n\n## App Layout Scaffolding (Boilerplate)\n\nUse Onyx layout components to manage structural complexity, scroll behaviors, and responsive constraints.\n\n### Root Shell (`OnyxAppLayout`)\n\nPlace `OnyxAppLayout` at the root of the application (e.g. `App.vue` or `app/app.vue`). Use class modifiers to cap maximum width on large screens.\n\n```vue\n<template>\n  <!-- Cap width at 1920px (lg breakpoint) and center align the layout -->\n  <OnyxAppLayout class=\"onyx-grid-max-lg onyx-grid-center\">\n    <template #navBar>\n      <OnyxNavBar app-name=\"Example App\">\n        <OnyxNavItem label=\"Home\" link=\"/\" />\n      </OnyxNavBar>\n    </template>\n\n    <!-- Render pages inside the root layout shell -->\n    <RouterView />\n  </OnyxAppLayout>\n</template>\n```\n\n## Vue Router Integration\n\nPass the Vue router instance to `createOnyx({ router })` to enable native routing integration:\n\n* Internal links (e.g., `/my-page`) passed to navigation components (`OnyxLink`, `OnyxNavBar`, `OnyxNavItem`, `OnyxMenuItem`) navigate via Vue Router automatically.\n* Active states on `OnyxNavItem` and `OnyxMenuItem` update automatically depending on the active route.\n* Mobile flyouts close automatically upon navigation.\n* **Fallback:** Uses native browser navigation for external links, links with `target=\"_blank\"`, or when no router is registered.\n";
+var raw = "---\nname: onyx-setup\ndescription: One-time configuration, initialization, CSS/font imports, i18n, and layout scaffolding for the Onyx design system. Use when setting up a new project or integrating Vue Router.\nlicense: Apache-2.0\n---\n\n# Onyx Setup & Integration\n\nConfigure and initialize the Onyx Vue 3 design system, mandatory styles, fonts, internationalization, and root layout scaffolding.\n\n## Setup & Initialization\n\n### Vue 3 Setup\n\n1. Install `sit-onyx`.\n2. Import style files and initialize the Onyx plugin.\n\n```typescript\nimport { createApp } from \"vue\";\nimport { createOnyx } from \"sit-onyx\";\nimport App from \"./App.vue\";\n\n// Mandatory component styles\nimport \"sit-onyx/style.css\";\n\n// Highly recommended global application styles (sets body background, font, etc.)\nimport \"sit-onyx/global.css\";\n\nconst onyx = createOnyx({\n  // router: routerInstance // Option: Pass router instance here\n});\n\nconst app = createApp(App);\napp.use(onyx);\n```\n\n### Nuxt Setup\n\n1. Install `@sit-onyx/nuxt`.\n2. Register the module in `nuxt.config.ts`. Do not manually call `createOnyx()`.\n\n```typescript\nexport default defineNuxtConfig({\n  modules: [\"@sit-onyx/nuxt\"],\n  onyx: {\n    // optional module options here\n  },\n});\n```\n\n## Internationalization (i18n) Setup\n\nEnglish (`en-US`) is default and registered out-of-the-box. Additional languages must be registered manually.\n\n### Vue 3 Integration with `vue-i18n`\n\nTo sync translations, import the JSON file from Onyx and register it in the `createOnyx` initialization options:\n\n```typescript\nimport { createApp } from \"vue\";\nimport { createI18n } from \"vue-i18n\";\nimport { createOnyx } from \"sit-onyx\";\nimport App from \"./App.vue\";\n\n// Import required Onyx translation file\nimport onyxDE from \"sit-onyx/locales/de-DE.json\";\n\nconst i18n = createI18n({\n  legacy: false,\n  locale: \"de-DE\",\n  // your messages setup\n});\n\nconst onyx = createOnyx({\n  i18n: {\n    // Syncs initial language\n    locale: i18n.global.locale,\n    // Message locale name MUST exactly match the code in vue-i18n\n    messages: {\n      \"de-DE\": onyxDE,\n    },\n  },\n});\n\nconst app = createApp(App);\napp.use(i18n).use(onyx);\n```\n\n_Note: Onyx translations update automatically whenever you change the active language inside `vue-i18n`._\n\n### Nuxt Integration with `@nuxtjs/i18n`\n\nThe `@sit-onyx/nuxt` module automatically registers the corresponding Onyx languages for you.\n\n**Strict BCP 47 Rule:**\nIf you use 2-digit locale codes (e.g. `es` instead of `es-ES`), you **MUST** configure the `language` property inside `nuxt.config.ts` so Onyx can map the translation correctly:\n\n```typescript\nexport default defineNuxtConfig({\n  modules: [\"@sit-onyx/nuxt\", \"@nuxtjs/i18n\"],\n  i18n: {\n    locales: [\n      { code: \"de-DE\" }, // Standard 4-digit code works automatically\n      { code: \"es\", language: \"es-ES\" }, // 2-digit code requires language mapping\n    ],\n  },\n});\n```\n\n## Recommended Font Setup\n\nInstall font packages `@fontsource-variable/source-sans-3` and `@fontsource-variable/source-code-pro`. Import them into your main entrypoint:\n\n### Vue (`main.ts`)\n\n```typescript\nimport \"@fontsource-variable/source-code-pro\";\nimport \"@fontsource-variable/source-sans-3\";\n```\n\n### Nuxt (`nuxt.config.ts`)\n\n```typescript\nexport default defineNuxtConfig({\n  css: [\"@fontsource-variable/source-code-pro\", \"@fontsource-variable/source-sans-3\"],\n});\n```\n\n## App Layout Scaffolding (Boilerplate)\n\nUse Onyx layout components to manage structural complexity, scroll behaviors, and responsive constraints.\n\n### Root Shell (`OnyxAppLayout`)\n\nPlace `OnyxAppLayout` at the root of the application (e.g. `App.vue` or `app/app.vue`). Use class modifiers to cap maximum width on large screens.\n\n```vue\n<template>\n  <!-- Cap width at 1920px (lg breakpoint) and center align the layout -->\n  <OnyxAppLayout class=\"onyx-grid-max-lg onyx-grid-center\">\n    <template #navBar>\n      <OnyxNavBar app-name=\"Example App\">\n        <OnyxNavItem label=\"Home\" link=\"/\" />\n      </OnyxNavBar>\n    </template>\n\n    <!-- Render pages inside the root layout shell -->\n    <RouterView />\n  </OnyxAppLayout>\n</template>\n```\n\n## Vue Router Integration\n\nPass the Vue router instance to `createOnyx({ router })` to enable native routing integration:\n\n- Internal links (e.g., `/my-page`) passed to navigation components (`OnyxLink`, `OnyxNavBar`, `OnyxNavItem`, `OnyxMenuItem`) navigate via Vue Router automatically.\n- Active states on `OnyxNavItem` and `OnyxMenuItem` update automatically depending on the active route.\n- Mobile flyouts close automatically upon navigation.\n- **Fallback:** Uses native browser navigation for external links, links with `target=\"_blank\"`, or when no router is registered.\n";
+var frontmatter = {
+	"name": "onyx-setup",
+	"description": "One-time configuration, initialization, CSS/font imports, i18n, and layout scaffolding for the Onyx design system. Use when setting up a new project or integrating Vue Router.",
+	"license": "Apache-2.0"
+};
+//#endregion
+//#region src/resources/skills.ts
+var skills = /* #__PURE__ */ Object.assign({
+	"./skills/onyx-components/SKILL.md": SKILL_exports$2,
+	"./skills/onyx-foundation/SKILL.md": SKILL_exports$1,
+	"./skills/onyx-setup/SKILL.md": SKILL_exports
+});
+var allSkills = Object.values(skills).map(({ default: text, frontmatter: { description, name } }) => [
+	name,
+	`sit-onyx://skill/${name}`,
+	{
+		title: name,
+		description,
+		mimeType: "text/markdown"
+	},
+	(uri) => ({ contents: [{
+		uri: uri.href,
+		text,
+		mimeType: "text/markdown"
+	}] })
+]);
+var writeSkillFiles = async (skillsDirectory) => {
+	const promises = Object.values(skills).map(async (skill) => {
+		const directory = resolve(skillsDirectory, skill.frontmatter.name);
+		await mkdir(directory, { recursive: true });
+		await writeFile(resolve(directory, "SKILL.md"), skill.raw);
+		log(`Skill ${skill.frontmatter.name} written to ${directory}`);
+	});
+	return Promise.all(promises);
+};
+//#endregion
 //#region src/server/http.ts
 /**
 * MCP server running as a http server.
@@ -122,6 +205,8 @@ var REGISTRY_URL = process.env.REGISTRY_URL ?? "https://registry.npmjs.org";
 */
 var SIT_ONYX_MIN_VERSION = "1.12.0";
 var SIT_ONYX_COMPONENT_META_FILE = "package/dist/component-meta.json";
+var SIT_ONYX_DESIGN_TOKENS_FILE = "package/src/styles/variables/themes/onyx.css";
+var SIT_ONYX_DESIGN_TOKENS_SPACINGS_FILE = "package/src/styles/variables/spacing.css";
 var SIT_ONYX_ICONS_METADATA_FILE = "package/dist/metadata.json";
 //#endregion
 //#region src/util/cached.ts
@@ -7420,11 +7505,9 @@ var import_tar_stream = /* @__PURE__ */ __toESM((/* @__PURE__ */ __commonJSMin((
 	exports.pack = require_pack();
 })))(), 1);
 var SuccessfulAbort = class {
-	constructor(data) {
-		this.data = data;
-	}
+	constructor() {}
 };
-async function getSingleFileFromPackage(packageIdent, matcher, userAgent) {
+async function getFilesFromPackage(packageIdent, filenames, userAgent) {
 	const { dist } = await getPackageManifest(packageIdent.name, packageIdent.versionOrTag, packageIdent.registry);
 	const { body } = await fetch(dist.tarball, { headers: { "User-Agent": userAgent } });
 	if (!body) throw new Error(`No body in response for tarball request to "${dist.tarball}"!`);
@@ -7433,14 +7516,16 @@ async function getSingleFileFromPackage(packageIdent, matcher, userAgent) {
 	* We also use the abort reason to emit the result.
 	*/
 	const abortController = new AbortController();
+	const results = [];
 	const archiveDownload = Readable.fromWeb(body);
 	const decompress = createGunzip();
-	const fileSearcher = createTarFileSearcher(matcher, abortController);
+	const fileSearcher = createTarFileSearcher(filenames, results, abortController);
 	try {
 		await pipeline(archiveDownload, decompress, fileSearcher, { signal: abortController.signal });
+		if (results.length) return results;
 		throw new Error("No matching file found!");
 	} catch (error) {
-		if (error instanceof Error && error.name === "AbortError" && error.cause instanceof SuccessfulAbort) return error.cause.data;
+		if (error instanceof Error && error.name === "AbortError" && error.cause instanceof SuccessfulAbort) return results;
 		throw error;
 	}
 }
@@ -7448,13 +7533,18 @@ async function getSingleFileFromPackage(packageIdent, matcher, userAgent) {
 * Returns a writable stream, which searches a file in a tar archive.
 * If found, will call the AbortController with the file content as reason.
 */
-function createTarFileSearcher(matcher, abortController) {
+function createTarFileSearcher(filenames, results, abortController) {
 	const searchFile = import_tar_stream.extract();
 	searchFile.on("entry", async (headers, stream, next) => {
-		if (matcher(headers)) {
+		if (filenames.includes(headers.name)) {
 			const data = await buffer(stream);
-			abortController.abort(new SuccessfulAbort(data));
-		} else {
+			results.push({
+				headers,
+				data
+			});
+		}
+		if (results.length === filenames.length) abortController.abort(new SuccessfulAbort());
+		else {
 			stream.resume();
 			next();
 		}
@@ -7464,11 +7554,11 @@ function createTarFileSearcher(matcher, abortController) {
 //#endregion
 //#region src/util/component-meta-json.ts
 var retrieveComponentMetaJsonFile = cached$1(async (versionOrTag) => {
-	const data = await getSingleFileFromPackage({
+	const [file] = await getFilesFromPackage({
 		name: "sit-onyx",
 		versionOrTag
-	}, (header) => header.name === SIT_ONYX_COMPONENT_META_FILE, USER_AGENT);
-	return JSON.parse(data.toString("utf-8"));
+	}, [SIT_ONYX_COMPONENT_META_FILE], USER_AGENT);
+	return JSON.parse(file.data.toString("utf-8") ?? "");
 });
 //#endregion
 //#region src/resources/get-component-api.ts
@@ -7479,7 +7569,7 @@ var compareDefined = (a, b) => a && b && a.trim().toLowerCase() === b.trim().toL
 var tagsToList = (tags) => tags.filter(({ name }) => !!name).map(({ text, name }) => `- ${name}: ${text}`).join("\n");
 var getComponentApi = [
 	"get-component-api",
-	new ResourceTemplate("components://sit-onyx/{version}/{component}", { list: void 0 }),
+	new ResourceTemplate("sit-onyx://components/{version}/{component}", { list: void 0 }),
 	{
 		title: "Get Component API",
 		description: "Gets the component API for a specific component and version of onyx",
@@ -7555,7 +7645,7 @@ var versionCompare = (a, b) => {
 //#region src/resources/list-components.ts
 var listComponents = [
 	"list-components",
-	new ResourceTemplate("components://sit-onyx/{version}", { list: async () => {
+	new ResourceTemplate("sit-onyx://components/{version}", { list: async () => {
 		const { versions } = await getAbbreviatedPackument("sit-onyx", REGISTRY_URL);
 		return { resources: Object.keys(versions).filter((version) => versionCompare(SIT_ONYX_MIN_VERSION, version) >= 0).map((version) => ({
 			uri: `components://sit-onyx/${version}`,
@@ -7578,51 +7668,685 @@ var listComponents = [
 	}
 ];
 //#endregion
-//#region src/util/icons-metadata-json.ts
-var retrieveIconsMetadataJsonFile = cached$1(async (versionOrTag) => {
-	const data = await getSingleFileFromPackage({
-		name: "@sit-onyx/icons",
+//#region ../../node_modules/.pnpm/@adobe+css-tools@4.5.0/node_modules/@adobe/css-tools/dist/esm/adobe-css-tools.mjs
+var t = class extends Error {
+	reason;
+	filename;
+	line;
+	column;
+	source;
+	constructor(t, i, e, s, n) {
+		super(`${t}:${e}:${s}: ${i}`), this.reason = i, this.filename = t, this.line = e, this.column = s, this.source = n;
+	}
+};
+var i = class {
+	start;
+	end;
+	source;
+	constructor(t, i, e) {
+		this.start = t, this.end = i, this.source = e;
+	}
+};
+var e;
+(function(t) {
+	t.stylesheet = "stylesheet", t.rule = "rule", t.declaration = "declaration", t.comment = "comment", t.atRule = "at-rule", t.container = "container", t.charset = "charset", t.counterStyle = "counter-style", t.document = "document", t.customMedia = "custom-media", t.fontFace = "font-face", t.fontFeatureValues = "font-feature-values", t.host = "host", t.import = "import", t.keyframes = "keyframes", t.keyframe = "keyframe", t.layer = "layer", t.media = "media", t.namespace = "namespace", t.page = "page", t.pageMarginBox = "page-margin-box", t.positionTry = "position-try", t.property = "property", t.scope = "scope", t.startingStyle = "starting-style", t.supports = "supports", t.viewTransition = "view-transition";
+})(e || (e = {}));
+var s = (t, i, e) => {
+	let s = e, n = 1e4;
+	do {
+		const e = i.map((i) => t.indexOf(i, s));
+		e.push(t.indexOf("\\", s));
+		const r = e.filter((t) => -1 !== t);
+		if (0 === r.length) return -1;
+		const o = Math.min(...r);
+		if ("\\" !== t[o]) return o;
+		s = o + 2, n--;
+	} while (n > 0);
+	throw new Error("Too many escaping");
+}, n = (t, i, e) => {
+	let r = e, o = 1e4;
+	do {
+		const e = i.map((i) => t.indexOf(i, r));
+		e.push(t.indexOf("(", r)), e.push(t.indexOf("\"", r)), e.push(t.indexOf("'", r)), e.push(t.indexOf("\\", r));
+		const c = e.filter((t) => -1 !== t);
+		if (0 === c.length) return -1;
+		const h = Math.min(...c);
+		switch (t[h]) {
+			case "\\":
+				r = h + 2;
+				break;
+			case "(":
+				{
+					const i = n(t, [")"], h + 1);
+					if (-1 === i) return -1;
+					r = i + 1;
+				}
+				break;
+			case "\"":
+				{
+					const i = s(t, ["\""], h + 1);
+					if (-1 === i) return -1;
+					r = i + 1;
+				}
+				break;
+			case "'":
+				{
+					const i = s(t, ["'"], h + 1);
+					if (-1 === i) return -1;
+					r = i + 1;
+				}
+				break;
+			default: return h;
+		}
+		o--;
+	} while (o > 0);
+	throw new Error("Too many escaping");
+}, r = /\/\*[^]*?(?:\*\/|$)/g;
+function o(t) {
+	return t ? t.trim() : "";
+}
+function c(t, i) {
+	const e = t && "string" == typeof t.type, s = e ? t : i;
+	for (const i in t) {
+		const e = t[i];
+		Array.isArray(e) ? e.forEach((t) => {
+			c(t, s);
+		}) : e && "object" == typeof e && c(e, s);
+	}
+	return e && Object.defineProperty(t, "parent", {
+		configurable: !0,
+		writable: !0,
+		enumerable: !1,
+		value: i || null
+	}), t;
+}
+var a = (s, h) => {
+	h = h || {};
+	let a = 1, m = 1;
+	function u() {
+		const t = {
+			line: a,
+			column: m
+		};
+		return (e) => (e.position = new i(t, {
+			line: a,
+			column: m
+		}, h?.source || ""), g(), e);
+	}
+	const p = [];
+	function l(i) {
+		const e = new t(h?.source || "", i, a, m, s);
+		if (!h?.silent) throw e;
+		p.push(e);
+	}
+	function f() {
+		const t = /^{\s*/.exec(s);
+		return !!t && (y(t), !0);
+	}
+	function d() {
+		const t = /^}/.exec(s);
+		return !!t && (y(t), !0);
+	}
+	function y(t) {
+		const i = t[0];
+		return function(t) {
+			const i = t.match(/\n/g);
+			i && (a += i.length);
+			const e = t.lastIndexOf("\n");
+			m = ~e ? t.length - e : m + t.length;
+		}(i), s = s.slice(i.length), t;
+	}
+	function g() {
+		const t = /^\s*/.exec(s);
+		t && y(t);
+	}
+	function $(t) {
+		t = t || [];
+		let i = x();
+		for (; i;) t.push(i), i = x();
+		return t;
+	}
+	function x() {
+		const t = u();
+		if ("/" !== s.charAt(0) || "*" !== s.charAt(1)) return;
+		const i = /^\/\*[^]*?\*\//.exec(s);
+		return i ? (y(i), t({
+			type: e.comment,
+			comment: i[0].slice(2, -2)
+		})) : l("End of comment missing");
+	}
+	function V() {
+		const t = n(s, ["{"]);
+		if (-1 === t || 0 === t) return;
+		const i = s.substring(0, t);
+		y([i]);
+		return ((t, i) => {
+			const e = [];
+			let s = 0;
+			for (; s < t.length;) {
+				const r = n(t, i, s);
+				if (-1 === r) return e.push(t.substring(s)), e;
+				e.push(t.substring(s, r)), s = r + 1;
+			}
+			return e;
+		})(o(i).replace(r, ""), [","]).map((t) => o(t));
+	}
+	function v() {
+		const t = u(), i = /^(\*?[-#/*\\\w]+(\[[0-9a-z_-]+\])?)\s*/.exec(s);
+		if (!i) return;
+		y(i);
+		const c = o(i[0]), h = /^:\s*/.exec(s);
+		if (!h) return l("property missing ':'");
+		y(h);
+		let a = "";
+		const m = n(s, [";", "}"]);
+		if (-1 !== m) {
+			a = s.substring(0, m);
+			y([a]), a = o(a).replace(r, "");
+		}
+		const p = t({
+			type: e.declaration,
+			property: c.replace(r, ""),
+			value: a
+		}), f = /^[;\s]*/.exec(s);
+		return f && y(f), p;
+	}
+	function w() {
+		const t = [];
+		if (!f()) return l("missing '{'");
+		$(t);
+		let i = v();
+		for (; i;) t.push(i), $(t), i = v();
+		for (; h?.silent && s.length && "}" !== s.charAt(0);) {
+			const e = s.indexOf(";"), n = s.indexOf("}");
+			if (-1 === e || !(-1 === n || e < n)) break;
+			for (y([s.substring(0, e + 1)]), g(), $(t), i = v(); i;) t.push(i), $(t), i = v();
+		}
+		return d() ? t : l("missing '}'");
+	}
+	function b() {
+		const t = n(s, ["{"]);
+		if (-1 === t) return !1;
+		const i = n(s, [";"]), e = n(s, ["}"]);
+		return !(-1 !== i && i < t) && !(-1 !== e && e < t);
+	}
+	function k() {
+		const t = [];
+		if (!f()) return l("missing '{'");
+		for ($(t); s.length && "}" !== s.charAt(0);) {
+			if ("@" === s.charAt(0)) {
+				const i = E();
+				if (i) {
+					t.push(i), $(t);
+					continue;
+				}
+			}
+			if (b()) {
+				const i = R();
+				if (i) {
+					t.push(i), $(t);
+					continue;
+				}
+			}
+			const i = v();
+			if (!i) {
+				if (h?.silent) {
+					const i = s.indexOf(";"), e = s.indexOf("}");
+					if (-1 !== i && (-1 === e || i < e)) {
+						y([s.substring(0, i + 1)]), g(), $(t);
+						continue;
+					}
+				}
+				break;
+			}
+			t.push(i), $(t);
+		}
+		return d() ? t : l("missing '}'");
+	}
+	function A() {
+		const t = [];
+		for (g(), $(t); s.length && "}" !== s.charAt(0);) {
+			if ("@" === s.charAt(0)) {
+				const i = E();
+				if (i) {
+					t.push(i), $(t);
+					continue;
+				}
+			}
+			if (b()) {
+				const i = R();
+				if (i) {
+					t.push(i), $(t);
+					continue;
+				}
+			}
+			const i = v();
+			if (!i) {
+				if (h?.silent) {
+					const i = s.indexOf(";"), e = s.indexOf("}");
+					if (-1 !== i && (-1 === e || i < e)) {
+						y([s.substring(0, i + 1)]), g(), $(t);
+						continue;
+					}
+				}
+				break;
+			}
+			t.push(i), $(t);
+		}
+		return t;
+	}
+	function O() {
+		const t = [], i = u();
+		let n = /^((\d+\.\d+|\.\d+|\d+)%?|[a-z]+)\s*/.exec(s);
+		for (; n;) {
+			const i = y(n);
+			t.push(i[1]);
+			const e = /^,\s*/.exec(s);
+			e && y(e), n = /^((\d+\.\d+|\.\d+|\d+)%?|[a-z]+)\s*/.exec(s);
+		}
+		if (t.length) return i({
+			type: e.keyframe,
+			values: t,
+			declarations: w() || []
+		});
+	}
+	const F = new RegExp(`^@(${[
+		"top-left-corner",
+		"top-left",
+		"top-center",
+		"top-right",
+		"top-right-corner",
+		"bottom-left-corner",
+		"bottom-left",
+		"bottom-center",
+		"bottom-right",
+		"bottom-right-corner",
+		"left-top",
+		"left-middle",
+		"left-bottom",
+		"right-top",
+		"right-middle",
+		"right-bottom"
+	].join("|")})(?![\\w-])\\s*`);
+	const j = S("import"), M = S("charset"), T = S("namespace");
+	function S(t) {
+		const i = new RegExp("^@" + t + "\\s*((?::?[^;'\"]|\"(?:\\\\\"|[^\"])*?\"|'(?:\\\\'|[^'])*?')+)(?:;|$)");
+		return () => {
+			const e = u(), n = i.exec(s);
+			if (!n) return;
+			const r = y(n), o = { type: t };
+			return o[t] = r[1].trim(), e(o);
+		};
+	}
+	function E() {
+		if ("@" === s[0]) return function() {
+			const t = u(), i = /^@([-\w]+)?keyframes\s*/.exec(s);
+			if (!i) return;
+			const n = y(i)[1], r = /^([-\w]+)\s*/.exec(s);
+			if (!r) return l("@keyframes missing name");
+			const o = y(r)[1];
+			if (!f()) return l("@keyframes missing '{'");
+			let c = $(), h = O();
+			for (; h;) c.push(h), c = c.concat($()), h = O();
+			return d() ? t({
+				type: e.keyframes,
+				name: o,
+				vendor: n,
+				keyframes: c
+			}) : l("@keyframes missing '}'");
+		}() || function() {
+			const t = u(), i = /^@media *([^{]+)/.exec(s);
+			if (!i) return;
+			const n = o(y(i)[1]);
+			if (!f()) return l("@media missing '{'");
+			const r = A();
+			return d() ? t({
+				type: e.media,
+				media: n,
+				rules: r
+			}) : l("@media missing '}'");
+		}() || function() {
+			const t = u(), i = /^@custom-media\s+(--\S+)\s+([^{;\s][^{;]*);/.exec(s);
+			if (!i) return;
+			const n = y(i);
+			return t({
+				type: e.customMedia,
+				name: o(n[1]),
+				media: o(n[2])
+			});
+		}() || function() {
+			const t = u(), i = /^@supports *([^{]+)/.exec(s);
+			if (!i) return;
+			const n = o(y(i)[1]);
+			if (!f()) return l("@supports missing '{'");
+			const r = A();
+			return d() ? t({
+				type: e.supports,
+				supports: n,
+				rules: r
+			}) : l("@supports missing '}'");
+		}() || j() || M() || T() || function() {
+			const t = u(), i = /^@([-\w]+)?document *([^{]+)/.exec(s);
+			if (!i) return;
+			const n = y(i), r = o(n[1]), c = o(n[2]);
+			if (!f()) return l("@document missing '{'");
+			const h = A();
+			return d() ? t({
+				type: e.document,
+				document: c,
+				vendor: r,
+				rules: h
+			}) : l("@document missing '}'");
+		}() || function() {
+			const t = u(), i = /^@page */.exec(s);
+			if (!i) return;
+			y(i);
+			const n = V() || [];
+			if (!f()) return l("@page missing '{'");
+			const r = [];
+			for ($(r); s.length && "}" !== s.charAt(0);) {
+				if ("@" === s.charAt(0)) {
+					const t = E();
+					if (t) {
+						r.push(t), $(r);
+						continue;
+					}
+				}
+				const t = v();
+				if (!t) break;
+				r.push(t), $(r);
+			}
+			return d() ? t({
+				type: e.page,
+				selectors: n,
+				declarations: r
+			}) : l("@page missing '}'");
+		}() || function() {
+			const t = u(), i = /^@host\s*/.exec(s);
+			if (!i) return;
+			if (y(i), !f()) return l("@host missing '{'");
+			const n = A();
+			return d() ? t({
+				type: e.host,
+				rules: n
+			}) : l("@host missing '}'");
+		}() || function() {
+			const t = u(), i = /^@font-face\s*/.exec(s);
+			if (!i) return;
+			if (y(i), !f()) return l("@font-face missing '{'");
+			let n = $(), r = v();
+			for (; r;) n.push(r), n = n.concat($()), r = v();
+			return d() ? t({
+				type: e.fontFace,
+				declarations: n
+			}) : l("@font-face missing '}'");
+		}() || function() {
+			const t = u(), i = /^@font-feature-values\s+([^{]+)/.exec(s);
+			if (!i) return;
+			const n = o(y(i)[1]);
+			if (!f()) return l("@font-feature-values missing '{'");
+			const r = A();
+			return d() ? t({
+				type: e.fontFeatureValues,
+				fontFamily: n,
+				rules: r
+			}) : l("@font-feature-values missing '}'");
+		}() || function() {
+			const t = u(), i = /^@container *([^{]+)/.exec(s);
+			if (!i) return;
+			const n = o(y(i)[1]);
+			if (!f()) return l("@container missing '{'");
+			const r = A();
+			return d() ? t({
+				type: e.container,
+				container: n,
+				rules: r
+			}) : l("@container missing '}'");
+		}() || function() {
+			const t = u(), i = /^@starting-style\s*/.exec(s);
+			if (!i) return;
+			if (y(i), !f()) return l("@starting-style missing '{'");
+			const n = A();
+			return d() ? t({
+				type: e.startingStyle,
+				rules: n
+			}) : l("@starting-style missing '}'");
+		}() || function() {
+			const t = u(), i = /^@layer *([^{;@]+)/.exec(s);
+			if (!i) return;
+			const n = o(y(i)[1]);
+			if (!f()) {
+				const i = /^[;\s]*/.exec(s);
+				return i && y(i), t({
+					type: e.layer,
+					layer: n
+				});
+			}
+			const r = A();
+			return d() ? t({
+				type: e.layer,
+				layer: n,
+				rules: r
+			}) : l("@layer missing '}'");
+		}() || function() {
+			const t = u(), i = /^@property\s+(--[-\w]+)\s*/.exec(s);
+			if (!i) return;
+			const n = y(i)[1];
+			if (!f()) return l("@property missing '{'");
+			let r = $(), o = v();
+			for (; o;) r.push(o), r = r.concat($()), o = v();
+			return d() ? t({
+				type: e.property,
+				name: n,
+				declarations: r
+			}) : l("@property missing '}'");
+		}() || function() {
+			const t = u(), i = /^@counter-style\s+([-\w]+)\s*/.exec(s);
+			if (!i) return;
+			const n = y(i)[1];
+			if (!f()) return l("@counter-style missing '{'");
+			let r = $(), o = v();
+			for (; o;) r.push(o), r = r.concat($()), o = v();
+			return d() ? t({
+				type: e.counterStyle,
+				name: n,
+				declarations: r
+			}) : l("@counter-style missing '}'");
+		}() || function() {
+			const t = u(), i = /^@scope\s*([^{]*)/.exec(s);
+			if (!i) return;
+			const n = o(y(i)[1]);
+			if (!f()) return l("@scope missing '{'");
+			const r = A();
+			return d() ? t({
+				type: e.scope,
+				scope: n,
+				rules: r
+			}) : l("@scope missing '}'");
+		}() || function() {
+			const t = u(), i = /^@view-transition\s*/.exec(s);
+			if (!i) return;
+			if (y(i), !f()) return l("@view-transition missing '{'");
+			let n = $(), r = v();
+			for (; r;) n.push(r), n = n.concat($()), r = v();
+			return d() ? t({
+				type: e.viewTransition,
+				declarations: n
+			}) : l("@view-transition missing '}'");
+		}() || function() {
+			const t = u(), i = /^@position-try\s+(--[-\w]+)\s*/.exec(s);
+			if (!i) return;
+			const n = y(i)[1];
+			if (!f()) return l("@position-try missing '{'");
+			let r = $(), o = v();
+			for (; o;) r.push(o), r = r.concat($()), o = v();
+			return d() ? t({
+				type: e.positionTry,
+				name: n,
+				declarations: r
+			}) : l("@position-try missing '}'");
+		}() || function() {
+			const t = u(), i = F.exec(s);
+			if (!i) return;
+			const n = y(i)[1];
+			if (!f()) return l(`@${n} missing '{'`);
+			let r = $(), o = v();
+			for (; o;) r.push(o), r = r.concat($()), o = v();
+			return d() ? t({
+				type: e.pageMarginBox,
+				name: n,
+				declarations: r
+			}) : l(`@${n} missing '}'`);
+		}() || function() {
+			const t = u(), i = /^@([-\w]+)\s*/.exec(s);
+			if (!i) return;
+			const r = y(i)[1];
+			let c = "";
+			const h = n(s, ["{", ";"]);
+			-1 !== h && h > 0 && (c = o(s.substring(0, h)), y([s.substring(0, h)]));
+			if (f()) {
+				const i = A();
+				return d() ? t({
+					type: e.atRule,
+					name: r,
+					prelude: c,
+					rules: i
+				}) : l(`@${r} missing '}'`);
+			}
+			const a = /^[;\s]*/.exec(s);
+			return a && y(a), t({
+				type: e.atRule,
+				name: r,
+				prelude: c
+			});
+		}();
+	}
+	function R() {
+		const t = u(), i = V();
+		return i ? ($(), t({
+			type: e.rule,
+			selectors: i,
+			declarations: k() || []
+		})) : l("selector missing");
+	}
+	return c(function() {
+		const t = function() {
+			let t;
+			const i = [];
+			g(), $(i);
+			for (; s.length;) {
+				if ("}" === s.charAt(0)) {
+					if (h?.silent) {
+						l("extra '}'");
+						y(["}"]), g(), $(i);
+						continue;
+					}
+					break;
+				}
+				if (t = E() || R(), !t) {
+					if (h?.silent) {
+						y([s.charAt(0)]), g(), $(i);
+						continue;
+					}
+					break;
+				}
+				i.push(t), $(i);
+			}
+			return i;
+		}();
+		return {
+			type: e.stylesheet,
+			stylesheet: {
+				source: h?.source,
+				rules: t,
+				parsingErrors: p
+			}
+		};
+	}());
+};
+//#endregion
+//#region src/util/onyx-css-design-tokens.ts
+var retrieveOnyxDesignTokens = cached$1(async (versionOrTag) => {
+	return (await getFilesFromPackage({
+		name: "sit-onyx",
 		versionOrTag
-	}, (header) => header.name === SIT_ONYX_ICONS_METADATA_FILE, USER_AGENT);
-	return JSON.parse(data.toString("utf-8"));
+	}, [SIT_ONYX_DESIGN_TOKENS_FILE, SIT_ONYX_DESIGN_TOKENS_SPACINGS_FILE], USER_AGENT)).flatMap(({ data }) => {
+		return a(data.toString()).stylesheet.rules.filter((e$1) => e$1.type === e.rule).flatMap((r) => r.declarations).map((d) => d.type === e.declaration ? d.property : void 0).filter((p) => p !== void 0).filter((p) => p.startsWith("--"));
+	});
 });
 //#endregion
-//#region src/resources/list-icons.ts
-var listIcons = [
-	"list-icons",
-	new ResourceTemplate("icons://sit-onyx/{version}", { list: void 0 }),
+//#region src/resources/list-css-design-tokens.ts
+var listCssDesignTokens = [
+	"list-css-design-tokens",
+	new ResourceTemplate("sit-onyx://css-design-tokens/{version}", { list: void 0 }),
 	{
-		title: "List @sit-onyx/icons icons",
-		description: "List all icons available in a specific version of @sit-onyx/icons",
+		title: "List @sit-onyx/icons design-tokens by their CSS custom property name",
+		description: "List all allowed design tokens with their CSS custom property name in a specific version of sit-onyx",
 		mimeType: "text/markdown"
 	},
 	cached$1(async (uri, { version: _version }) => {
 		const version = Array.isArray(_version) ? _version[0] : _version;
-		const iconsMetadata = await retrieveIconsMetadataJsonFile(version);
-		const categoryMap = /* @__PURE__ */ new Map();
-		Object.entries(iconsMetadata).forEach(([name, data]) => {
-			if (!categoryMap.has(data.category)) categoryMap.set(data.category, []);
-			categoryMap.get(data.category).push({
-				name,
-				...data
+		const tokens = await retrieveOnyxDesignTokens(version);
+		const text = `${`# Design Tokens for \`sit-onyx@${version}\`\n\n`}${tokens.map((n) => `- \`${n}\``).join("\n")}`;
+		return { contents: [{
+			uri: uri.href,
+			text,
+			mimeType: "text/markdown"
+		}] };
+	})
+];
+//#endregion
+//#region src/util/icons-metadata-json.ts
+var retrieveIconsMetadataJsonFile = cached$1(async (versionOrTag) => {
+	const [file] = await getFilesFromPackage({
+		name: "@sit-onyx/icons",
+		versionOrTag
+	}, [SIT_ONYX_ICONS_METADATA_FILE], USER_AGENT);
+	return JSON.parse(file.data.toString("utf-8") ?? "");
+});
+//#endregion
+//#region src/resources/index.ts
+var resources = [
+	getComponentApi,
+	listComponents,
+	[
+		"list-icons",
+		new ResourceTemplate("sit-onyx://icons/{version}", { list: void 0 }),
+		{
+			title: "List @sit-onyx/icons icons",
+			description: "List all icons available in a specific version of @sit-onyx/icons",
+			mimeType: "text/markdown"
+		},
+		cached$1(async (uri, { version: _version }) => {
+			const version = Array.isArray(_version) ? _version[0] : _version;
+			const iconsMetadata = await retrieveIconsMetadataJsonFile(version);
+			const categoryMap = /* @__PURE__ */ new Map();
+			Object.entries(iconsMetadata).forEach(([name, data]) => {
+				if (!categoryMap.has(data.category)) categoryMap.set(data.category, []);
+				categoryMap.get(data.category).push({
+					name,
+					...data
+				});
 			});
-		});
-		const text = `# Icons for \`@sit-onyx/icons@${version}\`
+			const text = `# Icons for \`@sit-onyx/icons@${version}\`
 
 This is a list of all icons offered by the \`@sit-onyx/icons@${version}\` package.
 The icons are grouped by category.
 
 ${categoryMap.entries().toArray().toSorted(([a], [b]) => a.localeCompare(b)).map(([category, icons]) => {
-			return `## ${category}
+				return `## ${category}
 
 ${icons.map(({ aliases, name }) => `- \`${name}\` (aliases: ${aliases.join(", ")})`).join("\n")}`;
-		}).join("\n\n")}`;
-		return { contents: [{
-			uri: uri.href,
-			text,
-			mimeType: "text/markdown"
-		}] };
-	})
+			}).join("\n\n")}`;
+			return { contents: [{
+				uri: uri.href,
+				text,
+				mimeType: "text/markdown"
+			}] };
+		})
+	],
+	listCssDesignTokens,
+	...allSkills
 ];
 //#endregion
 //#region ../../node_modules/.pnpm/zod@4.4.3/node_modules/zod/v4/mini/schemas.js
@@ -7666,7 +8390,7 @@ function string(params) {
 //#region src/util/mcp-server.ts
 var resourceToTool = (resource) => {
 	const [name, template, { title, description }, cb] = resource;
-	const hasInputSchema = !!template.uriTemplate.variableNames.length;
+	const hasInputSchema = typeof template === "object" && template.uriTemplate.variableNames.length;
 	return [
 		name,
 		{
@@ -7681,7 +8405,7 @@ var resourceToTool = (resource) => {
 		},
 		(async (...args) => {
 			const [vars, extra] = hasInputSchema ? args : [{}, args.at(0)];
-			const { contents } = await cb(new URL(template.uriTemplate.expand(vars)), vars, extra);
+			const { contents } = await cb(new URL(hasInputSchema ? template.uriTemplate.expand(vars) : template), vars, extra);
 			return { content: contents.map((resource) => ({
 				type: "resource",
 				resource
@@ -7692,11 +8416,6 @@ var resourceToTool = (resource) => {
 //#endregion
 //#region src/server/server.ts
 var { name, version, description } = package_default;
-var resources = [
-	listComponents,
-	getComponentApi,
-	listIcons
-];
 var createServer = ({ resourcesAsTools }) => {
 	/**
 	* Internal McpServer, which provides the MCP resources.
@@ -7729,7 +8448,7 @@ var SUPPORTED_TRANSPORTS = {
 	http: run
 };
 if (import.meta.main) {
-	const { values: { transport, version, help, resourcesAsTools } } = parseArgs({
+	const { values: { transport, version, help, resourcesAsTools, writeSkills } } = parseArgs({
 		args: process.argv.slice(2),
 		options: {
 			transport: {
@@ -7742,6 +8461,10 @@ if (import.meta.main) {
 				short: "r",
 				default: false
 			},
+			writeSkills: {
+				type: "string",
+				short: "w"
+			},
 			help: {
 				type: "boolean",
 				short: "h",
@@ -7764,16 +8487,21 @@ Usage:
     onyx-mcp [options]
 
 Options:
- -t, --transport <stdio|http> Which kind of MCP server should be started (default: stdio). 
-                              The "http" transport considers PORT and HOST environment variables, when starting the server.
- -r, --resourcesAsTools       Some LLM Coding Assistants (e.g. Gemini) are not able to to use MCP resources (yet). 
-                              This setting makes resources also available as tools to support these Coding Assistants.
- -h, --help                   Show this help text and quit.
- -v, --version                Show version number and quit.`);
+ -t, --transport <"stdio"|"http"> Which kind of MCP server should be started (default: stdio). 
+                                  The "http" transport considers PORT and HOST environment variables, when starting the server.
+ -r, --resourcesAsTools           Some LLM Coding Assistants (e.g. Gemini) are not able to to use MCP resources (yet). 
+                                  This setting makes resources also available as tools to support these Coding Assistants.
+ -w, --write-skills <directory>   Write skill resources to SKILL.md files in the specified directory.
+ -h, --help                       Show this help text and quit.
+ -v, --version                    Show version number and quit.`);
 		process.exit(0);
 	} else if (version) {
 		log(package_default.version);
 		process.exit(0);
+	} else if (writeSkills) {
+		if (!(await stat(writeSkills)).isDirectory()) throw new Error(`${writeSkills} is not a directory`);
+		await writeSkillFiles(writeSkills);
+		process.exit(0);
 	} else {
 		if (!Object.keys(SUPPORTED_TRANSPORTS).includes(transport)) throw new Error(`Unsupported transport: ${transport}`);
 		const getServer = () => createServer({ resourcesAsTools });

package/dist/resources/get-component-api.d.ts

@@ -1,2 +1,2 @@
 import { RegisterableResource } from '../types.js';
-export declare const getComponentApi: RegisterableResource;
+export declare const getComponentApi: RegisterableResource<true>;

package/dist/resources/index.d.ts

@@ -0,0 +1 @@
+export declare const resources: ([name: string, uriOrTemplate: import('@modelcontextprotocol/sdk/server/mcp').ResourceTemplate, config: import('@modelcontextprotocol/sdk/server/mcp').ResourceMetadata, readCallback: import('@modelcontextprotocol/sdk/server/mcp').ReadResourceTemplateCallback] | [name: string, uriOrTemplate: string, config: import('@modelcontextprotocol/sdk/server/mcp').ResourceMetadata, readCallback: import('@modelcontextprotocol/sdk/server/mcp').ReadResourceCallback])[];

package/dist/resources/list-components.d.ts

@@ -1,2 +1,2 @@
 import { RegisterableResource } from '../types.js';
-export declare const listComponents: RegisterableResource;
+export declare const listComponents: RegisterableResource<true>;

package/dist/resources/list-css-design-tokens.d.ts

@@ -0,0 +1,2 @@
+import { RegisterableResource } from '../types.js';
+export declare const listCssDesignTokens: RegisterableResource<true>;

package/dist/resources/list-icons.d.ts

@@ -1,2 +1,2 @@
 import { RegisterableResource } from '../types.js';
-export declare const listIcons: RegisterableResource;
+export declare const listIcons: RegisterableResource<true>;

package/dist/resources/skills.d.ts

@@ -0,0 +1,2 @@
+export declare const allSkills: [name: string, uriOrTemplate: string, config: import('@modelcontextprotocol/sdk/server/mcp').ResourceMetadata, readCallback: import('@modelcontextprotocol/sdk/server/mcp').ReadResourceCallback][];
+export declare const writeSkillFiles: (skillsDirectory: string) => Promise<void[]>;

package/dist/server/server.d.ts

@@ -2,6 +2,5 @@ import { McpServer } from '@modelcontextprotocol/sdk/server/mcp.js';
 type CreateServerOptions = {
     resourcesAsTools: boolean;
 };
-export declare const resources: [name: string, uriOrTemplate: import('@modelcontextprotocol/sdk/server/mcp').ResourceTemplate, config: import('@modelcontextprotocol/sdk/server/mcp').ResourceMetadata, readCallback: import('@modelcontextprotocol/sdk/server/mcp').ReadResourceTemplateCallback][];
 export declare const createServer: ({ resourcesAsTools }: CreateServerOptions) => McpServer;
 export {};

package/dist/types.d.ts

@@ -2,10 +2,11 @@ import { McpServer, ToolCallback } from '@modelcontextprotocol/sdk/server/mcp.js
 import { AnySchema, ZodRawShapeCompat } from '@modelcontextprotocol/sdk/server/zod-compat';
 import { ToolAnnotations } from '@modelcontextprotocol/sdk/types';
 import { ComponentMeta, MetaCheckerOptions } from 'vue-component-meta';
+import { GetFunctionOverloads } from './util/types.js';
 /**
  * Necessary Parameters to register a resource via `mcpServer.registerResource`
  */
-export type RegisterableResource = Parameters<McpServer["registerResource"]>;
+export type RegisterableResource<WithTemplate extends boolean = false> = GetFunctionOverloads<McpServer["registerResource"]>[WithTemplate extends true ? 1 : 0]["parameters"];
 /**
  * Necessary Parameters to register a resource via `mcpServer.registerTool`
  */

package/dist/util/mcp-server.d.ts

@@ -1,3 +1,3 @@
 import { AnySchema, ZodRawShapeCompat } from '@modelcontextprotocol/sdk/server/zod-compat';
 import { RegisterableResource, RegisterableTool } from '../types.js';
-export declare const resourceToTool: <OutputArgs extends ZodRawShapeCompat | AnySchema, InputArgs extends undefined | ZodRawShapeCompat | AnySchema = undefined>(resource: RegisterableResource) => RegisterableTool<OutputArgs, InputArgs>;
+export declare const resourceToTool: <OutputArgs extends ZodRawShapeCompat | AnySchema, InputArgs extends undefined | ZodRawShapeCompat | AnySchema = undefined>(resource: RegisterableResource<boolean>) => RegisterableTool<OutputArgs, InputArgs>;

package/dist/util/onyx-css-design-tokens.d.ts

@@ -0,0 +1 @@
+export declare const retrieveOnyxDesignTokens: (versionOrTag: string) => Promise<string[]>;

package/dist/util/package.d.ts

@@ -1,8 +1,12 @@
 import { Headers } from 'tar-stream';
+type Result = {
+    headers: Headers;
+    data: Buffer;
+};
 type PackageIdentifier = {
     name: string;
     versionOrTag?: string;
     registry?: string;
 };
-export declare function getSingleFileFromPackage(packageIdent: PackageIdentifier, matcher: (headers: Headers) => boolean, userAgent: string): Promise<Buffer<ArrayBufferLike>>;
+export declare function getFilesFromPackage(packageIdent: PackageIdentifier, filenames: string[], userAgent: string): Promise<Result[]>;
 export {};

package/dist/util/types.d.ts

@@ -0,0 +1,20 @@
+interface FunctionSignature {
+    parameters: AnyArray;
+    returnType: unknown;
+}
+type ToObject<T extends object> = {
+    [K in keyof T]: T[K];
+};
+interface AddSignature<T extends object, Params extends AnyArray, Return> extends T {
+    (...args: Params): Return;
+}
+export type GetFunctionOverloads<T extends AnyFunction, Shape extends object = ToObject<T>, Signatures extends FunctionSignature[] = []> = Shape extends T ? Signatures : T extends AddSignature<Shape, infer Params, infer Return> ? GetFunctionOverloads<T, AddSignature<Shape, Params, Return>, [
+    {
+        parameters: Params;
+        returnType: Return;
+    },
+    ...Signatures
+]> : Signatures;
+type AnyFunction = (arg0: never, ...args: never[]) => unknown;
+type AnyArray = readonly unknown[];
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sit-onyx/modelcontextprotocol",
-  "version": "0.1.1-dev-20260630065749",
+  "version": "0.2.0-dev-20260701075643",
   "description": "MCP (Model Context Protocol) Server that provide onyx specific tools and resources.",
   "homepage": "https://onyx.schwarz",
   "bugs": {
@@ -26,14 +26,23 @@
     "@modelcontextprotocol/sdk": "^1.29.0"
   },
   "devDependencies": {
+    "@adobe/css-tools": "^4.5.0",
+    "@types/mdast": "^4.0.4",
     "@types/node": "24.13.2",
     "@types/tar-stream": "^3.1.4",
+    "@types/unist": "^3.0.3",
     "query-registry": "^4.3.0",
+    "remark": "^15.0.1",
+    "remark-frontmatter": "^5.0.0",
+    "remark-parse": "^11.0.0",
+    "remark-stringify": "^11.0.0",
     "tar-stream": "^3.2.0",
     "typescript": "6.0.3",
+    "unified": "^11.0.5",
     "unplugin-dts": "1.0.3",
     "vite": "8.1.0",
     "vue-component-meta": "3.3.5",
+    "yaml": "^2.9.0",
     "zod": "^4.4.3",
     "@sit-onyx/shared": "^0.1.0"
   },