MCP Frontend Tools Server
Server Configuration
Describes the environment variables required to run the server.
| Name | Required | Description | Default |
|---|---|---|---|
No arguments | |||
Instructions
Guidance the server publishes about itself, which clients place ahead of the tool catalog so the model reads it before choosing anything.
This server publishes no instructions, or was last inspected before Glama recorded them.
Capabilities
Features and capabilities supported by this server
Protocol revision2025-11-25
| Capability | Details |
|---|---|
| tools | {
"listChanged": true
} |
Tools
Functions exposed to the LLM to take actions
| Name | Description |
|---|---|
| axe_auditA | Run the axe-core accessibility ruleset against an HTML string (jsdom) or a live URL (Playwright). Returns violations grouped by impact with fix guidance and helpUrl links. |
| page_screenshotA | Launch headless Chromium, navigate to a URL, and save a PNG screenshot. Supports element selectors, full-page capture, dark mode, and custom viewports. Requires the optional |
| bundle_budget_checkA | Walk a build directory, measure raw + gzip (+ optional brotli) sizes per file, and flag files that exceed a global or per-entry KB budget. CI-friendly JSON output. |
| design_token_diffA | Diff two design-token JSON files (W3C DTCG / Style Dictionary style). Reports added, removed, and changed tokens with $type-aware classification. Useful for PR review of design-system changes. |
| storybook_story_runA | Load a single Storybook story in headless Chromium via iframe.html, optionally screenshot it, and run an axe-core audit against the rendered output. Requires |
| scaffold_react_componentB | Write a TypeScript React component, optional test, and optional Storybook story into outDir. Supports functional, forwardRef, and polymorphic ( |
Prompts
Interactive templates invoked by user choice
| Name | Description |
|---|---|
No prompts | |
Resources
Contextual data attached and managed by the client
| Name | Description |
|---|---|
No resources | |
TDQS
Scored across 6 tools
Each tool targets a distinct frontend concern: accessibility auditing, bundle sizing, design token diffs, page screenshots, component scaffolding, and Storybook testing. No two tools could be confused.
All tool names follow a consistent 'object_action' or 'domain_action' pattern with lowercase underscores (e.g., axe_audit, design_token_diff). No mixing of conventions.
Six tools is an appropriate size for a frontend utility toolkit. Each tool provides a distinct, useful function without being overwhelming or too sparse.
The set covers key frontend tasks: accessibility, performance, design tokens, component generation, and testing. A minor gap is the lack of a linting or formatting tool, but the surface is coherent for its scope.