de en es ja ko ru zh

MCP Frontend Tools Server

Name: MCP Frontend Tools Server
Author: ashios15

by ashios15

Overview Schema Source Related Servers Discussions Admin

TypeScript

Local

mcp-frontend-tools

Der Referenz-Server für das Model Context Protocol für Frontend-Arbeiten. Eine einzige Installation gibt jedem Coding-Agent — Claude Desktop, Cursor, VS Code, Zed, Continue — echte Augen und Hände für Ihr UI:

axe_audit — führt die echte axe-core Regel-Engine gegen rohes HTML (via jsdom) oder eine Live-URL (via Playwright) aus. Gibt Verstöße zurück, gruppiert nach WCAG-Auswirkung mit Links zur Fehlerbehebung.
page_screenshot — Headless-Chromium PNGs jeder URL oder jedes CSS-Selektors, mit Steuerung für Viewport / DPR / Farbschema / waitForSelector.
bundle_budget_check — durchsucht ein dist/-Verzeichnis, berechnet gzip- (+ optionale brotli-) Größen und erzwingt ein globales oder pro-Eintrag KB-Budget. CI-bereites Pass/Fail-JSON.
design_token_diff — struktureller Diff von zwei W3C DTCG / Style Dictionary Token-Dateien. Meldet hinzugefügte / entfernte / geänderte Token mit $type-bewussten Hinweisen.
storybook_story_run — lädt eine einzelne Storybook-Story in Headless Chromium via iframe.html?id=…, erstellt einen Screenshot und führt eine axe-Prüfung nur für die gerenderte Komponente durch.
scaffold_react_component — erstellt eine typisierte React-Komponente (funktional / forwardRef / polymorph as) plus optionalen Vitest-Test und Storybook-Story.

Alle Tools geben strukturiertes JSON zurück, das das Modell verarbeiten kann. Keine maßgeschneiderten Wrapper pro Editor.

Installation

npm i -g @ashios15/mcp-frontend-tools
# Optional — enables page_screenshot, storybook_story_run, and URL-mode axe_audit
npm i -g playwright
npx playwright install chromium

Node ≥ 20 ist erforderlich. Ohne Playwright startet der Server trotzdem; diese drei Tools geben bei Aufruf einen klaren "install playwright"-Fehler zurück.

Claude Desktop

Hinzufügen zu ~/Library/Application Support/Claude/claude_desktop_config.json (oder dem Windows-Äquivalent):

{
  "mcpServers": {
    "frontend-tools": {
      "command": "mcp-frontend-tools"
    }
  }
}

Cursor

Einstellungen → MCP → Neuen Server hinzufügen:

{
  "frontend-tools": { "command": "mcp-frontend-tools" }
}

VS Code (GitHub Copilot Agent-Modus)

Hinzufügen zu .vscode/mcp.json:

{
  "servers": {
    "frontend-tools": { "command": "mcp-frontend-tools" }
  }
}

MCP Inspector

npx @modelcontextprotocol/inspector mcp-frontend-tools

Related MCP server: Components Build MCP

Tool-Referenz

`axe_audit`

{
  url?: string;        // require playwright
  html?: string;       // jsdom
  tags?: string[];     // default: wcag2a/aa + wcag21aa + wcag22aa + best-practice
  selector?: string;   // URL mode only
  timeoutMs?: number;  // default 15000
}

Gibt Verstöße und unvollständige Regeln mit impact, help, helpUrl und bis zu 5 fehlerhaften Beispielknoten pro Regel zurück.

`page_screenshot`

{
  url: string;
  outPath: string;           // absolute; parent dirs auto-created
  selector?: string;
  fullPage?: boolean;
  width?: number;            // default 1280
  height?: number;           // default 800
  deviceScaleFactor?: number;// default 2
  colorScheme?: "light" | "dark" | "no-preference";
  waitForSelector?: string;
  timeoutMs?: number;
}

`bundle_budget_check`

{
  buildDir: string;
  budgetKb?: number;                       // default 250 (gzipped)
  perEntryBudgetKb?: Record<string, number>;// key = path substring, longest match wins
  ext?: string[];                          // default [".js",".mjs",".cjs",".css"]
  includeBrotli?: boolean;
}

