MCP Tools Reference
Complete reference for all MCP tools — visual diff, CSS fixes, accessibility, performance, and SEO auditing.
analyzeUiDiff
Performs smart visual diff analysis between a design image and implementation screenshot. Combines pixel matching, SSIM, layout shift detection, and anti-flake filtering.
Input:
{
designImage: string; // Base64-encoded PNG
implementationImage: string; // Base64-encoded PNG
selector?: string; // CSS selector for context
}Output includes:
- Pixel diff with total/different/percentage
- SSIM (Structural Similarity Index) score
- Layout shift detection (vertical/horizontal shifts)
- Anti-flake stability verdict (
stable/likely-flaky/flaky) - CSS fix suggestions with confidence scores
- Base64-encoded diff visualization image
generateCssFixes
Generates CSS or Tailwind class fixes from diff analysis suggestions.
Input:
{
suggestion: {
fixes: Array<{
selector: string;
property: string;
value: string;
priority: "high" | "medium" | "low";
confidence: number;
reason: string;
before: string;
after: string;
}>;
summary: string;
impact: "high" | "medium" | "low";
estimatedTime: string;
};
filePath?: string;
useTailwind?: boolean;
}Output:
{
type: "css" | "tailwind";
patch?: string; // CSS patch
classes?: string[]; // Tailwind classes
fixes: Fix[];
filePath: string;
}applyCssFixes
Applies generated CSS fixes to the target element.
Input:
{
selector: string;
fixes: Fix[];
filePath?: string;
}Output:
{
success: boolean;
applied: string[];
errors?: string[];
message: string;
}checkContrastTool
Audits color pairs for WCAG 2.1 accessibility compliance.
Input:
{
pairs: Array<{
foreground: string; // Hex color
background: string; // Hex color
}>;
}Output:
{
audit: {
pairs: Array<{
foreground: string;
background: string;
ratio: number;
score: string; // "AAA", "AA", "AA Large", "Fail"
meetsAA: boolean;
meetsAAA: boolean;
}>;
summary: {
total: number;
aaCompliant: number;
aaaCompliant: number;
failing: number;
}
}
summary: string;
}analyzeAccessibility
Runs a full axe-core WCAG 2.1 accessibility audit on HTML content.
Input:
{
html: string; // HTML to audit
rules?: string[]; // Specific axe-core rule IDs (optional)
}Output:
{
audit: {
violations: Array<{
id: string;
impact: "critical" | "serious" | "moderate" | "minor";
description: string;
nodes: Array<{ html: string; target: string[] }>;
}>;
passes: object[];
incomplete: object[];
complianceScore: number; // 0-100
};
message: string;
}auditPerformanceTool
Evaluates Core Web Vitals metrics and generates performance recommendations.
Input:
{
fcp?: number; // First Contentful Paint (ms)
lcp?: number; // Largest Contentful Paint (ms)
cls?: number; // Cumulative Layout Shift
tbt?: number; // Total Blocking Time (ms)
si?: number; // Speed Index (ms)
tti?: number; // Time to Interactive (ms)
ttfb?: number; // Time to First Byte (ms)
}Output:
{
audit: {
overallScore: number; // 0-100
rating: "Excellent" | "Good" | "Needs Improvement" | "Poor";
metrics: {
[key: string]: {
value: number;
score: number;
rating: string;
};
};
recommendations: Array<{
category: string;
description: string;
impact: "high" | "medium" | "low";
}>;
};
message: string;
}analyzeSEOTool
Audits HTML content for SEO best practices.
Input:
{
html: string;
}Output:
{
audit: {
score: number; // 0-100
checks: {
passed: Check[];
failed: Check[];
warnings: Check[];
};
recommendations: string[];
};
message: string;
}Checks include: meta tags (title, description, viewport), structured data (JSON-LD), heading hierarchy, image alt texts, mobile friendliness, link accessibility.