# platform_integrations

system_id: ant-design
platform: figma
url: https://ant.design/docs/resources/
description:
No official Ant Group-maintained Figma library and no Figma Code Connect files were found in the repo or docs. The ecosystem is third-party: “Ant Design System” and “Ant Design System - v6” community files (antforfigma.com / Mateusz Wierzbicki), “Ant Design Open Source”, and Anima’s AntD Figma-to-code integration. Ant Design’s own Figma-facing move is design.md, targeted at generative design tools (Figma Make, Stitch) rather than component-library sync.


system_id: ant-design
platform: other
url: https://github.com/ant-design/ant-design/tree/master/.dumi
description:
Docs are built on dumi (Ant Group’s own React docs framework) with an in-repo .dumi/ theme, not Storybook. No Supernova / Knapsack / zeroheight integration found. Visual regression is an in-house pipeline (visual-regression-diff-* and visual-regression-persist-* GitHub Actions) plus jest-puppeteer image snapshots.


system_id: atlassian-design-system
platform: figma
url: https://atlassian.design/get-started/figma-libraries
description:
Official Figma libraries + plugin advertised in llms.txt with ‘Design token integration’ and ‘Code snippets’ features. Figma Make is named as a consumer of the ADS context engine. No public Code Connect (`figma.connect`) definitions were found; @atlaskit/code-connect does not exist on npm.


system_id: atlassian-design-system
platform: storybook
url: https://bitbucket.org/atlassian/atlassian-frontend-mirror/src/HEAD/design-system/
description:
A design-system/storybook-addon package exists in the mirror; contents and any AI relevance unverified.


system_id: atlassian-design-system
platform: other
url: https://www.npmjs.com/package/@atlaskit/ads-mcp
description:
Editor/agent distribution: one-click `vscode:mcp/install` badges for Cursor and VS Code in the ads-mcp README; documented configs for Cursor (~/.cursor/mcp.json), VS Code Copilot (.vscode/mcp.json), Codelassian (~/.codelassian/mcp.json), Rovodev (~/.rovodev/mcp.json, supports `timeout`), and `atlas plugin install -n mcp` for the Atlas CLI MCP registry. Inside the internal AFM monorepo the server is pre-wired: ‘ads-mcp is pre-configured and ready to use’; ‘Rovodev users get ads-mcp enabled automatically anywhere within AFM.’ Replit is named as an external AI prototyping integration.


system_id: carbon-design-system
platform: figma
url: https://github.com/carbon-design-system/carbon/blob/main/.github/workflows/code-connect.yml
description:
Figma Code Connect for both @carbon/react and @carbon/web-components: ~86 *.figma.tsx files in the monorepo, published to Figma on every push to main by .github/workflows/code-connect.yml (package matrix: react, web-components). This is what makes Figma Dev Mode / Dev Mode MCP emit real Carbon component code.


system_id: carbon-design-system
platform: storybook
url: https://github.com/carbon-design-system/carbon/blob/main/packages/react/AGENTS.md
description:
Storybook is the primary developer-facing docs surface, with colocated .stories.js/.ts and .mdx per component (the folder structure is codified in packages/react/AGENTS.md and packages/web-components/AGENTS.md so agents reproduce it). Dedicated deploy workflows exist for React, Web Components, and v12 storybooks. No Storybook MCP or addon-based AI integration found.


system_id: carbon-design-system
platform: other
url: https://new.carbondesignsystem.com
description:
new.carbondesignsystem.com, a StackBlitz-based sandbox generator. The Bob triage prompt instructs the bot to push reporters toward it when no reproduction URL is supplied, making it part of the AI triage loop rather than just a docs convenience.


system_id: chakra-ui
platform: figma
url: https://chakra-ui.com/docs/get-started/figma
description:
Official Chakra UI Figma Kit for v3 is published on Figma Community and the docs carry a get-started/figma page; light and dark mode token sets ship with the kit. Community plugins also exist (Chakra UI Design System plugin, FigPilot design-to-code). No Figma Code Connect definitions were found in the chakra-ui repo; the design↔code bridge is asset-level, not Code-Connect / Dev-Mode-MCP level.


system_id: chakra-ui
platform: storybook
description:
Storybook 9.1.8 is used internally for component development and visual testing (.storybook/ at repo root, a dedicated sandbox/storybook-ts environment, *.stories.tsx across packages). It functions as a maintainer/AI-verification surface (the issue-triage subagent must add bug repros as stories and confirm them in a real browser) rather than a public consumer-facing Storybook or a published Storybook MCP integration.


