[Hackathon] Stark Spiders – Frontend Intelligence MCP (Gavel)

[nidhi-nayana]

⚖️ GAVEL: Frontend Intelligence MCP Server

Core Motto: "The rules decide. The LLM only phrases."

📌 Overview

Gavel is an AI Frontend Architect MCP Server built with NitroStack. When pointed at a real web application codebase, Gavel inspects actual project files (package.json, lockfiles, tailwind.config.js, component trees), gathers user intent through intelligent caching, evaluates 6 modern UI and animation libraries against deterministic engineering rules, calculates transparent confidence scores with visible math, generates actionable coding specs with extracted design tokens, and validates recommendations using automated before-and-after Lighthouse performance benchmarks—rendering live interactive NitroStack widgets inside AI chat interfaces.

🛠️ Key Features & Tools Included (10 MCP Tools):

• elicitIntent: Elicits and caches human business goals in .gavel-context.
• analyzeProject: Audits project structure, framework versions, and component depth.
• inspectDependencies: Audits existing packages to prevent library overlap.
• inspectDesignLanguage: Extracts hex colors, font scales, and spacing tokens.
• recommendLibraries: Evaluates candidate rules with deterministic math and Groq rationale synthesis.
• compareLibraries: Direct 1-v-1 architectural trade-off comparisons.
• estimateBundleImpact: Computes minified/gzipped KB size and tree-shaking metrics.
• generateDesignSpec: Synthesizes winner + extracted design tokens into actionable specs.
• runLighthouse: Runs automated before/after Chrome Lighthouse performance audits.
• compareMetrics: Measures Core Web Vitals performance delta between audit runs.

🧪 Verification

• All 44 Vitest tests passing across 5 test suites.
• TypeScript strictly typed (npm run typecheck passes cleanly).
• Production build verified (npm run build succeeds).