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

Эталонный сервер Model Context Protocol для фронтенд-разработки. Одна установка дает любому агенту по написанию кода — Claude Desktop, Cursor, VS Code, Zed, Continue — реальные глаза и руки для работы с вашим UI:

axe_audit — запуск реального движка правил axe-core для чистого HTML (через jsdom) или живого URL (через Playwright). Возвращает нарушения, сгруппированные по уровню влияния WCAG, со ссылками на исправления.
page_screenshot — создание PNG-скриншотов любого URL или CSS-селектора в headless-Chromium с управлением viewport / DPR / цветовой схемой / waitForSelector.
bundle_budget_check — обход директории dist/, вычисление размеров gzip (+ опционально brotli), обеспечение глобального или индивидуального бюджета в КБ. JSON с результатом pass/fail, готовый для CI.
design_token_diff — структурное сравнение двух файлов токенов W3C DTCG / Style Dictionary. Сообщает о добавленных / удаленных / измененных токенах с примечаниями, учитывающими $type.
storybook_story_run — загрузка отдельной истории Storybook в headless Chromium через iframe.html?id=…, создание скриншота и запуск аудита axe только для отрендеренного компонента.
scaffold_react_component — создание типизированного React-компонента (функционального / forwardRef / полиморфного as) плюс опционально теста Vitest и истории Storybook.

Все инструменты возвращают структурированный JSON, который модель может анализировать. Никаких специальных оберток для каждого редактора.

Установка

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. Без Playwright сервер все равно запустится; при вызове этих трех инструментов будет возвращена понятная ошибка "install playwright".

Claude Desktop

Добавьте в ~/Library/Application Support/Claude/claude_desktop_config.json (или эквивалент в Windows):

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

Cursor

Settings → MCP → Add new server:

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

VS Code (режим агента GitHub Copilot)

Добавьте в .vscode/mcp.json:

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

MCP Inspector

npx @modelcontextprotocol/inspector mcp-frontend-tools

Related MCP server: Components Build MCP

Справочник инструментов

`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
}

Возвращает нарушения и неполные правила с полями impact, help, helpUrl и до 5 примеров узлов с ошибками для каждого правила.

`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;
}

Возвращает каждый файл с размерами raw / gzip / brotli, примененным бюджетом и status: "pass" | "fail".

`design_token_diff`

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

Понимает структуру W3C DTCG ($value, $type). Ключи метаданных группы, начинающиеся с $, игнорируются. Изменения цвета / размера снабжаются примечаниями note.

`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;
}

Загружает ${storybookUrl}/iframe.html?viewMode=story&id=${storyId}, ожидает #storybook-root и сообщает о любых ошибках страницы + нарушениях axe в рамках истории.

`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 }>;
}

Почему это лучше, чем специальные скрипты?

Агенты получают типизированные контракты. Каждый инструмент — это JSON Schema с проверкой Zod, которую модель может инспектировать.
Никаких локальных галлюцинаций. Нарушения Axe приходят из реального движка axe-core, а не из регулярных выражений. Размеры бандлов берутся из реального сжатия zlib, а не из оценок.
Компонуемость. Ошибка bundle_budget_check → попросите агента отправить самый большой файл в page_screenshot → передайте изображение на этап визуальной регрессии. Все через MCP.
Стабильный интерфейс. Инструменты меняются при обновлении версии; ваш .vscode/mcp.json — нет.

Разработка

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

Лицензия

MIT © ashios15

mcp-frontend-tools

axe_audit — запуск реального движка правил axe-core для чистого HTML (через jsdom) или живого URL (через Playwright). Возвращает нарушения, сгруппированные по уровню влияния WCAG, со ссылками на исправления.
page_screenshot — создание PNG-скриншотов любого URL или CSS-селектора в headless-Chromium с управлением viewport / DPR / цветовой схемой / waitForSelector.
bundle_budget_check — обход директории dist/, вычисление размеров gzip (+ опционально brotli), обеспечение глобального или индивидуального бюджета в КБ. JSON с результатом pass/fail, готовый для CI.
design_token_diff — структурное сравнение двух файлов токенов W3C DTCG / Style Dictionary. Сообщает о добавленных / удаленных / измененных токенах с примечаниями, учитывающими $type.
storybook_story_run — загрузка отдельной истории Storybook в headless Chromium через iframe.html?id=…, создание скриншота и запуск аудита axe только для отрендеренного компонента.
scaffold_react_component — создание типизированного React-компонента (функционального / forwardRef / полиморфного as) плюс опционально теста Vitest и истории Storybook.

