Sekura Design MCP
This MCP server provides comprehensive access to the Sekura Design System, enabling agents to build accessible, dark-mode-first interfaces without guessing. Capabilities include:
Explore:
get_overviewfor a full map,searchfor full-text search across components/foundations/patterns/layouts/tokens, andlist_componentsto browse 55 components by category/maturity.Retrieve specifications:
get_foundationfor design reasoning,get_componentfor full specs (anatomy, states, accessibility, dark mode),get_layoutfor 9 page blueprints,get_patternfor 15 UX patterns, andget_tokens/get_primitivesfor 112 semantic tokens and raw color ramps.Generate code:
get_component_codeproduces paste-ready code in 8 frameworks (HTML, CSS, React, Vue, Svelte, Angular, Blazor, Web Component).get_setupprovides project scaffold, andget_stylesheetreturns the full CSS.Export tokens:
export_tokenssupports 11 formats: CSS, SCSS, DTCG JSON, Tailwind v3/v4, JS/TS, Swift, Android XML, Figma, flat JSON.Find tokens:
suggest_tokenmaps plain-language intent to the correct semantic token with per-theme values and rationale.Validate:
check_contrastgives WCAG contrast verdicts for any color pair,audit_themeruns 292 contrast checks across themes, andvalidate_markuplints HTML/CSS for accessibility failures.Resources & prompts: Exposes token CSS, foundations, and guided workflows (build-page, review-ui, implement-dark-mode). Health checks and HTTP endpoints for tokens are also available.
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.
67 components · 15 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
101-page documentation site — generated from the same data — that
explains it with live demos, a full colour guide and worked examples.
Integration and migration
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.
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: Design System MCP Server
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 101-page documentation site — explanations, a full colour guide, a type specimen, live demos, a complete component reference and nine 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:2.0.0"]
# 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:2.0.0
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:2.0.0"]
}
}
}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 and tokens. |
| 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. |
| 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. |
Resources
sekura://tokens/css · sekura://tokens/dtcg · sekura://foundations/principles ·
sekura://foundations/dark-mode
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 |
| 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 |
Plus a multi-arch image to GHCR, tagged 1.2.3, 1.2, 1 and latest:
docker run -d -p 8080:8080 ghcr.io/mictsi/sekuradesignmcp:2.0.0and 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 101-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: 17 tools, 4 resources, 3 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.
Odd-numbered Node majors are never promoted to LTS, so a dependency bot
offering node:25-alpine is offering a runtime that reaches end-of-life in
months. npm run check:deps fails the build if one lands.
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. Only two steps need a browser — the behaviour contracts and the RTL
regression — and they are skippable:
Command | Needs |
| Docker |
| Node and npm |
| Node, npm, and a Playwright browser |
--no-browser genuinely avoids Playwright rather than tolerating its absence:
with PLAYWRIGHT_BROWSERS_PATH pointed at nothing, it exits 0 while the full
build exits 1 at the behaviour step.
Install the browser once with node node_modules/playwright-core/cli.js install chromium firefox webkit if you want the
full local build.
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:2.0.0If 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:2.0.0With 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 101-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: 101 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.
Available Tools
19 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_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". |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
Annotations already declare readOnlyHint=true, so a safe read operation is known. The description adds what content the call returns (spec components) but does not describe edge behaviors such as invalid ids, aliases, or response format, which are not covered by annotations either; this is acceptable for a simple lookup.
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 dense, front-loaded sentence communicates the core purpose immediately and then uses a comma-separated list of spec areas to add detail without unnecessary prose. Every listed category 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 single-id lookup with no output schema, the description gives a comprehensive picture of what the returned spec includes, from anatomy through do/don't guidance. It doesn't mention error behavior or how to discover valid component ids, but the required id parameter and sibling search/list tools cover that 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 description coverage is 100%: the single required id parameter is fully described with examples ('button', 'table', 'combobox'). The description adds no parameter-level information, but with fully covered schema 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-resource pairing ('complete spec for one component') and enumerates the exact facets covered (anatomy, variants, props, accessibility contract, etc.), which clearly separates this from list_components and get_component_code. A single component spec vs a search or list distinguishes it without needing to mention siblings.
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 makes clear that this is for retrieving the full specification for a single named component, which implies the main use case. It does not explicitly name alternatives or exclusion conditions, but the context is sufficiently clear that an agent can decide when to call it.
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?
With readOnlyHint=true and openWorldHint=false already in annotations, the description adds meaningful behavioral detail: HTML output includes ARIA wiring, CSS is token-based, framework outputs are editable recipes with lifecycle wiring, and dependencies/application responsibilities must be considered. This goes beyond the annotations without contradicting them.
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 compact, well-structured across HTML/CSS and framework cases, and every sentence contributes useful information. There is no filler or repetition of schema details.
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 the rich schema, output schema, and annotations, the description covers the essential behavior and responsibilities. It could be more complete by explicitly routing the agent away from get_component, but it is not missing critical invocation or safety 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?
Schema description coverage is 100%, so the parameters are already fully documented. The description adds only a high-level summary of framework behavior and does not introduce new parameter meaning beyond what the schema's framework enum already provides. Baseline 3 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 clearly states the tool returns production code for a component in a requested framework, with specific behavior for HTML, CSS, and framework options. It is specific about verb and resource, though it does not explicitly differentiate itself from the similarly named sibling 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?
The description implies when to use the tool through 'paste-ready component code' and gives a follow-up instruction to inspect implementation metadata. However, it does not explicitly state when to use this tool over alternatives like get_component, nor does it provide exclusions or when-not-to-use guidance.
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 the description's 'Read the relevant foundation' is consistent. Beyond that, it adds the context that the document conveys 'the reasoning behind the system' and which design topics are covered, but it does not describe the output shape or any retieval specifics. The added behavioral content is modest, so a 3 is appropriate.
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 keep it efficient, and the actionable instruction 'Read the relevant foundation before implementing in that area' is placed second. The first sentence is a long comma-separated list that overlaps the enum, but it is not bloated and still helps set scope without reading 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 single-parameter, read-only retrieval tool with a fully enumeratied schema, the description provides the essential selection context ('relevant foundation before implementing') and the resource scope. It does not describe response structure, but the document-like nature of the tool and lack of an output schema make this acceptable.
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 fully documents all valid ids. The description's topic list largely duplicates the enum, and 'read the relevant foundation' is a usage hint rather than new param meaning. With full schema coverage, the baseline of 3 holds.
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 the resource ('foundation') and enumerates the exact topics it covers (principles, colour, typography, etc.), so an agent can tell this is a reference-document getter. It stops short of explicitly saying 'Retrieves the foundation document for the supplied id,' and doesn't mention sibling alternatives, which keeps it at a 4 rather than 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 directive 'Read the relevant foundation before implementing in that area' gives clear temporal and contextual guidance for when to use the tool. It does not mention exclusions or compare with sibling tools like get_component or get_tokens, so it lacks the explicit alternatives needed for a 5.
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_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 and tokens. 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 description does not need to cover side-effect safety. It adds useful scope context by naming the five result kinds, but it does not disclose behavior like result ranking, snippet content, or pagination beyond the schema-defined limit parameter.
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 unnecessary words. The core search scope is front-loaded, and the use-case guidance is concise, making the purpose immediately understandable.
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 search tool, the combination of description, schema, and annotations covers the essential information an agent needs. It could be slightly more complete by naming one or two sibling tools to avoid, but nothing critical is missing for invoking 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%, with meaningful descriptions for query, kinds, and limit, including examples and defaults. The tool description adds little parameter-level meaning beyond what the schema already provides, so the baseline score of 3 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 opens with a specific verb and resource: 'Full-text search across components, foundations, patterns, layouts and tokens.' This clearly differentiates the tool from the many sibling get_* and list_* tools, which target specific design-system items rather than cross-cutting discovery.
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 'Use when you know what you need but not where it lives' provides a clear condition for choosing this tool. It implies that direct access tools like get_component or get_layout are preferable when the exact location is known, though it does not name those alternatives explicitly.
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 integrationARead-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?
The readOnlyHint already establishes that this is a read-only tool, and the description adds meaningful behavioral detail by stating it returns structured findings and fixes rather than applying them, and that it does not execute callbacks. This clarifies the side-effect boundary beyond what the annotation alone provides.
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 front-loads the concrete validation scope, and the second immediately states return behavior and a crucial limitation. 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 an 8-parameter tool with low schema coverage, the description manages to communicate the core input domains, the structured return type, and the lack of callback execution. The output schema can carry the detailed return structure, but the description still leaves the 'controllers' parameter and usage context undefined, so it is not 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 only 13%, so the description must compensate. It adds semantic context by linking params to concepts like 'stylesheet dependencies', 'SVG symbols', 'ID references', and 'declared application events'. However, the 'controllers' parameter is never mentioned, and some mappings like 'ID references' remain ambiguous between componentIds and externalIds.
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 ('Check') and enumerates the exact integration concerns: component markup, stylesheet dependencies, SVG symbols, ID references, initialization, and declared application events. It also explicitly states what the tool does not do ('does not execute callbacks'), which further distinguishes it from a generic validator or execution tool.
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 scope is clear enough that an agent can infer this is for integration validation, but the description gives no explicit guidance on when to choose validate_integration over siblings like validate_markup, check_contrast, or audit_theme. There are no when-not-to-use or alternative-routing statements.
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.
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 19 tools
Most tools cleanly map to distinct resources or actions, and the consistent prefixes make routing straightforward. The only real ambiguities are validate_integration vs validate_markup and get_tokens vs export_tokens, but their descriptions clarify the different intents.
The set overwhelmingly follows a snake_case verb_noun pattern such as get_component, export_tokens, and audit_theme. The single bare verb 'search' is a minor deviation from an otherwise uniform convention.
At 19 tools, the surface sits in the 16–25 range that feels heavy for agent navigation, even though the design-system domain is broad. The tools are largely non-redundant, so the count is borderline rather than excessive.
The server covers discovery, retrieval, validation, export, and integration setup with no obvious dead ends for a read-only design-system knowledge and validation server. get_overview ties the surface together and points to every relevant tool.
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 gradedqualityCmaintenanceMCP server that exposes your design system components and tokens to AI agents, preventing duplicate component creation and hardcoded token values.5 npm9MIT
- AlicenseNot gradedqualityDmaintenanceProvides resources, tools, and prompts for a Design System via MCP protocol, enabling component search, reading, and related component discovery.205 npmMIT
- AlicenseNot gradedqualityAmaintenanceA read-only MCP server that provides AI coding agents with a queryable contract for design system tokens, components, patterns, and anti-patterns.6 npm1Apache 2.0
- AlicenseAqualityFmaintenanceComprehensive MCP server for end-to-end UI development, offering tools to generate components, manage design tokens, audit accessibility, autofix issues, inspect live pages, compare screenshots, and more across multiple frameworks.137 npmMIT