MCP Frontend Tools Server

by ashios15

Overview Schema Related Servers Score Discussions

TypeScript

Local

Server Quality Checklist

Profile completionA complete profile improves this server's visibility in search results.

Latest release: v2.0.0
Disambiguation5/5
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.
Naming Consistency5/5
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.
Tool Count5/5
Six tools is an appropriate size for a frontend utility toolkit. Each tool provides a distinct, useful function without being overwhelming or too sparse.
Completeness4/5
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.
Average 4/5 across 6 of 6 tools scored. Lowest: 3.2/5.
See the Tool Scores section below for per-tool breakdowns.
- No community issues in the last 6 months
- 0 commits in the last 12 weeks
- No stable releases found
- No critical vulnerability alerts
- No high-severity vulnerability alerts
- No code scanning findings
- CI status not available
Add a LICENSE file by following GitHub's guide. Once GitHub recognizes the license, the system will automatically detect it within a few hours.
If the license does not appear after some time, you can manually trigger a new scan using the MCP server admin interface.
MCP servers without a LICENSE cannot be installed.
This repository includes a README.md file.
No tool usage detected in the last 30 days. Usage tracking helps demonstrate server value.
Tip: use the "Try in Browser" feature on the server page to seed initial usage.
Add a glama.json file to provide metadata about your server.
If you are the author, simply .
If the server belongs to an organization, first add glama.json to the root of your repository:
```
{
  "$schema": "https://glama.ai/mcp/schemas/server.json",
  "maintainers": [
    "your-github-username"
  ]
}
```
Then . Browse examples.
Add related servers to improve discoverability.

How to sync the server with GitHub?

Servers are automatically synced at least once per day, but you can also sync manually at any time to instantly update the server profile.

To manually sync the server, click the "Sync Server" button in the MCP server admin interface.

How is the quality score calculated?

The overall quality score combines two components: Tool Definition Quality (70%) and Server Coherence (30%).

Tool Definition Quality measures how well each tool describes itself to AI agents. Every tool is scored 1–5 across six dimensions: Purpose Clarity (25%), Usage Guidelines (20%), Behavioral Transparency (20%), Parameter Semantics (15%), Conciseness & Structure (10%), and Contextual Completeness (10%). The server-level definition quality score is calculated as 60% mean TDQS + 40% minimum TDQS, so a single poorly described tool pulls the score down.

Server Coherence evaluates how well the tools work together as a set, scoring four dimensions equally: Disambiguation (can agents tell tools apart?), Naming Consistency, Tool Count Appropriateness, and Completeness (are there gaps in the tool surface?).

Tiers are derived from the overall score: A (≥3.5), B (≥3.0), C (≥2.0), D (≥1.0), F (<1.0). B and above is considered passing.

Tool Scores

