프론트엔드 작업을 위한 참조 Model Context Protocol 서버입니다. 한 번의 설치로 Claude Desktop, Cursor, VS Code, Zed, Continue와 같은 모든 코딩 에이전트가 UI를 직접 보고 조작할 수 있게 됩니다:
axe_audit — 원시 HTML(jsdom 경유) 또는 라이브 URL(Playwright 경유)에 대해 실제 axe-core 규칙 엔진을 실행합니다. WCAG 영향도별로 그룹화된 위반 사항과 수정 링크를 반환합니다.
page_screenshot — 뷰포트 / DPR / 컬러 스킴 / waitForSelector 제어 기능을 갖춘, 모든 URL 또는 CSS 선택자에 대한 헤드리스 Chromium PNG 스크린샷을 생성합니다.
bundle_budget_check — dist/ 디렉토리를 탐색하여 gzip(선택적으로 brotli 포함) 크기를 계산하고, 전역 또는 엔트리별 KB 예산을 강제합니다. CI에 즉시 사용 가능한 pass/fail JSON을 반환합니다.
design_token_diff — 두 개의 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 없이도 서버는 시작되지만, 해당 세 가지 도구를 호출하면 "install playwright" 오류가 명확하게 반환됩니다.
~/Library/Application Support/Claude/claude_desktop_config.json(또는 Windows 해당 경로)에 추가하세요:
{
"mcpServers": {
"frontend-tools": {
"command": "mcp-frontend-tools"
}
}
}설정 → MCP → 새 서버 추가:
{
"frontend-tools": { "command": "mcp-frontend-tools" }
}.vscode/mcp.json에 추가하세요:
{
"servers": {
"frontend-tools": { "command": "mcp-frontend-tools" }
}
}npx @modelcontextprotocol/inspector mcp-frontend-toolsRelated MCP server: UX/UI Tools for React + Material-UI
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 Schema입니다.
로컬 환각이 없습니다. 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 — 뷰포트 / DPR / 컬러 스킴 / waitForSelector 제어 기능을 갖춘, 모든 URL 또는 CSS 선택자에 대한 헤드리스 Chromium PNG 스크린샷을 생성합니다.
bundle_budget_check — dist/ 디렉토리를 탐색하여 gzip(선택적으로 brotli 포함) 크기를 계산하고, 전역 또는 엔트리별 KB 예산을 강제합니다. CI에 즉시 사용 가능한 pass/fail JSON을 반환합니다.
design_token_diff — 두 개의 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 없이도 서버는 시작되지만, 해당 세 가지 도구를 호출하면 "install playwright" 오류가 명확하게 반환됩니다.
~/Library/Application Support/Claude/claude_desktop_config.json(또는 Windows 해당 경로)에 추가하세요:
{
"mcpServers": {
"frontend-tools": {
"command": "mcp-frontend-tools"
}
}
}설정 → MCP → 새 서버 추가:
{
"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"]
}
}
}"아바타, 이름, 바이오 props를 가진 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.
| Name | Required | Description | Default |
|---|---|---|---|
| url | No | Fully qualified URL to audit. Requires playwright installed. | |
| html | No | Raw HTML string to audit (jsdom, no JS execution). | |
| tags | No | axe rule tags to include. Defaults to ['wcag2a','wcag2aa','wcag21a','wcag21aa','wcag22aa','best-practice']. | |
| selector | No | CSS selector to scope the audit (URL mode only). | |
| timeoutMs | No | Default 15000. |
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.
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.
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.
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.
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.
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.
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.
| Name | Required | Description | Default |
|---|---|---|---|
| buildDir | Yes | Absolute path to the build output directory (e.g. dist, .next/static). | |
| budgetKb | No | Global size budget in KB. Flags any file above this (gzipped). Default: 250. | |
| perEntryBudgetKb | No | Per-file budgets in KB keyed by glob-ish substring match. Matching file is checked against the most specific (longest) matching key. | |
| ext | No | File extensions to include (default: ['.js','.mjs','.cjs','.css']). | |
| includeBrotli | No | Also compute brotli sizes (slower). |
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.
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.
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.
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.
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.
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.
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.
| Name | Required | Description | Default |
|---|---|---|---|
| beforePath | Yes | Path to the baseline tokens JSON (Style Dictionary / W3C DTCG format). | |
| afterPath | Yes | Path to the new tokens JSON. | |
| ignoreKeys | No | Dot-path keys to ignore (e.g. ['$description','$extensions']). |
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.
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.
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.
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.
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.
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.
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.
| Name | Required | Description | Default |
|---|---|---|---|
| url | Yes | URL to screenshot. | |
| outPath | Yes | Absolute file path to write PNG to. Parent dirs will be created. | |
| selector | No | CSS selector to screenshot instead of the viewport. | |
| fullPage | No | Capture the full scrollable page (default: false). | |
| width | No | Viewport width (default 1280). | |
| height | No | Viewport height (default 800). | |
| deviceScaleFactor | No | DPR (default 2). | |
| colorScheme | No | ||
| waitForSelector | No | Wait for this selector before capturing. | |
| timeoutMs | No |
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.
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.
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.
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.
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.
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.
Write a TypeScript React component, optional test, and optional Storybook story into outDir. Supports functional, forwardRef, and polymorphic (as prop) variants.
| Name | Required | Description | Default |
|---|---|---|---|
| name | Yes | ||
| outDir | Yes | Absolute directory to write the component files into. Created if missing. | |
| variant | No | ||
| withTests | No | ||
| withStory | No | ||
| props | No |
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.
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.
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.
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.
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.
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.
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.
| Name | Required | Description | Default |
|---|---|---|---|
| storybookUrl | Yes | Base URL of a running Storybook, e.g. http://localhost:6006. | |
| storyId | Yes | Story id as it appears in the URL (e.g. 'components-button--primary'). | |
| screenshotPath | No | If set, save a PNG of the rendered story to this absolute path. | |
| runAxe | No | Run an axe-core audit of the rendered story (default true). | |
| viewport | No | ||
| colorScheme | No | ||
| timeoutMs | No |
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.
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.
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.
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.
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.
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.
Recent tool additions, removals, and schema changes observed during successful MCP inspections.
v2.0.0axe_auditbundle_budget_checkdesign_token_diffpage_screenshotscaffold_react_componentstorybook_story_runScored 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.
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.
Serves your design system and coding standards to coding agents, so they stop guessing.
