name: k8s-compat-matrix description: Manages the Kubernetes compatibility matrix data and React component. Use when adding/removing K8s versions, updating conformance test results, or documenting known issues.
Kubernetes Compatibility Matrix Skill
Overview
Manages the Kubernetes compatibility matrix — a data-driven React component backed by static/api/k8s-compatibility.json. This skill handles adding/removing K8s versions, updating cell statuses based on conformance test results, and documenting known issues with footnotes.
When to Use This Skill
Trigger this skill when:
- User says "add K8s version", "new kubernetes version", "update compatibility matrix"
- User says "prune", "remove EOL version" for the K8s matrix
- User provides conformance test results to update cell statuses
- User says "mark known issue" or provides a partial failure to document
- Linear issue references updating the K8s compatibility matrix
Files
| File | Purpose |
|---|---|
static/api/k8s-compatibility.json |
Source of truth for matrix data |
src/components/KubernetesCompatibilityMatrix/index.jsx |
React component |
src/components/KubernetesCompatibilityMatrix/styles.module.css |
Component styling |
scripts/generate-compatibility-matrix.js |
CLI: add/prune/validate |
.github/workflows/update-compatibility-matrix.yml |
CI validation on PR |
tests/specs/k8s-compatibility-matrix.spec.js |
Playwright/BrowserStack browser tests |
vcluster/manage/upgrade/supported_versions.mdx |
Page that imports the component |
Statuses
| Status | Emoji | When to use |
|---|---|---|
tested |
checkmark | Conformance tests passed |
compatible |
OK | Not tested, expected to work |
known-issue |
warning | Works with documented limitations |
Workflow: Add New Kubernetes Version
Run the CLI tool:
node scripts/generate-compatibility-matrix.js --add <version>This adds a row and column. Diagonal cell =
tested, all others =compatible.Adjust cells based on conformance test results. Change cell values in
static/api/k8s-compatibility.json:- Pass → leave as
"compatible"or change to"tested" - Fail → change to
{"status": "known-issue", "note": N}(see known issues below)
- Pass → leave as
Validate:
node scripts/generate-compatibility-matrix.jsBuild to verify rendering:
npm run buildCommit, push, open PR.
Workflow: Prune EOL Version
The matrix should only contain Kubernetes versions that are actively supported upstream. Check the official release calendar at https://kubernetes.io/releases/ for current EOL dates.
When adding a new version, always check at the same time whether any existing versions have passed their EOL date. If so, prune them in the same PR.
For each EOL version:
node scripts/generate-compatibility-matrix.js --prune <version>
Removes row, column, and all references. Repeat for each EOL version, then validate and commit.
Workflow: Document Known Issue
When a conformance test reveals a partial failure (specific API broken, not full incompatibility):
In
static/api/k8s-compatibility.json, find thenotesarray. Add a new entry:{ "id": <next_integer>, "text": "Description of the limitation. See [relevant docs](/docs/vcluster/path/to/page) for details." }Change affected cell(s) from a string to an object:
{"status": "known-issue", "note": <matching_id>}Multiple cells can reference the same note ID.
Validate:
node scripts/generate-compatibility-matrix.js
JSON Schema
static/api/k8s-compatibility.json
├── lastUpdated: "YYYY-MM-DD" (auto-set by CLI on --add/--prune)
├── kubernetesVersions: ["1.35", "1.34", ...] (descending order)
├── matrix: [
│ { host: "1.35", vcluster: {
│ "1.35": "tested",
│ "1.34": "compatible",
│ "1.31": {"status": "known-issue", "note": 1}
│ }}
│ ]
├── notes: [{ id: 1, text: "description with link" }]
└── statuses: {
tested: { emoji, label, description },
compatible: { emoji, label, description },
known-issue: { emoji, label, description }
}
Cell values: either a status string or {"status": "<name>", "note": <id>}.
Validation
The CLI validates:
kubernetesVersionscount matchesmatrixrow count- Every row has entries for all versions
- All status strings exist in
statusesobject - All note references point to existing note IDs
statuseshas at leasttestedandcompatible
CI runs this automatically on any PR that touches the JSON.
Testing
Playwright tests in tests/specs/k8s-compatibility-matrix.spec.js verify:
- Table renders with correct structure (header rows, data rows, version labels)
- Legend displays all three statuses
- Known-issue cells have superscript footnote markers
- Footnote text appears below the table
- Table accessible on mobile viewport
Run locally:
cd tests && npm install
TEST_BASE_URL=http://localhost:3000 npx playwright test specs/k8s-compatibility-matrix.spec.js --project=local
Note: tests target /docs/vcluster/next/ path. After a version is cut, update MATRIX_PATH in the test spec.
Troubleshooting
Validation fails: Run node scripts/generate-compatibility-matrix.js locally to see exact errors. Common causes: missing cell entry, invalid status name, dangling note reference.
Table shows stale data in dev server: Clear caches and restart:
npx docusaurus clear && npm run start
Known-issue footnotes don't render: Verify cell is an object {"status": "known-issue", "note": N} not just the string "known-issue". Check notes array has matching id.
Wrong matrix shape after --add: Versions sort numerically (1.9 < 1.10 < 1.35). Check kubernetesVersions ordering.
Do Not
- Edit the component JSX unless the rendering logic needs to change
- Add statuses without updating both the
statusesobject and the component - Mark cells as
testedwithout evidence from conformance tests - Modify versioned docs copies of the matrix page (they use the old HTML table)