system_id: daisyui
platform: figma
url: https://daisyui.com/blueprint/figma/
description:
Blueprint MCP includes a Figma→daisyUI conversion tool that ‘Reads frames, hierarchy, auto layout, type, color, component instances, and a rendered preview before matching daisyUI patterns’, driven by a user-supplied Figma API key (FIGMA env var) with a dedicated /blueprint/figma/ setup guide. This is Figma-to-code via the Figma REST API, NOT Figma Code Connect; no Code Connect mappings were found. A separate ‘Figma Library’ product is linked from site navigation (https://daisyui.com/figma/ returns 404, so the exact URL is unverified).


system_id: daisyui
platform: other
url: https://daisyui.com/blueprint/changelog/
description:
Conversion tools for Tailwind CSS→daisyUI, Bootstrap→daisyUI, screenshot→daisyUI, and image-palette→daisyUI theme are exposed as MCP tools (previously MCP prompts) as of Blueprint 1.5, so clients without MCP-prompt support can still use them.


system_id: heroui
platform: figma
url: https://www.figma.com/community/file/1546526812159103429/heroui-figma-kit-v3
description:
Official HeroUI Figma Kit V3 on Figma Community, marketed as a 1:1 match with v3 code (same variants, naming, structure) using Figma variables mapped to code tokens (--accent, --surface, --radius) and Figma slots for composition. No Code Connect (*.figma.tsx) files exist anywhere in the heroui-inc org; code search returned only prose mentions in blog/docs MDX. Figma Dev Mode MCP is not documented as supported.


system_id: heroui
platform: storybook
url: https://github.com/heroui-inc/heroui/tree/v3/packages/storybook
description:
Storybook is the internal component-development environment (`pnpm dev`, port 6006); every component ships a .stories.tsx. It is used as an AI substrate on the builder side: docs-curator treats stories as the primary source of truth for docs demos, and a dedicated storybook-debugger subagent exists. No public Storybook-based MCP or addon for consumers.


system_id: heroui
platform: other
url: https://heroui.pro/docs/react/getting-started/agent-skills
description:
HeroUI Pro (commercial block library) ships its own agent-skills and Figma docs pages; not verified in depth here. No Supernova / Knapsack / zeroheight presence found.


system_id: nuxt-ui
platform: figma
url: https://ui.nuxt.com/figma
description:
Official Nuxt UI v4 Figma Design Kit, free on Figma Community, described in-repo (docs/content/figma.yml) as mirroring the development library, with 2,000+ component variants, 500+ local variables/design tokens powered by Tailwind CSS colors, and the full Lucide icon set. Marketing framing is explicitly design-to-code (‘From Figma to Nuxt, faster’), but there is NO Figma Code Connect layer and no Dev Mode MCP integration; a code search across the whole `nuxt` GitHub org for ‘code connect’ returns 0 hits. So the Figma↔code bridge is human-mediated, not agent-readable.


system_id: nuxt-ui
platform: other
url: https://github.com/nuxt/ui
description:
No Storybook. A code search for ‘storybook’ across nuxt/ui returns 0 results; component demos are served by the docs site’s own MDC component-example module and by the Nuxt/Vue/REPL playgrounds instead. Likewise no Supernova, Knapsack or zeroheight presence found.


system_id: patternfly
platform: figma
url: https://github.com/patternfly/ai-helpers/tree/main/plugins/design-audit/skills
description:
Three Figma-facing skills, all pointed at two allowlisted PF6 Figma libraries: `pf-figma-design-mode` (create/edit Figma files using PF component libraries), `pf-figma-check` (component usage vs PF design guidelines, with a `scripts/patternfly-check.js`), `pf-figma-token-check` (+ token-reference.md), and `pf-icon-finder` (identify PF icons in mockups → React imports). The builder-side `figma-diff` skill in pf-workshop wraps the Figma REST API with scripts to diff token/library versions and generate changelogs and release notes. No Figma Code Connect files were found in any patternfly repo.


system_id: patternfly
platform: other
url: https://github.com/patternfly/ai-helpers
description:
Cursor is a first-class distribution target, not an afterthought: `.cursor-plugin/marketplace.json` at the repo root and a `.cursor-plugin/plugin.json` in every plugin, byte-identical to the Claude Code manifests (CLAUDE.md enforces that they never drift), with install demo GIFs for both. No `.cursorrules` or `.cursor/rules/*.mdc` files exist in patternfly-org, patternfly-react, patternfly, patternfly-mcp, or patternfly-cli; distribution is via plugins, not distributed editor rules.


system_id: patternfly
platform: other
url: https://www.patternfly.org/ai/guidelines/conversation-design
description:
@patternfly/chatbot is a shipped product surface for building AI UIs (dynamic-import-only package, `@patternfly/chatbot/dist/dynamic/Chatbot`), backed by conversation-design docs and chatbot-avatar guidelines on patternfly.org. No Storybook integration found; PatternFly documents components in its own patternfly-org docs site instead.


system_id: primer-github
platform: figma
url: https://github.com/primer/react/blob/main/.github/workflows/figma_connect_publish.yml
description:
Figma Code Connect is live and CI-published: 52 `*.figma.tsx` files plus `packages/react/figma.config.json` in primer/react, published by `.github/workflows/figma_connect_publish.yml`. primer/brand mirrors the setup. This makes Figma Dev Mode MCP output real `@primer/react` component code for Primer designs.


system_id: primer-github
platform: storybook
url: https://github.com/primer/react/blob/main/.vscode/mcp.json
description:
Storybook is the primary component workbench (`npm start`, localhost:6006) and doubles as an MCP endpoint at `/mcp` exposing list-all-documentation, get-documentation, get-storybook-story-instructions and preview-stories. Registered as `primer-storybook` in the committed `.vscode/mcp.json`.


system_id: primer-github
platform: other
url: https://primer.style
description:
Docs are a bespoke Next.js site at primer.style rather than Supernova / Knapsack / zeroheight. Component metadata is generated from in-repo `*.docs.json` files via `packages/doc-gen`, and `@primer/react/generated/components.json` is the registry the MCP server reads to enumerate components.


system_id: react-spectrum-s2
platform: figma
description:
No public Figma Code Connect mappings found for @react-spectrum/s2: no *.figma.tsx files in the repo, and the only ‘code connect’ code-search hit is prose inside the figma-to-s2 skill guide. Instead Adobe ships a written Figma-MCP translation guide with a Figma-component-name → S2-props mapping table, S1-vs-S2 library disambiguation via search_design_system, and a default of disableCodeConnect: true when no mapping exists.

url:
https://react-spectrum.adobe.com/.well-known/skills/react-spectrum-s2/references/guides/figma-to-s2.md


system_id: react-spectrum-s2
platform: storybook
url: https://github.com/adobe/react-spectrum/tree/main/.storybook-s2
description:
Storybook is used internally for development and visual review; the repo carries both .storybook (v3) and .storybook-s2 configs plus .chromatic and a weekly-chromatic.yml workflow. No AI/agent-facing Storybook integration (e.g. an addon exposing stories to agents) was found.


system_id: react-spectrum-s2
platform: other
url: https://github.com/adobe/react-spectrum/tree/main/packages/dev/s2-docs
description:
The docs site is a custom in-repo app (packages/dev/s2-docs) that also emits the markdown docs, llms.txt, the .well-known/skills tree, and the .mcpb bundle. No Supernova, Knapsack, or zeroheight presence found.


system_id: salesforce-slds
platform: zeroheight
url: https://www.lightningdesignsystem.com/2e1ef8501
description:
The entire lightningdesignsystem.com SLDS 2 documentation site is hosted on zeroheight; URLs follow the zeroheight pattern /2e1ef8501/p/<id>-<slug> with versioned variants /v/<version>/p/.... Confirmed by URL structure and Rails-style response headers (x-request-id, x-runtime, x-rack-cors). Consequence for agents: the docs are client-rendered and return near-empty text to WebFetch, which is likely why the SLDS knowledge layer was relocated into npm-shipped skills and MCP tools.


system_id: salesforce-slds
platform: storybook
url: https://github.com/salesforce-ux/design-system/tree/master/.storybook
description:
The legacy SLDS 1 repo has a full .storybook/ config (addons.js, sldsTheme.js, inject-styling-hooks.js, custom webpack/postcss) used for component examples. No AI-facing Storybook integration (no Storybook MCP addon, no story-based registry for agents) was found. It predates the AI tooling and is part of the maintenance-mode SLDS 1 codebase.


system_id: salesforce-slds
platform: figma
url: https://developer.salesforce.com/docs/platform/lwc/guide/mcp-design.html
description:
Salesforce publishes SLDS Figma libraries (SLDS Web Components v2 style guide, SLDS 2 Agentic Experience library for Agentforce UI patterns, RTL library) under the @salesforce Figma community profile. The design-to-code bridge is claimed to rest on styling-hook names being identical between the Figma kit and code. Machine-side, the path is guide_figma_to_lwc_conversion (Beta) in the DX MCP lwc-experts toolset, which Salesforce documents as pairing with the third-party Framelink MCP server to read Figma files, not Figma’s own Dev Mode MCP. No public SLDS Figma Code Connect repository or .figma.ts mappings were found.


system_id: shadcn-ui
platform: figma
url: https://ui.shadcn.com/docs/figma
description:
No first-party Figma library and no official Code Connect. /docs/figma is an explicitly community-curated link list (‘Note: The Figma files are contributed by the community’) listing 2 free kits (Sitsiilia Bergmann; Pietro Schirano) and 6+ paid kits (shadcndesign.com, shadcncraft, shadcn/studio, Shadcnblocks, Obra shadcn/ui Pro, Shadcn Space). Several paid kits advertise Figma MCP readiness and design-to-shadcn-code export, but none are maintained by the shadcn team.


system_id: shadcn-ui
platform: storybook
url: https://github.com/shadcn-ui/ui/tree/main/apps/v4
description:
No official Storybook integration or addon in the repo; documentation is a bespoke Next.js docs app (apps/v4) with a live registry preview system, and CI runs `browser-tests.yml` (Playwright) rather than Storybook test-runner. Community Storybook setups exist but are out of scope of the project.


system_id: shadcn-ui
platform: other
url: https://ui.shadcn.com/docs/directory
description:
The registry itself is the platform integration story: `shadcn build` emits JSON that any site can host, `ui.shadcn.com/r/registries.json` is a public directory of community registries (browsable at /docs/directory) validated by the `validate-registries.yml` workflow, and registry items can carry components, hooks, tokens, docs, rules, workflows and MCP config files. No Supernova / Knapsack / zeroheight integration found.


system_id: shopify-polaris
platform: figma
url: https://polaris-react.shopify.com/contributing/figma-ui-kit
description:
Official Polaris Figma UI kit exists, with a contribution guide at polaris-react.shopify.com/contributing/figma-ui-kit. A Figma Community file is now published as ‘Polaris Components (Legacy)’, consistent with the React deprecation. No Figma Code Connect mappings and no Dev Mode MCP integration were found for either the React library or the web components.


system_id: shopify-polaris
platform: storybook
url: https://storybook.polaris.shopify.dev
description:
Storybook for Polaris React at storybook.polaris.shopify.dev, badged from the archived repo README. Documents the deprecated library; no agent-facing integration.


system_id: shopify-polaris
platform: other
url: https://github.com/Shopify/polaris/tree/HEAD/stylelint-polaris
description:
polaris-for-vscode VS Code extension (token autocomplete) and stylelint-polaris (custom-property/token enforcement rules) live in the archived monorepo. No Supernova, Knapsack or zeroheight presence found.


system_id: cloudscape-design-system
platform: figma
url: https://www.figma.com/@cloudscape
description:
Official Cloudscape Figma community library: all components, variants, and variables (color, text, layer styles), usable as a published library or sticker sheet. No Figma Code Connect mappings published (0 hits for ‘code-connect’ across org:cloudscape-design), so Figma Dev Mode MCP has no first-party node-to-component binding.


system_id: cloudscape-design-system
platform: other
url: https://cloudscape.design/components/
description:
No Storybook (0 hits for ‘storybook’ across org:cloudscape-design), and no Supernova / Knapsack / zeroheight. Cloudscape runs its own bespoke docs site, an internal `pages/` dev-page harness, and a separate cloudscape-design/demos repo instead.


system_id: mantine
platform: figma
description:
NO official Figma library. Mantine has never shipped a first-party Figma kit; the maintainers’ position surfaces in mantinedev discussions #382 and #5053. The de-facto standard is Pretine 7 (community, by the RAVN team), a free Figma Community UI kit tracking Mantine 7 with variables for colors/borders/spacing/shadows and light/dark modes; other community files include “Mantine UI Design System v5.10” and “Mantine UI Component Library”. All are community-maintained and lag the 9.x library. Consequently there is NO Figma Code Connect coverage and no Dev Mode MCP mapping for Mantine. The design-to-code AI path is entirely unserved.

url:
https://www.figma.com/community/file/1293978471602433537/pretine-7-the-ultimate-free-ui-kit-for-mantine


system_id: mantine
platform: storybook
url: https://github.com/mantinedev/mantine/tree/master/.storybook
description:
Storybook is internal-only. The monorepo has a .storybook/ directory for maintainer development, but there is no public Storybook deployment (storybook.mantine.dev does not resolve) and no Storybook-based AI affordance: no addon-docs MCP, no story-derived agent registry. The docs site mantine.dev is the canonical surface, and it is that site, not Storybook, that generates llms.txt and the /mcp data.


system_id: mantine
platform: other
url: https://ui.mantine.dev
description:
ui.mantine.dev (Mantine UI, free copy-paste blocks) is live but has NO agent-facing surface: /llms.txt, /registry.json and /r/index.json all return 404. There is no shadcn-style CLI registry for pulling Mantine blocks into a project via an agent. Also confirmed absent: Supernova, Knapsack and zeroheight, with no evidence of any of the three.


system_id: material-ui
platform: figma
url: https://mui.com/material-ui/getting-started/design-resources/
description:
Official MUI for Figma design kit (commercial, 600+ Material UI / MUI X / Joy UI components, 1,500+ elements) plus the free beta ‘Material UI Sync’ Figma community plugin, which generates a Material UI theme file of design tokens and component customizations from Figma with an embedded Storybook preview panel. Separately, the MCP’s generateReactCode accepts a `designContext` to ground codegen in a Figma frame. No Figma Code Connect anywhere in the mui org.


system_id: material-ui
platform: storybook
url: https://mui.com/material-ui/design-resources/material-ui-sync/
description:
No public Storybook for the Material UI component library itself; mui.com’s own docs site with live demos is the canonical surface, and there is no Storybook MCP/addon integration. Storybook appears only as the embedded preview panel inside the Material UI Sync Figma plugin.


system_id: material-ui
platform: other
url: https://www.uxpin.com/merge/mui-library
description:
UXPin Merge renders real Material UI React components in the design tool (third-party). Anima and CopyCat offer Figma-to-MUI conversion (third-party, not MUI-maintained). No Supernova, Knapsack, or zeroheight integration found.


system_id: fluent-ui-microsoft
platform: figma
url: https://www.figma.com/community/file/836828295772957889/microsoft-fluent-2-web
description:
Official Fluent 2 UI kits published on Figma Community (Microsoft Fluent 2 Web, Fluent 2 iOS, Fluent Android, Fluent system iconography). The Web kit was refactored so components use Figma variables aligned to code tokens, and Microsoft has described an internal Figma plug-in that replaces the native properties panel so designers assign tokens rather than raw colors/stroke-widths. this study found NO evidence of Figma Code Connect (`*.figma.tsx` files) in microsoft/fluentui, and no Dev Mode MCP guidance in the docs; treat Code Connect as unconfirmed or absent.


system_id: fluent-ui-microsoft
platform: storybook
url: https://github.com/microsoft/fluentui/tree/master/.storybook
description:
Storybook is the primary dev/docs surface: per-component stories packages (`react-<component>-stories`) each with their own nx `storybook` target, a root `.storybook/`, plus StoryWright-driven visual regression testing wired into `pr-vrt.yml` / `vrt-baseline.yml` workflows. The `/visual-test` agent skill drives these per-component Storybooks with Playwright to give agents a screenshot feedback loop.


system_id: fluent-ui-microsoft
platform: other
url: https://raw.githubusercontent.com/microsoft/fluentui/master/AGENTS.md
description:
Nx workspace with custom plugins (`tools/workspace-plugin/`) providing the `react-component` and `react-library` generators; API Extractor generates `api.md` files as machine-readable API surface; Beachball manages change files and releases. The root AGENTS.md carries an Nx-managed auto-updated block instructing agents to use `nx_workspace`, `nx_project_details` and `nx_docs` MCP tools, so Fluent UI inherits the Nx MCP server as a builder-side affordance.


system_id: nord-design-system
platform: storybook
url: https://nordhealth.design/storybook/
description:
Storybook 10, launched March 2026. Playground story embedded as the default example on every component page with controls open; standalone Storybook at /storybook/ (verified 200). Theme switcher (therapy/veterinary, light/dark/high-contrast), viewport tool, a11y audit panel, ‘Open in CodePen’ export on every story. Auto-generated property tables from the custom elements manifest. Stated roadmap: visual regression testing, design token docs in Storybook.


system_id: nord-design-system
platform: figma
url: https://nordhealth.design/design/foundations/figma/
description:
Nord Figma Toolkit v4 plus Nordicons and Brand Elements, distributed as Figma Team Libraries gated to Nordhealth email accounts and approved external partners. Variables (tokens) plus text/shadow/grid styles published. Nordhealth also maintains a public Figma plugin, github.com/nordhealth/themer, for swapping between identically-named styles across published libraries. No Figma Code Connect and no Dev Mode MCP integration anywhere in the docs or llms-full.txt (grep for ‘code connect’, ‘dev mode’, ‘figma mcp’ returns nothing).


system_id: nord-design-system
platform: other
url: https://nordhealth.design
description:
Docs are self-built on Nuxt 4 / @nuxt/content v3 / Tailwind v4, ~2000 prerendered routes, deployed to GitHub Pages (Feb 2026 rewrite). No Supernova, Knapsack or zeroheight involvement; Nord runs its own docs platform, which is exactly what let it add /raw/*.md twins, /llms.txt and the /.well-known/skills/ endpoint as first-class server routes.


system_id: uswds
platform: figma
url: https://www.figma.com/community/file/1440921849343185329/uswds-design-kit-beta
description:
Official USWDS Design Kit (Beta) published to Figma Community since November 2024: 42 components built with USWDS design tokens, using variables and smart layouts. Docs state 'We’ve provided an official USWDS design kit for Figma since November 2024. We’ve stopped maintaining our Adobe XD assets.' No Figma Code Connect, no Dev Mode MCP support, no published variable-to-token mapping for agents. The getting-started-for-designers page contains zero references to Code Connect, Storybook, or AI tooling.


system_id: uswds
platform: storybook
url: https://github.com/uswds/uswds/tree/develop/.storybook
description:
Storybook is used internally as the dev environment and a11y test harness: `npm start` runs Storybook on :6006, component packages ship `src/*.stories.js`, and `npm run test:a11y` drives Playwright + Axe against a built Storybook (`_site/`). But there is no publicly hosted Storybook instance; https://designsystem.digital.gov/storybook/ and https://uswds.github.io/uswds/ both 404. No @storybook/addon-mcp or equivalent agent integration.


system_id: uswds
platform: other
url: https://github.com/uswds/uswds-for-designers
description:
Design assets also distributed as a versioned ZIP (Figma + Sketch) from uswds-for-designers releases. No Supernova, Knapsack, or zeroheight presence found; the docs site is a self-hosted Jekyll build (uswds/uswds-site), which is why its `_data/` YAML is the only structured surface agents can consume.


# sources

system_id: ant-design
url:
https://raw.githubusercontent.com/ant-design/ant-design/HEAD/.agents/skills/version-release/SKILL.md


system_id: atlassian-design-system
url:
https://www.atlassian.com/blog/ai-at-work/atlassian-design-system-building-the-context-engine-for-the-ai-era


system_id: carbon-design-system
url:
https://raw.githubusercontent.com/carbon-design-system/carbon/main/packages/web-components/AGENTS.md


system_id: carbon-design-system
url:
https://raw.githubusercontent.com/carbon-design-system/carbon/main/.github/workflows/issue-triage.yml


system_id: chakra-ui
url:
https://raw.githubusercontent.com/chakra-ui/chakra-ui/HEAD/apps/www/content/docs/get-started/ai/mcp-server.mdx


system_id: chakra-ui
url:
https://raw.githubusercontent.com/chakra-ui/chakra-ui/HEAD/apps/www/content/docs/get-started/ai/skills.mdx


system_id: primer-github
url:
https://raw.githubusercontent.com/primer/react/HEAD/.github/instructions/general-coding.instructions.md


system_id: salesforce-slds
url:
https://developer.salesforce.com/blogs/2025/10/vibe-code-lightning-web-components-with-salesforce-dx-mcp


system_id: mantine
url:
https://raw.githubusercontent.com/mantinedev/mantine/master/packages/%40mantine/mcp-server/README.md


# platforms

id: figma
name: Figma (Dev Mode MCP server, Code Connect, Figma Make)
summary:
Figma is the most complete AI surface among design-system platforms in July 2026, and it works in both directions. CONSUMPTION: the remote MCP server at https://mcp.figma.com/mcp (OAuth; no desktop app needed) exposes ~25 tools: get_design_context (returns React+Tailwind reference code + screenshot + hints), get_metadata, get_screenshot, get_variable_defs, search_design_system, get_libraries, get_code_connect_map, get_motion_context, plus write-to-canvas tools (use_figma, generate_figma_design, create_new_file, upload_assets, generate_diagram). A local/desktop server variant runs through the Figma desktop app. Figma also ships official Agent Skills (github.com/figma/mcp-server-guide, 12 SKILL.md files) and first-party plugins for Claude Code (`claude plugin install figma@claude-plugins-official`), Cursor (`/add-plugin figma`) and Codex. These bundle MCP config + skills + asset-handling rules. BUILDING: Code Connect (CLI parser files `.figma.tsx` / framework-agnostic template files `.figma.ts`) maps Figma components to real code; MCP wraps mapped nodes in synthetic `<CodeConnectSnippet>` markers carrying import statement, snippet, prop mappings and ‘Add instructions for MCP’ user rules. Code Connect UI adds a GitHub-integrated, no-CLI path. Figma Make kits let a DS team publish their React npm package plus a `guidelines/` markdown tree that Make must read before generating. CONSTRAINTS: MCP is free during beta but rate-limited by seat/plan. Starter/Professional/Org/Enterprise View or Collab seats get 6 tool calls per MONTH; Dev/Full seats get 200/day (10/min) on Professional, 200/day (15/min) on Organization, 600/day (20/min) on Enterprise; write tools (add_code_connect_map, generate_figma_design, whoami) are exempt. Figma says it ‘will eventually be a usage-based paid feature’. Only clients in the Figma MCP Catalog (VS Code, Cursor, Claude Code, Codex, Xcode) may connect; others must join a waitlist. Code Connect requires Organization or Enterprise plan + a full Design or Dev Mode seat. Figma Make requires a Full seat on a paid plan; private Make-kit npm packages need org-admin scope management. Enterprise-managed auth exists only for Claude via Okta Cross App Access.

adoption:
Code Connect adoption is broad and verifiable: a GitHub code search for `"@figma/code-connect" filename:package.json` returns 248 public repos (gh api search/code, 2026-07-27). Named design systems in that result set include carbon-design-system/carbon (IBM Carbon), primer/react and primer/brand (GitHub Primer), CMSgov/design-system, coinbase/cds, contentful/forma-36, equinor/design-system, launchdarkly/launchpad-ui, MetaMask/metamask-design-system, JetBrains/ring-ui, bcgov/design-system (Government of British Columbia), db-ux-design-system/core-web (Deutsche Bahn), commercetools/nimbus, vtex/shoreline, getsentry/sentry, moodlehq/design-system, dequelabs/cauldron, coveo/plasma, Infineon/infineon-design-system-stencil, LedgerHQ/lumen, Synerise/synerise-design, PhillipsAuctionHouse/seldon, narmi/design_system, and Figma’s own reference system figma/sds (Simple Design System). Figma also maintains figma/code-connect and figma/mcp-server-guide as first-party references. Caveat: a package.json dependency proves the tooling is installed, not that mappings are published to a production library; verify per repo. No public case study found for Figma Make kits at a named enterprise design system (the docs example, ‘Astra UI’ / @brettmcm/astraui, is a Figma-authored demo).


id: storybook
name: Storybook (addon-mcp, manifests, AI docs)
summary:
Storybook 10 turned the component workshop into an agent-readable API. The pieces: (1) MANIFESTS: `/manifests/components.json` and `/manifests/docs.json`, auto-generated from static analysis of CSF files plus react-docgen prop extraction, containing per-component name, description, path, import statement, props with JSDoc descriptions, and per-story rendered snippets. Manifests evaluate the *final rendered story* with args/decorators applied, so an agent sees real usage, not abstractions. (2) MCP SERVER: `npx storybook add @storybook/addon-mcp` serves an MCP endpoint at http://localhost:6006/mcp with three toolsets: `docs` (list-all-documentation, get-documentation, get-documentation-for-story), `dev` (get-changed-stories, get-storybook-story-instructions, preview-stories, the last of which renders story previews inline via MCP Apps), and `test` (run-story-tests, which returns a11y results and ‘instructs the agent to interpret the results and resolve any issues found’, creating an explicit ‘self-healing loop’). Toolsets are individually togglable in .storybook/main.ts. (3) COMPOSITION: a composed Storybook’s manifests are automatically merged into MCP responses, so one endpoint can front a multi-repo design system. (4) SHARING: Chromatic auto-publishes the docs toolset at `https://main--<appid>.chromatic.com/mcp` (private if the Storybook is private); or self-host with the `@storybook/mcp` tmcp-based library (Node 20+, needs components.json). (5) DOCS-AS-CONTEXT: storybook.js.org serves llms.txt and llms-full.txt, and any docs URL accepts a `.md` suffix with `?renderer=`, `?language=`, `?codeOnly=true`, and `?version=` query params. CONSTRAINTS: the addon/manifests are in ‘preview’ and ‘the API may change’; the docs toolset is React-only today (Vue, Angular, Web Components, Svelte planned) because manifest generation is React-only; the manifest schema is explicitly ‘not yet stable and should not be considered a public API’. Chromatic publishing requires Storybook 10.3+. Dev and test toolsets only work against a locally running Storybook; they cannot be published.

adoption:
A GitHub code search for `"@storybook/addon-mcp" filename:main.ts` returns 589 public hits (gh api search/code, 2026-07-27). Verified design-system and component-library repos with the addon registered in `.storybook/main.ts`: Khan/wonder-blocks (Khan Academy Wonder Blocks, configured with `toolsets: { dev: true, docs: true }`, so testing is deliberately omitted), marigold-ui/marigold (Reservix Marigold), zenkigen/zenkigen-component, reshaped-ui/reshaped, LuccaSA/lucca-front, tetrascience/ts-lib-ui-kit, Wai-Technologies/raaghu-react, Frontify/fondue. Broader product adopters in the same result set include backstage/backstage (Spotify Backstage), coder/coder, NangoHQ/nango, mastra-ai/mastra, OneKeyHQ/app-monorepo, and storybookjs/storybook itself. Note the React-only limitation shapes this list: Angular-based lucca-front appears in search but the docs toolset would not generate manifests for it. Chromatic-published MCP servers are the recommended distribution path but public example URLs are not indexed, so remote-consumption adoption could not be verified from public sources.


id: supernova
name: Supernova.io
summary:
Supernova has repositioned as “the agentic design system platform” (verbatim from https://www.supernova.io/llms.txt). Two consumption surfaces exist: (1) Supernova Relay, the official remote MCP server at https://mcp.supernova.io/mcp/ds/{ID} (OAuth, 14 read-only tools spanning tokens, DS components, code components, Figma components, Storybook stories, assets and docs-as-Markdown; explicitly read-only, “can’t make changes to data inside Supernova”); and (2) AI Context Management (shipped 22 Jun 2026), which lets a DS team define per-team scoped contexts: design tokens, component APIs, component patterns, usage data, rules, docs, plus “knowledge files, rules, and custom skills”, and publish each as its own context-scoped MCP endpoint, with a feedback loop capturing both engineer flags and automatic agent-interaction captures. On the builder side: Write with AI / documentation AI agents, and exporters (Supernova exporter store) that ship skills and knowledge files into repos. Marketing llms.txt exists at supernova.io/llms.txt and a human-readable /for-ai index page. PRICING/AVAILABILITY (from supernova.io/pricing): Free = 5 MCP consumers, 2 AI contexts, 2,400 automation credits/mo; Pro ($35/full seat/mo) = up to 50 MCP consumers, 10 AI contexts, 3,000 credits/seat/mo; Enterprise = custom MCP consumers, unlimited AI contexts, 5,000 credits/seat/mo. “Unlimited MCP lookups/month” on all tiers; dynamic filtering is Pro/Enterprise only. GAPS: no public Code Connect-style Figma↔code mapping file format found; no published per-styleguide llms.txt generation for customer docs sites (unlike zeroheight/Knapsack); the named AI agents (PM/Release note/Documentation/Architect) appear in blog/marketing copy but it was not possible to fetch a canonical docs page describing them, so treat as unverified. No named customer publicly documented as using the MCP.

adoption:
No publicly documented design system was found naming Supernova Relay/MCP or AI Contexts in its own docs. Supernova’s own learn.supernova.io site is itself built on Supernova and is the only observable dogfooding example. Supernova publishes a customers page and cites a Fortune-scale customer base generally, but no company has publicly published a Supernova MCP endpoint or AI-context configuration that I could verify. Treat adoption evidence as vendor-side only.


id: knapsack
name: Knapsack.cloud
summary:
Knapsack runs TWO distinct MCP servers and is explicit about the difference. (1) The Knapsack MCP: a per-workspace endpoint at https://mcp.knapsack.cloud/mcp/<workspace-id> exposing your own workspace’s tokens, components, patterns and docs to any MCP client; setup is via the mcp-remote npx shim (requires Node 20+) and browser OAuth; gated behind an “Early Access” workspace flag. (2) A docs-site MCP at https://docs.knapsack.cloud/_mcp/server serving Knapsack’s own product documentation, with one-click “Connect to Claude Code” / “Connect to Cursor” page-action buttons. Knapsack’s docs site (built on Fern) also ships a full llms.txt with an explicit “Instructions for AI Agents” preamble, section-scoped llms.txt (append /llms.txt to any section URL), and per-page Markdown via appending .md: a three-tier retrieval design (llms.txt for whole-site, .md for single page, MCP for interactive). The differentiating builder feature is Data Sources: a contextual data layer wiring Storybook (live component implementation), the Knapsack workspace (tokens/docs/patterns) and Markdown files into MCP, pitched as letting AI “surface inconsistencies, flag drift”. PRICING/AVAILABILITY: Knapsack MCP requires an Early Access flag on the workspace or connection fails; Data Sources is explicitly gated: “Contact your sales partner to discuss unlocking data sources.” Knapsack is enterprise/sales-led with no self-serve public pricing; it raised a $10M Series A (Oct 2025) and positions the “Intelligent Product Engine” with limited beta and GA targeted March 2026. GAPS: no published list of Knapsack MCP tool names (unlike zeroheight and Supernova); no Code Connect-style mapping file; no public AGENTS.md/CLAUDE.md conventions; no customer-named adoption.

adoption:
No named design system publicly documents using the Knapsack MCP. Knapsack’s own docs site (docs.knapsack.cloud, Fern-hosted) dogfoods the llms.txt + .md + docs-MCP pattern, and the docs use workspace ID `toby` as the worked example (Knapsack’s own workspace). Press coverage around the Oct 2025 $10M Series A cites anonymized results: a Fortune 500 retailer at ~20% efficiency gain / ~$1M projected annual savings, and a global pharmaceutical company at 30% QA-time reduction / >$10M projected annual savings, but names no design system. Adoption evidence is vendor-side only.


id: zeroheight
name: zeroheight
summary:
zeroheight has the most thoroughly documented MCP surface of the three. Remote MCP lives at a single endpoint, https://mcp.zeroheight.com/mcp, with two access modes: MCP via login (OAuth/SSO, recommended, can span multiple styleguides, CAN read private pages) and MCP via link (unique per-viewer URL, no auth, scoped to a single styleguide, CANNOT read private pages). A local MCP also ships as the npm package @zeroheight/mcp-server (Node 22+, browser OAuth by default with tokens at ~/.zeroheight/mcp-oauth.json, or ZEROHEIGHT_CLIENT_ID/ZEROHEIGHT_ACCESS_TOKEN sent as X-API-CLIENT / X-API-KEY headers); local MCP is for orgs blocking remote MCP, token-based auth, or CI/CD pipelines, and it too can read private pages. Five documented tools: list-styleguides, search-pages, list-pages, get-page, get-page-asset (plus list-releases for versioned content). zeroheight also publishes an “Optimising your styleguide for consumption via MCP” guide, the clearest vendor articulation anywhere of how to write DS docs FOR retrieval, including “Write content as rules, not descriptions”. A Markdown Export feature turns any page into AI-ready context with a pre-filled prompt, for teams who cannot enable MCP. On the builder side: Build with AI / Write with AI / Improve with AI, AI tone-of-voice instructions, AI-generated release notes, an Assistant for editors/viewers/Figma/Slack/Teams, and a Docs Agent closed beta that watches Figma for component/token changes and proposes documentation updates (suggestions only; Enterprise-only; OpenAI is the sub-processor; no customer data used for training). PRICING/AVAILABILITY: MCP, Markdown Export and the MCP optimisation features are all headed “This feature is not available for Free or Starter plans.” search-pages additionally requires the org-level “Allow use of AI features in styleguides” setting; without it the agent falls back to list-pages/get-page navigation only. Docs Agent beta requires Enterprise + AI features enabled + a styleguide mapped to Figma files. Public list pricing is roughly $39–49 per editor/month annually (third-party sources; treat as approximate). GAPS: no Code Connect-style mapping; zeroheight.com/llms.txt returns 404, so machine-readable access is Markdown Export + MCP, not llms.txt; the frequently cited claim about “llms.txt generation for DS docs sites” is NOT confirmed for zeroheight (it IS confirmed for Knapsack).

adoption:
zeroheight is the only one of the three with a documented mechanism for DS teams to publicise MCP access to consumers: the “Remote MCP details block”, a slash-inserter block that renders each viewer’s unique MCP URL and per-client setup tabs directly inside a public styleguide page. That makes public adoption in principle observable, but it was not possible to verify a specific named public styleguide carrying the block. Named zeroheight customers appear in vendor marketing (Uber, Salesforce, United Airlines, Compare The Market on zeroheight.com/ai; Decathlon, with a 5-person core team, 30 contributors, 17 products and 19 countries, in the Design Systems Report 2026), but none of these is documented as using MCP specifically. Treat all adoption evidence as vendor-side. zeroheight’s own Design Systems Report 2026 is the better third-party datapoint for sector-wide MCP uptake.


# platform_capabilities

platform_id: figma
title: Remote MCP server (https://mcp.figma.com/mcp) — one-line install per client
audience: consumers
url: https://developers.figma.com/docs/figma-mcp-server/remote-server-installation/
snippet_language: shell
snippet_source_url: https://developers.figma.com/docs/figma-mcp-server/remote-server-installation/
description:
OFFICIAL. The primary AI-consumption surface. Hosted, OAuth-authenticated, no desktop app. Preferred install is the first-party plugin (which also ships Agent Skills and asset rules); manual install is a single CLI command per client. Docs explicitly gate the client list: ‘Only clients listed in the Figma MCP Catalog like VS Code, Cursor, or Claude Code can connect to the Figma MCP Server.’

snippet_content:
Using the Figma plugin for Claude Code (preferred):
The recommended way to set up the Figma MCP server in Claude Code is by installing the Figma plugin, which includes MCP server settings as well as Agent Skills for common workflows.
Run the following command to install the plugin from Anthropic's official plugin marketplace.
claude plugin install figma@claude-plugins-official

Manual setup for Claude Code
Run the following command in your terminal to add the Figma MCP to Claude Code:
claude mcp add --transport http figma https://mcp.figma.com/mcp
Tip: To make your Figma MCP server available across all projects, install it with the --scope user flag:
claude mcp add --scope user --transport http figma https://mcp.figma.com/mcp

Manual setup for Codex:
In your terminal, run the following command:
codex mcp add figma --url https://mcp.figma.com/mcp

Using the Figma plugin for Cursor (preferred):
Install the plugin by typing the following command in Cursor's agent chat:
/add-plugin figma
The plugin includes:
MCP server configuration for the Figma MCP server
Skills for implementing designs, connecting components via Code Connect, and creating design system rules
Rules for proper asset handling from the Figma MCP server


platform_id: figma
title: Tool surface: get_design_context, get_variable_defs, search_design_system, Code Connect tools
audience: both
url: https://developers.figma.com/docs/figma-mcp-server/tools-and-prompts/
description:
OFFICIAL. ~25 tools documented on the Tools and prompts page. Design-system-relevant reads: get_design_context (structured design context, defaults to React + Tailwind), get_metadata (‘sparse XML representation’ of layer properties for large frames), get_screenshot, get_variable_defs (variables and styles: colors, spacing, typography), search_design_system (searches subscribed libraries for reusable components and tokens), get_libraries, get_code_connect_map, get_code_connect_suggestions, get_context_for_code_connect, add_code_connect_map, send_code_connect_mappings, get_motion_context. Write-side: use_figma, generate_figma_design (live UI → Figma layers), create_new_file, upload_assets, download_assets, generate_diagram, whoami. There is also a server-side PROMPT named create_design_system_rules that generates rule files to give ‘agents with the right context to translate designs into high-quality, codebase-aware frontend code’.


platform_id: figma
title: Custom rules: the ‘Figma MCP Integration Rules’ forced-flow template
audience: consumers
url: https://developers.figma.com/docs/figma-mcp-server/add-custom-rules/
snippet_language: markdown
snippet_source_url: https://developers.figma.com/docs/figma-mcp-server/add-custom-rules/
description:
OFFICIAL, and the single most explicit coercion artifact Figma publishes. A drop-in rules block for CLAUDE.md/.cursor/rules that forces a tool-call order (‘Required flow (do not skip)’), demotes MCP output to a reference, and mandates token/component reuse. Note the framing of the page itself: rules are ‘the kind of knowledge around the “unwritten rules” of a codebase that experienced devs know, and would want to pass on to a new junior hire.’

snippet_content:
## Figma MCP Integration Rules
These rules define how to translate Figma inputs into code for this project and must be followed for every Figma-driven change.
### Required flow (do not skip)
1. Run get_design_context first to fetch the structured representation for the exact node(s).
2. If the response is too large or truncated, run get_metadata to get the high-level node map and then re-fetch only the required node(s) with get_design_context.
3. Run get_screenshot for a visual reference of the node variant being implemented.
4. Only after you have both get_design_context and get_screenshot, download any assets needed and start implementation.
5. Translate the output (usually React + Tailwind) into this project's conventions, styles and framework. Reuse the project's color tokens, components, and typography wherever possible.
6. Validate against Figma for 1:1 look and behavior before marking complete.
### Implementation rules
- Treat the Figma MCP output (React + Tailwind) as a representation of design and behavior, not as final code style.
- Replace Tailwind utility classes with the project's preferred utilities/design-system tokens when applicable.
- Reuse existing components (e.g., buttons, inputs, typography, icon wrappers) instead of duplicating functionality.
- Use the project's color system, typography scale, and spacing tokens consistently.
- Respect existing routing, state management, and data-fetch patterns already adopted in the repo.
- Strive for 1:1 visual parity with the Figma design. When conflicts arise, prefer design-system tokens and adjust spacing or sizes minimally to match visuals.


platform_id: figma
title: Asset-handling rules (‘DO NOT import/add new icon packages’)
audience: consumers
url: https://developers.figma.com/docs/figma-mcp-server/add-custom-rules/
snippet_language: markdown
snippet_source_url: https://developers.figma.com/docs/figma-mcp-server/add-custom-rules/
description:
OFFICIAL. Figma’s recommended CLAUDE.md block that blocks the two most common agent failure modes with Figma output: inventing icons from an npm package, and leaving placeholders. The same page also ships general-purpose one-liners: '- IMPORTANT: Always use components from `/path_to_your_design_system` when possible’, ‘- Avoid hardcoded values, use design tokens from Figma where available’, '- Place UI components in `/path_to_your_design_system`; avoid inline styles unless truly necessary’.

snippet_content:
For Claude Code, you can do something similar in your CLAUDE.md file:

# MCP Servers
## Figma MCP server rules
  - The Figma MCP server provides an assets endpoint which can serve image and SVG assets
  - IMPORTANT: If the Figma MCP server returns a localhost source for an image or an SVG, use that image or SVG source directly
  - IMPORTANT: DO NOT import/add new icon packages, all the assets should be in the Figma payload
  - IMPORTANT: do NOT use or create placeholders if a localhost source is provided


platform_id: figma
title: Official Agent Skills (github.com/figma/mcp-server-guide) — MANDATORY-prerequisite pattern
audience: consumers
url: https://github.com/figma/mcp-server-guide/blob/main/skills/figma-design-to-code/SKILL.md
snippet_language: markdown
snippet_source_url: https://raw.githubusercontent.com/figma/mcp-server-guide/main/skills/figma-design-to-code/SKILL.md
description:
OFFICIAL. 12 skills: figma-design-to-code, figma-code-connect, figma-generate-design, figma-generate-library, figma-use, figma-use-figjam, figma-use-motion, figma-use-slides, figma-implement-motion, figma-generate-diagram, figma-create-new-file, figma-swiftui. These are shipped inside the Claude Code/Cursor plugins and also served as MCP resources (skill://figma/<name>/SKILL.md, fetched via get_figma_skill / read_skill_uri). The coercion technique is notable: the skill *description* itself declares the skill a mandatory prerequisite for a tool call, and the body uses RFC-2119 ‘You MUST / You MUST NOT’ throughout, including a hint-priority ladder that puts Code Connect snippets above raw hex.

snippet_content:
---
name: figma-design-to-code
description: "**MANDATORY prerequisite** — you MUST invoke this skill BEFORE calling the `get_design_context` Figma MCP tool. You MUST trigger this skill whenever the user wants to implement, build, port, or code up a Figma design as code. ... This skill provides critical instructions and steps to the agent on how to correctly implement Figma designs in code and must NOT be skipped."
disable-model-invocation: false
---

### 2. Treat the output as a reference, not final code
- The returned code is React + Tailwind enriched with hints. You MUST treat it as a REFERENCE, not as final code to paste verbatim.
- You MUST adapt it to the target project's language, framework, component library, styling system, and conventions. Match the surrounding code.

### 3. Reuse what the project already has
- Before writing new code, You MUST check the target project for existing components, layout patterns, and design tokens that match the design intent.
- You MUST reuse the project's existing components and tokens instead of generating new equivalents from scratch.

### 4. Honor the response hints by priority
Apply the hints in this order — earlier sources override later ones:
1. **Code Connect snippets** → use the mapped codebase component directly.
2. **Component documentation links** → follow them for usage and guidelines.
3. **Design annotations** → follow any designer notes or constraints.
4. **Design tokens (CSS variables)** → map them to the project's token system.
5. **Raw hex / absolute positioning** → loosely structured; lean on the screenshot for intent.

- **Render every icon/image from its exported asset.** Never hand-write or inline `<svg>`/`<path>`, never author your own icon file, never drop an icon or leave a placeholder


platform_id: figma
title: Code Connect — the machine-readable Figma→code registry
audience: both
url: https://developers.figma.com/docs/code-connect/react/
snippet_language: tsx
snippet_source_url: https://developers.figma.com/docs/code-connect/react/
description:
OFFICIAL. `figma.connect(Component, url, { props, example })` files (`.figma.tsx` parser API, or framework-agnostic `.figma.ts` template files) published via the Code Connect CLI. Supported: React/React Native, HTML (Web Components, Angular, Vue), SwiftUI, Jetpack Compose, and a Storybook integration. What matters for AI: ‘Code Connect files are not executed... the Code Connect CLI essentially treats code snippets as strings’, so the mapping is a curated few-shot exemplar, not runtime behavior. When MCP hits a mapped node it emits a synthetic `<CodeConnectSnippet>` wrapper carrying design properties, import statements, the real component snippet, and 'Instructions: Any custom instructions you’ve added to help guide AI code generation’. Code Connect UI adds an ‘Add instructions for MCP’ field whose text is injected as ‘user rules’. Requires Organization or Enterprise plan + full Design or Dev Mode seat.

snippet_content:
import figma from '@figma/code-connect/react'

figma.connect(Button, 'https://...', {
  props: {
    label: figma.string('Text Content'),
    disabled: figma.boolean('Disabled'),
    type: figma.enum('Type', {
      Primary: 'primary',
      Secondary: 'secondary',
    }),
  },
  example: ({ disabled, label, type }) => {
    return (
      <Button disabled={disabled} type={type}>
        {label}
      </Button>
    )
  },
})


platform_id: figma
title: Agent-authored Code Connect (figma-code-connect skill + MCP mapping tools)
audience: builders
url: https://github.com/figma/mcp-server-guide/blob/main/skills/figma-code-connect/SKILL.md
snippet_language: markdown
snippet_source_url: https://raw.githubusercontent.com/figma/mcp-server-guide/main/skills/figma-code-connect/SKILL.md
description:
OFFICIAL. DS maintainers can have an agent generate and maintain mappings: get_code_connect_suggestions discovers unmapped published components, get_context_for_code_connect returns Figma property definitions (TEXT / BOOLEAN / VARIANT / INSTANCE_SWAP / SLOT), the agent writes the `.figma.ts` template, then add_code_connect_map / send_code_connect_mappings persist it. The skill front-loads hard preconditions so the agent stops rather than fabricating mappings.

snippet_content:
## Prerequisites

- **Figma MCP server must be connected** — verify that Figma MCP tools (e.g., `get_code_connect_suggestions`) are available before proceeding. If not, guide the user to enable the Figma MCP server and restart their MCP client.
- **Components must be published** — Code Connect only works with components published to a Figma team library. If a component is not published, inform the user and stop.
- **Organization or Enterprise plan required** — Code Connect is not available on Free or Professional plans.
- **URL must include `node-id`** — the Figma URL must contain the `node-id` query parameter.
- **TypeScript types** — for editor autocomplete and type checking in `.figma.ts` files `@figma/code-connect/figma-types` must be added to `types` in `tsconfig.json`:
  ```json
  {
    "compilerOptions": {
      "types": ["@figma/code-connect/figma-types"]
    }
  }
  ```

## Step 2: Discover Unmapped Components
Call the MCP tool `get_code_connect_suggestions` with:
- `fileKey`, `nodeId`, `excludeMappingPrompt` — `true` (returns a lightweight list of unmapped components)
- **"No published components found in this selection"** — inform the user they need to publish the component to a team library in Figma first, then stop.


platform_id: figma
title: Figma Make kits: ship your React npm package + a guidelines/ tree Make must read
audience: builders
url: https://developers.figma.com/docs/code/write-design-system-guidelines/
snippet_language: markdown
snippet_source_url: https://developers.figma.com/docs/code/write-design-system-guidelines/
description:
OFFICIAL, and the most prescriptive ‘keep the model on-system’ document Figma publishes. A Make kit = your production React design-system npm package (React 18, Vite-compatible, public npm or a Figma-hosted private registry) plus a `guidelines/` markdown folder that Figma Make reads before generating. Figma explicitly advises progressive disclosure (‘Multiple short guidelines files are better than a few large files... with the size of the context window in mind’) and imperative phrasing (‘”Do not use small text for anything except captions” is better than “Use small text sparingly”’). Figma Make can also auto-draft guidelines from your package. Availability: Full seats on paid plans; only org admins manage private-registry scopes.

snippet_content:
## Reading order
**MUST READ before writing any code:**
1. This file (`overview.md`) — product character, rules, and workflows
2. `setup.md` — providers, CSS imports, build configuration
3. `foundations/` — all token files (color, typography, spacing, surfaces)
4. `components/overview.md` — full component catalog with alternative names
**Read on-demand:**
- `components/{name}.md` — read BEFORE using that component

### Before using a component
1. Check `components/overview.md` for the component catalog
2. Read `components/{name}.md` for the specific component
4. Do NOT write code using a component until you have read its guidelines file
### Before using an icon
2. Do NOT guess icon names — verify the icon exists first
4. Icons are ALWAYS imported from `lucide-react`, never from `@brettmcm/astraui`

## Rules
IMPORTANT: Every desktop page MUST include `SidebarNavigation` — the 60px dark icon rail on the far left. No exceptions.
IMPORTANT: The page background is ALWAYS `brand-tertiary`. Never use white or gray as the page canvas.
IMPORTANT: Do NOT use `brand-primary` or `brand-secondary` as backgrounds for large areas — they are for small accents and interactive highlights only.
- Always use design system components over raw HTML elements (`InputField` not `<input>`, `SelectField` not `<select>`)
- All spacing must use design system tokens (`gap-xl`, `p-2xl`) — never hardcode pixel values
- Surface color defines layout hierarchy, not borders — do not add borders between layout regions
- Icons always come from `lucide-react` — never create inline SVGs or guess icon names
- Navigation hierarchy is strict: `SidebarNavigation` → `SecondaryNav` → `Tabs`. Never skip levels.


platform_id: storybook
title: @storybook/addon-mcp — install, wire to agent, and the recommended anti-hallucination AGENTS.md
audience: consumers
url: https://storybook.js.org/docs/ai/mcp/overview
snippet_language: markdown
snippet_source_url: https://storybook.js.org/docs/ai/mcp/overview.md
description:
OFFICIAL. Three-step setup. Step 3 is the interesting one: Storybook publishes a ready-made AGENTS.md/CLAUDE.md block whose entire purpose is to stop the model inventing props on design-system components. It forces an MCP round-trip before any component use, forbids inferring props from naming conventions, tells the agent to escalate to the human rather than guess, and closes the loop with a mandatory test run.

snippet_content:
npx storybook add @storybook/addon-mcp
npx mcp-add --type http --url "http://localhost:6006/mcp" --scope project

```md title="AGENTS.md"
When working on UI components, always use the `your-project-sb-mcp` MCP tools to access Storybook's component and documentation knowledge before answering or taking any action.

- **CRITICAL: Never hallucinate component properties!** Before using ANY property on a component from a design system (including common-sounding ones like `shadow`, etc.), you MUST use the MCP tools to check if the property is actually documented for that component.
- Query `list-all-documentation` to get a list of all components
- Query `get-documentation` for that component to see all available properties and examples
- Only use properties that are explicitly documented or shown in example stories
- If a property isn't documented, do not assume properties based on naming conventions or common patterns from other libraries. Check back with the user in these cases.
- Use the `get-storybook-story-instructions` tool to fetch the latest instructions for creating or updating stories. This will ensure you follow current conventions and recommendations.
- Check your work by running `run-story-tests`.

Remember: A story name might not reflect the property name correctly, so always verify properties through documentation or example stories before using them.
```


platform_id: storybook
title: Toolset configuration in .storybook/main.ts
audience: builders
url: https://storybook.js.org/docs/ai/mcp/api
snippet_language: ts
snippet_source_url: https://storybook.js.org/docs/ai/mcp/api.md
description:
OFFICIAL. The DS team decides what the agent is allowed to do. `toolsets: { dev, docs, test }`, all `true` by default. Common pattern for a published/library Storybook is to disable `dev` (story authoring) and keep `docs`. Khan Academy’s Wonder Blocks, for example, enables `dev: true, docs: true` and omits `test`.

snippet_content:
// .storybook/main.ts — CSF 3
// Replace your-framework with the framework you are using (e.g., react-vite, vue3-vite, angular, etc.)

const config: StorybookConfig = {
  framework: '@storybook/your-framework',
  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
  addons: [
    // ... your existing addons
    {
      name: '@storybook/addon-mcp',
      options: {
        toolsets: {
          dev: false,
        },
      },
    },
  ],
};

export default config;


platform_id: storybook
title: Manifests — /manifests/components.json as a machine-readable component registry
audience: both
url: https://storybook.js.org/docs/ai/manifests
snippet_language: json
snippet_source_url: https://storybook.js.org/docs/ai/manifests.md
description:
OFFICIAL. The context substrate under the MCP server. Generated from CSF static analysis + react-docgen (react-docgen-typescript recommended for richer props). Each entry carries the exact `import` line, a description, JSDoc tags, per-story rendered `snippet`s, and full prop types with descriptions, a curated few-shot exemplar set per component. Raw JSON is fetchable at http://localhost:6006/manifests/components.json or /manifests/components.json in a built Storybook, and `subcomponents` are included when a story file declares them. Schema is explicitly not a stable public API while in preview.

snippet_content:
{
  "components": {
    "components-button": {
      "id": "components-button",
      "name": "Button",
      "path": "./src/components/Button/Button.stories.tsx",
      "stories": [
        {
          "id": "components-button--default",
          "name": "Default",
          "snippet": "const Default = () => <Button>Button</Button>;"
        },
        {
          "id": "components-button--disabled",
          "name": "Disabled",
          "snippet": "const Disabled = () => <Button disabled>Button</Button>;"
        }
      ],
      "import": "import { Button } from \"@mealdrop/ui\";",
      "jsDocTags": {},
      "description": "Primary UI component for user interaction",
      "reactDocgen": {
        "props": {
          "large": {
            "required": false,
            "tsType": { "name": "boolean" },
            "description": "Is the button large?",
            "defaultValue": { "value": "false", "computed": false }
          }
        }
      }
    }
  }
}


platform_id: storybook
title: Docs toolset — list-all-documentation / get-documentation / get-documentation-for-story
audience: consumers
url: https://storybook.js.org/docs/ai/mcp/overview
description:
OFFICIAL. The consumption path that keeps an agent on-system. `list-all-documentation` returns the component index; `get-documentation` returns props, the first three stories, an index of the rest, and any extra docs; `get-documentation-for-story` is the escalation when the summary isn’t enough. This is the only toolset that can be published remotely. Storybook’s stated goal: 'Agents will be equipped to reuse your existing components and follow your documented usage guidelines when generating UI, helping ensure the generated UI is consistent with your existing design system.'


platform_id: storybook
title: Test toolset — run-story-tests as a linter loop the agent must run
audience: consumers
url: https://storybook.js.org/docs/ai/mcp/overview
snippet_language: markdown
snippet_source_url: https://storybook.js.org/docs/ai/mcp/overview.md
description:
OFFICIAL. `run-story-tests` runs component and interaction tests plus axe accessibility checks and, per the docs, ‘Also instructs the agent to interpret the results and resolve any issues found.’ Storybook documents the resulting workflow explicitly as a self-healing loop: the agent finds the submit button fails color contrast, uses the docs toolset to look up documented theme colors, fixes it, and re-runs, ‘without requiring you to intervene.’ This is the closest thing in the ecosystem to a design-system conformance gate an agent is obliged to pass.

snippet_content:
If you have Storybook Test set up in your Storybook, the testing toolset provides tools that allow the agent to run component tests (including accessibility checks, if set up) and interpret their results. It also includes instructions to resolve issues. As the agent develops, it can choose to run tests to validate its work. If it finds issues, it can fix them and re-run the tests to confirm they are resolved. This creates a _self-healing_ loop that helps ensure the quality of the generated UI, without requiring you to intervene.

#### `run-story-tests`
Runs tests for specific stories and returns results, including any accessibility issues (if configured). Also instructs the agent to interpret the results and resolve any issues found.


platform_id: storybook
title: Sharing: Chromatic auto-publish or self-host with @storybook/mcp
audience: builders
url: https://storybook.js.org/docs/ai/mcp/sharing
snippet_language: ts
snippet_source_url: https://storybook.js.org/docs/ai/mcp/sharing.md
description:
OFFICIAL. Two distribution models for a design-system team that wants product teams’ agents to consume the system remotely. Chromatic publishes the MCP server alongside every build at the `/mcp` route (recommended permalink `https://main--<appid>.chromatic.com/mcp`); private Storybook → private MCP server, gated to invited collaborators. Requires Storybook 10.3+ and React. Self-hosting uses the `@storybook/mcp` package (a tmcp-based library, Node 20+, needs components.json and optionally docs.json); reference implementations for a Node process and a Netlify Function live in storybookjs/mcp/apps/self-host-mcp. Only the docs toolset is publishable; dev and test are local-only.

snippet_content:
We provide a package, `@storybook/mcp`, which is a library that creates a `tmcp`-based MCP server exposing Storybook component/docs knowledge from manifests.

### Prerequisites
- Node.js 20+
- A manifest source containing:
  - `components.json` (required)
  - `docs.json` (optional)

This is the minimal implementation of a server using `@storybook/mcp`:

```ts title="server.ts"
const storybookMcpHandler = await createStorybookMcpHandler();

export async function handleRequest(request: Request): Promise<Response> {
  if (new URL(request.url).pathname === '/mcp') {
    return storybookMcpHandler(request);
  }

  return new Response('Not found', { status: 404 });
}
```


platform_id: storybook
title: Best practices: writing stories and JSDoc *for the agent*
audience: builders
url: https://storybook.js.org/docs/ai/best-practices
snippet_language: ts
snippet_source_url: https://storybook.js.org/docs/ai/best-practices.md
description:
OFFICIAL. Storybook reframes documentation hygiene as context engineering. Stories should demonstrate one concept each; the docs mark a combined ‘SizesAndVariants’ story as ‘❌ Bad - demonstrates too many concepts at once, making it less clear and less useful as a reference for agents’. Component-level JSDoc with an `@summary` tag feeds the manifest description the agent sees, and the recommended pattern includes redirecting the agent to a sibling component for the wrong use case.

snippet_content:
/**
 * Button is used for user interactions that do not navigate to another route.
 * For navigation, use [Link](?path=/docs/link--default) instead.
 *
 * @summary for user interactions that do not navigate to another route
 */
export const Button = // ...

// ✅ Good to demonstrate a specific use case
export const Primary: Story = {
  args: { primary: true },
};

// ❌ Bad - demonstrates too many concepts at once, making
// it less clear and less useful as a reference for agents
export const SizesAndVariants: Story = {
  render: () => (
    <>
      Small Button
      Medium Button
      Large Button
      Outline Button
      Text Button
    </>
  ),
};


platform_id: storybook
title: llms.txt, llms-full.txt and .md docs endpoints with renderer/language filters
audience: both
url: https://storybook.js.org/llms.txt
snippet_language: markdown
snippet_source_url: https://storybook.js.org/llms.txt
description:
OFFICIAL. Storybook’s own docs site is a model for AI-consumable design-system documentation, and worth copying: an index at /llms.txt, a full dump at /llms-full.txt, and `.md` appended to any docs URL for clean markdown. Query params let an agent request exactly the dialect it needs: `?renderer=vue&language=ts`, `?codeOnly=true` to strip prose, and `?version=9` for older majors. Verified live: /llms.txt returns 200 (8.7 KB).

snippet_content:
# Storybook
> Storybook is a frontend workshop for building UI components and pages in isolation.
Current version: Version 10.5 (10.5)

## Documentation
- [Storybook Docs](https://storybook.js.org/docs): Main documentation
- [Full Documentation (Markdown)](https://storybook.js.org/llms-full.txt): Complete documentation in plain text for LLM consumption

## Markdown Access
Append `.md` to any docs URL to get clean markdown with code examples:
- `https://storybook.js.org/docs/writing-stories/decorators.md`

### Query Parameters
All markdown endpoints (`.md` URLs and `llms-full.txt`) support these query parameters:
- `renderer` - Framework filter for code snippets (default: `react`). Options: `react`, `vue`, `angular`, `svelte`, `web-components`, `solid`, `preact`, `html`, `ember`, `qwik`
- `language` - Language filter for code snippets (default: `ts`). Options: `ts`, `js`
- `codeOnly` - When `true`, returns only the code snippets without prose

Examples:
- `GET /docs/writing-stories/decorators.md?renderer=vue&language=ts`
- `GET /llms-full.txt?renderer=angular&language=js`


platform_id: supernova
title: Supernova Relay — official remote MCP server (per design system)
audience: consumers
url: https://learn.supernova.io/latest/design-systems/features/mcp-for-design-system-LIHAMhjr-LIHAMhjr
snippet_language: json
snippet_source_url: https://learn.supernova.io/latest/design-systems/features/mcp-for-design-system-LIHAMhjr-LIHAMhjr
description:
Official, OAuth-authenticated remote MCP server scoped to a design system ID, optionally to a dataset via ?datasetId=. Documentation is converted to clean Markdown and token references are fully resolved across nested aliases before being handed to the model. Read-only by design. Supports Claude Desktop, Cursor, VS Code.

snippet_content:
{
  "mcpServers": {
    "supernova": {
      "url": "https://mcp.supernova.io/mcp/ds/{ID}",
      "type": "http"
    }
  }
}


platform_id: supernova
title: 14 MCP tools: tokens, components, code components, Figma, Storybook, docs
audience: consumers
url: https://learn.supernova.io/latest/design-systems/features/mcp-for-design-system-LIHAMhjr-LIHAMhjr
description:
Verbatim tool inventory: get_asset_detail, get_asset_list, get_code_component_detail, get_code_component_list, get_design_system_component_detail, get_design_system_component_list, get_documentation_page_content, get_documentation_page_list, get_figma_component_detail, get_figma_component_list, get_me, get_storybook_story_detail, get_token_list. Notable descriptions: get_token_list “Pulls the full list of design tokens, including values, references, and groupings (e.g., colors, spacing)”; get_documentation_page_content “Grabs the content of a specific documentation page, formatted nicely (e.g., as markdown)”; get_figma_component_detail “Retrieves full details on a Figma component, including its structure, variants, and export options.” The get_code_component_* pair plus get_figma_component_* is Supernova’s de-facto Code-Connect equivalent: design-side and code-side component records live in the same MCP surface.


platform_id: supernova
title: AI Context Management — per-team, context-scoped MCP endpoints (shipped 22 Jun 2026)
audience: both
url: https://www.supernova.io/blog/we-just-shipped-ai-context-management
snippet_language: text
snippet_source_url: https://www.supernova.io/blog/we-just-shipped-ai-context-management
description:
The strongest coercion mechanism in Supernova: rather than one firehose MCP, the DS team curates a context (tokens, component APIs, patterns, usage data, rules, docs) per team/workflow/agent type and publishes it as its own MCP endpoint, reducing token usage and narrowing what the agent can even see. Explicitly framed as eliminating “hallucinated component names or incorrect prop signatures”. Includes a feedback loop: engineers flag manually, agent interactions are captured automatically, and Supernova returns “an actionable suggestion and a clear path to fix it”.

snippet_content:
AI context management lets you define exactly what each team's agents need to know (design tokens, component APIs, component patterns, usage data, rules, and docs) and publish it as a focused, context-scoped MCP endpoint. Every coding or design tool your team uses can be plugged in directly.

[...]

Publish as a context-scoped MCP endpoint
Each context publishes as its own MCP endpoint. Cursor, Copilot, Claude Code, Codex, or any MCP-compatible tool can plug in directly. No custom integrations, no manual syncing.

Give agents access to real component data
Agents get access to real component APIs: props, import paths, valid compositions, and usage patterns. Engineers get accurate answers without leaving their flow. No more hallucinated component names or incorrect prop signatures.

Manage and distribute skills
Beyond raw data, you can build, curate, and refine the capabilities your agents bring to every interaction: knowledge files, rules, and custom skills. Ship them through predefined or custom exporters when ready.

Update once, and every agent gets it instantly
When your design system changes, your context updates automatically. Every connected agent is working from current information without anyone having to manually push updates.


platform_id: supernova
title: Skills, rules and knowledge files shipped via exporters
audience: builders
url: https://www.supernova.io/blog/we-just-shipped-ai-context-management
description:
Beyond raw data, Supernova lets DS teams author “knowledge files, rules, and custom skills” and “Ship them through predefined or custom exporters when ready”, so the platform becomes the distribution channel for agent rule files (Cursor rules / skills) into consumer repos, alongside token/code exporters for iOS, Android, React Web, React Native, Flutter.


platform_id: supernova
title: Prototyping contexts — locked design system settings for AI generation
audience: builders
url: https://learn.supernova.io/latest/portal/create/prototyping-contexts-jppeqv9d
description:
Reusable configuration templates for Portal prototypes that pin the design system + dataset, component library (standard or custom enterprise), theme and icon pack, plus “Custom knowledge” providing “additional context, guidelines, or data for Supernova AI to consider” (what you’re building, who it’s for, core problems, platform, constraints, brand voice, API schemas). Once saved, the DS/component-library/icon-pack settings are locked and only the theme is editable, a hard constraint on what an AI prototype can reach for. Versioning caveat: new context versions apply only to newly created prototypes.


platform_id: supernova
title: Marketing-side llms.txt + /for-ai index
audience: consumers
url: https://www.supernova.io/llms.txt
snippet_language: markdown
snippet_source_url: https://www.supernova.io/llms.txt
description:
Supernova publishes a curated llms.txt at the site root as a “machine-readable index” of key resources plus a human-readable /for-ai page. This is corporate-site context, not per-customer design-system context; do not confuse it with zeroheight’s per-styleguide Markdown export.

snippet_content:
# Supernova.io

> Supernova.io is the agentic design system platform that turns your tokens, components, documentation, and code patterns into connected intelligence — so your team and their AI agents build from the same source of truth.

Supernova is a design system and knowledge management platform for product teams: design system management, documentation, code automation, and design & engineering context ready for AI agents — connected to your tokens, components, and brand.

## Core

- [Homepage](https://www.supernova.io): Overview of Supernova — the design system and knowledge management platform that keeps product teams and their AI agents working from a single source of truth.

[...]

- [For AI agents](https://www.supernova.io/for-ai): Human-readable overview of key Supernova pages for LLMs and AI crawlers.


platform_id: supernova
title: Read-only boundary + OAuth/SSO auto-provisioning caveat
audience: both
url: https://learn.supernova.io/latest/releases/september-2025/introducing-supernova-relay-lWfNcpwJ
description:
Relay is discovery/retrieval only: it “can’t make changes to data inside Supernova”. Auth is an “authenticated OAuth flow, so only folks authorised under your design system can get in”, with access revoked immediately on user removal. Governance caveat worth flagging to security teams: for SSO teams, anyone who connects through MCP OAuth is automatically added to the workspace if they were not already a member.


platform_id: knapsack
title: Knapsack MCP — per-workspace endpoint, bring-your-own-model
audience: consumers
url: https://docs.knapsack.cloud/intelligent-tools
snippet_language: markdown
snippet_source_url: https://docs.knapsack.cloud/intelligent-tools.md
description:
A secure MCP server endpoint per workspace at https://mcp.knapsack.cloud/mcp/<workspace-id>, giving MCP-compatible clients read access to workspace design system content and metadata (tokens, components, docs). Knapsack explicitly frames this as “bring-your-own-model”, with no lock-in to a single LLM provider. Workspace ID is the path segment between /site/ and /latest in your Knapsack site URL. Note the docs also flag it for enterprise MCP allowlists/registries.

snippet_content:
**Knapsack MCP exposes a secure MCP server endpoint per workspace.** The endpoint conforms to the Model Context Protocol specification, enabling compliant clients (such as Claude Desktop) to register a Knapsack workspace as a source. Each MCP server instance is identified by a workspace-specific endpoint, typically:

`https://mcp.knapsack.cloud/mcp/<workspace-id>`

The client authenticates and maintains a session via this endpoint to retrieve context-aware resources.


platform_id: knapsack
title: Claude Desktop config via mcp-remote (Node 20+ required)
audience: consumers
url: https://docs.knapsack.cloud/intelligent-tools/configure-with-claude
snippet_language: json
snippet_source_url: https://docs.knapsack.cloud/intelligent-tools/configure-with-claude.md
description:
Official setup snippet. Knapsack MCP is a remote HTTP server proxied through the mcp-remote npx shim; auth happens in the browser on first connect. Docs call out Node 20 as a hard prerequisite and list “Early Access not enabled” as the top connection-failure cause.

snippet_content:
{
  "mcpServers": {
    "knapsack-mcp-toby": {
      "command": "npx",
      "args": [
        "-y",
        "mcp-remote",
        "https://mcp.knapsack.cloud/mcp/toby"
      ]
    }
  }
}


platform_id: knapsack
title: Data Sources — Storybook + workspace + Markdown as a grounded context layer
audience: both
url: https://docs.knapsack.cloud/intelligent-tools
snippet_language: markdown
snippet_source_url: https://docs.knapsack.cloud/intelligent-tools.md
description:
Sales-gated feature that turns MCP from a docs lookup into a grounded, multi-source context layer. Three source types at launch: Storybook (live component implementation), the Knapsack workspace (tokens, documentation, patterns), and Markdown files (any additional guidelines). Framed as enabling drift detection: “AI that can surface inconsistencies, flag drift, and generate outputs that stay true to your design standards at every layer.” The Storybook source is the closest thing Knapsack has to forcing the agent onto real component source rather than trained-in approximations.

snippet_content:
#### Unlock the power of Data Sources

For teams who want more, Intelligent Tools allows you to create a contextual data layer to empower MCP workflows. In this release, you can connect three source types: **Storybook**, for live component implementation; your **Knapsack workspace**, for tokens, documentation, and patterns; and **Markdown files**, for any additional guidelines or reference content. Together, these give your AI a complete, grounded view of your design system.

Contact your sales partner to discuss unlocking data sources.

### Data Sources Available

Data Sources takes your MCP connection further. By linking external content — like your product codebase, brand guidelines, or Figma libraries — you give Knapsack a richer view of how your design system is actually built and used. The result: AI that can surface inconsistencies, flag drift, and generate outputs that stay true to your design standards at every layer.


platform_id: knapsack
title: Docs-site llms.txt with an explicit “Instructions for AI Agents” preamble
audience: consumers
url: https://docs.knapsack.cloud/llms.txt
snippet_language: markdown
snippet_source_url: https://docs.knapsack.cloud/llms.txt
description:
Knapsack’s product docs publish an llms.txt that opens by telling agents exactly how to retrieve content in three modalities: .md suffix per page, section-scoped /llms.txt, and the docs MCP server. Every .md page also repeats the same three-line preamble at the top, so any agent that fetches a single page is immediately told about the other two retrieval paths. This is a clean, copyable pattern for a DS docs site.

snippet_content:
# Knapsack Documentation

> Documentation for Knapsack, the design system platform that unifies design tokens, components, and docs so teams design, build, and ship consistent products.

## Instructions for AI Agents

- For clean Markdown of any page, append `.md` to the page URL
- For section-specific indexes, append `/llms.txt` to any section URL
- For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://docs.knapsack.cloud/_mcp/server


platform_id: knapsack
title: Docs MCP server + one-click client install (separate from workspace MCP)
audience: both
url: https://docs.knapsack.cloud/intelligent-tools/mcp-server
snippet_language: markdown
snippet_source_url: https://docs.knapsack.cloud/intelligent-tools/mcp-server.md
description:
A second, distinct MCP server that exposes Knapsack’s own documentation so agents stop “guessing from stale training data”. Page-action buttons at the top of every docs page copy a `claude mcp add` command or deep-link into Cursor with the URL pre-filled. Knapsack explicitly disambiguates it from the workspace MCP.

snippet_content:
This documentation site runs its own Model Context Protocol (MCP) server, so an AI coding assistant can query these docs directly instead of guessing from stale training data. Ask it how to configure SSO, wire up a Git provider, or troubleshoot a deploy preview, and it can pull the answer straight from these pages.

The server is available at:

`https://docs.knapsack.cloud/_mcp/server`

This MCP server exposes the content of *this documentation site*. It's a different thing from the [Knapsack MCP](/intelligent-tools), which connects AI tools to your own workspace's design tokens, components, and docs.

[...]

For a CLI client like Claude Code:

```bash title="Terminal"
claude mcp add --transport http knapsack-docs https://docs.knapsack.cloud/_mcp/server
```


platform_id: knapsack
title: Three-tier retrieval guidance: llms.txt vs .md vs MCP
audience: builders
url: https://docs.knapsack.cloud/intelligent-tools/llms-txt
snippet_language: markdown
snippet_source_url: https://docs.knapsack.cloud/intelligent-tools/llms-txt.md
description:
Knapsack documents when to use each retrieval channel, a rare piece of explicit guidance on machine-readable docs architecture. Also documents provenance: the one-line description in llms.txt comes from each page’s frontmatter `description`, falling back to `subtitle`. Useful precedent for DS teams generating their own llms.txt.

snippet_content:
## When to use which

* Pointing an agent at the whole site, or one section of it: `llms.txt`.
* Pointing it at a single page, or copying a page for your own agent: the `.md` URL or the page-action buttons.
* Interactive, conversational access from an AI coding tool: the [MCP server](/intelligent-tools/mcp-server).


platform_id: knapsack
title: Framing: AI output vs actual standards
audience: both
url: https://docs.knapsack.cloud/intelligent-tools
snippet_language: markdown
snippet_source_url: https://docs.knapsack.cloud/intelligent-tools.md
description:
Knapsack’s stated thesis for Intelligent Tools, useful as a quotable position statement on why MCP beats prompt-pasting.

snippet_content:
AI tools are only as good as the context they're given. Knapsack's Intelligent Tools connect your AI assistant directly to your workspace — giving it live access to your design tokens, components, and documentation, so every output reflects your actual standards, not a generic approximation.


platform_id: zeroheight
title: Remote MCP at a single shared endpoint, two access modes
audience: consumers
url: https://help.zeroheight.com/hc/en-us/articles/43780251357979-Using-the-remote-zeroheight-MCP-server
snippet_language: text
snippet_source_url: https://help.zeroheight.com/hc/en-us/articles/43780251357979-Using-the-remote-zeroheight-MCP-server
description:
One endpoint for everyone: https://mcp.zeroheight.com/mcp. “Access via login” is on by default at org and styleguide level (off by default for private/password-protected styleguides) and also governs partner connectors like Figma Make. “Access via link” gives each viewer a unique URL scoped to one styleguide, for consumers who don’t have SSO. One-click and copy-paste install commands for Cursor, VS Code, Claude Code and Codex live in styleguide settings; ChatGPT/Codex, Claude and Figma connect via partner connectors.

snippet_content:
The connection details for MCP via login are identical for all your viewers: https://mcp.zeroheight.com/mcp

But to make sharing access easier, you can add the details to your styleguide using the Remote MCP details block.
You can add a Remote MCP details block to a page in your styleguide so that viewers are able to see instructions for connecting to the MCP from the styleguide.

Open the slash inserter on any page, select Remote MCP details and select MCP via login

Optionally configure which client tabs are visible using the block's settings

Optionally turn off Display help message if you're providing your own setup guidance


platform_id: zeroheight
audience: consumers
url: https://help.zeroheight.com/hc/en-us/articles/48004395674011-zeroheight-MCP-overview
snippet_language: text
snippet_source_url: https://help.zeroheight.com/hc/en-us/articles/48004395674011-zeroheight-MCP-overview
title:
Explicit prompt-level coercion: “Follow the design system guidelines available via the zeroheight MCP”

description:
zeroheight’s own recommended prompt boilerplate for keeping an agent on-system, straight from the MCP overview. Also documents the three target workflows (traditional handoff, AI-accelerated prototyping in Figma Make, full AI-driven development) with the compliance framing: “The coding agent reads your design system documentation as it generates code, so compliance is baked in rather than checked afterwards.”

snippet_content:
The zeroheight MCP server gives AI tools like Claude, Cursor, and GitHub Copilot direct read access to your design system documentation. Instead of copying and pasting guidelines into every prompt, your AI tool can look them up itself — so the answers it gives, and the code it writes, stay aligned with your design system.

[...]

To keep your AI tool grounded in your design system as it works, add something like this to your prompts: "Follow the design system guidelines available via the zeroheight MCP".


platform_id: zeroheight
title: Five MCP tools with a documented call sequence (and an AI-features gate)
audience: consumers
url: https://help.zeroheight.com/hc/en-us/articles/51478956166939-zeroheight-MCP-tools-reference
snippet_language: text
snippet_source_url: https://help.zeroheight.com/hc/en-us/articles/51478956166939-zeroheight-MCP-tools-reference
description:
list-styleguides → search-pages → get-page → get-page-asset, with list-pages as fallback navigation and list-releases for versioned content. The important nuance: search-pages (semantic chunk retrieval) is ONLY available to teams who have enabled AI features; without it agents degrade to title-based navigation via list-pages. get-page returns Markdown and is described as “the source of truth for what the agent uses when applying your design system”. get-page-asset handles images reliably; PDFs/Word/Excel/ZIP are inconsistent across agents and fall back to returning a source URL.

snippet_content:
The zeroheight MCP exposes five tools. AI agents call these automatically as they work through your prompt — you don't invoke them directly.

list-styleguides
Discovers all zeroheight styleguides accessible via the connected MCP. Returns a list of styleguide IDs and names. This is typically the first call an agent makes.
Not called when using MCP via Link — the connection is already scoped to a single styleguide.

search-pages
Searches the styleguide for pages matching a keyword or topic and returns a list of relevant chunks from the styleguide. The agent will likely use this tool first and may fetch further content if the chunks are insufficient.
Note: only available for teams who have enabled AI features in zeroheight.

list-pages
Returns the full navigation tree for a styleguide — sections, categories, pages, and tabs.

get-page
Fetches the content of a specific page as Markdown, including usage notes, guidance, and any embedded assets. This is the source of truth for what the agent uses when applying your design system.

get-page-asset
Fetches images or file attachments referenced in a get-page response. Accepts multiple URIs in a single call.


platform_id: zeroheight
title: “Write content as rules, not descriptions” — optimising docs for retrieval
audience: builders
snippet_language: text
description:
The single best vendor guidance on authoring DS docs for agent consumption. Key mechanism disclosed: the agent selects pages by title and navigation structure, not by reading everything, so information architecture is the retrieval index. Five rules: descriptive page titles, one topic per page, flat navigation, meaningful section/category names, and rules-not-prose. Also candid about model variance: smaller/older models struggle; ChatGPT and Codex “occasionally need explicit instruction to use the MCP”.

url:
https://help.zeroheight.com/hc/en-us/articles/50270875184795-Optimising-your-styleguide-for-consumption-via-MCP

snippet_content:
So the AI selects pages by their titles and structure, not by reading everything. It doesn't read the whole styleguide to decide what's relevant — it makes a judgement call from the navigation layer. This means how you structure your styleguide directly affects what the AI finds and uses.

Structuring your styleguide for AI
Use clear, descriptive page titles — The AI navigates primarily by title.
One topic per page — The AI picks pages, not sections within pages. Avoid combining unrelated content on a single page.
Keep navigation flat where possible — Deeply nested structures are harder for an AI to traverse. Flatter hierarchies improve both discoverability and retrieval reliability.
Name sections and categories meaningfully — Section and category names are surfaced during MCP navigation. "Foundations > Colour" gives the AI a solid signal.
Write content as rules, not descriptions — Succinct, unambiguous language works better than detailed prose. State what to do, not just what exists.

snippet_source_url:
https://help.zeroheight.com/hc/en-us/articles/50270875184795-Optimising-your-styleguide-for-consumption-via-MCP


platform_id: zeroheight
title: Local MCP server (@zeroheight/mcp-server) with sequencing coercion in tool descriptions
audience: consumers
url: https://www.npmjs.com/package/@zeroheight/mcp-server
snippet_language: markdown
snippet_source_url: https://registry.npmjs.org/@zeroheight%2Fmcp-server
description:
npm package for orgs that block remote MCP, need token auth, or run in CI/CD. Note the imperative sequencing baked into the tool descriptions themselves (“Call this tool first”, “Call this tool immediately after list-styleguides”), which pushes the model into a discovery-before-generation loop rather than letting it improvise from training data. Also note the disambiguation prompt: “If multiple systems are available, confirm with the user which should be used.”

snippet_content:
{
  "mcpServers": {
    "zeroheight-mcp": {
      "command": "npx",
      "args": ["-y", "@zeroheight/mcp-server@latest"],
      "env": {
        "ZEROHEIGHT_ACCESS_TOKEN": "zhat_abc123",
        "ZEROHEIGHT_CLIENT_ID": "zhci_abc123"
      }
    }
  }
}

### Available Tools

**list-styleguides**
Discover available design systems that provide documented guidance for components, patterns, and styles. Call this tool first. If multiple systems are available, confirm with the user which should be used.
_Helpful to reference before generating UI so decisions can reflect established design approaches._

**list-pages**
View the navigation hierarchy of a design system — including categories, pages, and tabs — to better understand how guidance is organized. Call this tool immediately after list-styleguides with the desired styleguide ID.
_Helpful when determining where to look for component or pattern documentation before generating UI._

**get-page**
Fetch guidance from a specific design system page, including usage notes, recommendations, and supporting context.
_Particularly helpful ahead of UI generation to increase the likelihood that outputs reflect the intent of the design system._


platform_id: zeroheight
title: Markdown Export — one-click AI-ready page context with a pre-filled constraining prompt
audience: consumers
url: https://help.zeroheight.com/hc/en-us/articles/47142563041819-Markdown-Export
snippet_language: text
snippet_source_url: https://help.zeroheight.com/hc/en-us/articles/47142563041819-Markdown-Export
description:
Fallback for teams that can’t enable MCP: viewers get “Copy page MD link”, “Copy page MD”, and “Open page MD link in…” which launches a chosen AI tool with a pre-filled prompt. That prompt is itself a coercion device: it durably scopes the whole conversation to the design system page. Admins choose which AI tools appear. SSO/password-protected pages only get “Copy page MD” because LLMs can’t fetch them.

snippet_content:
The Markdown Export feature allows teams to turn any styleguide page into AI-ready context in one click. Styleguide viewers (and editors) can access a clean Markdown version of the page and send it directly to AI tools.

[...]

Open page MD link in...: opens a new tab in the browser with the AI tool with a pre-filled prompt referring to the page that reads:

For the duration of this conversation, refer to my design system page: [Markdown link]

This supports workflows such as:
- Asking an AI to summarise guidelines before applying them
- Validating UI decisions against documented standards
- Providing structured context to a coding agent
- Generating implementation examples aligned with system rules

Note: if styleguide or page is SSO or Password protected, then only the Copy page MD will be available since LLMs cannot access SSO or Password protected pages.


platform_id: zeroheight
title: Docs Agent (closed beta) — Figma-change-driven documentation proposals
audience: builders
url: https://help.zeroheight.com/hc/en-us/articles/51269532940059-zeroheight-Docs-Agent-Closed-Beta
snippet_language: text
snippet_source_url: https://help.zeroheight.com/hc/en-us/articles/51269532940059-zeroheight-Docs-Agent-Closed-Beta
description:
Builder-side agent that watches Figma via OAuth for component/token/rename changes, reads the existing documentation, and proposes doc updates in a dedicated Docs Agent area. Deliberately suggestion-only during beta: “approving a proposal is to signal intent rather than change any documentation directly.” Up to 30 minutes latency, no notifications. Enterprise-only, requires “Allow use of AI features in styleguides”, OpenAI is the sub-processor, and neither zeroheight nor OpenAI use customer data for training.

snippet_content:
The Docs Agent watches for changes in Figma and proposes changes to your design system in zeroheight. This works by looking at changes to Figma like updates to components, the agent then identifies the change, reads your documentation and determines if anything needs to be changed so you can keep your docs up to date without manual work.

[...]

Are there any prerequisites for the Beta?
- You must be on an Enterprise plan
- Your organization must have "Allow use of AI features in styleguides" enabled
- You must have at least one styleguide setup that corresponds to one or more Figma files

[...]

Will you use our data for training purposes?
Neither zeroheight nor OpenAI will use customer data for model training purposes.


platform_id: zeroheight
audience: builders
url: https://help.zeroheight.com/hc/en-us/articles/35887017130651-AI-powered-features-in-zeroheight
title:
Authoring assistants: Build/Write/Improve with AI, tone-of-voice instructions, AI release notes, Assistants for editors/viewers/Figma/Slack/Teams

description:
Builder-side authoring stack documented as distinct help-centre features: “Build with AI” (blank page → structured first draft mirroring existing docs’ layout and tone), “Write with AI” (first-pass content), “Improve with AI” (tighten wording, formatting, standardise tone), “AI tone of voice instructions” (org-level style constraint applied to generated copy), “AI-generated release notes”, and the zeroheight Assistant in four surfaces: editors (flags gaps, recommendations in-editor), viewers, Figma plugin (canvas-aware component queries), and Slack/Teams. Note the important governance caveat from the MCP FAQ: styleguide-level security (password/SSO) has NO impact on MCP reachability; only page-level privacy does.