Установка

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

Claude Desktop

Добавьте в ~/Library/Application Support/Claude/claude_desktop_config.json (или эквивалент в Windows):

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

Cursor

Settings → MCP → Add new server:

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

VS Code (режим агента GitHub Copilot)

Добавьте в .vscode/mcp.json:

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

MCP Inspector

npx @modelcontextprotocol/inspector mcp-frontend-tools

Справочник инструментов

`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
}

`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;
}

Возвращает каждый файл с размерами raw / gzip / brotli, примененным бюджетом и status: "pass" | "fail".

`design_token_diff`

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

`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;
}

`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 }>;
}

Почему это лучше, чем специальные скрипты?

Агенты получают типизированные контракты. Каждый инструмент — это JSON-Schema с проверкой Zod, которую модель может инспектировать.
Никаких локальных галлюцинаций. Нарушения Axe приходят из реального движка axe-core, а не из регулярных выражений. Размеры бандлов берутся из реального сжатия zlib, а не из оценок.
Компонуемость. Ошибка bundle_budget_check → попросите агента отправить самый большой файл в page_screenshot → передайте изображение на этап визуальной регрессии. Все через MCP.
Стабильный интерфейс. Инструменты меняются при обновлении версии; ваш .vscode/mcp.json — нет.

Разработка

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

Лицензия

MIT © Ashish Joshi

Сервер инструментов фронтенд-разработки MCP

Сервер Model Context Protocol (MCP), который дает ИИ-ассистентам (Claude, Copilot, Cursor) доступ к инструментам фронтенд-разработки — созданию каркасов компонентов, анализу бандлов, проверке доступности и руководствам по адаптивному дизайну.

Доступные инструменты

Инструмент	Описание
`scaffold_react_component`	Генерация типизированного React-компонента с тестами, историями и CSS-модулем
`analyze_bundle`	Сканирование директории сборки на наличие слишком больших JS/CSS, отчет о результатах
`check_accessibility`	Статическая проверка WCAG 2.2 для HTML с предложениями по исправлению
`responsive_breakpoint_guide`	Генерация адаптивного CSS, контейнерных запросов и паттернов Tailwind

Настройка

Claude Desktop

Добавьте в ~/Library/Application Support/Claude/claude_desktop_config.json:

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

VS Code с Copilot

Добавьте в .vscode/settings.json:

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

Пример использования (в ИИ-чате)

"Создай каркас компонента UserProfileCard с пропсами avatar, name и bio"

ИИ вызывает scaffold_react_component и получает:

UserProfileCard.tsx — типизированный компонент с forwardRef
UserProfileCard.test.tsx — тесты Testing Library
UserProfileCard.stories.tsx — история Storybook
UserProfileCard.module.css — CSS-модуль
index.ts — barrel-экспорт

"Проанализируй мою папку dist/ на предмет проблем с размером бандла"

ИИ вызывает analyze_bundle и возвращает markdown-отчет с файлами, превышающими размер, рекомендациями и сводной таблицей.

Архитектура

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

Разработка

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

Лицензия

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

Установка

Claude Desktop

Cursor

VS Code (режим агента GitHub Copilot)

MCP Inspector

Справочник инструментов

axe_audit

page_screenshot

bundle_budget_check

design_token_diff

storybook_story_run

scaffold_react_component

Почему это лучше, чем специальные скрипты?

Разработка

Лицензия

mcp-frontend-tools

Установка

Claude Desktop

Cursor

VS Code (режим агента GitHub Copilot)

MCP Inspector

Справочник инструментов

axe_audit

page_screenshot

bundle_budget_check

design_token_diff

storybook_story_run

scaffold_react_component

Почему это лучше, чем специальные скрипты?

Разработка

Лицензия

Сервер инструментов фронтенд-разработки MCP

Доступные инструменты

Настройка

Claude Desktop

VS Code с Copilot

Пример использования (в ИИ-чате)

Архитектура

Разработка

Лицензия

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`