Behavior2/5
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations provided, so description must disclose behavioral traits. It mentions file creation and that outDir is created if missing, but does not state whether files are overwritten, side effects, or required permissions. This is insufficient for a write operation.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Conciseness4/5
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is a single sentence, concise and front-loaded, but could benefit from a second sentence to improve clarity without significant length increase.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Completeness2/5
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
With 6 parameters, no output schema, and no annotations, the description is incomplete. It does not explain return value, error conditions, or full behavior of the props parameter.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Parameters2/5
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema description coverage is low (17%), and the description does not explain parameters like variant, props, withTests, withStory. It mentions variants but does not elaborate on differences between functional, forwardRef, polymorphic.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Purpose5/5
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states it writes a TypeScript React component with optional test and Storybook story, and supports three variants. This distinguishes it from sibling tools which are unrelated (auditing, budget, screenshots).
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Usage Guidelines3/5
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description provides basic context but lacks explicit when-to-use or when-not-to-use guidance. Since siblings are in different domains, the need for alternatives is less, but no prerequisites 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.
Behavior3/5
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations, the description must cover behavioral traits. It discloses the main actions (load, screenshot, audit) and the need for Playwright, but lacks details on side effects like browser resource usage, error handling, or that it returns axe results.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Conciseness5/5
Is the description appropriately sized, front-loaded, and free of redundancy?
Two sentences with no fluff. The purpose and key requirement are front-loaded in the first sentence, making it efficient.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Completeness2/5
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
The tool has 7 parameters, nested objects, and no output schema. The description omits return values, parameter interactions, and behavioral details like error scenarios or required environment setup, making it incomplete for a complex tool.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Parameters2/5
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema description coverage is 57%, so the description should add meaning, but it does not explain parameters beyond the schema. It only gives a generic summary, leaving parameter nuances (e.g., viewport, colorScheme, timeoutMs) solely to the schema.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Purpose5/5
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states it loads a single Storybook story via headless Chromium, with optional screenshot and axe-core audit. It distinguishes from siblings like page_screenshot (general) and axe_audit (general audit) by focusing on Storybook stories.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Usage Guidelines3/5
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description implies usage for testing Storybook stories but does not explicitly contrast with sibling tools or specify when not to use it. It only mentions a prerequisite (Playwright), not exclusion criteria.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Behavior4/5
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations are provided, so the description carries the full burden. It explicitly states it walks a directory, measures sizes, and flags exceedances. It also mentions CI-friendly JSON output. While it doesn't disclose potential actions (e.g., read-only or any side effects), the described behavior aligns with a read-only check, making it fairly transparent.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Conciseness5/5
Is the description appropriately sized, front-loaded, and free of redundancy?
Two sentences, each purposeful. Front-loaded with the core action ('Walk a build directory...'). No wasted words. The structure is optimal for quick agent comprehension.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Completeness3/5
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
No output schema is present, so the description should clarify the output format. It mentions 'CI-friendly JSON output' but does not specify structure, exit codes, or how budgets are compared. With 5 parameters and a nested object, more detail would help the agent use it effectively. Score 3 reflects adequate but not complete guidance.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Parameters3/5
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema coverage is 100%, so baseline is 3. The description adds minimal value beyond the schema: it mentions 'global or per-entry KB budget' but does not explain the glob matching or default values. The schema already describes each parameter adequately. Thus, the description does not significantly enhance parameter understanding.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Purpose5/5
Does the description clearly state what the tool does and how it differs from similar tools?
The description uses a specific verb ('Walk') and resource ('build directory') and clearly states the action: measure raw/gzip/brotli sizes and flag budget violations. This distinguishes it from sibling tools like 'axe_audit' (accessibility) and 'scaffold_react_component', which serve entirely different purposes.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Usage Guidelines4/5
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description clearly implies the tool is for bundle size checks, providing context for use. It does not explicitly state when not to use it or compare with alternatives, but siblings are in unrelated domains, so the context is sufficient. A score of 4 reflects clear context without formal exclusions.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Behavior4/5
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations, the description carries the full burden of behavioral disclosure. It states the tool reports added, removed, and changed tokens with $type-aware classification, which implies a read-only comparison. It does not mention side effects or required permissions, but for a diff tool, the behavior is sufficiently transparent.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Conciseness5/5
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is only two sentences long, front-loading the core action in the first sentence and adding a use case in the second. Every word is informative with no fluff.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Completeness4/5
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Given the tool has no output schema, the description adequately describes what the diff reports (added, removed, changed tokens). It mentions the input format and the classification approach. The absence of output format details is a minor gap, but overall the description is sufficient for an agent to understand the tool's behavior.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Parameters3/5
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema coverage is 100% with clear descriptions for all three parameters. The tool description adds high-level context (e.g., format, output behavior) but does not provide additional meaning about the parameters beyond the schema. Baseline of 3 is appropriate.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Purpose5/5
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states the tool diffs design-token JSON files, specifies the format (W3C DTCG / Style Dictionary), and lists what it reports (added, removed, changed tokens with type-aware classification). The use case (PR review) distinguishes it from sibling tools (e.g., axe_audit, bundle_budget_check).
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Usage Guidelines4/5
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description explicitly mentions a use case ('Useful for PR review of design-system changes'), which guides when to use it. It does not specify when not to use it or name alternatives, but the context is clear and no sibling tool overlaps with this diffing functionality.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Behavior4/5
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations, the description must carry behavioral disclosure. It discloses headless Chromium usage, supports for selectors, full-page, dark mode, and viewports. It also mentions the optional Playwright dependency. Missing details on error handling and default behaviors, but still provides significant transparency.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Conciseness5/5
Is the description appropriately sized, front-loaded, and free of redundancy?
Two sentences, both substantive. First sentence defines core action; second lists key features and a dependency. No redundant or extraneous words.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Completeness4/5
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Given the tool's complexity (10 parameters, no output schema), the description provides a good high-level overview. It specifies the browser engine, supported features, and a dependency. It could mention return behavior (writes file to disk) or default values, but the schema covers defaults. Overall complete given the context.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Parameters3/5
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema description coverage is 80%, so baseline is 3. The description provides a high-level grouping of features (e.g., 'Supports element selectors, full-page capture, dark mode, and custom viewports') but does not add detail beyond the schema. For the two parameters without schema descriptions (timeoutMs, waitForSelector? waitForSelector has description, timeoutMs does not), the description does not compensate.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Purpose5/5
Does the description clearly state what the tool does and how it differs from similar tools?
Description clearly states 'Launch headless Chromium, navigate to a URL, and save a PNG screenshot.' It uses specific verbs and a concrete resource. Distinct from siblings like axe_audit or bundle_budget_check, which address different tasks.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Usage Guidelines4/5
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description implies when to use (when a screenshot of a web page is needed) but does not explicitly exclude alternatives or provide when-not-to-use guidance. Siblings are clearly different, so context is clear.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Behavior4/5
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations provided, so description carries full burden. It discloses the audit scope (axe-core), return format (grouped violations with guidance/links), and that URL mode uses Playwright. No contradictions.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Conciseness5/5
Is the description appropriately sized, front-loaded, and free of redundancy?
Two sentences, no fluff. First sentence states core action and modes, second describes output format. Information density is high.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Completeness5/5
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
No output schema, but description sufficiently hints at return structure (violations grouped by impact, fix guidance, helpUrl). Parameters well described, tool behavior clear. Complete for the complexity level.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Parameters4/5
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema has 100% description coverage. Description adds context beyond schema: clarifies dual mode (url/html), defaults for tags, selector only for URL, timeout default. Adds value.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Purpose5/5
Does the description clearly state what the tool does and how it differs from similar tools?
Description clearly states the tool runs axe-core accessibility rules on HTML or URL, returns violations grouped by impact with fix guidance and helpUrl links. This is specific and distinguishes it from sibling tools like screenshot or bundler checks.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Usage Guidelines4/5
Does the description explain when to use this tool, when not to, or what alternatives exist?
Description explains two usage modes (HTML string vs live URL) and mentions prerequisite (playwright for URL). Does not explicitly state when not to use or alternatives, but context with siblings makes it clear.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