Gibt jede Datei mit Roh- / gzip- / brotli-Größen, ihrem angewendeten Budget und status: "pass" | "fail" zurück.

`design_token_diff`

{
  beforePath: string;
  afterPath: string;
  ignoreKeys?: string[];
}

Versteht die W3C DTCG-Form ($value, $type). Gruppen-Metadaten-Schlüssel, die mit $ beginnen, werden ignoriert. Farb- / Dimensionsänderungen erhalten annotierte notes.

`storybook_story_run`

{
  storybookUrl: string;      // e.g. http://localhost:6006
  storyId: string;           // e.g. components-button--primary
  screenshotPath?: string;
  runAxe?: boolean;          // default true
  viewport?: { width: number; height: number };
  colorScheme?: "light" | "dark" | "no-preference";
  timeoutMs?: number;
}

Lädt ${storybookUrl}/iframe.html?viewMode=story&id=${storyId}, wartet auf #storybook-root und meldet alle Seitenfehler + axe-Verstöße, die auf die Story begrenzt sind.

`scaffold_react_component`

{
  name: string;           // PascalCase
  outDir: string;         // absolute
  variant?: "functional" | "forwardRef" | "polymorphic";
  withTests?: boolean;    // default true
  withStory?: boolean;    // default true
  props?: Array<{ name: string; type: string; required?: boolean; defaultValue?: string }>;
}

Warum dies statt Ad-hoc-Skripten?

Agenten erhalten typisierte Verträge. Jedes Tool ist ein Zod-validiertes JSON-Schema, das das Modell untersuchen kann.
Keine lokale Halluzination. Axe-Verstöße stammen von der echten axe-core-Engine, nicht von einem Regex. Bundle-Größen stammen von tatsächlicher zlib-Kompression, nicht von Schätzungen.
Komponierbar. bundle_budget_check schlägt fehl → fordern Sie den Agenten auf, die größte Datei in page_screenshot zu ziehen → speisen Sie das Bild in einen visuellen Regressionsschritt ein. Alles über MCP.
Stabile Oberfläche. Tools ändern sich hinter einem Versionssprung; Ihre .vscode/mcp.json nicht.

Entwicklung

git clone https://github.com/ashios15/mcp-frontend-tools.git
cd mcp-frontend-tools
npm install
npm run test       # 3 unit tests (bundle + tokens + scaffold)
npm run build
npm run inspector  # opens MCP Inspector against the built server
node scripts/smoke.mjs  # quick stdio tools/list check

Lizenz

MIT © ashios15

mcp-frontend-tools

axe_audit — führt die echte axe-core Regel-Engine gegen rohes HTML (via jsdom) oder eine Live-URL (via Playwright) aus. Gibt Verstöße zurück, gruppiert nach WCAG-Auswirkung mit Links zur Fehlerbehebung.
page_screenshot — Headless-Chromium PNGs jeder URL oder jedes CSS-Selektors, mit Steuerung für Viewport / DPR / Farbschema / waitForSelector.
bundle_budget_check — durchsucht ein dist/-Verzeichnis, berechnet gzip- (+ optionale brotli-) Größen und erzwingt ein globales oder pro-Eintrag KB-Budget. CI-bereites Pass/Fail-JSON.
design_token_diff — struktureller Diff von zwei W3C DTCG / Style Dictionary Token-Dateien. Meldet hinzugefügte / entfernte / geänderte Token mit $type-bewussten Hinweisen.
storybook_story_run — lädt eine einzelne Storybook-Story in Headless Chromium via iframe.html?id=…, erstellt einen Screenshot und führt eine axe-Prüfung nur für die gerenderte Komponente durch.
scaffold_react_component — erstellt eine typisierte React-Komponente (funktional / forwardRef / polymorph as) plus optionalen Vitest-Test und Storybook-Story.

Alle Tools geben strukturiertes JSON zurück, das das Modell verarbeiten kann. Keine maßgeschneiderten Wrapper pro Editor.

Installation

npm i -g @ashishjoshi/mcp-frontend-tools
# Optional — enables page_screenshot, storybook_story_run, and URL-mode axe_audit
npm i -g playwright
npx playwright install chromium

