Bestax
bestax
TypeScript-first React component library for the Bulma v1 CSS framework β 80+ fully typed components β plus a project scaffolder and AI agent tooling.
π At a glance
Library |
|
Scaffolder |
|
Requires | React |
Styles |
|
Icons (optional) | Font Awesome, Material Design Icons, Ionicons, Material Icons, Material Symbols β all optional peer dependencies |
Docs | |
LLM docs | llms.txt (curated index) Β· llms-full.txt (complete docs, one file) |
Agent Skills |
|
Community | Discord Β· Stack Overflow |
If you are an AI agent or LLM: fetch https://bestax.io/llms.txt for a curated index of the full documentation, or https://bestax.io/llms-full.txt for the complete docs in a single file, before answering questions about or writing code with this library. Every page on bestax.io is also available as raw markdown β see the LLMs guide.
Full documentation, guides, and API reference: π https://bestax.io β the docs site is always the most complete and up-to-date resource.
Related MCP server: Salt MCP
π Quick start
New project
Scaffold a Vite app with everything wired up (CSS flavor, icon library, optional AI skills + CLAUDE.md):
npm create bestax@latest my-app
# or: pnpm create bestax my-appUseful flags: -t vite|vite-ts (template), -b complete|prefixed|no-helpers|no-helpers-prefixed|no-dark-mode (CSS flavor), -i fontawesome|mdi|ionicons|material-icons|material-symbols|none (icons), --skills (install the Agent Skills into .claude/skills), -y (accept defaults). See the create-bestax README.
Existing project
npm install @allxsmith/bestax-bulma
# or: pnpm add @allxsmith/bestax-bulmaImport the bundled CSS once (Bulma v1 + the bestax extras), then use components:
import '@allxsmith/bestax-bulma/bestax.css';
import { Button } from '@allxsmith/bestax-bulma';
function App() {
return (
<Button color="primary" onClick={() => alert('Clicked!')}>
Click Me
</Button>
);
}Prefer stock Bulma? import 'bulma/css/bulma.min.css'; works too β you'll just miss the bestax-only components' styles (add @allxsmith/bestax-bulma/extras.css for those).
Theming, dark mode, and configuration are one wrapper away:
import { Theme, ConfigProvider } from '@allxsmith/bestax-bulma';
function Root() {
return (
<Theme isRoot colorMode="system">
{/* colorMode: 'light' | 'dark' | 'system' */}
<ConfigProvider iconLibrary="fa">
<App />
</ConfigProvider>
</Theme>
);
}Installation guide Β· Configuration
π¦ What's in this repo
Path | Package | What it is |
The component library | ||
Project scaffolder β | ||
Codemods for migrating existing apps from other React Bulma libraries | ||
MCP server β component props, examples and skills for AI coding agents | ||
ESLint rules β catches helper-prop values the library silently drops | ||
β | Docusaurus source of bestax.io | |
β | Agent Skills for coding agents (also bundled into |
The published packages are versioned and released independently.
π§© Components
80+ components covering all of Bulma v1, plus bestax extras (Carousel, Dialog, Sidebar, Steps, date/time pickers, and more):
Elements β Button, Table, Tag, Title, Icon, Image, Notification, Progress, Skeleton, Content, Delete, and typed HTML wrappers (Paragraph, Span, Figure, lists, β¦)
Components β Navbar, Modal, Card, Dropdown, Menu, Message, Pagination, Panel, Tabs, Breadcrumb, Toast, Tooltip, Steps, Sidebar, Carousel, Collapse, Dialog, Loading
Form β Field/Control, Input, Select, TextArea, Checkbox(es), Radio(s), Switch, Slider, Rate, File, Numberinput, Autocomplete, Taginput, and DateInput / TimeInput / DateTimeInput pickers
Layout β Container, Section, Hero, Level, Media, Footer
Columns & Grid β classic 12-column flexbox columns and the Bulma v1 CSS Grid
Helpers β
Theme,ConfigProvider,useBulmaClasses,classNames
Migrating from v2? Snackbar was merged into Toast in v3 β see the migration guides.
π¨ Styling and theming
Pick one CSS flavor (all shipped with the library β matching create-bestax -b):
Import | What you get |
| Default. Bulma v1 + bestax extras |
| All classes prefixed |
| Without Bulma helper classes |
| Prefixed, without helpers |
| Without dark-mode styles |
| bestax extras only β for use alongside stock |
| Raw SCSS for full customization |
Dark mode:
<Theme colorMode="dark">(or"system"to follow the OS) β docsBrand colors, fonts, radius: the
Themecomponent overrides Bulma's--bulma-*CSS variables (globally withisRoot, or scoped to a subtree). Default primary color is#1e6b99Class prefixing & icon defaults:
ConfigProvidersetsclassPrefixandiconLibraryfor a whole treeCSS variables reference: docs
π€ For AI Tools
Building with an AI agent (Claude Code, Cursor, Copilot)? bestax-bulma ships LLM-optimized docs:
π LLMs guide β how to use the library with AI tools
π llms.txt β curated index Β· llms-full.txt β the full docs in one file Β· every docs page is also served as raw markdown
π MCP server β let the agent query the library instead of reading it: props (including compound parts), ~900 examples,
--bulma-*variables, and the skills as prompts. Offline, and pinned to the version you have installed.claude mcp add bestax -- npx -y bestax-mcpπ§© Agent Skills β teach your agent the bestax way:
Skill
Use it whenβ¦
bestax-layout-scaffoldTurning a high-level request (dashboard, landing page, β¦) into a responsive page
bestax-formBuilding forms β Field/Control composition and the full input inventory
bestax-themingCustomizing colors, fonts, dark mode via
Themeand--bulma-*variablesbestax-custom-componentBuilding a new custom component beyond stock Bulma, the bestax way
bestax-iconsAdding icons β Icon/IconText and the five supported icon libraries
bestax-optimizeShrinking the built CSS β flavor builds, modular Sass, import hygiene
bestax-migrateMoving an app off react-bulma-components, rbx, bloomer or raw Bulma classes
npx skills add https://github.com/allxsmith/bestax --skill bestax-layout-scaffoldNew projects get the skills automatically with
npm create bestax@latest my-app --skills(plus a generatedCLAUDE.md).
β Why bestax-bulma?
Built for Bulma v1.x β most other React Bulma libraries are stuck on Bulma 0.9.4
100% TypeScript β every component and prop fully typed
One runtime dependency: Bulma β it ships with the library; clean install, fewer security concerns
Lightweight β see the live bundlephobia badge; tree-shakeable ESM + CJS
99% test coverage β enforced in CI by the jest config, not just claimed
Active developer support β issues, questions, and PRs get fast responses
π Hardened by default
Supply-chain security here is a standing constraint on how the project is built, not a checklist we filled in once:
Signed provenance on every release β each tarball carries a sigstore attestation linking it to the exact commit and CI run that produced it. Check it yourself with
npm audit signatures, or on the package page's Provenance section.npm OIDC trusted publishing β releases authenticate with short-lived, per-run tokens. There is no long-lived
NPM_TOKENin this repo to steal.Signed release commits β release commits and tags are GPG-signed, and
mainrejects unsigned commits outright.Socket.dev scans every PR β dependency changes are checked for malware, install scripts, obfuscated code, and privilege escalation before they can reach
main.Every GitHub Action pinned to a full commit SHA β no movable tags, so a compromised action release can't roll silently into the pipeline.
Install scripts blocked by default β dependency
install/postinstallscripts don't run unless explicitly allow-listed one at a time, each with a written rationale (pnpm-workspace.yaml).3-day dependency cooldown β freshly published versions won't install. This is the main defense against account-takeover worms, which are usually yanked within hours.
Frozen lockfile + audit gate β CI installs exactly what the reviewed lockfile resolves and fails on high-severity advisories.
CodeQL, Dependency Review, and Dependabot β static analysis over both the source and the workflow files, PR-level advisory blocking, and weekly grouped dependency updates.
Layered AI review before merge β every PR gets a CodeRabbit review plus an independent adversarial Claude review that deliberately runs a different model from the one writing AI-authored changes. On top of that,
mainrequires green CI, one approving review, and a human merge. AI agents are structurally barred from editing the workflows, release config, or supply-chain settings that gate them.Inbound issues and PRs are security-triaged β a read-only AI pass flags code crafted to harm whoever runs it, prompt injection aimed at our own automation, and social engineering. Flagged items are labeled and refused by every AI entry point until a human clears them. It fails closed, so an inconclusive scan flags rather than passes, and the model session itself has no write tools β a separate deterministic step applies the label, so the AI never posts or acts on anything.
Full detail: SECURITY.md Β· Security guide
π¬ Community
Contributing
Want to contribute or run the project locally? See CONTRIBUTING.md. In short:
corepack enable && pnpm install --frozen-lockfile
pnpm all # build, typecheck, test + coverage, lint β the pre-PR gateThis is a pnpm + Turborepo monorepo; contributor-facing AI context lives in CLAUDE.md (mirrored for other tools in AGENTS.md).
π Attribution
bestax-bulma is built on top of the incredible Bulma CSS framework, Β© Jeremy Thomas and licensed under the MIT License. Some example content and documentation is adapted from the Bulma website (CC BY-NC-SA 4.0), Β© Jeremy Thomas.
If you find Bulma useful, please consider sponsoring Jeremy Thomas to support its continued development.
We are not affiliated with Bulma or Jeremy Thomas in any way β we're just big fans of the Bulma framework!
License
Source code licensed MIT
Available Tools
10 toolsget_componentGet component documentationARead-onlyIdempotent
Import statement, summary and prop table for one component. Add include for examples, CSS variables, accessibility notes or related components.
| Name | Required | Description | Default |
|---|---|---|---|
| name | Yes | Component name, e.g. "Button" or "Navbar" | |
| include | No | Extra sections. Defaults to ["props"]. |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
Annotations already declare readOnly, idempotent, non-destructive and closed-world, so the safety profile needs no restating. The description adds genuinely useful behavior the annotations cannot convey: the default return set (import, summary, prop table) and the fact that extra sections are opt-in via `include`.
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 short sentences with no filler. The core return contract is front-loaded and the optional-extension hint follows it, so nothing is wasted.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
With no output schema, the description carries the burden of explaining returns and does so adequately by naming the three default sections and the optional ones. It is slightly thin on the shape of the response (e.g. how the import statement is formatted), but it is sufficient for correct invocation.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema coverage is 100%, so both parameters are already documented, including the default `["props"]` and the example format for `name`. The description reinforces that `include` adds sections but adds no syntax or semantics beyond the schema, matching 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?
States a specific resource (one component) and enumerates the returned content (import statement, summary, prop table), which is more concrete than a bare 'get component'. It does not explicitly name siblings like get_props or get_examples, so the agent must infer that this is the aggregate entry point rather than a single-section 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 second sentence tells how to widen the result via `include`, which implicitly signals this tool can subsume get_props/get_examples/get_css_variables. However, it never states when to prefer the narrower sibling tools or when to use this one over list_components, so usage is implied rather than directed.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
get_css_variablesGet CSS and Sass variablesARead-onlyIdempotent
The --bulma-* custom properties a component reads, with their Sass names and defaults. This is how you restyle bestax β reach for these before writing custom CSS. Omit component to search across all of them.
| Name | Required | Description | Default |
|---|---|---|---|
| query | No | Substring of a variable name, e.g. "radius" | |
| component | No |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
Annotations already declare readOnly, idempotent, closed-world, non-destructive, so safety is covered. The description adds value beyond that by disclosing the return content (custom properties plus Sass names and defaults), which matters since no output schema exists. It does not mention result volume or ordering, hence not a 5.
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 sentences, front-loaded with what is returned, then usage guidance and the parameter behavior note. Every sentence carries information; the 'reach for these before writing custom CSS' clause is mildly promotional but functions as guidance.
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 two-parameter read-only tool with no output schema, the description covers the returned data shape, the search scope, and the omit-to-search-all behavior. What remains unstated (query matching semantics beyond substring, result ordering) is minor.
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 50%: `query` is documented in the schema with an example, but `component` has no schema description. The description compensates for `component` by explaining that omitting it searches all components, but adds nothing about how `query` matches or how the two interact. Baseline 3 for partial 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?
States a specific resource ('the --bulma-* custom properties a component reads, with their Sass names and defaults'), which is concrete and distinguishable from get_props and lookup_bulma_classes. It stops short of explicitly contrasting itself with those siblings, but the resource is 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?
'This is how you restyle bestax β reach for these before writing custom CSS' gives a clear when-to-use context, and 'Omit `component` to search across all of them' explains the broad-search case. No alternative sibling is named for when NOT to use it, so it falls short of a 5.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
get_examplesGet usage examplesBRead-onlyIdempotent
Working examples from the component's documentation page. Every one is executed on the docs site, so they compile against this version.
| Name | Required | Description | Default |
|---|---|---|---|
| limit | No | ||
| query | No | Filter by example heading or code, e.g. "loading" | |
| component | Yes |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
Annotations already declare readOnlyHint=true, idempotentHint=true, and destructiveHint=false, so the safety profile is covered. The description adds meaningful context beyond annotations: examples are executed on the docs site and compile against the current version, which tells the agent the return quality and validity.
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 compact sentences with no filler. The most useful informationβthat examples are executed and version-compatibleβis front-loaded after the resource statement.
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 tool with no output schema, the description is adequate at a high level, but it leaves parameter semantics to a schema that is only 33% documented. An agent still lacks explicit guidance on required fields, filtering, and limits, so it is not fully complete for reliable invocation.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema description coverage is only 33%, with limit and component undocumented in the schema. The description does not compensate: it never mentions the required component parameter, the limit cap, or the query filter. It only implies a component via 'the component's documentation page', which is insufficient for correct invocation.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description states a specific resource ('working examples from the component's documentation page') and adds that they are executed and version-matched. It clearly identifies the tool as retrieving examples, but does not differentiate from siblings like get_props or get_component beyond the implicit resource name.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
There is no explicit when-to-use guidance, no conditions for selecting this over alternatives, and no stated prerequisites. The closest signal is 'from the component's documentation page', which implies usage but leaves the agent to infer when this tool is appropriate versus get_props or get_component.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
get_helper_propsGet helper propsARead-onlyIdempotent
The helper props every bestax component accepts β spacing, colour, typography, flexbox, visibility β and their valid values. Call this BEFORE writing an inline style or a utility class by hand; this library expects those to be props.
| Name | Required | Description | Default |
|---|---|---|---|
| group | No | Filter to one area, e.g. "spacing", "flex", "color" |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
Annotations already declare readOnly=true, idempotent=true, destructive=false and closed-world, so the safety profile is fully covered. The description adds one useful behavioral constraint β the library's idiom that styling should go through props rather than inline styles β but says nothing about the shape or size of the returned prop set.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
Two sentences, zero filler. The scope statement comes first and the actionable instruction ('call this BEFORE...') is front-loaded before the rationale.
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 lookup tool with annotations covering safety and no output schema, the definition is nearly complete: it says what is returned and when to call it. Minor gap is that it does not hint at how large/structured the returned prop list is or whether results are grouped.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema coverage is 100% and the single optional 'group' param is already documented with examples, so the baseline is 3. The description goes further by enumerating the areas (spacing, colour, typography, flexbox, visibility) that correspond to the group filter, reinforcing the valid filter vocabulary.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
States a specific verb+resource: it returns the helper props every bestax component accepts plus their valid values, with concrete categories (spacing, colour, typography, flexbox, visibility). It is clear on its own, but it does not explicitly differentiate itself from close sibling names like get_props or get_css_variables.
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?
Gives an explicit triggering condition: call this BEFORE writing an inline style or utility class by hand, because the library expects those to be props. That is strong context, but it never names an alternative tool (e.g. get_css_variables or lookup_bulma_classes) for agents that genuinely need raw CSS/classes.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
get_propsGet propsARead-onlyIdempotent
The prop table for a component, or for one part of a compound family (pass a dot-path like "Navbar.Brand"). Cheaper than get_component when the props are all you need.
| Name | Required | Description | Default |
|---|---|---|---|
| path | No | Dot-path of a subcomponent, e.g. "Navbar.Brand" | |
| component | Yes | Component name, e.g. "Navbar" |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
Annotations already declare readOnly, idempotent, non-destructive and closed-world, so the safety profile is covered structurally. The description adds a cost/efficiency trait ("cheaper than get_component"), which is genuinely useful context an annotation cannot express. It does not describe output shape or behavior for invalid dot-paths.
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 short sentences, no filler, with the resource scope front-loaded and the comparative cost note placed last. Every clause 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 two-parameter read tool with no output schema, the description covers what is returned (the prop table), the subcomponent addressing mode, and the reason to prefer it. Missing only the relationship to get_helper_props.
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 both parameters are documented there, including the same "Navbar.Brand" example. The description reinforces the dot-path concept for compound families but adds no syntax or format detail beyond the schema, so baseline 3 applies.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description states the specific resource (the prop table) and its scope (whole component or one part of a compound family), which is more precise than the title alone. It also names and contrasts with sibling get_component. It stops short of differentiating from the closely related get_helper_props, which is also a props-adjacent sibling.
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?
"Cheaper than get_component when the props are all you need" gives an explicit selection rule against an alternative. No exclusions beyond that, and get_helper_props is left unaddressed, so it is not fully complete.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
get_skillGet an agent skillARead-onlyIdempotent
A skill's instructions, or one of its reference documents. Load the skill first; pull a reference only when you need that depth.
| Name | Required | Description | Default |
|---|---|---|---|
| name | Yes | Skill name, e.g. "bestax-theming" or "theming" | |
| reference | No | Reference id from list_skills, e.g. "css-variables" |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
Annotations already declare readOnlyHint, idempotentHint, destructiveHint=false and openWorldHint=false, so the safety profile is fully covered. The description adds the two-mode behavior (instructions vs. reference) but says nothing about content size, failure modes for unknown skill names, or prerequisites.
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 short sentences, front-loaded with what the tool returns before the sequencing advice. Every clause earns its place with no redundancy.
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 two-parameter read tool with no output schema and full annotation coverage, the description covers both invocation modes adequately. It stops short of explaining what a 'skill' is or how names resolve, which is a minor gap given the sibling list_skills.
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 examples for both 'name' and 'reference', so the schema does the heavy lifting. The description adds a usage nuance for 'reference' (pull only when depth is needed) but no format or syntax beyond 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 names the resource (a skill's instructions or one of its reference documents) and the retrieval mode, distinguishing it from list_skills which enumerates them. The verb is implied rather than stated ('A skill's instructions'), but an agent can still tell what it returns.
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?
It gives explicit sequencing guidance ('Load the skill first') and a condition for the optional reference parameter ('only when you need that depth'). It does not name siblings like list_skills as alternatives, but the when/when-not advice for the two modes is clear.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
list_componentsList componentsARead-onlyIdempotent
Every documented component with a one-line purpose, grouped by category. Cheap β use it to find the right name before calling get_component.
| Name | Required | Description | Default |
|---|---|---|---|
| category | No | elements, components, form, columns, grid, layout, helpers |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
Annotations already declare read-only, idempotent, non-destructive and closed-world behavior, so the safety burden is lifted. The description adds value annotations do not cover: cost ('Cheap') and output structure ('one-line purpose, grouped by category'). It stops short of mentioning result size or pagination, keeping it from a 5.
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 short sentences, zero filler. The output shape is front-loaded and the routing instruction follows immediately, so the agent gets the essential facts in the first read.
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-required-parameter enumeration tool with no output schema, the description covers purpose, return shape and routing well. Minor omissions, such as roughly how many components come back or whether the result is exhaustive across categories, keep it just under a 5.
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 single 'category' parameter is fully documented in the schema at 100% coverage, including the allowed values, so the schema does the heavy lifting. The description adds nothing about how grouping or filtering by category behaves, which is the baseline 3 case.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
States a specific verb+resource ('list components'), the scope ('every documented component'), and the return shape ('one-line purpose, grouped by category'). It also names the sibling it feeds into (get_component), so an agent can distinguish it from a detail-fetching call without opening a 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?
Prescribes the workflow explicitly: call this first to find the right name, then call get_component. It also gives a selection cost signal ('Cheap'), which is exactly the kind of routing guidance an agent needs when choosing among list_skills, search_bestax and the get_* detail tools.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
list_skillsList agent skillsARead-onlyIdempotent
The bestax Agent Skills β task-level guides for forms, theming, layout scaffolding, icons, custom components, migration and CSS size. Read one with get_skill when a task matches.
| 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, idempotentHint=true and destructiveHint=false, so the safety profile is fully covered. The description adds that entries are task-level guides read via get_skill, which is useful context, but says nothing about catalog size, grouping, or freshness that the structured fields don't already convey.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
Two short sentences with zero waste: the resource and its categories come first, and the routing hint to get_skill follows. Every clause 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 parameterless, read-only catalog tool with no output schema, the description supplies enough to act: what the entries are, what topics they cover, and which tool consumes them. It could say more about how results are presented (grouped by category? one per skill?), 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?
The tool takes zero parameters, so there is nothing for the description to disambiguate beyond confirming it is a parameterless enumeration. Baseline 4 applies when there are no parameters to document.
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?
Names the resource (bestax Agent Skills) and enumerates its scope (forms, theming, layout scaffolding, icons, custom components, migration, CSS size), so an agent knows this is a catalog of task-level guides. The listing verb is implied rather than stated, but the sibling routing ('Read one with get_skill') makes the distinction from get_skill 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?
Clearly states the follow-up workflow: browse this list, then call get_skill 'when a task matches'. It gives a clear context for use but never states when not to call it or how it relates to the other siblings (search_bestax, list_components).
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
lookup_bulma_classesLook up Bulma classesARead-onlyIdempotent
The bestax component and props for a Bulma class string, one row per class: "button is-primary", "columns is-mobile", "has-text-centered mt-4". Call this BEFORE writing a Bulma class by hand, and when converting existing Bulma markup. Pass the tag the classes sit on when there is one.
| Name | Required | Description | Default |
|---|---|---|---|
| tag | No | The lowercase tag the classes are on, e.g. "a" or "h2" | |
| classes | Yes | The class string, e.g. "button is-primary is-large" |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
Annotations already declare readOnly, idempotent, non-destructive, and closed-world, so safety is covered. The description adds value beyond them by disclosing the return shape ('one row per class'), which matters since there is no output schema, and by flagging the optional tag pass-through.
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?
Front-loaded with the core behavior, then usage, then the tag hint; every sentence carries information. The inline class-string examples aid selection but make it slightly longer than strictly needed.
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 two-parameter read-only lookup with a fully documented schema and annotations, the description supplies the missing return-format cue and the usage trigger. Nothing essential for correct invocation appears absent, though the row/field shape is only gestured at.
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 (tag, classes) are already documented with format and examples in the schema. The description's 'pass the tag the classes sit on when there is one' hints that tag is contextually optional, but adds little beyond the schema baseline.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
States a specific verb and resource: maps a Bulma class string to its bestax component and props, one row per class. The concrete examples ('button is-primary', 'columns is-mobile') and the class-string framing distinguish it from sibling lookups like get_component and get_props.
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?
Gives explicit when-to-use guidance: call BEFORE hand-writing a Bulma class, and when converting existing markup, plus to pass the tag when one exists. It does not name an alternative tool or state when not to use it, so it stops short of a 5.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
search_bestaxSearch bestaxARead-onlyIdempotent
Search components, props, usage examples, CSS variables and agent skills at once. The entry point β each hit names the tool to call for the full thing. Use this before guessing a component name.
| Name | Required | Description | Default |
|---|---|---|---|
| kind | No | Restrict to one kind of result. Defaults to all. | |
| limit | No | ||
| query | Yes | What you are looking for, e.g. "date picker" or "spacing" |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
Annotations already declare readOnly, idempotent, non-destructive, closed-world, so the safety profile is covered. The description adds one useful behavioral fact about results (each hit names the next tool), but with no output schema it leaves pagination, ranking, and result shape largely unstated.
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 short sentences, front-loaded with what is searched and immediately followed by the routing role. No filler or restated name/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 search tool with no output schema, the description usefully explains the return semantics (hits name the tool to call next). It is nearly complete, though it omits anything about result volume, limits, or ranking.
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 67% with 'kind' and 'query' described in-schema; the description adds no parameter-level detail beyond the schema, and 'limit' is undocumented entirely. This matches the baseline for high-but-incomplete 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?
States a specific verb (search) and enumerates the resources covered (components, props, examples, CSS variables, skills). The phrase 'entry point β each hit names the tool to call for the full thing' cleanly differentiates it from siblings like get_component and get_props.
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?
Gives clear context ('The entry point') and an explicit directive ('Use this before guessing a component name'), which steers the agent to search-first behavior. It implies the follow-up routing but does not name specific alternatives or when-not conditions.
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.
10 tool updates
- First observed
get_component - First observed
get_css_variables - First observed
get_examples - First observed
get_helper_props - First observed
get_props - First observed
get_skill - First observed
list_components - First observed
list_skills - First observed
lookup_bulma_classes - First observed
search_bestax
TDQS
Scored across 10 tools
Each tool targets a distinct lookup type (search, list, component detail, props, examples, CSS variables, helper props, class mapping, skills). The only mild overlap is get_component vs get_props, since get_component can also return a prop table, but the descriptions explicitly frame get_props as the cheaper subset so the choice is clear.
Names are uniformly snake_case verb_noun patterns built from a small verb set (search_, list_, get_, lookup_). The convention is applied consistently across all ten tools, making the surface predictable.
Ten tools is well within the ideal range and each earns its place by covering a distinct documentation facet. Nothing feels padded or missing in the tool roster itself.
For a component-library docs domain, the surface covers discovery (search/list), detail (component/props/examples/CSS), styling guidance (helper props, Bulma mapping), and task guides (skills). Coverage is strong; minor gaps like explicit version/compatibility lookup are not deal-breakers.
Maintenance
Related MCP Connectors
Live React design-system APIs, patterns, and code validation so AI agents build real UI, not slop.
Serves your design system and coding standards to coding agents, so they stop guessing.
Agent-Native Google Slides - generate and edit React presentations
Get up-to-date, version-specific documentation and code examples from official sources directly inβ¦
Related MCP Servers
- FlicenseNot gradedqualityDmaintenanceProvides AI assistants with access to private React component library documentation, props, and code examples through type-safe TypeScript integration.-
- AlicenseAqualityDmaintenanceEnables AI agents to build React applications using JP Morgan Chase's Salt Design System by providing real-time access to component APIs, documentation, and accessibility guidelines. It supports tasks such as scaffolding new projects, building UI patterns, and converting Figma designs into Salt code via the Model Context Protocol.66 npm1MIT
- AlicenseAqualityDmaintenanceProvides documentation and component references for the Reacticx React Native library, including props, code examples, and installation guides. It enables users to search through over 90 components and retrieve setup commands for project dependencies.511 npm2MIT
- AlicenseNot gradedqualityBmaintenanceProvides a real API for coding agents to look up design system components, props, and tokens, preventing guessed answers.7MIT