GitHub Badge

Glama performs regular codebase and documentation scans to:

Confirm that the MCP server is working as expected.
Confirm that there are no obvious security issues.
Evaluate tool definition quality.

Our badge communicates server capabilities, safety, and installation instructions.

Card Badge

Copy to your README.md:

[![mcp-frontend-tools MCP server](https://glama.ai/mcp/servers/ashios15/mcp-frontend-tools/badges/card.svg)](https://glama.ai/mcp/servers/ashios15/mcp-frontend-tools)

Score Badge

Copy to your README.md:

[![mcp-frontend-tools MCP server](https://glama.ai/mcp/servers/ashios15/mcp-frontend-tools/badges/score.svg)](https://glama.ai/mcp/servers/ashios15/mcp-frontend-tools)

Latest Blog Posts

Who's Calling? MCP Hosts Are an Identity Blind Spot (And the Spec Knows It)
By Om-Shree-0709 on July 25, 2026.
mcp
Agent Identity
OAuth 2.1
Your AI Chatbot Just Exposed Your CEO's Salary to an Intern
By Om-Shree-0709 on July 2, 2026.
Agent Identity
MCP Security
OAuth Delegation
Why MCP Servers Need Execution Sandboxing (And Why Your Current Stack Isn't Enough)
By Om-Shree-0709 on June 30, 2026.
Agentic Ai
Prompt Injection
WebAssembly

MCP directory API

We provide all the information about MCP servers via our MCP API.

curl -X GET 'https://glama.ai/api/mcp/v1/servers/ashios15/mcp-frontend-tools'

If you have feedback or need assistance with the MCP directory API, please join our Discord server