{ "id": "primer-github", "name": "Primer", "org": "GitHub", "category": "design-system", "repo_url": "https://github.com/primer/react", "docs_url": "https://primer.style", "license": "MIT", "summary": "Primer is GitHub’s design system, and it is one of the most thoroughly AI-instrumented systems in the study, in both directions. For consumers it ships an official, versioned MCP server (`@primer/mcp`, 20 tools, v0.5.0) plus a sibling `@primer/brand-mcp`, whose tool descriptions are written as explicit behavioral coercion (“CRITICAL: CALL THIS FIRST”, “REQUIRED FINAL STEP... You cannot complete a task involving CSS without a successful run of this tool”). For builders, primer/react carries a full GitHub-Copilot-native agent stack in `.github/`: `copilot-instructions.md`, five path-scoped `*.instructions.md` files, seven `skills/*/SKILL.md`, two custom `*.agent.md` subagents, and gh-aw agentic workflows for issue triage. There is NO llms.txt, no AGENTS.md and no CLAUDE.md in primer/react; the investment is squarely in MCP plus the GitHub/Copilot instruction-file format.", "ai_maturity": "ai-native", "maintenance": { "actively_maintained": true, "last_release": "@primer/react v38.34.0 — 2026-07-24; @primer/mcp v0.5.0 — 2026-07-20", "activity_note": "3,879 stars, last push 2026-07-27 (same day as research). Weekly-cadence releases via changesets; monorepo with 11 packages including a dedicated `packages/mcp` workspace." }, "affordances": [ { "type": "mcp-server", "name": "@primer/mcp", "official": true, "audience": "consumers", "description": "Official stdio MCP server maintained in-repo at `packages/mcp`. 20 tools spanning project init, component listing/docs/examples/usage/accessibility guidelines, scenario+UI patterns, design-token search and bundles, Octicons lookup, coding guidelines, a `lint_css` Stylelint validator, and an experimental `review_alt_text` accessibility reviewer. Distributed as `npx @primer/mcp@latest`; README carries one-click ‘Install in VS Code’ / ‘VS Code Insiders’ badge buttons.", "code_url": "https://github.com/primer/react/tree/main/packages/mcp", "docs_url": "https://primer.style/product/getting-started/foundations/mcp", "notes": "v0.5.0 published 2026-07-20; also ships `next` and `canary` dist-tags, so the MCP server rides the same release train as the component library.", "snippet": { "language": "typescript", "source_url": "https://raw.githubusercontent.com/primer/react/HEAD/packages/mcp/src/server.ts", "content": "server.registerTool(\n 'lint_css',\n {\n description:\n 'REQUIRED FINAL STEP. Use this to validate your CSS. You cannot complete a task involving CSS without a successful run of this tool.',\n inputSchema: {css: z.string()},\n annotations: {readOnlyHint: true},\n },\n async ({css}) => {\n try {\n // --fix flag tells Stylelint to repair what it can\n const {stdout} = await runStylelint(css)\n\n return {\n content: [\n {\n type: 'text',\n text: stdout || '✅ Stylelint passed (or was successfully autofixed).',\n },\n ],\n }\n } catch (error: unknown) {\n // If Stylelint still has errors it CANNOT fix, it will land here" } }, { "type": "ai-docs-page", "name": "MCP server (primer.style docs)", "official": true, "audience": "consumers", "description": "First-class docs page under Getting started → Foundations, described in the site nav as ‘Help AI agents use Primer correctly with the Primer Model Context Protocol server.’ Gives VS Code install steps and a generic `.mcp.json` / `.github/mcp.json` block for Copilot CLI, Cursor and other stdio clients, then enumerates all 20 tools.", "docs_url": "https://primer.style/product/getting-started/foundations/mcp", "notes": "The only AI-specific page on primer.style. The frequently cited claims https://primer.style/mcp and https://primer.style/guides/ai are FALSE POSITIVES: the docs site is an SPA that returns HTTP 200 with the homepage shell for any unknown path." }, { "type": "mcp-server", "name": "@primer/brand-mcp", "official": true, "audience": "consumers", "description": "Second official MCP server, for Primer Brand (`@primer/react-brand`, marketing/landing pages), maintained in primer/brand at `packages/mcp`. Version-aware: it reads docs and metadata from the consumer’s *installed* `@primer/react-brand` dependency rather than a hosted snapshot. Eight tools including `primer_brand_review`, a self-check tool that scans generated JSX/CSS for unknown components, invalid props and hardcoded values.", "code_url": "https://github.com/primer/brand/tree/main/packages/mcp", "notes": "v0.71.0, published 2026-07-13, versioned in lockstep with @primer/react-brand.", "snippet": { "language": "markdown", "source_url": "https://raw.githubusercontent.com/primer/brand/HEAD/packages/mcp/README.md", "content": "| Tool | What it does |\n| -------------------------- | ----------------------------------------------------------------------------------------------------- |\n| `primer_brand_setup` | Configures Primer Brand first-time. Includes `ThemeProvider`, Mona Sans and RSC-directive configuration among other things |\n| `primer_brand_page_design` | Page-design conventions (header/footer, hero media, gridline aesthetic, card grids, labels) and the current-brand reference templates to start from. |\n| `primer_brand_component` | Get a component API information like props, allowed values and named sub-components. |\n| `primer_brand_tokens` | Resolve design tokens by intent (color, space, typography) to CSS variables and values. |\n| `primer_brand_review` | Check generated JSX and CSS against the design system for unknown components, invalid props, hardcoded values |" } }, { "type": "copilot-instructions", "name": "primer/react .github/copilot-instructions.md", "official": true, "audience": "builders", "description": "~200-line contributor-facing agent brief: repo map, exact build/test/lint commands with measured runtimes and ‘NEVER CANCEL’ timeout warnings, validation scenarios, component file-structure conventions, Storybook story naming rules, and a mandatory PR-creation procedure (fill the PR template, add a changeset, or apply the `skip changeset` label). Routes the agent to in-repo skills for changesets, slots, turborepo and Storybook.", "code_url": "https://github.com/primer/react/blob/main/.github/copilot-instructions.md", "snippet": { "language": "markdown", "source_url": "https://raw.githubusercontent.com/primer/react/HEAD/.github/copilot-instructions.md", "content": "# Primer React Copilot Instructions\n\n**ALWAYS reference these instructions first and fallback to search or bash commands only when you encounter unexpected information that does not match the info here.**\n\n## Pull Request Creation\n\nWhen creating a pull request, you MUST:\n\n1. Use the template in `.github/pull_request_template.md` to structure the PR description. Read the template file, fill in all sections appropriately, and include it in the PR body.\n2. Include a changeset file in the PR if the change affects the published package (bug fix, new feature, breaking change, etc.). Create a `.changeset/.md` file with the appropriate semver bump type. Reference the `changesets` skill (`.github/skills/changesets/SKILL.md`) for detailed guidance on file format, choosing the correct bump type, and when a changeset can be skipped.\n3. If no changeset is needed (docs-only, test-only, CI/infra changes), add the `skip changeset` label to the pull request to bypass the CI changeset check." } }, { "type": "claude-skill", "name": "primer/react .github/skills/ (7 skills)", "official": true, "audience": "builders", "description": "Seven SKILL.md-format skills with YAML `name`/`description` frontmatter, in the same progressive-disclosure format used by Claude Skills and Copilot skills: `changesets`, `deprecations`, `feature-flags`, `slots`, `storybook`, `style-guide`, `turborepo`. Several are routers into `contributor-docs/` (the style-guide skill exists to force the agent to read `contributor-docs/style.md` before authoring). The `storybook` skill is an operational runbook: check port 6006, start Storybook in the background, poll until ready, then call the local `primer-storybook` MCP.", "code_url": "https://github.com/primer/react/tree/main/.github/skills", "snippet": { "language": "markdown", "source_url": "https://raw.githubusercontent.com/primer/react/HEAD/.github/skills/storybook/SKILL.md", "content": "## Step 1 — Ensure Storybook Is Running\n\nStorybook must be running **before** any MCP tool calls. The MCP server is served by Storybook at `http://localhost:6006/mcp`.\n\n### Verify it is ready\n\nPoll until the server responds:\n\n```bash\nuntil curl -s -o /dev/null -w \"%{http_code}\" http://localhost:6006 | grep -q \"200\\|301\\|302\"; do sleep 1; done\n```\n\n### Available Tools\n\n| `mcp_primer-storyb_list-all-documentation` | Discover all available component and documentation IDs — call once per task |\n| `mcp_primer-storyb_get-documentation` | Retrieve full docs, props, and examples for a component by `id` |\n| `mcp_primer-storyb_get-storybook-story-instructions` | Get framework-specific imports and story patterns — always call before writing/editing stories |\n| `mcp_primer-storyb_preview-stories` | Get live preview URLs for stories — always include returned URLs in your response |" } }, { "type": "other", "name": "primer/react .github/agents/*.agent.md (custom subagents)", "official": true, "audience": "builders", "description": "Two persona-scoped custom agents in the GitHub Copilot `.agent.md` format with declared `tools:` and `skills:` allowlists: `modular-ds-implementer` (builds components against the ‘spectrum of abstraction’ model in contributor-docs/style.md) and `modular-ds-reviewer`. The implementer file is the densest concentration of prohibition language in the system: a long list of ‘Do not …’ rules covering slots, public hooks, `data-component`, and inventing visual styling without a design reference.", "code_url": "https://github.com/primer/react/tree/main/.github/agents", "snippet": { "language": "markdown", "source_url": "https://raw.githubusercontent.com/primer/react/HEAD/.github/agents/modular-ds-implementer.agent.md", "content": "---\nname: modular-ds-implementer\ndescription: Builds Primer React components using the modular design system patterns in the Primer style guide.\ntools:\n - read\n - search\n - edit\n - execute\nskills:\n - style-guide\n---\n\n- Search for existing Primer components, hooks, utilities, and accessibility\n primitives before adding new ones.\n- Do not add slots, `useSlots`, or `__SLOT__` markers by default. Prefer normal\n React composition for flexible presentational components. Only add slots when\n the requested API explicitly needs child extraction or a parent component must\n identify a specific child part. Do not reorder consumer-authored children in\n presentational components; preserve author order and document recommended\n structure instead.\n- Do not expose `data-component` as a customizable prop. Primer owns\n `data-component` values as component identifiers.\n- Avoid inventing visual styling without a concrete design reference, image, or\n specification. If styling is not specified, keep styles minimal and structural\n so the component API and accessibility model can be evaluated independently.\n- New components and new public exports require a `minor` changeset for the\n affected package." } }, { "type": "copilot-instructions", "name": "primer/react .github/instructions/*.instructions.md (5 files)", "official": true, "audience": "builders", "description": "Five path-scoped instruction files using the Copilot `applyTo:` glob frontmatter, so different rules load for different files: `general-coding` (applyTo `**`), `typescript-react`, `css`, `changesets`, and `component-review` (applyTo `packages/react/src/**/*`). `component-review.instructions.md` is a machine-readable, ADR-backed review rubric: each rule has a stable ID, a Check, a Prefer, and an **Authority** pointing at the specific ADR file it derives from.", "code_url": "https://github.com/primer/react/tree/main/.github/instructions", "snippet": { "language": "markdown", "source_url": "https://raw.githubusercontent.com/primer/react/HEAD/.github/instructions/component-review.instructions.md", "content": "---\napplyTo: 'packages/react/src/**/*'\n---\n\n# ADR-backed component review trial\n\nApply these rules only to behavior or contracts introduced or expanded by the\nchange. Report concrete impact, cite the rule ID, and do not report pre-existing\nmigration debt.\n\n## `component-review.children-as-api`\n\n- **Check:** Content uses React children when consumers own the rendered\n elements or need free-form composition.\n- **Prefer:** Use data props when the component must own, transform, order, or\n constrain the rendered elements. Do not support equivalent children and data\n APIs without a concrete need.\n- **Authority:** `contributor-docs/adrs/adr-004-children-as-api.md`\n\n## `component-review.internal-modules`\n\n- **Check:** New shared modules that are not public API live under\n `packages/react/src/internal` and are not exported from public entrypoints.\n- **Prefer:** Keep implementation details internal until a supported public API\n is intentionally designed.\n- **Authority:** `contributor-docs/adrs/adr-015-internal-modules.md`" } }, { "type": "agents-md", "name": "primer/primitives AGENTS.md", "official": true, "audience": "builders", "description": "The token repo (Style Dictionary based) uses the AGENTS.md convention rather than copilot-instructions. Short and imperative: a MANDATORY post-change command chain, a ‘do not edit’ marker on the generated DESIGN_TOKENS_SPEC.md, a REQUIRED pre-read for the W3C token format guide, and, unusually, explicit meta-instructions about how the agent should behave in Plan Mode. Has a dedicated `contributor-docs/agents/` directory.", "code_url": "https://github.com/primer/primitives/blob/main/AGENTS.md", "snippet": { "language": "markdown", "source_url": "https://raw.githubusercontent.com/primer/primitives/HEAD/AGENTS.md", "content": "# Primer Primitives\n\nDesign tokens for GitHub's Primer design system, built with Style Dictionary.\n\n## MANDATORY Workflow\n\n**After every change, run and fix any errors:**\n\n```bash\nnpm run lint && npm run format && npm run test && npm run build\n```\n\n## Key Files\n\n- `src/tokens/` - Token definitions (JSON5)\n- `DESIGN_TOKENS_SPEC.md` - Generated file, do not edit\n\n## Plan Mode\n\n- Make the plan extremely concise. Sacrifice grammar for the sake of concision.\n- At the end of each plan, give me a list of unresolved questions to answer, if any.\n\n## Detailed Guides\n\n- [W3C Design Token Format Guide](contributor-docs/agents/w3c-design-token-format-guide.md) - REQUIRED: Review before adding tokens\n- [Token Authoring](contributor-docs/agents/token-authoring.md) - Token format, LLM metadata\n- [Build System](contributor-docs/agents/build-system.md) - Build commands, outputs" } }, { "type": "other", "name": "gh-aw agentic workflows (issue triage + maintenance)", "official": true, "audience": "builders", "description": "primer/react runs GitHub Agentic Workflows (github/gh-aw v0.83.1): `.github/workflows/issue-triage.md` is a natural-language agent spec compiled by `gh aw compile` into `issue-triage.lock.yml`, with `.github/aw/actions-lock.json` pinning actions. The safety model is declarative: `permissions: read-all` plus a `safe-outputs:` allowlist capping the agent at 1 issue type, 5 labels, 1 comment, and one hand-off assignment to the Copilot coding agent. Sits alongside `accessibility-alt-text-bot.yml`, `lint-autofix.yml` and `copilot-setup-steps.yml`.", "code_url": "https://github.com/primer/react/blob/main/.github/workflows/issue-triage.md", "snippet": { "language": "yaml", "source_url": "https://raw.githubusercontent.com/primer/react/HEAD/.github/workflows/issue-triage.md", "content": "permissions: read-all\n\nnetwork: defaults\n\nsafe-outputs:\n set-issue-type:\n max: 1\n issue-intent: true\n add-labels:\n max: 5\n issue-intent: true\n add-comment:\n max: 1\n assign-to-agent:\n name: copilot\n allowed: [copilot]\n max: 1\n target: triggering\n issue-intent: true\n\ntools:\n github:\n toolsets: [issues, labels]\n\ntimeout-minutes: 15\n---\n\n# Issue triage\n\nBase every decision only on what the issue and its comments actually say. Do not invent\nmissing context or guess beyond the evidence. Keep the issue's existing labels; only add\nlabels. Never close the issue." } }, { "type": "figma-code-connect", "name": "Figma Code Connect (primer/react and primer/brand)", "official": true, "audience": "both", "description": "52 `*.figma.tsx` Code Connect files in primer/react plus `packages/react/figma.config.json`, published by a dedicated `.github/workflows/figma_connect_publish.yml` CI job. primer/brand mirrors the setup. This is what makes Figma Dev Mode MCP return real Primer component code (correct import path and props) instead of generic markup when an agent reads a Primer design.", "code_url": "https://github.com/primer/react/blob/main/packages/react/figma.config.json", "notes": "Confirmed via GitHub code search: 52 files matching extension:figma.tsx in primer/react." } ], "techniques": [ { "name": "Hard tool-gated validation loop (“REQUIRED FINAL STEP”)", "category": "validation-loop", "description": "The Primer MCP server ships Stylelint as an MCP tool and writes the tool description as a completion precondition, not a suggestion: the agent is told it literally cannot finish a CSS task without a passing `lint_css` run. The server runs Stylelint with `--fix`, returning autofixed output on success and an explicit ‘❌ Errors without autofix remaining’ block on failure, giving the model a repair signal to loop on. `find_tokens` reinforces it from the other end: ‘After identifying tokens and writing CSS, you MUST validate the result using lint_css.’", "snippet": { "language": "typescript", "source_url": "https://raw.githubusercontent.com/primer/react/HEAD/packages/mcp/src/server.ts", "content": " description:\n 'REQUIRED FINAL STEP. Use this to validate your CSS. You cannot complete a task involving CSS without a successful run of this tool.'," } }, { "name": "Forced tool ordering (“CRITICAL: CALL THIS FIRST”)", "category": "tool-gating", "description": "Rather than trusting the model to discover token groups, `get_design_token_specs` asserts primacy in its own description and frames every other search as unreliable without it: ‘You cannot search accurately without this map.’ A cheap way to bootstrap the correct token vocabulary into context before the agent starts guessing names.", "snippet": { "language": "typescript", "source_url": "https://raw.githubusercontent.com/primer/react/HEAD/packages/mcp/src/server.ts", "content": " 'get_design_token_specs',\n {\n description:\n 'CRITICAL: CALL THIS FIRST. Provides the logic matrix and the list of valid group names. You cannot search accurately without this map.'," } }, { "name": "Semantic color remapping to defeat literal color prompts", "category": "curated-context", "description": "The sharpest anti-drift trick in the Primer MCP. Users say ‘make it pink’; models then grep tokens for ‘pink’ and either fail or pick a raw scale value. The `find_tokens` description intercepts that failure mode with an explicit translation table from perceptual color words to Primer’s semantic intent namespaces, plus a reminder to check emphasis/muted variants. It also discourages the token-by-token search pattern that blows up context.", "snippet": { "language": "typescript", "source_url": "https://raw.githubusercontent.com/primer/react/HEAD/packages/mcp/src/server.ts", "content": " description:\n 'Search for specific tokens. Tip: If you only provide a \\'group\\' and leave \\'query\\' empty, it returns all tokens in that category. Avoid property-by-property searching. COLOR RESOLUTION: If a user asks for \"pink\" or \"blue\", do not search for the color name. Use the semantic intent: blue->accent, red->danger, green->success. Always check both \"emphasis\" and \"muted\" variants for background colors. After identifying tokens and writing CSS, you MUST validate the result using lint_css.'," } }, { "name": "Named-API prohibitions served over MCP", "category": "prohibition", "description": "`primer_coding_guidelines` is a tool that exists solely to inject house rules into the consumer’s agent session. It combines soft ‘Prefer…’ guidance (reuse a Primer component over writing a new one; use existing props over adding styles; use Primer icons over inventing icons) with a hard, named-API blocklist encoding Primer’s live internal migration away from `sx` and `Box`, the exact two APIs a model trained on older Primer code reaches for by default.", "snippet": { "language": "typescript", "source_url": "https://raw.githubusercontent.com/primer/react/HEAD/packages/mcp/src/server.ts", "content": "## Authoring & Using Components\n\n- Prefer re-using a component from Primer when possible over writing a new component.\n- Prefer using existing props for a component for styling instead of adding styling to a component\n- Prefer using icons from Primer instead of creating new icons. Use the `list_icons` tool to find the icon you need.\n- Follow patterns from Primer when creating new components. Use the `list_patterns` tool to find the pattern you need, if one exists\n- When using a component from Primer, make sure to follow the component's usage and accessibility guidelines\n\n## Coding guidelines\n\nThe following list of coding guidelines must be followed:\n\n- Do not use the sx prop for styling components. Instead, use CSS Modules.\n- Do not use the Box component for styling components. Instead, use CSS Modules." } }, { "name": "Agent self-propagation via the `init` tool", "category": "scaffolding", "description": "Primer’s `init` MCP tool goes past scaffolding a project: its final bullet instructs the agent to write agent instructions into the consumer’s repo, so future sessions stay on-system even without the MCP server attached. The design system asks the agent to install the design system’s own guardrails.", "snippet": { "language": "typescript", "source_url": "https://raw.githubusercontent.com/primer/react/HEAD/packages/mcp/src/server.ts", "content": " text: `The getting started documentation for Primer React is included below. It's important that the project:\n\n- Is using a tool like Vite, Next.js, etc that supports TypeScript and React. If the project does not have support for that, generate an appropriate project scaffold\n- Installs the latest version of `@primer/react` from `npm`\n- Correctly adds the `ThemeProvider` and `BaseStyles` components to the root of the application\n- Includes an import to a theme from `@primer/primitives`\n- If the project wants to use icons, also install the `@primer/octicons-react` from `npm`\n- Add appropriate agent instructions (like for copilot) to the project to prefer using components, tokens, icons, and more from Primer packages" } }, { "name": "Rule IDs with ADR authority citations", "category": "registry-metadata", "description": "Primer’s component-review rubric is structured like a linter ruleset rather than prose: every rule is `component-review.` with Check / Prefer / Authority fields, and the agent is told to cite the rule ID and scope reports to newly-introduced behavior only (‘do not report pre-existing migration debt’). Each rule traces to a numbered ADR in `contributor-docs/adrs/`, so AI review is anchored to human-ratified decisions and can be argued with.", "snippet": { "language": "markdown", "source_url": "https://raw.githubusercontent.com/primer/react/HEAD/.github/instructions/component-review.instructions.md", "content": "# ADR-backed component review trial\n\nApply these rules only to behavior or contracts introduced or expanded by the\nchange. Report concrete impact, cite the rule ID, and do not report pre-existing\nmigration debt.\n\n## `component-review.stable-identifiers` (advisory)\n\n- **Check:** Newly added component roots, public subcomponents, and meaningful\n structural parts follow the established `data-component` naming contract.\n- **Prefer:** Use PascalCase component API names, keep state in separate data\n attributes, and test stable identifier values.\n- **Authority:** `contributor-docs/adrs/adr-023-stable-selectors-api.md`" } }, { "name": "Mandatory local MCP before answering (Storybook as ground truth)", "category": "tool-gating", "description": "For internal contributors the copilot-instructions forbid answering from model memory about components: the agent must boot the Storybook dev server and query the `primer-storybook` MCP (an HTTP server Storybook itself exposes at localhost:6006/mcp) before answering or acting. `.vscode/mcp.json` pre-wires four servers (github, playwright, primer, primer-storybook) so the tooling is present by default.", "snippet": { "language": "markdown", "source_url": "https://raw.githubusercontent.com/primer/react/HEAD/.github/copilot-instructions.md", "content": "## Storybook\n\nWhen working on UI components, always use the `primer-storybook` MCP tools to access Storybook's component and documentation knowledge before answering or taking any action. Reference the `.github/skills/storybook/SKILL.md` file for detailed instructions on using the Storybook MCP effectively and accurately." } }, { "name": "Anti-invention clauses backed by platform-level output caps", "category": "prohibition", "description": "Across contributor agent files and the CI triage agent, Primer repeatedly writes negative constraints against the model’s strongest failure mode: fabricating structure. The triage bot may only apply labels that already exist and may never close an issue; the implementer agent may not invent visual styling without a design reference and may not add slot machinery ‘by default’. The prohibition is also enforced at the platform layer via gh-aw `safe-outputs` maxima, not just in the prompt.", "snippet": { "language": "markdown", "source_url": "https://raw.githubusercontent.com/primer/react/HEAD/.github/workflows/issue-triage.md", "content": "Base every decision only on what the issue and its comments actually say. Do not invent\nmissing context or guess beyond the evidence. Keep the issue's existing labels; only add\nlabels. Never close the issue.\n\n- **Classify the issue type.** If the issue already has a type, leave it. Otherwise set the\n single best-fitting type from those this repository offers. If it is too ambiguous to\n type confidently, leave it untyped.\n- **Add relevant labels.** Apply existing repository labels that describe the issue's nature\n and area. Only use labels that already exist; never invent labels, and do not re-add\n labels the issue already has. If nothing fits, add none." } } ], "platform_integrations": [ { "platform": "figma", "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.", "url": "https://github.com/primer/react/blob/main/.github/workflows/figma_connect_publish.yml" }, { "platform": "storybook", "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`.", "url": "https://github.com/primer/react/blob/main/.vscode/mcp.json" }, { "platform": "other", "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.", "url": "https://primer.style" } ], "building_vs_consumption": { "for_consumers": "Strong and unusually opinionated. `@primer/mcp` (20 tools) plus `@primer/brand-mcp` (8 tools) are officially maintained, versioned alongside the libraries, and documented on primer.style with copy-paste `.mcp.json` for Cursor/Copilot CLI and one-click VS Code install badges. The tool descriptions do real work: forced call ordering, a mandatory Stylelint validation loop, semantic color remapping, and a `primer_coding_guidelines` tool that pushes Primer’s live `sx`/`Box` prohibitions into the consumer’s session. Figma Code Connect closes the design-to-code loop. The notable gap is static context: no llms.txt, no llms-full.txt, no published .cursorrules template, no ‘Add to Cursor/Claude’ deep links. Primer bets entirely on MCP, so agents without MCP configured get nothing beyond ordinary HTML docs.", "for_builders": "Equally strong, and committed entirely to GitHub’s own agent-file formats rather than AGENTS.md/CLAUDE.md. primer/react’s `.github/` contains copilot-instructions.md, five path-scoped `*.instructions.md` (including an ADR-backed component-review rubric with stable rule IDs), seven `skills/*/SKILL.md`, and two custom `*.agent.md` subagents with declared tool and skill allowlists. CI runs github/gh-aw agentic workflows (issue-triage compiled from Markdown to a lock file, with `safe-outputs` caps and hand-off to the Copilot coding agent), an accessibility alt-text bot, lint-autofix, and `copilot-setup-steps.yml` to prep the Copilot coding agent environment. Sibling repos differ: primer/primitives uses AGENTS.md with a MANDATORY lint/format/test/build chain and a dedicated `contributor-docs/agents/` directory; primer/brand and primer/view_components use copilot-instructions.md." }, "gaps": "Absent, probed directly: (1) No llms.txt; https://primer.style/llms.txt is a 404. (2) No llms-full.txt: that URL returns HTTP 200 but the body starts `` with content-type text/html and is byte-identical in size to the homepage; it is the SPA catch-all. Any scanner reporting llms-full.txt as present is being fooled by the SPA. (3) The often-cited https://primer.style/mcp and https://primer.style/guides/ai do NOT exist: same SPA-shell false positive; the real page is /product/getting-started/foundations/mcp. (4) primer/react has no AGENTS.md, no CLAUDE.md, no .cursorrules, no .cursor/rules/ (all 404 on raw.githubusercontent.com) and no .claude/ directory. (5) No published Claude Skill or Cursor rules package for consumers, and no ‘Add to Cursor/Claude’ install buttons, only VS Code badges. Not established: whether Primer runs AI-assisted codemods for migrations. `migrating.md`, `migration-status.yml`, `lint-autofix.yml` and eslint-plugin-primer-react migration rules all exist, but this study did not confirm an LLM is in that loop; treat as deterministic codemods unless proven otherwise. Also unverified: real adoption/usage numbers for @primer/mcp, and the contents of four skills this study did not open (changesets, deprecations, feature-flags, slots) plus the modular-ds-reviewer agent. NAME COLLISION: npm `@polygonlabs/primer-mcp` (1.0.0, 2026-06-08) is unrelated to GitHub’s Primer; it targets the Primer blockchain SDK, not the design system. no genuine community MCP server for Primer.", "sources": [ "https://github.com/primer/react", "https://raw.githubusercontent.com/primer/react/HEAD/.github/copilot-instructions.md", "https://raw.githubusercontent.com/primer/react/HEAD/packages/mcp/src/server.ts", "https://raw.githubusercontent.com/primer/react/HEAD/packages/mcp/README.md", "https://raw.githubusercontent.com/primer/react/HEAD/.github/agents/modular-ds-implementer.agent.md", "https://raw.githubusercontent.com/primer/react/HEAD/.github/instructions/component-review.instructions.md", "https://raw.githubusercontent.com/primer/react/HEAD/.github/instructions/general-coding.instructions.md", "https://raw.githubusercontent.com/primer/react/HEAD/.github/skills/storybook/SKILL.md", "https://raw.githubusercontent.com/primer/react/HEAD/.github/skills/style-guide/SKILL.md", "https://raw.githubusercontent.com/primer/react/HEAD/.github/workflows/issue-triage.md", "https://raw.githubusercontent.com/primer/react/HEAD/.vscode/mcp.json", "https://raw.githubusercontent.com/primer/primitives/HEAD/AGENTS.md", "https://raw.githubusercontent.com/primer/brand/HEAD/packages/mcp/README.md", "https://primer.style/product/getting-started/foundations/mcp", "https://registry.npmjs.org/@primer/mcp" ] }