フロントエンド作業のためのリファレンスとなる Model Context Protocol サーバーです。一度インストールすれば、Claude Desktop、Cursor、VS Code、Zed、Continue などのあらゆるコーディングエージェントが、あなたのUIに対してリアルな目と手を持つことができます：
axe_audit — 生のHTML（jsdom経由）またはライブURL（Playwright経由）に対して、実際の axe-core ルールエンジンを実行します。WCAGのインパクト別にグループ化された違反と修正リンクを返します。
page_screenshot — あらゆるURLやCSSセレクターのヘッドレスChromiumによるPNG画像を取得します。ビューポート / DPR / カラースキーム / waitForSelector の制御が可能です。
bundle_budget_check — dist/ ディレクトリを走査し、gzip（+オプションでbrotli）サイズを計算し、グローバルまたはエントリーごとのKB予算を強制します。CI対応のパス/フェイルJSONを返します。
design_token_diff — 2つの W3C DTCG / Style Dictionary トークンファイルの構造的な差分をとります。追加 / 削除 / 変更されたトークンを $type を考慮した注釈付きで報告します。
storybook_story_run — iframe.html?id=… 経由でヘッドレスChromiumに単一のStorybookストーリーを読み込み、スクリーンショットを撮り、レンダリングされたコンポーネントに対してのみ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 chromiumNode 20以上 が必要です。Playwrightがなくてもサーバーは起動しますが、それら3つのツールを呼び出すと「playwrightをインストールしてください」という明確なエラーが返されます。
~/Library/Application Support/Claude/claude_desktop_config.json （またはWindowsの同等パス）に追加します：
{
"mcpServers": {
"frontend-tools": {
"command": "mcp-frontend-tools"
}
}
}Settings → MCP → Add new server:
{
"frontend-tools": { "command": "mcp-frontend-tools" }
}.vscode/mcp.json に追加します：
{
"servers": {
"frontend-tools": { "command": "mcp-frontend-tools" }
}
}npx @modelcontextprotocol/inspector mcp-frontend-toolsRelated 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;
}すべてのファイルについて、生 / 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 }>;
}エージェントは型付きの契約を得る。 すべてのツールは、モデルがイントロスペクト可能なZodで検証されたJSONスキーマです。
ローカルでのハルシネーションがない。 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 checkMIT © ashios15
フロントエンド作業のためのリファレンスとなる Model Context Protocol サーバーです。一度インストールすれば、Claude Desktop、Cursor、VS Code、Zed、Continue などのあらゆるコーディングエージェントが、あなたのUIに対してリアルな目と手を持つことができます：
axe_audit — 生のHTML（jsdom経由）またはライブURL（Playwright経由）に対して、実際の axe-core ルールエンジンを実行します。WCAGのインパクト別にグループ化された違反と修正リンクを返します。
page_screenshot — あらゆるURLやCSSセレクターのヘッドレスChromiumによるPNG画像を取得します。ビューポート / DPR / カラースキーム / waitForSelector の制御が可能です。
bundle_budget_check — dist/ ディレクトリを走査し、gzip（+オプションでbrotli）サイズを計算し、グローバルまたはエントリーごとのKB予算を強制します。CI対応のパス/フェイルJSONを返します。
design_token_diff — 2つの W3C DTCG / Style Dictionary トークンファイルの構造的な差分をとります。追加 / 削除 / 変更されたトークンを $type を考慮した注釈付きで報告します。
storybook_story_run — iframe.html?id=… 経由でヘッドレスChromiumに単一のStorybookストーリーを読み込み、スクリーンショットを撮り、レンダリングされたコンポーネントに対してのみaxe監査を実行します。
scaffold_react_component — 型定義されたReactコンポーネント（関数型 / forwardRef / ポリモーフィック as）に加え、オプションでVitestテストとStorybookストーリーを出力します。
すべてのツールは、モデルが推論可能な構造化JSONを返します。エディターごとの専用ラッパーは不要です。
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 chromiumNode 20以上 が必要です。Playwrightがなくてもサーバーは起動しますが、それら3つのツールを呼び出すと「playwrightをインストールしてください」という明確なエラーが返されます。
~/Library/Application Support/Claude/claude_desktop_config.json （またはWindowsの同等パス）に追加します：
{
"mcpServers": {
"frontend-tools": {
"command": "mcp-frontend-tools"
}
}
}Settings → MCP → Add new server:
{
"frontend-tools": { "command": "mcp-frontend-tools" }
}.vscode/mcp.json に追加します：
{
"servers": {
"frontend-tools": { "command": "mcp-frontend-tools" }
}
}npx @modelcontextprotocol/inspector mcp-frontend-toolsaxe_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;
}すべてのファイルについて、生 / 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 }>;
}エージェントは型付きの契約を得る。 すべてのツールは、モデルがイントロスペクト可能なZodで検証されたJSON-Schemaです。
ローカルでのハルシネーションがない。 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 checkMIT © Ashish Joshi
AIアシスタント（Claude、Copilot、Cursor）にフロントエンド開発ツール（コンポーネントの雛形作成、バンドル分析、アクセシビリティチェック、レスポンシブデザインガイド）へのアクセスを提供する Model Context Protocol (MCP) サーバーです。
ツール | 説明 |
| テスト、ストーリー、CSSモジュールを含む型付きReactコンポーネントを生成 |
| ビルドディレクトリをスキャンして巨大なJS/CSSを特定し、結果を報告 |
| HTMLに対する静的なWCAG 2.2チェックと修正案の提示 |
| レスポンシブCSS、コンテナクエリ、Tailwindパターンの生成 |
~/Library/Application Support/Claude/claude_desktop_config.json に追加します：
{
"mcpServers": {
"frontend-tools": {
"command": "node",
"args": ["/path/to/mcp-frontend-tools/dist/index.js"]
}
}
}.vscode/settings.json に追加します：
{
"github.copilot.chat.mcpServers": {
"frontend-tools": {
"command": "node",
"args": ["${workspaceFolder}/mcp-frontend-tools/dist/index.js"]
}
}
}"アバター、名前、バイオのプロップを持つUserProfileCardコンポーネントの雛形を作成して"
AIが scaffold_react_component を呼び出し、以下が返されます：
UserProfileCard.tsx — forwardRefを使用した型付きコンポーネント
UserProfileCard.test.tsx — Testing Libraryによるテスト
UserProfileCard.stories.tsx — Storybookストーリー
UserProfileCard.module.css — CSSモジュール
index.ts — バレルエクスポート
"dist/フォルダのバンドルサイズの問題を分析して"
AIが analyze_bundle を呼び出し、巨大なファイル、推奨事項、要約テーブルを含むマークダウンレポートを返します。
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 generatornpm install
npm run build
npm run inspector # Test with MCP InspectorMIT
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.
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.
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.
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.
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.
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.
Recent tool additions, removals, and schema changes observed during successful MCP inspections.
Loading tool schema changelog…
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.
Live React design-system APIs, patterns, and code validation so AI agents build real UI, not slop.
Run accessibility, contrast, and design token audits and file QA issues from your AI coding tool.
Code intelligence platform for AI agents. 20 tools for architecture, security & impact analysis.
Direct access to Cypress tests results and accessibility reports in your AI workflow.
