Click on "Deploy Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type @ followed by the MCP server name and your instructions, e.g., "@frontend-stack verify http://localhost:3000 at mobile and desktop, then fix what you find"
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
An MCP server and Claude Code plugin that gives your AI coding agent two things:
A frontend build pipeline. Ten phases (audit, one style direction, taste floor, visual reference, motion, build, review, verify, perf, brand) plus a style menu, with one hard rule: styles are exclusive, process is cumulative.
verify_page. Opens your page in a real Playwright browser at phone and desktop size and hands back what a reviewer would check: a screenshot, an accessibility snapshot, console errors, failed requests, horizontal overflow (and which elements cause it), axe-core violations, and whether the page saw a touch (coarse) or mouse (fine) pointer.
The agent stops saying "done" on a page it never looked at.
claude mcp add frontend-stack -- npx -y github:Suhaib5333/frontend-stack-mcp
npx playwright install chromium # once per machineThen ask: "Run verify_page on http://localhost:5173 and fix what it finds."
Or install it as a plugin (MCP server and the frontend-stack skill together):
/plugin marketplace add Suhaib5333/frontend-stack-mcp
/plugin install frontend-stack@frontend-stack-mcpRelated MCP server: Pixasso MCP Server
The first npx run downloads and builds the server from GitHub, so it can take a minute. Later runs use the npm cache.
Claude Desktop (claude_desktop_config.json):
{
"mcpServers": {
"frontend-stack": {
"command": "npx",
"args": ["-y", "github:Suhaib5333/frontend-stack-mcp"]
}
}
}Cursor (.cursor/mcp.json or ~/.cursor/mcp.json):
{
"mcpServers": {
"frontend-stack": {
"command": "npx",
"args": ["-y", "github:Suhaib5333/frontend-stack-mcp"]
}
}
}VS Code (.vscode/mcp.json):
{
"servers": {
"frontend-stack": {
"type": "stdio",
"command": "npx",
"args": ["-y", "github:Suhaib5333/frontend-stack-mcp"]
}
}
}From a clone: npm ci && npm run build, then point your client at node /path/to/frontend-stack-mcp/dist/index.js.
Name | Kind | What it does |
| tool | Returns the pipeline and style menu as markdown. Call at the start of a build. |
| tool | Style menu as JSON, grouped by family. Pick exactly one. |
| tool | Playwright check of a URL at each viewport. See below. |
| prompt | The pipeline as a ready-made prompt. |
| resource | The pipeline markdown. |
verify_page inputField | Type | Default | Notes |
| string | required | Any URL the browser can reach, e.g. |
| array | 390x844 mobile ( | Each: |
| boolean |
| Full-page screenshot instead of the first screen. |
| string | none | CSS selector to wait for before checking (for client-rendered apps). |
| string | none | Use an installed browser: |
| boolean |
| Include the ARIA accessibility snapshot (YAML, truncated at 6000 characters). |
verify_page output (per viewport)A JSON text block followed by a JPEG screenshot:
{
"viewport": "mobile 390x844 touch",
"pointer": "coarse",
"consoleErrors": ["fixture console error"],
"failedRequests": ["404 GET http://127.0.0.1:5173/missing.json"],
"overflow": { "scrollWidth": 2008, "clientWidth": 390, "overflowing": true, "offenders": ["div#too-wide"] },
"a11y": { "violations": 1, "items": [{ "id": "image-alt", "impact": "critical", "help": "Images must have alternative text", "nodes": 1 }] },
"snapshot": "- main:\n - heading \"Fixture page with known problems\" [level=1]\n ..."
}Failures (bad URL, missing browser, timeout) come back as an isError result with a hint, never a crashed server.
Variable | Effect |
| Default browser channel when the call does not pass one. |
| Use a persistent browser profile, so pages behind a login stay signed in. Use a dedicated profile. |
| Set to |
# | Phase | Always? |
1 | Audit (existing UI only) | when redesigning |
2 | Direction: ONE style skill | yes |
3 | Taste floor | yes |
4 | Visual reference images | when the look matters most |
5 | Motion | animated pages |
6 | Build with no placeholders | yes |
7 | Review against guidelines | yes |
8 | Verify ( | whenever a URL exists |
9 | Perf | ship-ready |
10 | Brand assets | when asked |
Full text: skills/frontend-stack/SKILL.md. Step-by-step guide: docs/TUTORIAL.md. How it is built: docs/ARCHITECTURE.md.
Do I need the style and process skills the pipeline names? No. The pipeline and verify_page work on their own. The named skills make each phase stronger; install the ones you want from the credits below. Missing ones are skipped and named as skipped.
Why one style only? Mixing style systems (brutalism plus minimal plus neon) produces incoherent pages. Process skills (taste, review, verify) stack; style skills do not.
Is it the same as the Playwright MCP? No. Playwright MCP is a general remote control for a browser. verify_page is one call that runs a fixed checklist at two real device profiles and returns the findings. They work well together.
Does hasTouch really change the page? Yes. With isMobile and hasTouch the page sees (pointer: coarse), touch events and the mobile viewport meta, which is why pointer is reported, so hover-only UI shows up.
Problem | Fix |
|
|
First start is slow or times out in the client | The first |
| Your dev server is not running, or it listens on another host. Try |
Profile is locked | Close other browsers using |
Blank screenshot on a client-rendered app | Pass |
Server does not appear in Claude Code |
|
The pipeline routes to these skills. Their contents are not included here; install them from their sources.
Skills | Source | License |
Style skills in the menu (minimal, bento, editorial, brutalism, neon and the rest) | MIT | |
| MIT | |
| Vercel, vercel-labs/agent-skills | see source |
| Anthropic, Claude Code plugins | see source |
| community skill | see source |
Built on the MCP TypeScript SDK, Playwright and axe-core.
Returns the frontend build pipeline (audit, one style, taste floor, build, review, verify, perf) and the style menu as markdown. Call it at the start of any website, landing page, UI, or redesign build.
Inputs: no named parameters.
Returns the style menu as JSON grouped by family. Pick exactly ONE style per build.
Inputs: no named parameters.
Opens a URL in Playwright Chromium at each viewport (default: 390x844 mobile touch and 1440x900 desktop) and returns a screenshot, console errors, failed requests (4xx/5xx), horizontal overflow, axe-core accessibility violations, an ARIA accessibility snapshot, and the detected pointer type (coarse/fine). Look at the screenshots before calling a build done.
Inputs: url (required), channel, waitFor, fullPage, +2 more.
Recent tool additions, removals, and schema changes observed during successful MCP inspections.
Loading tool schema changelog…
Scored across 3 tools
verify_page is clearly distinct (browser verification), but frontend_stack_pipeline and list_styles overlap substantially since the pipeline tool also returns the style menu as markdown while list_styles returns the same menu as JSON. The format/purpose difference is explained in the descriptions, so an agent can pick correctly, but the boundary is blurry.
All names use snake_case, which is consistent, and list_styles/verify_page follow a verb_noun pattern. frontend_stack_pipeline breaks the pattern by being a noun phrase with a redundant server-name prefix, a minor deviation.
Three tools is on the thin side for a 'frontend-stack' server, but each one serves a distinct role in the described workflow (guidance, style choice, verification) and none feels gratuitous. Slightly under-scoped rather than bloated.
The surface covers pipeline discovery, style selection, and post-build verification, but there is no tool to actually scaffold, generate, or build a page, and no tool to re-read or diff results after iterating. The workflow has a notable gap between 'pick a style' and 'verify the page'.
A design agent in your coding agent's loop: briefs each screen, reviews UX and visual quality.
UX guidelines and audits for coding agents. Paid plans start audits, heatmaps and user simulations.
Website checker for AI coding agents. Measures your site in a real browser, with evidence.
Give your agent a real design system: tokens, measured WCAG contrast, and rules to follow.