frontend-stack
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-stackverify 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.
frontend-stack-mcp
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.
60-second quickstart (Claude Code)
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: Rams
Other clients
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.
Tools, prompt and resource
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 input
Field | 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.
Environment variables
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 |
The pipeline in one table
# | 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.
FAQ
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.
Troubleshooting
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 |
|
Credits
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.
License
Available Tools
3 toolsfrontend_stack_pipelineFrontend stack pipelineA
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.
| Name | Required | Description | Default |
|---|---|---|---|
No parameters | |||
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations are provided, so the description carries the full behavioral burden. It usefully discloses the return format (markdown) and the exact stages returned, but says nothing about read-only nature, side effects, or whether the pipeline is static – reasonable inference covers some of this, but not all.
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 earning their place: the first specifies the payload, the second the invocation timing. The content is front-loaded with no filler.
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 no output schema and no annotations, the description must convey the return value, and it does list the pipeline stages and the markdown format. It stops short of describing how the style menu is structured or how the pipeline relates to the sibling tools.
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?
The tool takes zero parameters, so there is no parameter semantics to document; the baseline for a parameterless schema is 4.
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?
States a specific verb ('Returns') and resource (the frontend build pipeline plus the style menu), and enumerates the pipeline stages so the agent knows the payload shape. It does not explicitly distinguish itself from the sibling list_styles, whose territory overlaps with 'the style menu'.
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?
'Call it at the start of any website, landing page, UI, or redesign build' gives a clear triggering condition for the agent. There is no statement of when-not to use it or an explicit pointer to the alternatives list_styles and verify_page.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
list_stylesList style directionsA
Returns the style menu as JSON grouped by family. Pick exactly ONE style per build.
| Name | Required | Description | Default |
|---|---|---|---|
No parameters | |||
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations are provided, so the description carries the burden, but for a zero-parameter listing tool the safety surface is minimal. It discloses the return grouping ('grouped by family') yet says nothing about whether the menu is static, cached, or how large it is.
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 short sentences, zero waste, with the output shape front-loaded before the usage directive. Every sentence earns its place.
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?
There is no output schema, and the description compensates by stating the result is JSON grouped by family, which is enough for a trivial no-param lister. The internal structure of the menu is left implicit, but nothing critical to invoking it is missing.
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?
The tool takes no parameters, so per the rubric the baseline is 4; there is no parameter semantics to add beyond what the empty schema already conveys.
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?
States a specific verb and resource ('Returns the style menu') and adds the shape of the result ('as JSON grouped by family'). It does not name siblings like frontend_stack_pipeline or verify_page, so an agent must infer the boundary, but the resource itself is unambiguous.
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 clause 'Pick exactly ONE style per build' implies usage context (selecting a style for a build), which is more than nothing, but there is no explicit when-to-use vs. alternatives, no prerequisites, and no exclusions relative to the sibling tools.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
verify_pageVerify pageA
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.
| Name | Required | Description | Default |
|---|---|---|---|
| url | Yes | Page to check, e.g. http://localhost:5173 | |
| channel | No | Browser channel, e.g. "chrome" or "msedge" | |
| waitFor | No | CSS selector to wait for before checking | |
| fullPage | No | Full-page screenshot (default false) | |
| snapshot | No | Include the ARIA accessibility snapshot of the page (default true) | |
| viewports | No | Defaults to mobile 390x844 (isMobile + hasTouch) and desktop 1440x900 |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations, the description carries the full burden and does much of it: it discloses that a real Chromium browser is launched, that checks run per viewport, what artifacts are produced, and includes a workflow directive. What remains undisclosed are operational traits such as timeout/wait behavior, whether it requires the target server to be up, or any rate/side-effect profile.
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?
Front-loaded with the action and a single dense sentence enumerating outputs, followed by a crisp two-clause directive. The output list is long but each item earns its place; only minor tightening of the run-on sentence is possible.
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?
There is no output schema, so the description correctly enumerates the return payload, which is the most important completeness factor here. With 6 well-documented parameters and no annotations, it is nearly sufficient; only environment prerequisites and failure/timeout behavior are missing.
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 100%, so every parameter is already documented in the schema (including the viewport defaults and the 200-4000px / deviceScaleFactor 1-4 bounds). The description restates the default viewports but adds no syntax or edge-case detail beyond the schema, so the baseline 3 applies.
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 gives a specific verb and resource (opens a URL in Playwright Chromium across viewports and verifies the page) and enumerates exactly what is checked: screenshots, console errors, failed requests, overflow, axe-core violations, ARIA snapshot, pointer type. An agent can immediately tell this is a visual/accessibility verification tool, clearly distinct from the sibling frontend_stack_pipeline and list_styles.
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 closing line 'Look at the screenshots before calling a build done' gives one workflow cue for when to invoke it, but there is no explicit when-not guidance, no named alternatives, and no statement of prerequisites (e.g. a running dev server). Usage is implied rather than specified.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Tool Schema Changelog
Recent tool additions, removals, and schema changes observed during successful MCP inspections.
3 tool updates
v0.1.0- First observed
frontend_stack_pipeline - First observed
list_styles - First observed
verify_page
TDQS
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'.
Maintenance
Related MCP Connectors
A design agent in your coding agent's loop: briefs each screen, reviews UX and visual quality.
31Give your agent a real design system: tokens, measured WCAG contrast, and rules to follow.
UI design from prompts, screenshots, and URLs for AI coding agents and theme tokens.
Review frontend code and live pages against 386 quality-gated web development rules.
Related MCP Servers
- AlicenseNot gradedqualityAmaintenanceEnables AI agents to score live URLs against a 40-check design contract, validate DTCG tokens and Lottie animations, audit accessibility, and retrieve design-system contracts, catalogs, and review rubrics.253 npmMIT
- AlicenseNot gradedqualityCmaintenanceDesign review for UI code, inside your coding agent. Reviews React, Vue, Svelte, CSS and SwiftUI against 313 rules and returns scored findings with file:line fixes your agent can apply and verify.MIT
- AlicenseAqualityAmaintenanceOrchestrates full-stack frontend engineering—from intent discovery and design genome generation to automated multi-viewport QA—through JSON-RPC tools for AI agents.7332 npm1MIT
- AlicenseNot gradedqualityCmaintenanceEnables AI coding assistants to inspect frontend projects, search a curated design and motion recipe catalog, prepare and preview structured design plans, apply changes with backups and rollback, capture previews, audit UI accessibility and performance, and monitor activity via a web dashboard.12 npmMIT