Node ≥ 20 ist erforderlich. Ohne Playwright startet der Server trotzdem; diese drei Tools geben bei Aufruf einen klaren "install playwright"-Fehler zurück.

Claude Desktop

Hinzufügen zu ~/Library/Application Support/Claude/claude_desktop_config.json (oder dem Windows-Äquivalent):

{
  "mcpServers": {
    "frontend-tools": {
      "command": "mcp-frontend-tools"
    }
  }
}

Cursor

Einstellungen → MCP → Neuen Server hinzufügen:

{
  "frontend-tools": { "command": "mcp-frontend-tools" }
}

VS Code (GitHub Copilot Agent-Modus)

Hinzufügen zu .vscode/mcp.json:

{
  "servers": {
    "frontend-tools": { "command": "mcp-frontend-tools" }
  }
}

MCP Inspector

npx @modelcontextprotocol/inspector mcp-frontend-tools

Tool-Referenz

`axe_audit`

{
  url?: string;        // require playwright
  html?: string;       // jsdom
  tags?: string[];     // default: wcag2a/aa + wcag21aa + wcag22aa + best-practice
  selector?: string;   // URL mode only
  timeoutMs?: number;  // default 15000
}

Gibt Verstöße und unvollständige Regeln mit impact, help, helpUrl und bis zu 5 fehlerhaften Beispielknoten pro Regel zurück.

`page_screenshot`

{
  url: string;
  outPath: string;           // absolute; parent dirs auto-created
  selector?: string;
  fullPage?: boolean;
  width?: number;            // default 1280
  height?: number;           // default 800
  deviceScaleFactor?: number;// default 2
  colorScheme?: "light" | "dark" | "no-preference";
  waitForSelector?: string;
  timeoutMs?: number;
}

`bundle_budget_check`

{
  buildDir: string;
  budgetKb?: number;                       // default 250 (gzipped)
  perEntryBudgetKb?: Record<string, number>;// key = path substring, longest match wins
  ext?: string[];                          // default [".js",".mjs",".cjs",".css"]
  includeBrotli?: boolean;
}

Gibt jede Datei mit Roh- / gzip- / brotli-Größen, ihrem angewendeten Budget und status: "pass" | "fail" zurück.

`design_token_diff`

{
  beforePath: string;
  afterPath: string;
  ignoreKeys?: string[];
}

Versteht die W3C DTCG-Form ($value, $type). Gruppen-Metadaten-Schlüssel, die mit $ beginnen, werden ignoriert. Farb- / Dimensionsänderungen erhalten annotierte notes.

`storybook_story_run`

{
  storybookUrl: string;      // e.g. http://localhost:6006
  storyId: string;           // e.g. components-button--primary
  screenshotPath?: string;
  runAxe?: boolean;          // default true
  viewport?: { width: number; height: number };
  colorScheme?: "light" | "dark" | "no-preference";
  timeoutMs?: number;
}

Lädt ${storybookUrl}/iframe.html?viewMode=story&id=${storyId}, wartet auf #storybook-root und meldet alle Seitenfehler + axe-Verstöße, die auf die Story begrenzt sind.

`scaffold_react_component`

{
  name: string;           // PascalCase
  outDir: string;         // absolute
  variant?: "functional" | "forwardRef" | "polymorphic";
  withTests?: boolean;    // default true
  withStory?: boolean;    // default true
  props?: Array<{ name: string; type: string; required?: boolean; defaultValue?: string }>;
}

Warum dies statt Ad-hoc-Skripten?

Agenten erhalten typisierte Verträge. Jedes Tool ist ein Zod-validiertes JSON-Schema, das das Modell untersuchen kann.
Keine lokale Halluzination. Axe-Verstöße stammen von der echten axe-core-Engine, nicht von einem Regex. Bundle-Größen stammen von tatsächlicher zlib-Kompression, nicht von Schätzungen.
Komponierbar. bundle_budget_check schlägt fehl → fordern Sie den Agenten auf, die größte Datei in page_screenshot zu ziehen → speisen Sie das Bild in einen visuellen Regressionsschritt ein. Alles über MCP.
Stabile Oberfläche. Tools ändern sich hinter einem Versionssprung; Ihre .vscode/mcp.json nicht.

Entwicklung

