Skip to main content
Glama

frontend-stack-mcp

CI License: MIT Node MCP

An MCP server and Claude Code plugin that gives your AI coding agent two things:

  1. 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.

  2. 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 machine

Then 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-mcp

Related 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

frontend_stack_pipeline

tool

Returns the pipeline and style menu as markdown. Call at the start of a build.

list_styles

tool

Style menu as JSON, grouped by family. Pick exactly one.

verify_page

tool

Playwright check of a URL at each viewport. See below.

frontend_stack

prompt

The pipeline as a ready-made prompt.

frontend-stack://pipeline

resource

The pipeline markdown.

verify_page input

Field

Type

Default

Notes

url

string

required

Any URL the browser can reach, e.g. http://localhost:3000.

viewports

array

390x844 mobile (isMobile, hasTouch, 2x) and 1440x900 desktop

Each: width, height, optional name, isMobile, hasTouch, deviceScaleFactor. Max 6.

fullPage

boolean

false

Full-page screenshot instead of the first screen.

waitFor

string

none

CSS selector to wait for before checking (for client-rendered apps).

channel

string

none

Use an installed browser: chrome, msedge.

snapshot

boolean

true

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

FRONTEND_STACK_CHANNEL

Default browser channel when the call does not pass one.

FRONTEND_STACK_USER_DATA_DIR

Use a persistent browser profile, so pages behind a login stay signed in. Use a dedicated profile.

FRONTEND_STACK_HEADLESS

Set to false to watch the browser.

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 (verify_page)

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

Executable doesn't exist

npx playwright install chromium, or pass channel: "chrome". On Linux CI: npx playwright install --with-deps chromium.

First start is slow or times out in the client

The first npx github: run builds the package. Run npx -y github:Suhaib5333/frontend-stack-mcp once in a terminal (it waits on stdin, press Ctrl+C), then restart the client.

ERR_CONNECTION_REFUSED

Your dev server is not running, or it listens on another host. Try 127.0.0.1 instead of localhost.

Profile is locked

Close other browsers using FRONTEND_STACK_USER_DATA_DIR. A profile can only be open once.

Blank screenshot on a client-rendered app

Pass waitFor with a selector that appears once the app has rendered.

Server does not appear in Claude Code

claude mcp list, then claude mcp get frontend-stack for the error.

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)

typeui.sh

MIT

design-taste-frontend, high-end-visual-design, gpt-taste, redesign-existing-projects, full-output-enforcement, minimalist-ui, industrial-brutalist-ui, imagegen-frontend-web, imagegen-frontend-mobile, image-to-code, brandkit

taste-skill

MIT

web-design-guidelines

Vercel, vercel-labs/agent-skills

see source

frontend-design

Anthropic, Claude Code plugins

see source

web-perf

community skill

see source

Built on the MCP TypeScript SDK, Playwright and axe-core.

License

MIT

Available Tools

3 tools
frontend_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.

ParametersJSON Schema
NameRequiredDescriptionDefault

No parameters

TDQS

A3.9/5.0
Behavior3/5

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.

Conciseness5/5

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.

Completeness4/5

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.

Parameters4/5

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.

Purpose4/5

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.

Usage Guidelines4/5

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.

ParametersJSON Schema
NameRequiredDescriptionDefault

No parameters

TDQS

A3.7/5.0
Behavior3/5

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.

Conciseness5/5

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.

Completeness4/5

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.

Parameters4/5

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.

Purpose4/5

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.

Usage Guidelines3/5

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.

ParametersJSON Schema
NameRequiredDescriptionDefault
urlYesPage to check, e.g. http://localhost:5173
channelNoBrowser channel, e.g. "chrome" or "msedge"
waitForNoCSS selector to wait for before checking
fullPageNoFull-page screenshot (default false)
snapshotNoInclude the ARIA accessibility snapshot of the page (default true)
viewportsNoDefaults to mobile 390x844 (isMobile + hasTouch) and desktop 1440x900

TDQS

A3.9/5.0
Behavior4/5

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.

Conciseness4/5

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.

Completeness4/5

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.

Parameters3/5

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.

Purpose5/5

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.

Usage Guidelines3/5

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.

  1. 3 tool updatesv0.1.0
    • First observedfrontend_stack_pipeline
    • First observedlist_styles
    • First observedverify_page

TDQS

A3.8/5.0

Scored across 3 tools

Disambiguation4/5

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.

Naming Consistency4/5

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.

Tool Count4/5

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.

Completeness3/5

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

ActivityMaintained
ResponsivenessNo issues

Related MCP Connectors

Related MCP Servers

  • A
    license
    Not graded
    quality
    A
    maintenance
    Enables 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 npm
    MIT
  • A
    license
    Not graded
    quality
    C
    maintenance
    Design 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
  • A
    license
    Not graded
    quality
    C
    maintenance
    Enables 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 npm
    MIT