Sekura Design MCP
This MCP server exposes the Sekura Design System — tokens, components, layouts, patterns, accessibility contracts, code recipes and validation — to any MCP-capable client.
Discover the system:
get_overview,searchRead design foundations:
get_foundation(color, dark mode, accessibility, motion, theming, etc.)Browse and inspect components:
list_components,get_componentGet paste-ready code in 8 frameworks:
get_component_code(html, css, react, vue, svelte, angular, blazor, web-component)Inspect runtime behavior and lifecycle:
get_behaviorGet page blueprints:
get_layoutGet UX patterns:
get_patternWork with tokens:
get_tokens,export_tokens,get_primitives,suggest_tokenCheck and audit contrast:
check_contrast,audit_themeValidate markup and integration:
validate_markup,validate_integrationGet setup and stylesheet:
get_setup,get_stylesheetFind published artefact URLs:
get_endpointsRead migration guidance:
get_migration_guide
Exports design tokens as Android XML resources for use in Android applications.
Generates Angular component code from the design system's specifications, including accessibility contract and tokens.
Generates Blazor component code from the design system's specifications, including accessibility contract and tokens.
Provides the complete design system stylesheet and design token values as CSS custom properties.
Exports design tokens to Figma for use in design workflows.
Generates React component code from the design system's specifications, including accessibility contract and tokens.
Generates Svelte component code from the design system's specifications, including accessibility contract and tokens.
Exports design tokens to Swift for use in Apple platform applications.
Exports design tokens as TypeScript definitions for use in TypeScript projects.
Click on "Deploy Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type
@followed by the MCP server name and your instructions, e.g., "@Sekura Design MCPWhat are the semantic color tokens for dark mode?"
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
Sekura Design MCP
A dockerized Model Context Protocol server that serves the complete Sekura Design System — tokens, components, layouts, UX patterns, accessibility contract and paste-ready code — to any MCP-capable tool.
Agents and developers can inspect the same tokens, native markup and interaction contracts. Application behavior still needs implementation and accessibility verification.
71 components · 16 foundations · 15 UX patterns · 9 layout recipes
120 semantic tokens · 4 themes · 3 densities · 8 target frameworks
Build-derived counts and support: sample/assets/component-manifest.jsonThe human-readable specification is DESIGN.md, and there is an
107-page documentation site — generated from the same data — that
explains it with live demos, a full colour guide and worked examples.
Integration and migration
Sekura 3 adopts a compact neutral workspace and continuous document
canvas. Read the migration plan for staged adoption, the optional
v2 geometry bridge, compatibility checks and rollback. The previous main is
preserved on feature/2.1.0; the redesign is on main and 3.0.0.
The support matrix distinguishes CSS, native behavior, controllers, and application-owned actions. The workbench compares every control size and density and demonstrates pending, failure, retry, cancellation and real undo. Example data stays local; simulated remote actions are labelled.
All 71 components are marked stable. The completed implementations include multi-select and async search, a reusable
command palette, exact/range sliders, tri-state lazy trees, cancellable upload
retries, and complete workspace/timeline states. npm run test:completion checks
these contracts in Chromium, Firefox and WebKit. Human screen-reader and
application acceptance remain documented separately in MANUAL-VALIDATION.md.
Generated framework code is an editable reference recipe, preserving the native markup, unique IDs and controller cleanup. Except for the dedicated React Button, these are not general-purpose prop-driven components. Read the emitted API before passing specification props. Keep one owner for controller state and wire your own permissions, network requests, persistence and navigation.
Version 2 corrects the accordion Tab sequence and replaces the old generated wrappers. See migration notes and the second design review and the original audit. No package or site is published by a local build.
Related MCP server: ds-canon
Quickest start
./run.sh start-buildBuilds everything — TypeScript, contrast audit, CSS lint, stylesheets, the
documentation site and the Docker image — then serves MCP and the documentation
on :8080, with the docs at /docs/.
./run.sh build Compile, run gates, emit CSS, build the docs and the image
./run.sh start Start the MCP server and the documentation site
./run.sh start-build Build, then start
./run.sh restart Stop, then start
./run.sh stop Stop everything
./run.sh logs [target] Follow server logs
./run.sh status What is running, plus a live contrast-audit check
./run.sh verify Run every gate without starting anything
./run.sh clean [--all] Remove build output, container and image
./run.sh helpThe MCP server runs in Docker when Docker is available and falls back to a local
Node process when it is not, so the script behaves the same either way. The
published port and the image names are overridable: SEKURA_PORT,
SEKURA_IMAGE, SEKURA_CONTAINER.
./run.sh status is a real check rather than a liveness ping — /health
re-runs the full contrast audit, so a server quietly using a broken palette
reports it.
The documentation site
./run.sh start-build # then open http://localhost:4173A 107-page documentation site — explanations, a full colour guide, a type specimen, live demos, a complete component reference and ten worked examples.
It is generated from the design system's own data, so the colour guide shows genuinely audited contrast values and the component pages show the same specification the MCP server serves. Browser regression tests check that the documented interactions work.
| Every ramp step with its contrast against white and black, all 120 semantic tokens in four themes, and the full 86-pairing contrast contract with measured ratios |
| The elevation inversion, demonstrated with the same markup under both themes side by side — plus the nine things that break silently |
| Flex-first, with resizable demos that reflow on container width |
| Filterable reference for every token |
| One page per component: anatomy, states, dark-mode note, full keyboard and ARIA contract |
See sample/README.md for what to try.
Quick start
Docker (recommended)
docker compose up -d
curl http://localhost:8080/healthOr without compose:
docker build -t sekura-design-mcp .
docker run -d -p 8080:8080 --name sekura sekura-design-mcpThe build runs the contrast audit and the full smoke test. An image whose palette breaks a declared WCAG pairing does not get built.
Local
npm install
npm run build
npm start # stdio
npm run start:http # HTTP on :8080Connecting a client
Claude Code / Claude Desktop — HTTP
{
"mcpServers": {
"sekura-design": {
"type": "http",
"url": "http://localhost:8080/mcp"
}
}
}Claude Code — one-liner
claude mcp add --transport http sekura-design http://localhost:8080/mcpOpenAI Codex
Codex reads MCP servers from ~/.codex/config.toml. Add a [mcp_servers.<name>]
table:
# ~/.codex/config.toml
[mcp_servers.sekura-design]
command = "docker"
args = ["run", "-i", "--rm", "-e", "SEKURA_MCP_TRANSPORT=stdio", "sekura-design-mcp:3.0.2"]
# The first call builds a 5,900-line overview, so allow a little headroom.
startup_timeout_sec = 30
tool_timeout_sec = 60Without Docker, point it at the built server directly:
[mcp_servers.sekura-design]
command = "node"
args = ["/absolute/path/to/SekuraDesignMCP/dist/index.js"]Recent Codex versions can add it for you:
codex mcp add sekura-design -- docker run -i --rm \
-e SEKURA_MCP_TRANSPORT=stdio sekura-design-mcp:3.0.2
codex mcp list # confirm it registeredThen just ask for work in design-system terms — Codex will call the tools:
> Build a settings page using the Sekura design system. Check the dark mode
> foundation before you write any CSS, and validate the markup when you're done.Note on transport. stdio is the broadly supported path and is what the
examples above use. Codex's support for remote url-based MCP servers is newer
and has moved between releases — check codex mcp --help for your version before
relying on the HTTP endpoint. Everything the server exposes is available over
stdio, so nothing is lost.
Getting good results. The server's instructions already tell a client where
to start, but these help:
Ask it to call
get_overviewfirst on a new task.For anything visual,
get_foundation({ id: "dark-mode" })before writing CSS prevents the nine most common dark-mode defects.Ask it to finish with
validate_markup— the linter catches missing accessible names and hard-coded colours that a model will otherwise leave behind.
stdio (client spawns the container)
{
"mcpServers": {
"sekura-design": {
"command": "docker",
"args": ["run", "-i", "--rm", "-e", "SEKURA_MCP_TRANSPORT=stdio",
"sekura-design-mcp:3.0.2"]
}
}
}stdio (local install)
{
"mcpServers": {
"sekura-design": {
"command": "node",
"args": ["/absolute/path/to/SekuraDesignMCP/dist/index.js"]
}
}
}Tools
Tool | Returns |
| Start here. The map of everything, with the call needed to fetch each part. |
| Full-text search across components, foundations, patterns, layouts, tokens, behavior APIs and migration changes. |
| The reasoning: colour, dark mode, responsive layout, accessibility, typography, motion, i18n, theming… |
| The catalogue, filterable by category and maturity. |
| Full spec: anatomy, variants, sizes, states, props, tokens, dark-mode behaviour, complete accessibility contract, do/don't. |
| Runtime declarations, events, initialization, cleanup and application ownership. |
| Full v2-to-v3 plan, behavioral changes, compatibility baseline and geometry bridge. |
| Paste-ready code in |
| A complete page blueprint with markup and CSS. |
| A recurring UX problem, its solution, and the anti-patterns. |
| Resolved token values, showing all four themes side by side. |
| CSS, SCSS, W3C DTCG, Tailwind v3/v4, JS, TS, Swift, Android XML, Figma. |
| The raw colour ramps behind the semantic layer. |
| Describe an intent in words, get the right token with values per theme and why. |
| WCAG verdict for any pair — accepts hex or token names, resolves per theme, composites translucency. |
| Every declared pairing across every theme. The build gate. |
| Lints HTML/CSS for the failures that actually ship. |
| HTML scaffold, pre-paint theme script, reset, utilities, prose, theme control. |
| The entire stylesheet as one file. |
| Published CSS, behavior and documentation artifact URLs. |
| Validate dependencies, initialization, markup references and declared action handlers. |
Resources
sekura://tokens/css · sekura://tokens/dtcg · sekura://foundations/principles ·
sekura://foundations/dark-mode · sekura://components · sekura://behaviors ·
sekura://migration/v2-to-v3
Prompts
build-page · review-ui · implement-dark-mode
HTTP endpoints
Beyond MCP, the container serves plain HTTP so a build step can consume tokens without speaking the protocol:
Endpoint | Purpose |
| MCP streamable HTTP endpoint |
| Health check — re-runs the contrast audit, so a container serving a broken palette reports unhealthy |
| CSS custom properties, all themes and densities |
| W3C Design Tokens JSON |
What makes this specification unusual
Dark mode is specified, not derived. Every component documents what changes in dark mode and why. The system encodes the rules most implementations get wrong: floating surfaces get lighter as they rise while recessed surfaces get darker; saturated fills step up the ramp so their labels flip to dark; borders go darker on dark, not lighter; and elevation is two tokens because a drop shadow is nearly invisible against a dark page.
get_foundation({ id: "dark-mode" }) lists the nine failures that pass a design
review and break in production — the unstyleable Chrome autofill background, SVG
chevrons baked into data URIs, WebKit's search clear button, scrims that are too
weak on dark, and so on.
The contrast contract is machine-verified. 86 declared pairings × 4 themes = 344
checks, run on every build and by the container's health check. Two neutral steps
are pinned by contrast rather than by eye: neutral-400 is the lightest grey
clearing 3:1 on white, and neutral-500 the lightest clearing 4.5:1 on the subtle
surface. Moving either lighter breaks a promise, and the audit catches it.
Sekura exceeds WCAG in three places where products commonly fail: placeholder text and tertiary text are both held to full body contrast, and switch and progress tracks are treated as meaningful graphics rather than decoration.
Layout is flex-first. Composition primitives wrap rather than overflow, children
declare flex explicitly, text-bearing flex children set min-inline-size: 0, and
widths are flex-basis (an ideal) rather than width (a demand). Most layouts
therefore respond to their container and need no media query — including the
two-column sidebar-layout, which stacks purely through flex wrapping.
Example session
> get_overview
→ the full map
> get_foundation({ id: "dark-mode" })
→ the nine silent failures, the elevation inversion, theme-switching rules
> get_layout({ id: "list-page" })
→ regions, responsive strategy, a11y obligations, markup + CSS
> get_component({ id: "table" })
→ 6 variants, 6 states, full keyboard model, and why row separators
go DARKER in dark mode
> get_component_code({ id: "table", framework: "react" })
→ typed component forwarding the required ARIA attributes
> suggest_token({ intent: "border around a card in dark mode" })
→ --sk-color-border-default, values per theme, and why
> check_contrast({ foreground: "#8590a3", background: "#ffffff", use: "ui-component" })
→ 3.22:1 — AA pass for control boundaries
> validate_markup({ markup: "<button><svg/></button>" })
→ ❌ button-accessible-name, with the fix and the WCAG criterion
> audit_theme
→ 344/344 pairings satisfied across all four themesCI and releases
Two workflows in .github/workflows/.
ci.yml runs on every push and pull request. Each step is a gate that exits
non-zero, so a change that breaks a promise cannot merge green:
Gate | Checks |
| No version literal has drifted from |
| No pre-release dependencies; every Node reference an LTS line |
|
|
| 344 checks — 86 declared pairings across four themes |
| Structure, tokens only, no physical properties |
| Every MCP tool, component, framework and export format |
| Colour maths against WCAG reference values |
| Path prefixes and proxy headers resolve to reachable URLs |
| React, Angular and Web Component typechecks; Vue/Svelte compilation; Angular templates |
| All generated Razor components compile with .NET 10 |
| Example workflows, control alignment, generated React mounts, lifecycle and mobile geometry |
| Advanced components, async cleanup, RTL accents and narrow layouts in three browsers |
| Real key presses in a browser: focus, ARIA, Escape, inert |
| Static bundle is portable — nothing root-absolute |
| Every failing tool call is marked, coded and actionable |
| Accessible names exist and are distinct within a region |
| Nothing clipped in either direction, at four widths, including 320px, across 14 pages |
| Dangling references, broken links, markup lint |
| axe-core, WCAG 2.2 AA, both themes |
Docker | Image builds, |
release.yml runs on a v* tag and publishes artifacts.
npm version minor # bumps package.json; everything else derives from it
git push --follow-tagsThe workflow refuses to release if the tag disagrees with package.json —
otherwise you ship artifacts labelled one version and containing another. It then
runs the full gate chain again (a release cannot skip checks) and publishes:
Artifact | Use |
| The whole stylesheet, one file |
| Custom properties only, all themes and densities |
| W3C Design Tokens format |
| Drop-in |
| ES module for bundlers |
| Per-component CSS, Tailwind, Swift, Android |
| The documentation site, hostable anywhere |
| Checksums |
Stable releases also publish a multi-arch image to GHCR, tagged 1.2.3, 1.2,
1 and latest. Alpha releases use their exact version tag and do not update
latest or the stable documentation site. After publishing the release:
docker run -d -p 8080:8080 ghcr.io/mictsi/sekuradesignmcp:3.0.2Stable releases deploy the documentation site to GitHub Pages.
Versioning
package.json is the single source of truth. The server, docs site, behaviours
bundle and container tag all derive from it — check:version fails the build if
a literal creeps back in.
A major bump is required for anything that breaks consumers silently:
renaming a semantic token or component class, changing a keyboard contract,
removing an MCP tool, or changing the focus ring or spacing scale. Changing a
primitive value is a minor bump, because the semantic layer absorbs it and the
contrast audit proves nothing regressed. See CHANGELOG.md.
Development
npm run verify # full checks; Node/npm, Chromium, Firefox, WebKit and .NET 10 SDK required
npm run build # compile
npm run check:version # no version literal has drifted
npm run check:deps # dependency policy: stable releases, Node LTS only
npm run check:env # .env.example matches what the code actually reads
npm run test:color # colour maths vs WCAG reference values
npm run test:urls # URL generation under prefixes and reverse proxies
npm run audit:contrast # 344 contrast checks — build gate
npm run lint:css # structural CSS lint over all 67 stylesheets
npm run smoke # checks every tool, component and export
npm run emit:css # write dist-css/ and the dependency/event manifest
npm run site:build # regenerate the 107-page documentation site
npm run verify:sample # lint every page against the design system itselflint:css exists because component CSS is a string as far as the TypeScript
compiler is concerned. It checks for unbalanced braces, selectors running into
at-rules, hard-coded colours, unknown tokens and physical properties — it was
added after building the sample surfaced an invalid selector in the dialog
stylesheet that had shipped unnoticed.
npm run emit:css produces standalone artefacts for consuming Sekura as plain
files: sekura.css (everything), tokens.css, tokens.dtcg.json,
tailwind.config.js, SekuraColor.swift, android-resources.xml,
tokens.figma.json, per-component CSS, and component-manifest.json with dependency and behavior metadata.
Layout
src/
├── index.ts entry, transport selection
├── server.ts MCP server: design, runtime and migration tools, resources and prompts
├── http.ts streamable HTTP transport, health, plain-HTTP token endpoints
├── site/ documentation site generator
│ ├── shell.ts page shell, navigation, reusable doc blocks
│ └── pages.ts every page, built from the data below
├── data/
│ ├── primitives.ts ramps, scales, type scale, elevation, motion, breakpoints
│ ├── semantic.ts 120 tokens × 4 themes + the contrast contract
│ ├── tokens.ts resolution and audit
│ ├── base-css.ts reset, utilities, prose, theme runtime
│ ├── foundations.ts 15 foundation documents
│ ├── layouts.ts 9 page recipes
│ ├── patterns.ts 15 UX patterns
│ └── components/ 67 component specifications
└── lib/
├── color.ts WCAG luminance, contrast, compositing
├── exporters.ts 11 output formats
├── codegen.ts 8 target frameworks
├── validate.ts markup linting
├── markdown.ts minimal renderer for the foundation documents
├── suggest.ts intent → token
└── search.ts weighted full-text searchSettings
Every setting, with what it does and when you would change it, is documented in
.env.example — including the path variables this section
used to omit. See Configuration for how to use the file.
A second list here would drift from that one, which is the failure
npm run check:env exists to prevent.
Notes
The HTTP server is stateless — a fresh server per request, no sessions to lose. The design system is read-only at runtime, so the container runs unprivileged with a read-only filesystem and all capabilities dropped.
Supported runtimes
Node 22 (Jod) and 24 (Krypton) — the two Node LTS lines currently in
support. The container builds on 24; CI runs every gate on both, so
engines: >=22 is a verified claim rather than an aspiration.
Node 25 did not become LTS, and Node 26 is still Current on 2 October 2026.
npm run check:deps enforces the currently supported LTS window. The window
must be reviewed as Node's release policy changes with version 27.
What the build actually needs
The container build needs Docker and nothing else. The Dockerfile installs its own dependencies, compiles inside the image, and runs its own gates there, so the host toolchain is never involved:
./run.sh build --image # or plain: docker build -t sekura-design-mcp .Verified on a clean git archive with no node_modules, no dist, no tsc
and no browser on the host.
Plain ./run.sh build does more than that: it also compiles and verifies on the
host before building the image, which is why it wants TypeScript and
Playwright. The script installs the revisions locked by playwright-core for
behavior, RTL, cross-browser and design-kit checks. These steps are skippable:
Command | Needs |
| Docker |
| Node and npm; Docker when available |
| Node, npm, Docker when available, and browser downloads |
--no-browser skips the browser tests and CSS capture for the Figma kit. The
React package, stylesheets and documentation still build. The full build
reinstalls dependencies if they differ from package-lock.json, avoiding stale
local packages after Dependabot updates.
The full build installs Chromium, Firefox and WebKit through the locked
Playwright CLI. To install them separately, run
node node_modules/playwright-core/cli.js install chromium firefox webkit.
Configuration
Every container setting lives in one file.
cp .env.example .env # then edit .env, which is gitignoreddocker compose up, ./run.sh start and docker run --env-file .env all read
it, so there is a single place to look when a deployment misbehaves. Anything
already exported wins, so SEKURA_PORT=9000 ./run.sh start still works for a
one-off.
npm run check:env fails the build if the code reads a setting .env.example
does not document, or documents one nothing reads — a setting someone will set,
restart for, and watch do nothing is worse than an undocumented one. It also
rejects quoted values, because docker run --env-file keeps the quotes as part
of the value while Compose strips them.
Publishing under a path
The MCP endpoint, the health check and the documentation site are served from one port under one path prefix. There is no second port and no second server:
http://host:8080/<app_path>/mcp MCP, POST
http://host:8080/<app_path>/health health
http://host:8080/<app_path>/docs/ documentation siteThe image serves at the root by default. To publish it under a path on an
existing web server — https://example.com/design-system/ — you need to know
which of two things your proxy does, because they need different settings.
Variable | Answers |
| Where does this process listen? |
| What does the outside world see? |
They are equal in the simple case and different in the common one, which is why they are two variables rather than one.
If the proxy passes the prefix through, the app has to answer on
/design-system/health:
location /design-system/ {
proxy_pass http://app:8080/design-system/; # prefix kept
proxy_set_header Host $host;
proxy_set_header X-Forwarded-Proto $scheme;
}docker run -d -p 8080:8080 -e SEKURA_BASE_PATH=/design-system sekura-design-mcp:3.0.2If the proxy strips the prefix, the app still listens at the root but has no way to discover what was removed, so it must be told:
location /design-system/ {
proxy_pass http://app:8080/; # prefix stripped
proxy_set_header Host $host;
proxy_set_header X-Forwarded-Proto $scheme;
}docker run -d -p 8080:8080 \
-e SEKURA_EXTERNAL_URL=https://example.com/design-system \
sekura-design-mcp:3.0.2With Traefik or ingress-nginx, neither is needed. X-Forwarded-Prefix is
honoured automatically. Set SEKURA_TRUST_PROXY=false if the container is
exposed directly to the internet, so a forged X-Forwarded-Host cannot rewrite
the links it hands out.
If it starts but never becomes healthy
Almost always HOST. A published port forwards to the container's external
interface; HOST=127.0.0.1 binds the container's own loopback instead, so
nothing on the host can connect — while the container's health check, probing
from inside, passes and Docker reports it healthy.
./run.sh start now names this when it happens, and the server warns at
startup. To restrict access, leave HOST=0.0.0.0 and narrow the mapping
instead: -p 127.0.0.1:8080:8080.
Ports
Two, and only two:
| Published port — what the outside world connects to |
| Internal port — what the server listens on in the container |
They meet at the port mapping (-p ${SEKURA_PORT}:8080). Change the published
one; leave the internal one alone, or the healthcheck, the EXPOSE and the
mapping have to be kept in step by hand.
What gets published
Every path below is relative to the mount point. There is no route outside it
— not even a redirect from /. A deployment reachable at two addresses is one
where a link, a bookmark or a proxy rule eventually points at the wrong one.
Path | What |
| MCP endpoint (POST). Rename with |
| Liveness, and the contrast audit re-run inside the container |
| Every URL above and below, as JSON |
| Custom properties, all themes and densities |
| W3C DTCG format |
| The complete stylesheet; |
| Behaviours, drop-in |
| The 107-page documentation site |
Do not assemble those paths by hand from a base you assume. Fetch
/manifest.json, or call the get_endpoints MCP tool — only the server knows
what prefix it is actually reachable on, and both report the real URLs including
anything a proxy rewrote.
curl -s https://example.com/design-system/manifest.json | jq .artefacts.stylesheet.url
# "https://example.com/design-system/css/sekura.css"The documentation site uses relative links throughout, so it is portable to any prefix with no rebuild.
Errors, for a model rather than a developer
The caller of an MCP server is a language model. That changes what a good error is: a model that receives "Unknown component" in a success envelope has no signal anything went wrong, and will carry on and invent the component.
Every failure from this server is marked isError, and carries:
Field | Why |
|
|
| One of |
Closest matches | Ranked by edit distance, never the whole namespace |
| So a model does not retry something that cannot succeed |
| So a bug report can name one specific response |
ERROR UNKNOWN_COMPONENT
No component with that id.
Received: "datepicker"
Closest matches:
- date-picker
- date-range-picker
Next:
- Call `list_components` for the full list.
Recovery hint: TRY_ALTERNATIVE
Retryable: no — the same call will fail again. Change the arguments first.
This is an error, not content. Do not include it in generated output.An empty result is not an error, and says so explicitly with count: 0. A
model cannot otherwise tell "there genuinely are none" from "something broke and
returned a default", and the second is a false claim of safety.
npm run test:errors enforces all of this — 94 checks.
Publishing the documentation as a static site
npm run site:publish # -> dist-site/dist-site/ is self-contained: 107 pages, the assets, and a 404 page. Upload it
anywhere. Every reference in it is relative, so the same bundle serves from a
domain root or any subdirectory with no rebuild:
dist-site/ -> https://example.com/
-> https://example.com/design-system/The command is a gate, not just a copy. It refuses to produce a bundle
containing a root-absolute href or src, because that is the failure that
works locally, works at a domain root, and 404s under a subdirectory — which is
where most bundles end up.
The running container serves the same site at <app_path>/docs/, so publishing
statically is an alternative to it rather than a prerequisite.
Licence
MIT — see LICENSE.
Contributing: CONTRIBUTING.md · Security: SECURITY.md · Changes: CHANGELOG.md
Review follow-ups
npm run build:react: builds the versioned local@sekura/reactpackage with Button, TextField, Textarea, Select, Checkbox and Switch. See the API contract.npm run build:design-kit: derives six Figma component sets (216 theme/density/state variants) from emitted CSS. See import instructions and coverage. It is a starter library requiring visual review in Figma before publication.npm run demo:server: serves the form-composition lab athttp://127.0.0.1:4173/form-lab.html, with same-origin HTTP validation, save and version-conflict endpoints. Data lives in memory. These endpoints are not mounted by the MCP server.npm run test:browsers: exercises native React controls, HTTP workflows, cancellation, permission changes, keyboard overlays, RTL and enlarged text in Chromium, Firefox and WebKit.get_component_coderetains readable text and adds an output schema andstructuredContent. Recipes include stylesheet dependencies, initialization instructions, native React export availability and public event payloads.validate_integrationchecks selected components, markup, loaded CSS, SVG symbols, target IDs, initialization and declared application handlers together. Warnings about undeclared handlers do not execute or prove callback behavior.
Example MCP integration validation:
{
"componentIds": ["button"],
"markup": "<button type=\"button\" class=\"sk-button\">Save</button>",
"stylesheets": ["sekura.css"],
"initialization": "auto",
"handledEvents": ["button:click"]
}Run npm run test:integration for structured MCP contracts and npm run test:request for HTTP error/abort/timeout handling. Actual screen-reader, OS contrast, physical touch and Figma acceptance procedures are recorded in MANUAL-VALIDATION.md; they have not been performed by a human tester.
Runtime and migration discovery through MCP
get_component({ id })returns the complete specification as text and structured data.sekura://componentscontains all 71 stable components.get_component_code({ id, framework })includes CSS dependencies, primary controller, all runtime factories, automatic selectors, manual-only APIs, events and application responsibilities.get_behavior({ id })accepts a component ID or any public behavior export name. It returns generated TypeScript declarations with supporting types, initialization and cleanup instructions. Omitidfor the complete API catalogue;sekura://behaviorsexposes the same catalogue as a resource.get_migration_guide({ componentId })returns the complete canonical migration plan, relevant behavioral changes, the v2 compatibility baseline and optional geometry bridge CSS. Omit the filter for every change. The resource issekura://migration/v2-to-v3.searchsupportsbehaviorandmigrationkinds as well as the existing design records.
The build embeds declarations and migration content in dist/data/mcp-reference.json, so stdio and HTTP installations work without source files or the original working directory. Rebuild after changing behavior APIs or migration documentation. npm run test:mcp checks all component specifications, every recipe format, public APIs and resources through an MCP client.
Dependency policy: use the newest supported LTS line when a project offers one (Node 24, Angular 21), otherwise its latest stable release. Angular packages validate generated recipes and are not runtime dependencies of Sekura. The package version is 3.0.2; component maturity does not mean the manual acceptance record is complete.
Available Tools
21 toolsaudit_themeAudit every declared contrast pairingARead-only
Runs every contrast promise the design system makes against one theme or all four. This is the build gate — run it after any palette change. A pairing that is not declared here is not promised and must not be used to carry meaning.
| Name | Required | Description | Default |
|---|---|---|---|
| theme | No | One theme, or omit for all four. | |
| failuresOnly | No | Show only failures (default true when everything passes). |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
Annotations already declare readOnlyHint=true and openWorldHint=false, and the description adds meaningful behavioral context: it is a validation gate over declared contrast promises, and undeclared pairings are not guaranteed. It stops short of describing the exact output/report format, but the build-gate framing makes the pass/fail nature clear.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
Three tight sentences with no filler. The core action is front-loaded, followed by when to use it, then the important contract warning. Every sentence earns its place.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
With optional parameters, full schema coverage, and read-only annotations, the definition covers the essential operational context. An explicit description of what the tool returns on success/failure is missing, but 'build gate' and 'failuresOnly' make the expected behavior reasonably inferable.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema description coverage is 100%, so both parameters are already fully documented. The description reinforces the 'one theme or all four' scope but adds no new parameter-level detail, matching the baseline for schema-covered parameters.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description uses a specific verb and resource: it runs every contrast promise in the design system against one theme or all four. This clearly differentiates audit_theme from a single-pairing check like check_contrast, leaving no doubt about scope.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The tool is explicitly positioned as 'the build gate' with a directive to run it after any palette change, giving clear usage context. It does not explicitly name alternatives or when not to use it, but the intended workflow is well communicated.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
check_contrastCheck a colour pair against WCAGARead-only
WCAG 2.2 contrast ratio and pass/fail verdict for a foreground/background pair. Accepts hex values or Sekura token names — passing tokens resolves them for the chosen theme, including compositing translucent values over the page.
| Name | Required | Description | Default |
|---|---|---|---|
| use | No | What the pair is for. Drives the threshold: 4.5:1 body, 3:1 large text and UI components. | |
| theme | No | Theme to resolve token names in (default light). | |
| background | Yes | Hex value, or a token name. | |
| foreground | Yes | Hex value, or a token name like "color-text-primary". |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
Beyond the readOnlyHint annotation, the description adds meaningful behavioral details: it resolves token names for the chosen theme and composites translucent values over the page. This helps the agent understand how inputs are processed and that token resolution is theme-dependent. It does not contradict the annotation.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is two sentences with no redundant content. It front-loads the core output (contrast ratio and verdict) and then provides the key input behavior (hex/token acceptance, theme resolution, compositing). Every sentence earns its place.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
For a low-complexity, read-only calculation tool, the description covers the main inputs, behavior, and result format. The lack of an output schema is mitigated by the explicit mention of 'contrast ratio and pass/fail verdict.' Some details like error handling for invalid hex/tokens could be added, but they are not critical for correct invocation.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
The schema already provides 100% coverage with descriptions for all parameters, so the baseline is 3. The description adds value by explaining the token-resolution behavior for foreground and background, including compositing translucent values, which is not fully captured in individual parameter descriptions. It also clarifies the role of the 'use' parameter indirectly by mentioning the pass/fail verdict driven by thresholds, though that is already in the schema.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states the verb (check) and resource (a foreground/background pair), specifying exactly what it does: computes the WCAG 2.2 contrast ratio and a pass/fail verdict. It also distinguishes itself from the sibling tools, none of which offer this contrast-checking functionality directly. The mention of accepting hex values and Sekura token names further clarifies scope.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description implies its use case — checking contrast for a colour pair — but does not explicitly state when to use it versus alternatives like audit_theme or validate_integration. It provides no exclusions or when-not-to-use guidance. The usage context is inferable from the tool's purpose, but not explicitly articulated.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
export_tokensExport tokens in a build formatARead-only
Emit the full token set in a consumable format. Everything is generated from one source, so a primitive change propagates to every output.
| Name | Required | Description | Default |
|---|---|---|---|
| theme | No | Only for the "json" format, which is single-theme. | |
| format | Yes | css: CSS custom properties for every theme and density. The canonical runtime artefact — everything else is generated for tooling that cannot consume CSS. | scss: Sass variables plus theme mixins, for pipelines that still compile Sass. | dtcg: W3C Design Tokens Community Group JSON. The interchange format for design tools and token pipelines. | tailwind-v4: Tailwind CSS v4 @theme block mapping tokens to utility namespaces. | tailwind-v3: Tailwind CSS v3 JavaScript config object. | js: Plain ES module exporting a nested token object. | ts: TypeScript module with literal types, so token names are checked at compile time. | swift: Swift extension with UIColor values resolved per theme, for iOS. | android: Android colors.xml plus dimens.xml, with a values-night variant for dark. | figma: Tokens Studio for Figma JSON, with one token set per theme. | json: Flat resolved key/value JSON for one theme. The simplest thing to consume programmatically. |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
Annotations already provide readOnlyHint=true and openWorldHint=false, and the description does not contradict them. It adds useful behavioral context: all outputs are generated from one source, so primitive changes propagate to every format. This goes beyond the annotations, though it does not describe response mechanics or edge cases.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is two sentences with no filler. The first sentence states the action and scope, and the second explains a meaningful generation guarantee. Every sentence earns its place.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
The schema covers both parameters and the read-only annotation is present, so most calling context is complete. The description communicates the core behavior and output purpose, but because there is no output schema, an explicit statement of what the tool returns would make it fully complete.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema description coverage is 100%, and the schema already thoroughly explains each format enum value and the theme restriction for json. The description itself adds no parameter-level meaning, so the baseline of 3 applies.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description uses a specific verb, 'Emit', and a clear resource, 'the full token set', and the title adds 'in a build format'. It is distinct enough from siblings like get_tokens or get_primitives because it emphasizes producing full-token build artifacts, though it does not explicitly name a sibling for contrast.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description does not state when to use export_tokens versus alternatives such as get_tokens or get_primitives. It implies 'use this to emit the full token set', but gives no exclusions, prerequisites, or guidance about which tool to prefer for inspection versus build output.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
get_behaviorGet runtime behavior and lifecycle contractsARead-only
Complete public behavior API, including exact TypeScript declarations and supporting types. Filter by component id or exported API name; omit id for the full catalogue. Includes automatic selectors, manual initialization, cleanup, events and application responsibilities.
| Name | Required | Description | Default |
|---|---|---|---|
| id | No |
Output Schema
| Name | Required | Description |
|---|---|---|
| id | Yes | |
| api | Yes | |
| events | Yes | |
| version | Yes | |
| components | Yes | |
| migrationTool | Yes | |
| schemaVersion | Yes | |
| initialization | Yes |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
Annotations already declare readOnlyHint=true and openWorldHint=false, so safety is covered. The description adds useful scope detail (what is included, and that omitting id returns the full catalogue), but says nothing about result size, pagination, or cost of the unfiltered call, which is the main behavioral risk here.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
Two sentences, no filler, with the content scope and the filter behavior front-loaded. The trailing inventory of included artifacts is slightly list-like but each item is informative.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
An output schema exists, so return-value explanation is unnecessary, and the read-only annotations cover the safety profile. For a single optional filter parameter, the description covers scope, filtering, and the unfiltered default — nothing needed to call it correctly is missing.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema description coverage is 0% for the single id parameter, so the description must carry the load — and it does, explaining that id accepts a component id or an exported API name and that omitting it returns everything. It stops short of format examples or accepted value shapes.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
States a specific verb+resource: retrieves the runtime behavior and lifecycle contract surface, with a concrete content list (TypeScript declarations, selectors, initialization, cleanup, events, responsibilities). It is clear about what it returns, though it does not explicitly distinguish itself from near-siblings such as get_component or get_component_code.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
"Filter by component id or exported API name; omit id for the full catalogue" tells the agent how to scope the call but not when this tool is the right choice versus get_component, get_component_code, or get_layout. Usage is implied by the content list rather than stated.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
get_componentGet a component specificationARead-only
The complete spec for one component: anatomy, variants, sizes, states, props, tokens consumed, dark-mode behaviour, full accessibility contract (role, keyboard model, ARIA obligations, WCAG criteria, target size), content rules, and do/don't guidance.
| Name | Required | Description | Default |
|---|---|---|---|
| id | Yes | Component id, e.g. "button", "table", "combobox". |
Output Schema
| Name | Required | Description |
|---|---|---|
| version | Yes | |
| component | Yes | |
| schemaVersion | Yes |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
Annotations already declare readOnlyHint=true and openWorldHint=false, so the safety profile is covered by structured data. The description adds useful scope information (a single call is comprehensive across anatomy, a11y, tokens, content rules), telling the agent it need not chain other tools, but it discloses nothing about response shape or pagination.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
A single sentence, front-loaded with the one-line purpose before an inventory of covered domains. The enumeration is long but each item signals real returned content; nothing is padded with filler or marketing language.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
With a readOnly annotation set and an output schema present, the description need not explain return values or safety, and it correctly focuses on what a single call covers. The remaining gap is sibling routing among the many get_* tools, which an agent would have to resolve on its own.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
There is a single required 'id' parameter with 100% schema description coverage, including examples ('button', 'table', 'combobox'). The description adds no additional meaning about the id format or lookup behaviour, so the baseline of 3 for schema-carried semantics is appropriate.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description states a specific verb and resource ('The complete spec for one component') and enumerates the domains covered (anatomy, variants, accessibility, tokens), so its scope is unambiguous. It falls short of a 5 because it never distinguishes itself from near-neighbours like get_component_code, get_pattern, or get_behavior, which an agent must choose between.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
Usage is implied rather than stated: an agent can infer it should call this when it needs a component's full specification, and the enumerated coverage acts as an implicit trigger. There is no explicit when-to-use, no prerequisites, and no routing to alternatives such as get_component_code for code samples or list_components for discovery.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
get_component_codeGet paste-ready component codeARead-only
Production code for a component in the requested framework. HTML returns reference markup with the required ARIA wiring; CSS returns the production stylesheet written against semantic tokens; framework options return editable reference recipes with native markup and lifecycle wiring. Inspect implementation metadata for dependencies and application responsibilities.
| Name | Required | Description | Default |
|---|---|---|---|
| id | Yes | Component id. | |
| framework | Yes | html: Reference markup. Load sekura.css and the behaviour bundle, then call Sekura.enhance(). | css: Component CSS. Read implementation.cssDependencies for required child styles, or load sekura.css. | react: React TypeScript reference recipe with native markup, unique IDs, editable children and controller cleanup. | vue: Vue reference recipe with native markup, slots and controller cleanup. | svelte: Svelte reference recipe with native markup, snippets and controller cleanup. | angular: Angular standalone reference component with native markup and controller cleanup. | blazor: Blazor reference component. Requires the IIFE bundle and the documented JS lifecycle bridge. | web-component: Light-DOM reference element with native markup and controller cleanup. |
Output Schema
| Name | Required | Description |
|---|---|---|
| code | Yes | |
| version | Yes | |
| framework | Yes | |
| componentId | Yes | |
| schemaVersion | Yes | |
| implementation | Yes | |
| initialization | Yes | |
| requiredStylesheets | Yes |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
Annotations already declare readOnlyHint=true and openWorldHint=false, so the safety profile is covered. The description adds real substance beyond that: it discloses what each framework mode returns (reference markup with ARIA wiring, production stylesheet on semantic tokens, editable recipes with lifecycle wiring) and points to implementation metadata for dependencies and responsibilities.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
Three dense sentences, front-loaded with the core purpose before per-framework behavior and the metadata pointer. Every sentence carries content, though the middle sentence is somewhat packed and could be tighter.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
An output schema exists, so return values need not be explained; annotations cover the safety profile; and the schema fully documents both parameters. The description completes the picture by noting the metadata pointer for dependencies and application responsibilities, leaving no critical gap for correct invocation.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema description coverage is 100% and the enum descriptions are highly detailed, so the schema carries the parameter semantics. The description only summarizes the framework families (HTML/CSS/framework options) without adding syntax or format detail beyond the schema, making the baseline 3 appropriate.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
States a specific verb (returns 'Production code') and resource (a component in the requested framework), so the agent knows it produces framework-specific implementation code. It does not explicitly differentiate from siblings like get_component or get_behavior, leaving the boundary slightly inferable.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description explains what each framework option yields (HTML vs CSS vs framework recipes), which implicitly guides selection, but gives no explicit when-to-use vs when-not or named alternative tools. Usage is implied rather than directed.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
get_endpointsWhere the published artefacts liveARead-only
Absolute URLs for the stylesheet, token files, behaviours bundle and documentation site served by this instance. Use this instead of assuming paths: the server may be mounted under a path prefix, and only it knows what that prefix is.
| Name | Required | Description | Default |
|---|---|---|---|
No parameters | |||
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
Annotations already declare readOnlyHint=true and openWorldHint=false, so no safety contradiction exists. The description adds meaningful behavioral context beyond annotations: the server may be mounted under a path prefix, and the returned URLs are authoritative for this instance. This helps the agent understand why hardcoding paths is unsafe.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
Two sentences with no wasted words. The first sentence front-loads what the tool returns, and the second provides the rationale for using it over assumptions. Every phrase earns its place.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
For a no-parameter, read-only endpoint discovery tool, the description is nearly complete: it lists the artefacts whose URLs are returned, explains why the tool exists, and clarifies the server-authoritative nature. It doesn't specify the exact response shape or keys, but the artefact list gives an agent sufficient expectation of what it will receive.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
The tool has zero parameters and schema coverage is 100% vacuously, so there is no parameter information missing. The description doesn't need to define inputs, and the baseline for zero-parameter tools is 4.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states the tool returns absolute URLs for specific artefacts (stylesheet, token files, behaviours bundle, documentation site), which distinguishes it from siblings that fetch content or tokens. The verb is implicit but the resource scope is concrete and unambiguous.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description explicitly says to use this tool instead of assuming paths, and explains why: the server may be mounted under a path prefix that only the server knows. It doesn't name sibling alternatives or give when-not-to-use conditions, but the context is clear enough for an agent to select it over content-fetching tools.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
get_foundationGet a foundation documentARead-only
The reasoning behind the system: principles, colour, dark mode, responsive layout, typography, spacing, elevation, motion, accessibility, content and voice, iconography, density, internationalisation, data visualisation, theming. Read the relevant foundation before implementing in that area.
| Name | Required | Description | Default |
|---|---|---|---|
| id | Yes | Foundation id. |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
Annotations already declare readOnlyHint=true and openWorldHint=false, so safety is covered. The description adds the workflow framing (read before implementing) but says nothing about the form of the returned content (markdown? length? sections?) or any constraints, so it adds only modest context beyond the annotations.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The opening clause frames the content well, but the long comma-separated enumeration largely duplicates the schema enum and pads the description. The actionable instruction is buried at the end rather than front-loaded.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
For a single-enum-parameter read tool with no output schema, the description conveys the topical scope but not the return shape or size, which is the main thing an agent cannot infer from the schema. Adequate but with a clear gap.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema coverage is 100% and the single enum parameter is fully documented in the schema. The description's topic list essentially restates the enum values rather than adding syntax, defaults, or selection guidance, so the baseline 3 applies.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description enumerates the subject matter ('principles, colour, dark mode, ... theming') which makes clear this returns a design-foundation document, and the closing sentence confirms the read-for-guidance intent. However, it never states the verb directly ('retrieves/returns the foundation doc for the given id') and does not differentiate itself from siblings like get_overview or get_primitives.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
'Read the relevant foundation before implementing in that area' gives a clear triggering condition tied to the implementation workflow. It stops short of naming alternatives or when-not-to-use cases (e.g. vs. get_overview or get_tokens), so it is context without routing.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
get_layoutGet a page layout recipeARead-only
A complete page blueprint: regions, responsive strategy, accessibility obligations, dark-mode notes, and paste-ready markup plus CSS. All recipes are flex-first and most contain no media query.
| Name | Required | Description | Default |
|---|---|---|---|
| id | Yes | Layout id. |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
Annotations already mark the tool read-only and closed-world; the description adds useful behavioral context beyond that: returned recipes are flex-first, mostly avoid media queries, include accessibility and dark-mode obligations, and are paste-ready. No contradiction with annotations.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
Two tight sentences: the first is front-loaded with what the tool returns, the second adds a useful style qualifier. Every word contributes, and there is no redundant restatement of the schema.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
For a read-only, one-parameter tool with an enum and no output schema, the description adequately covers the output contents and general style of the result. It does not describe the response envelope, but the simplicity of the input and annotations make this a minor gap.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
The schema covers 100% of parameters, with the single id parameter fully described and an enum of valid layout ids. The description adds nothing about parameter selection, so the schema carries the burden as expected.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description specifies a concrete deliverable – 'a complete page blueprint' – and enumerates its contents: regions, responsive strategy, accessibility obligations, dark-mode notes, and paste-ready markup plus CSS. This clearly identifies a full-layout resource and sets it apart from component/foundation-level sibling tools.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The 'complete page blueprint' phrasing implies this is the tool for whole-page layouts, and the flex-first note hints at general usage context. However, it never names alternatives like get_component or get_foundation nor says when not to use this tool, so guidance remains implied rather than explicit.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
get_migration_guideGet migration plan and behavior changesARead-only
Full canonical v2-to-v3 migration plan, rollout/rollback guidance, behavior changes, compatibility baseline and optional legacy geometry CSS. componentId filters behavior changes while preserving global migration requirements.
| Name | Required | Description | Default |
|---|---|---|---|
| componentId | No |
Output Schema
| Name | Required | Description |
|---|---|---|
| changes | Yes | |
| version | Yes | |
| markdown | Yes | |
| componentId | Yes | |
| fromVersion | Yes | |
| compatibility | Yes | |
| schemaVersion | Yes |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
Annotations already establish readOnlyHint=true and openWorldHint=false, so the safety profile is covered. The description adds genuinely useful behavioral context beyond that: the guide bundles global migration requirements with rollout/rollback guidance, and componentId filtering narrows behavior changes without dropping the global requirements — a non-obvious filtering trait.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
Two tight sentences with the payload scope front-loaded and the parameter nuance second. It is dense but every clause maps to real content or behavior; no filler or restatement of the title.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
An output schema exists, so return values need not be spelled out, and annotations cover the read-only safety profile. The description completes the remaining gaps — payload composition and the componentId filtering side-effect — leaving only minor omissions such as prerequisites for v3 migration.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema coverage is 0% and the schema only gives componentId as a minLength-1 string, so the description must carry the semantics. It does: componentId 'filters behavior changes while preserving global migration requirements,' which tells the agent both the effect and the important side-effect that global content is retained. It stops short of format examples.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
States a specific verb and resource ('get_migration_guide' → 'Full canonical v2-to-v3 migration plan') and enumerates the payload contents (rollout/rollback guidance, behavior changes, compatibility baseline, legacy geometry CSS), so an agent knows exactly what it retrieves. It does not, however, explicitly differentiate itself from overlapping siblings like get_behavior or get_overview.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
Usage is only implied by the content listing — an agent infers this is for v2→v3 migration work — but there is no explicit 'use this when' statement and no named alternative for narrower questions (e.g., get_behavior). The one guidance-adjacent sentence describes parameter behavior rather than when to select this tool.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
get_overviewOverview of the design systemARead-only
Start here. Returns the map of everything available: foundations, component catalogue, layout recipes, UX patterns, token groups and export formats, with the tool call needed to retrieve each.
| Name | Required | Description | Default |
|---|---|---|---|
No parameters | |||
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
Annotations already declare readOnlyHint=true, so the read-only nature is covered. The description adds no additional behavioral context such as rate limits or side effects, but is consistent with the annotation. With annotations present, the bar is lower and this meets the baseline.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
One efficient sentence, front-loaded with 'Start here', and lists the contents in a compact way. Every word earns its place.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
For a zero-parameter overview tool, the description fully explains what is returned (map with categories and tool calls) and is sufficient for an agent to understand its role without an output schema.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
The tool takes no parameters, so parameter explanation is unnecessary. Per rubric, 0 parameters yields a baseline of 4.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states the tool returns a map of all available design system resources and includes the tool call for each. It distinguishes itself from specific siblings like get_foundation or list_components.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The phrase 'Start here' gives clear directive to use this tool first, but it does not explicitly name alternatives or state exclusions. The context is sufficient for a starting point, though not as explicit as naming alternative tools.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
get_patternGet a UX patternBRead-only
A recurring UX problem and the Sekura answer: the problem, the solution, the rules, the accessibility obligations, and the anti-patterns to avoid.
| Name | Required | Description | Default |
|---|---|---|---|
| id | Yes | Pattern id. |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
The annotations already signal read-only behavior and a closed world, so the description does not need to restate those. It adds useful context about the content of a pattern, but it does not disclose details such as whether the response is a full document, whether there are length limits, or how missing ids behave. This is acceptable given the readOnlyHint, but not rich.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is a single, compact sentence that uses a colon to list the key sections of a UX pattern. It is efficient and free of filler, though the lack of an explicit verb slightly reduces its structural clarity.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
For a simple get-by-id tool with one enum-constrained parameter and no output schema, the description covers the main return content sufficiently. It names the expected sections of a pattern, and the schema handles id validation, making the tool callable without missing critical information.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
The input schema has 100% description coverage for the only parameter, id, including an explicit enum of valid pattern ids. The description adds no additional parameter semantics, but the baseline of 3 applies because the schema fully documents the parameter.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly identifies the resource as a 'UX pattern' and enumerates its contents: problem, solution, rules, accessibility obligations, and anti-patterns. It is clear about what the tool is about, though it does not explicitly state the retrieval action or distinguish it from sibling tools like get_component or get_foundation.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description provides no guidance on when to use get_pattern versus alternatives such as search, list_components, or get_component. It does not mention when to avoid using it or what prerequisites exist, leaving the agent to infer usage from the tool name and title.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
get_primitivesGet primitive colour rampsARead-only
The raw colour ramps behind the semantic layer. Use these to build new semantic tokens or to re-brand. Never reference a primitive from product code — it does not change between themes, so it will not adapt to dark mode.
| Name | Required | Description | Default |
|---|---|---|---|
| ramp | No | Ramp name: neutral, cobalt, aqua, jade, amber, crimson, azure, violet. |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
Beyond the readOnlyHint annotation, the description adds meaningful behavioral context: primitives do not change between themes and therefore will not adapt to dark mode. This explains a key limitation of the data returned and helps the agent understand why these values should not be used directly in product code.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
Three short, purposeful sentences: the first defines what the tool returns, the second states when to use it, and the third warns against misuse. There is no redundancy or filler, and the most important information is front-loaded.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
For a simple tool with one optional parameter and no output schema, the description covers purpose, usage, and a critical constraint. It does not explicitly state what happens if the optional ramp parameter is omitted, but the schema's description of the parameter and the overall simplicity of the tool make this a minor gap rather than a significant omission.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema coverage is 100% for the single optional 'ramp' parameter, and the schema already lists the valid ramp names. The description does not add additional parameter-level detail, but it doesn't need to because the schema fully documents the parameter. This matches the baseline for high schema coverage.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description uses a specific verb and resource: it returns 'raw colour ramps behind the semantic layer'. It clearly differentiates this from semantic-token tools by explaining that primitives are the underlying layer used to build semantic tokens, which distinguishes it from siblings like get_tokens and get_foundation.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description gives explicit use cases: 'Use these to build new semantic tokens or to re-brand.' It also gives a strong when-not-to-use rule: never reference a primitive from product code because it won't adapt to dark mode. It does not name an alternative tool explicitly, but the context is clear enough to guide selection.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
get_setupGet the project setupARead-only
Everything needed to start: the HTML scaffold, the pre-paint theme script (which must be inline and synchronous, or you get a flash of the wrong theme), the reset, the utility layer, the prose styles, and the theme control markup.
| Name | Required | Description | Default |
|---|---|---|---|
| part | No | Which part to return (default all). |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
The description adds a concrete behavioral constraint beyond the readOnly/openWorld annotations: the pre-paint theme script must be inline and synchronous or the page shows a flash of the wrong theme. This is actionable knowledge an agent would otherwise not have. There is no contradiction with the annotations.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
One sentence, front-loaded with the overall purpose, then a tightly packed list of contents. The parenthetical warning is dense but relevant and earns its place. No repetition or filler; it could be split for readability, but it is appropriately compact for the information it carries.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
With one optional enum parameter and no output schema, the description conveys both what is returned and a key integration constraint. It doesn't describe the exact return format or how the parts are delimited, which would be helpful, but for a simple get-setup tool this is sufficient. The main gap is no output-structure hints, and that gap is minor because the contents list already sets expectations.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
The schema describes `part` 100% with enum and a default note, so the baseline is 3. The description adds value by mapping enum values to friendlier terms (utility layer → utilities, theme control markup → theme-control, pre-paint theme script → theme-script), which helps an agent understand the semantic intent of each part. It doesn't explain the `all` default, but the schema already covers that.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description defines a specific bundle: HTML scaffold, pre-paint theme script, reset, utility layer, prose styles, theme-control markup, framed as 'Everything needed to start'. This clearly distinguishes it from more targeted sibling geters like get_layout or get_tokens, though it doesn't mention any sibling by name. The verb is supplied by the tool name/title, but the resource and scope are unambiguous.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
'Everything needed to start' gives clear situational context: call this tool when bootstrapping a project with the full setup. It doesn't name alternatives or state exclusions, so it stops short of a 5, but it still tells the agent when this tool is the right choice better than a purely generic description would.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
get_stylesheetGet the complete stylesheetARead-only
The entire Sekura stylesheet as one file: tokens for all four themes and three densities, reset, prose, utilities, and every component. This is the single artefact needed to render any Sekura interface.
| Name | Required | Description | Default |
|---|---|---|---|
| include | No | Layers to include (default all). |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
Annotations already signal read-only and closed-world behavior, so the description does not need safety disclosures. It adds value by describing the all-in-one-file behavior and the exact layers returned, going beyond the annotations.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
Two sentences, no filler, with the central purpose and content scope front-loaded. Every sentence earns its place.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
One optional parameter, fully schema-documented, and no output schema, so the description's enumeration of returned layers is sufficient context for an agent. It could mention the include filter explicitly, but that is already in the schema.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema coverage is 100%, with the include parameter, its enum values, and default-all behavior all documented. The description does not need to repeat this, but it also adds no extra parameter meaning.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
States a specific verb (get) and resource (stylesheet), then spells out exact contents: tokens for four themes and three densities, reset, prose, utilities, and every component. This clearly distinguishes it from sibling tools like get_tokens or get_component.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
Explicitly frames the tool as 'the single artefact needed to render any Sekura interface,' giving a clear condition for use. It does not name when-not alternatives, but the resource scope makes the intended usage strong.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
get_tokensGet token valuesARead-only
Resolved token values. Filter by group, by name fragment, or return everything. Shows the value in every theme so dark-mode differences are visible side by side.
| Name | Required | Description | Default |
|---|---|---|---|
| group | No | Token group: surface, text, border, focus, action, status, form, chart, ai. | |
| theme | No | Show only this theme. Omit to show all four. | |
| filter | No | Substring match on token name, e.g. "border", "action-primary". | |
| includeScales | No | Include non-colour scales (spacing, radius, motion, z-index, typography). |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
Annotations already declare readOnlyHint=true, and the description builds on that by disclosing the resolved-value nature, the multi-theme output behavior, and the all-or-filtered scope. It doesn't contradict the annotations or claim side effects; the only minor gap is not stating output shape or limits, but the read-only and closed-world hints lower the burden.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The main statement is front-loaded in one short sentence, followed by a compact summary of filters and output behavior. Every sentence earns its place, and no schema information is redundantly repeated.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Given four optional parameters with full schema descriptions, read-only annotations, and no output schema, the description covers the core behavioral expectations: what is returned, how filtering works, and the all-themes default. It could be slightly more explicit about when to choose this over sibling tools, but nothing needed to invoke it correctly is missing.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema description coverage is 100%, so the schema already explains group, theme, filter, and includeScales. The description adds only a compact restatement ('filter by group, by name fragment, or return everything') and the default all-themes behavior, which is useful but not needed to understand the parameters.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description names a specific resource ('resolved token values') and a clear action (return them), then distinguishes the tool's breadth: filters by group or name fragment, or returns everything. It also adds the cross-theme viewing behavior, which separates it from related tools like get_primitives or export_tokens without needing to open schema.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description effectively gives usage context: use this for resolved tokens, optionally scoped by group, theme, or name fragment, and compare theme values side by side. It doesn't name sibling alternatives or give when-not conditions, but the intended invocation context is clear from the filtering options and 'resolved' wording.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
list_componentsList componentsBRead-only
The component catalogue, optionally filtered by category or status.
| Name | Required | Description | Default |
|---|---|---|---|
| status | No | Filter by maturity. | |
| category | No | Filter by category. |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
Annotations already declare readOnlyHint=true and openWorldHint=false, so the read-only, closed-world nature is covered. The description adds that this is a complete catalogue with optional filters, but does not disclose ordering, pagination, or default inclusion of deprecated items. This is adequate given the annotation coverage, but not rich.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is one short sentence: 'The component catalogue, optionally filtered by category or status.' It is front-loaded with the core noun phrase, adds the conditional filter clause, and contains no redundant or filler words. Every word earns its place.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
For a simple read-only listing tool with two optional enum parameters and no required fields, the description covers the essential what (component catalogue) and how (optional filters). It does not describe the return shape or pagination, but the tool name and 'catalogue' imply a list, and readOnlyHint covers safety. A bit more detail about what each catalogue entry includes would push it higher.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema description coverage is 100%: both status and category have clear descriptions ('Filter by maturity.' and 'Filter by category.') and enums. The description merely paraphrases the schema with 'filtered by category or status', adding no new semantic meaning, so it stays at the baseline 3.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly identifies the resource ('the component catalogue') and implies the listing operation, distinguishing it from single-item siblings like get_component. It does not use an explicit active verb beyond the title, and it does not name a specific sibling alternative, so it stops short of a 5.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description offers no guidance on when to use this tool versus search, get_component, or get_layout. 'Optionally filtered by category or status' implies flexibility but not a selection criterion. No alternatives or exclusions are mentioned.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
searchSearch the design systemARead-only
Full-text search across components, foundations, patterns, layouts, tokens, runtime APIs and migration changes. Use when you know what you need but not where it lives.
| Name | Required | Description | Default |
|---|---|---|---|
| kinds | No | Restrict to certain kinds of result. | |
| limit | No | Maximum results (default 12). | |
| query | Yes | What you are looking for, e.g. "focus ring", "dark mode borders", "bulk selection". |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
Annotations already declare readOnlyHint=true and openWorldHint=false, so the safety profile is covered. The description adds the search scope but says nothing about ranking, result ordering, or how the limit interacts with results, so it contributes limited behavioral context beyond the structured fields.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
Two sentences, zero filler, with the scope statement front-loaded ahead of the usage condition. Every clause carries information.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
With no output schema, the description could say something about result shape or ordering, and it does not. However, the annotations, complete schema coverage and default-limit documentation mean an agent has enough to invoke it correctly.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema description coverage is 100%, so query, kinds and limit are already documented in the schema. The description's domain list loosely maps to the kinds enum but adds no syntax or format guidance beyond it; baseline 3 applies.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
States a specific verb (full-text search) and resource (the design-system corpus), and enumerates the content domains it covers. That enumeration plus the 'full-text' qualifier cleanly separates it from the get_*/list_* siblings, which retrieve a single known artifact.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
'Use when you know what you need but not where it lives' gives a clear, actionable selection condition. It implies rather than names the alternative (the direct get_component/get_tokens tools when you do know where it lives), so it falls just short of an explicit when-not/alternative statement.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
suggest_tokenFind the right token for an intentARead-only
Describe what you are styling in plain words and get the semantic tokens that apply, with resolved values per theme and a note on why that token rather than a neighbour. Use this instead of guessing a token name or reaching for a hex value.
| Name | Required | Description | Default |
|---|---|---|---|
| limit | No | ||
| intent | Yes | e.g. "subtle border on a card", "text for a timestamp", "background for a dropdown menu". |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
Annotations declare the tool is read-only, and the description adds meaningful behavioral detail beyond that: it returns resolved values per theme and explains token selection with reasoning about neighboring tokens. This gives the agent a clear picture of the tool's output without contradicting any annotations.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
Two sentences, both substantive: the first explains the tool's function and output, the second gives practical usage guidance. No filler or repetition of the title.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
For a simple, read-only tool with only one required parameter and no output schema, the description covers the key context: how to phrase the input, what kind of results to expect, and when to prefer this tool over guessing. It could be slightly more complete by explicitly noting the optional limit parameter or naming a sibling alternative, but these are minor gaps.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
The description explains the intent parameter semantically ('Describe what you are styling in plain words') and the schema provides useful examples for intent. However, the optional 'limit' parameter is not mentioned in the description and has no schema description, so the semantics of that parameter are left entirely to inference from its name and min/max constraints.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description uses a specific verb ('Describe... and get') with a clear resource ('semantic tokens') and states what is returned: resolved values per theme and a rationale comparing to neighboring tokens. This clearly distinguishes the tool from siblings like get_tokens or search, which retrieve tokens rather than recommend them from a natural-language intent.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The instruction 'Use this instead of guessing a token name or reaching for a hex value' gives clear guidance on when this tool is appropriate. It does not explicitly name alternative sibling tools or state when not to use it, but the intended use case is unambiguous.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
validate_integrationValidate component integrationBRead-only
Check component markup, stylesheet dependencies, SVG symbols, ID references, initialization and declared application events. Returns structured findings and fixes; does not execute callbacks.
| Name | Required | Description | Default |
|---|---|---|---|
| markup | Yes | ||
| svgSymbols | No | ||
| controllers | No | ||
| externalIds | No | ||
| stylesheets | Yes | ||
| componentIds | Yes | ||
| handledEvents | No | Application handlers in componentId:event format, e.g. button:click. This declares wiring; runtime behavior still needs testing. | |
| initialization | Yes |
Output Schema
| Name | Required | Description |
|---|---|---|
| valid | Yes | |
| version | Yes | |
| findings | Yes | |
| limitation | Yes | |
| schemaVersion | Yes | |
| requiredControllers | Yes | |
| requiredStylesheets | Yes |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
Annotations already declare readOnlyHint=true and openWorldHint=false, so the safety profile is covered. The description adds genuinely useful context beyond that: it returns structured findings plus fixes, and explicitly does not execute callbacks — a meaningful side-effect boundary the annotations do not convey.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
Two tight sentences with no filler; the validated surface is front-loaded and the behavioral caveat follows. Efficient and well-ordered for its size.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
An output schema exists, so return value detail is not owed by the description, and the read-only nature is covered by annotations. However, the low parameter coverage and absence of any when-to-use/alternative routing leave gaps for an agent deciding whether to call this versus validate_markup.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema description coverage is only 13% across 8 parameters, so the description must compensate. It narratively covers markup, stylesheets, SVG symbols, ID references (externalIds), initialization, and handledEvents, but omits controllers and componentIds and gives no format/syntax detail. Partial compensation justifies a mid score.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description states a specific verb (check) and enumerates exactly what is validated: markup, stylesheet dependencies, SVG symbols, ID references, initialization, and declared events. This is far more concrete than the title, though it never explicitly distinguishes itself from the sibling validate_markup beyond the implicit 'integration' scope.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
There is no when-to-use guidance and no mention of the obvious sibling validate_markup, which an agent would need to choose between. The scope (integration-level) is only inferable from the name and the checklist of what it inspects.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
validate_markupLint markup against the specificationBRead-only
Checks HTML or CSS for the accessibility and design-system failures that actually ship: missing accessible names, unlabelled inputs, hard-coded colours that break in dark mode, flex containers that will overflow, positive tabindex, removed focus outlines, and misused live regions. Advisory — a clean result is not a certificate of accessibility.
| Name | Required | Description | Default |
|---|---|---|---|
| markup | Yes | HTML and/or CSS to check. | |
| componentId | No | Check against a specific component spec as well. |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
The annotations set openWorldHint=false, implying a closed-world result where absence of findings is meaningful. The description says 'Advisory — a clean result is not a certificate of accessibility,' which asserts the opposite: a clean lint result does not rule out accessibility failures. This directly contradicts the openWorldHint annotation.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is two sentences with no filler. The first sentence is front-loaded with the action and resource, and the list of concrete failure types earns its place. The advisory caveat is short but materially changes how the result should be interpreted.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Given only two simple parameters and a complete schema, the invocation inputs are well covered. The main gaps are the absence of any description of the result shape—there is no output schema—and no explicit differentiation from validate_integration. These are minor for calling the tool but material for interpreting its response.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
The input schema fully documents both parameters, with 100% schema description coverage, so the baseline is 3. The description repeats the HTML/CSS scope and implies component-specific checking but adds no additional syntax, formatting, or semantic detail beyond what the schema already provides.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description opens with a specific verb and resource: 'Checks HTML or CSS for the accessibility and design-system failures...' and lists concrete failure classes such as missing accessible names, unlabelled inputs, and hard-coded colours. This makes the tool's purpose unmistakable and distinguishes it from siblings like validate_integration without requiring a schema inspection.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The first sentence clearly communicates that the tool applies to HTML/CSS markup, so the input context is implied. However, there is no explicit when-not-to-use guidance and no reference to alternatives such as validate_integration, leaving the agent to infer the routing between validation tools.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Tool Schema Changelog
Recent tool additions, removals, and schema changes observed during successful MCP inspections.
7 tool updates
v3.0.0- Added
get_behavior - Changed
get_component1 field changed- changed
Output schema / (root)Previous value: -nullNew value: +{ + "$schema": "http://json-schema.org/draft-07/schema#", + "additionalProperties": false, + "properties": { + "component": { + "additionalProperties": {}, + "properties": { + "id": { + "type": "string" + }, + "status": { + "type": "string" + } + }, + "required": [ + "id", + "status" + ], + "type": "object" + }, + "schemaVersion": { + "const": 1, + "type": "number" + }, + "version": { + "type": "string" + } + }, + "required": [ + "schemaVersion", + "version", + "component" + ], + "type": "object" +}
- Changed
get_component_code2 fields changed- added
Output schema / properties / implementation / properties / runtimeAdded value: +{ + "additionalProperties": false, + "properties": { + "autoSelectors": { + "items": { + "type": "string" + }, + "type": "array" + }, + "controllers": { + "items": { + "type": "string" + }, + "type": "array" + }, + "manualOnly": { + "items": { + "type": "string" + }, + "type": "array" + }, + "notes": { + "items": { + "type": "string" + }, + "type": "array" + } + }, + "required": [ + "controllers", + "autoSelectors", + "manualOnly", + "notes" + ], + "type": "object" +} - changed
Output schema / properties / implementation / requiredPrevious value: -[ - "rootClass", - "cssDependencies", - "svgSymbols", - "controller", - "behavior", - "frameworkOutput", - "applicationResponsibilities", - "events", - "autoMarker", - "nativeReactExport" -]New value: +[ + "runtime", + "rootClass", + "cssDependencies", + "svgSymbols", + "controller", + "behavior", + "frameworkOutput", + "applicationResponsibilities", + "events", + "autoMarker", + "nativeReactExport" +]
- Changed
get_foundation1 field changed- changed
Input schema / properties / id / enumPrevious value: -[ - "principles", - "color", - "dark-mode", - "responsive-layout", - "typography", - "spacing", - "elevation", - "motion", - "accessibility", - "content-and-voice", - "iconography", - "density", - "internationalisation", - "data-visualisation", - "theming" -]New value: +[ + "workspace-design", + "principles", + "color", + "dark-mode", + "responsive-layout", + "typography", + "spacing", + "elevation", + "motion", + "accessibility", + "content-and-voice", + "iconography", + "density", + "internationalisation", + "data-visualisation", + "theming" +]
- Added
get_migration_guide - Changed
search1 field changed- changed
Input schema / properties / kinds / items / enumPrevious value: -[ - "component", - "foundation", - "pattern", - "layout", - "token" -]New value: +[ + "component", + "foundation", + "pattern", + "layout", + "token", + "behavior", + "migration" +]
- Changed
validate_integration1 field changed- changed
Input schema / properties / componentIds / maxItemsPrevious value: -67New value: +71
18 tool updates
v2.1.0- Changed
audit_theme1 field changed- removed
Input schema / additionalPropertiesRemoved value: -false
- Changed
check_contrast1 field changed- removed
Input schema / additionalPropertiesRemoved value: -false
- Changed
export_tokens1 field changed- removed
Input schema / additionalPropertiesRemoved value: -false
- Changed
get_component1 field changed- removed
Input schema / additionalPropertiesRemoved value: -false
- Changed
get_component_code3 fields changed- removed
Input schema / additionalPropertiesRemoved value: -false - changed
Input schema / properties / framework / descriptionPrevious value: -"html: Reference markup with the required ARIA wiring in place. | css: The production stylesheet for this component, written against semantic tokens. | react: TypeScript React component with forwardRef and typed variant props. | vue: Vue 3 single-file component using the composition API. | svelte: Svelte 5 component using runes. | angular: Angular standalone component. | blazor: Blazor Razor component with typed parameters. | web-component: Framework-free custom element wrapping the same classes."New value: +"html: Reference markup. Load sekura.css and the behaviour bundle, then call Sekura.enhance(). | css: Component CSS. Read implementation.cssDependencies for required child styles, or load sekura.css. | react: React TypeScript reference recipe with native markup, unique IDs, editable children and controller cleanup. | vue: Vue reference recipe with native markup, slots and controller cleanup. | svelte: Svelte reference recipe with native markup, snippets and controller cleanup. | angular: Angular standalone reference component with native markup and controller cleanup. | blazor: Blazor reference component. Requires the IIFE bundle and the documented JS lifecycle bridge. | web-component: Light-DOM reference element with native markup and controller cleanup." - changed
Output schema / (root)Previous value: -nullNew value: +{ + "$schema": "http://json-schema.org/draft-07/schema#", + "additionalProperties": false, + "properties": { + "code": { + "type": "string" + }, + "componentId": { + "type": "string" + }, + "framework": { + "enum": [ + "html", + "css", + "react", + "vue", + "svelte", + "angular", + "blazor", + "web-component" + ], + "type": "string" + }, + "implementation": { + "additionalProperties": false, + "properties": { + "applicationResponsibilities": { + "items": { + "type": "string" + }, + "type": "array" + }, + "autoMarker": { + "type": [ + "string", + "null" + ] + }, + "behavior": { + "enum": [ + "native", + "controller", + "application" + ], + "type": "string" + }, + "controller": { + "type": [ + "string", + "null" + ] + }, + "cssDependencies": { + "items": { + "type": "string" + }, + "type": "array" + }, + "events": { + "items": { + "additionalProperties": false, + "properties": { + "applicationRequired": { + "type": "boolean" + }, + "detail": { + "additionalProperties": { + "type": "string" + }, + "propertyNames": { + "type": "string" + }, + "type": "object" + }, + "name": { + "type": "string" + }, + "source": { + "enum": [ + "native", + "controller" + ], + "type": "string" + } + }, + "required": [ + "name", + "detail", + "source", + "applicationRequired" + ], + "type": "object" + }, + "type": "array" + }, + "frameworkOutput": { + "const": "reference-recipe", + "type": "string" + }, + "nativeReactExport": { + "type": [ + "string", + "null" + ] + }, + "rootClass": { + "type": "string" + }, + "svgSymbols": { + "items": { + "type": "string" + }, + "type": "array" + } + }, + "required": [ + "rootClass", + "cssDependencies", + "svgSymbols", + "controller", + "behavior", + "frameworkOutput", + "applicationResponsibilities", + "events", + "autoMarker", + "nativeReactExport" + ], + "type": "object" + }, + "initialization": { + "type": "string" + }, + "requiredStylesheets": { + "items": { + "type": "string" + }, + "type": "array" + }, + "schemaVersion": { + "const": 1, + "type": "number" + }, + "version": { + "type": "string" + } + }, + "required": [ + "schemaVersion", + "version", + "componentId", + "framework", + "code", + "implementation", + "requiredStylesheets", + "initialization" + ], + "type": "object" +}
- Added
get_endpoints - Changed
get_foundation1 field changed- removed
Input schema / additionalPropertiesRemoved value: -false
- Changed
get_layout1 field changed- removed
Input schema / additionalPropertiesRemoved value: -false
- Changed
get_pattern1 field changed- removed
Input schema / additionalPropertiesRemoved value: -false
- Changed
get_primitives1 field changed- removed
Input schema / additionalPropertiesRemoved value: -false
- Changed
get_setup1 field changed- removed
Input schema / additionalPropertiesRemoved value: -false
- Changed
get_stylesheet1 field changed- removed
Input schema / additionalPropertiesRemoved value: -false
- Changed
get_tokens1 field changed- removed
Input schema / additionalPropertiesRemoved value: -false
- Changed
list_components1 field changed- removed
Input schema / additionalPropertiesRemoved value: -false
- Changed
search1 field changed- removed
Input schema / additionalPropertiesRemoved value: -false
- Changed
suggest_token1 field changed- removed
Input schema / additionalPropertiesRemoved value: -false
- Added
validate_integration - Changed
validate_markup1 field changed- removed
Input schema / additionalPropertiesRemoved value: -false
17 tool updates
v1.0.0- First observed
audit_theme - First observed
check_contrast - First observed
export_tokens - First observed
get_component - First observed
get_component_code - First observed
get_foundation - First observed
get_layout - First observed
get_overview - First observed
get_pattern - First observed
get_primitives - First observed
get_setup - First observed
get_stylesheet - First observed
get_tokens - First observed
list_components - First observed
search - First observed
suggest_token - First observed
validate_markup
TDQS
Scored across 21 tools
Most tools target clearly distinct resources: specs vs. code (get_component vs. get_component_code), single-pair vs. whole-theme contrast (check_contrast vs. audit_theme), and markup vs. integration validation. A few token tools (get_tokens, export_tokens, suggest_token, get_primitives) sit close together, but the descriptions differentiate them well.
Strong and predictable get_<noun> pattern across the majority of tools, with coherent list_/validate_/suggest_/export_ prefixes for the non-retrieval operations. Minor deviations: 'search' is a bare verb without a noun, and validation-type tools use three different verbs (validate_, check_, audit_).
21 tools is on the heavy side but the design-system domain genuinely spans discovery, components, foundations, tokens, primitives, layouts, patterns, migration, validation, and setup. Nearly every tool earns its place with a distinct artefact or operation.
Comprehensive lifecycle coverage: discovery (get_overview, search), specifications, code, tokens and primitives, foundations, patterns, layouts, migration guidance, validation, contrast auditing, setup, and exports. No obvious dead ends for an agent building or maintaining a Sekura interface.
Maintenance
Related MCP Connectors
Access and maintain design system docs, tokens, components, skills, and contexts across any project.
Serves your design system and coding standards to coding agents, so they stop guessing.
Accessible React components, tokens, usage guidance, and install commands for product interfaces.
Jinn gateway MCP — brand DNA, brand kits, design systems, and agency tools behind one bearer token.
Related MCP Servers
- AlicenseNot gradedqualityAmaintenanceA read-only MCP server that provides AI coding agents with a queryable contract for design system tokens, components, patterns, and anti-patterns.17 npm1Apache 2.0
- AlicenseAqualityAmaintenanceRead-only MCP server that exposes a design system's tokens, components, conventions, and deprecations as queryable tools, enabling agents to look up canonical values, assess change impact, and detect hardcoded value drift.81 npmMIT
- FlicenseNot gradedqualityCmaintenanceMCP server that exposes a design system and UX rulebook as tools, enabling AI to generate UI consistent with your design tokens, components, layout rules, accessibility guidelines, and templates. It also provides a review tool to score UI proposals against the design system.-
- AlicenseNot gradedqualityCmaintenanceEnables AI agents to query a design system's components, tokens, icons, patterns, and usage or accessibility guidelines through standardized MCP tools, with pluggable adapters for different data sources.MIT