npm install
npm run test       # 3 unit tests (bundle + tokens + scaffold)
npm run build
npm run inspector  # opens MCP Inspector against the built server
node scripts/smoke.mjs  # quick stdio tools/list check

Lizenz

MIT © Ashish Joshi

MCP Frontend Tools Server

Ein Model Context Protocol (MCP)-Server, der KI-Assistenten (Claude, Copilot, Cursor) Zugriff auf Frontend-Entwicklungstools gibt — Komponenten-Scaffolding, Bundle-Analyse, Barrierefreiheitsprüfungen und Anleitungen für responsives Design.

Verfügbare Tools

Tool	Beschreibung
`scaffold_react_component`	Generiert eine typisierte React-Komponente mit Tests, Stories und CSS-Modul
`analyze_bundle`	Scannt ein Build-Verzeichnis auf zu große JS/CSS-Dateien und meldet Ergebnisse
`check_accessibility`	Statische WCAG 2.2-Prüfungen auf HTML mit Korrekturvorschlägen
`responsive_breakpoint_guide`	Generiert responsives CSS, Container-Query- und Tailwind-Muster

Einrichtung

Claude Desktop

Hinzufügen zu ~/Library/Application Support/Claude/claude_desktop_config.json:

{
  "mcpServers": {
    "frontend-tools": {
      "command": "node",
      "args": ["/path/to/mcp-frontend-tools/dist/index.js"]
    }
  }
}

VS Code mit Copilot

Hinzufügen zu .vscode/settings.json:

{
  "github.copilot.chat.mcpServers": {
    "frontend-tools": {
      "command": "node",
      "args": ["${workspaceFolder}/mcp-frontend-tools/dist/index.js"]
    }
  }
}

Beispielanwendung (im KI-Chat)

"Erstelle eine UserProfileCard-Komponente mit Avatar-, Name- und Bio-Props"

Die KI ruft scaffold_react_component auf und erhält:

UserProfileCard.tsx — Typisierte Komponente mit forwardRef
UserProfileCard.test.tsx — Testing Library-Tests
UserProfileCard.stories.tsx — Storybook-Story
UserProfileCard.module.css — CSS-Modul
index.ts — Barrel-Export

"Analysiere meinen dist/-Ordner auf Probleme mit der Bundle-Größe"

Die KI ruft analyze_bundle auf und gibt einen Markdown-Bericht mit zu großen Dateien, Empfehlungen und einer Zusammenfassungstabelle zurück.

Architektur

src/
├── index.ts                  # MCP server setup (stdio transport)
└── tools/
    ├── index.ts              # Tool definitions + router
    ├── scaffold-component.ts # React component generator
    ├── bundle-analyzer.ts    # Build output analyzer
    ├── a11y-checker.ts       # Static WCAG checks
    └── responsive-guide.ts   # Responsive CSS pattern generator

Entwicklung

npm install
npm run build
npm run inspector   # Test with MCP Inspector

Lizenz

MIT

Available Tools

6 tools

axe_auditaxe-core Accessibility 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.

Inputs: url, html, tags, selector, +1 more.

bundle_budget_checkBundle 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.

Inputs: buildDir (required), budgetKb, perEntryBudgetKb, ext, +1 more.

design_token_diffDesign 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.

Inputs: beforePath (required), afterPath (required), ignoreKeys.

page_screenshotPage Screenshot (Playwright)A

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 playwright peer dependency.

Inputs: url (required), outPath (required), selector, fullPage, +6 more.

scaffold_react_componentScaffold React ComponentB

Write a TypeScript React component, optional test, and optional Storybook story into outDir. Supports functional, forwardRef, and polymorphic (as prop) variants.

Inputs: name (required), outDir (required), variant, withTests, +2 more.

storybook_story_runStorybook 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 playwright.

Inputs: storybookUrl (required), storyId (required), screenshotPath, runAxe, +3 more.

Tool Schema Changelog

Recent tool additions, removals, and schema changes observed during successful MCP inspections.

Loading tool schema changelog…

Deploy Server

Claude Code, inside the Godot 4 editorFlockbay puts an AI agent in the real Godot 4 editor: it writes GDScript, runs your game and fixes what breaks. Free, or bring your own Claude Code or Codex.flockbay.comAd

TDQS

A4/5.0

Scored 2026-05-06 23:00 across 6 tools

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.

Maintenance

ActivityInactive

ResponsivenessNo recent community issues

Resources

Related MCP Connectors

marmo-uiA
io.github.mahmoudilyan
Live React design-system APIs, patterns, and code validation so AI agents build real UI, not slop.
Design Tools Developer Tools
2
https://mcp.marmoui.com/mcp
OverlayQAA
com.overlayqa
Run accessibility, contrast, and design token audits and file QA issues from your AI coding tool.
Testing & QA Tools Design Tools Developer Tools
451
https://api.overlayqa.com/mcp
ArchGraph
dev.archgraph
Code intelligence platform for AI agents. 20 tools for architecture, security & impact analysis.
Code Analysis Software Architecture Developer Tools
2
https://mcp.archgraph.dev/mcp
Cypress Cloud MCPB
io.cypress.mcp
Direct access to Cypress tests results and accessibility reports in your AI workflow.
Testing & QA Tools CI/CD & DevOps
24
https://mcp.cypress.io/mcp

Related MCP Servers

WebSee MCP Server
Browser Automation Developer Tools Testing & QA Tools
1AQuantum
F
license
Not graded
quality
Not graded
maintenance
Provides AI assistants with advanced frontend debugging capabilities through 36 specialized tools for inspecting React/Vue/Angular/Svelte applications. Uses Playwright browser automation and source map intelligence to analyze components, network requests, bundle optimization, and resolve production errors.
Updated a year ago (2025-11-06 17:26 UTC)
-
Components Build MCP
Developer Tools Documentation Access Code Analysis
getlokiui
A
license
B
quality
D
maintenance
Provides AI assistants with tools to grade, generate, and validate UI components against the components.build specification. Supports searching documentation, checking compliance, and generating framework-agnostic accessible components.
Updated a year ago (2025-12-03 07:48 UTC)
11
21 npm
Apache 2.0
Lawrence's Personal MCP Server
Design Tools Testing & QA Tools Developer Tools
MyLightIsOn
A
license
A
quality
D
maintenance
Provides Figma integration, accessibility auditing, and React code generation tools.
Updated a year ago (2025-12-26 20:32 UTC)
8
MIT
gemini-designer-mcp
Design Tools Code Analysis Developer Tools
Pape45
A
license
Not graded
quality
B
maintenance
Provides AI-powered UI design, repo intelligence, and frontend code generation tools, enabling assistants to scaffold projects, generate and modify UI components, manage design tokens, and analyze repositories.
Updated 3 months ago (2026-08-02 16:18 UTC)
MIT

Appeared in Searches

A server for finding web front-end resources

mcp-frontend-tools

Installation

Claude Desktop

Cursor

VS Code (GitHub Copilot Agent-Modus)

MCP Inspector

Tool-Referenz

axe_audit

page_screenshot

bundle_budget_check

design_token_diff

storybook_story_run

scaffold_react_component

Warum dies statt Ad-hoc-Skripten?

Entwicklung

Lizenz

mcp-frontend-tools

Installation

Claude Desktop

Cursor

VS Code (GitHub Copilot Agent-Modus)

MCP Inspector

Tool-Referenz

axe_audit

page_screenshot

bundle_budget_check

design_token_diff

storybook_story_run

scaffold_react_component

Warum dies statt Ad-hoc-Skripten?

Entwicklung

Lizenz

MCP Frontend Tools Server

Verfügbare Tools

Einrichtung

Claude Desktop

VS Code mit Copilot

Beispielanwendung (im KI-Chat)

Architektur

Entwicklung

Lizenz

Available Tools

Tool Schema Changelog

TDQS

Maintenance

Resources

Related MCP Connectors

Related MCP Servers

WebSee MCP Server

Components Build MCP

Lawrence's Personal MCP Server

gemini-designer-mcp

Appeared in Searches

`axe_audit`

`page_screenshot`

`bundle_budget_check`

`design_token_diff`

`storybook_story_run`

`scaffold_react_component`

`axe_audit`

`page_screenshot`

`bundle_budget_check`

`design_token_diff`

`storybook_story_run`

`scaffold_react_component`