frontend-dev-mcp 0.1.3

MCP server for frontend design systems, engineering patterns, accessibility, and UX workflows

Frontend Development MCP Server

Model Context Protocol (MCP) server for frontend design systems, engineering patterns, accessibility, and UX workflows.

PyPI: frontend-dev-mcp
GitHub: FarooqProProgrammer/frontend-development-mcp-server

Install

Requires Python 3.12+ and uv.

# Run without installing (recommended)
uvx --from frontend-dev-mcp frontend-mcp

# Or install globally
uv tool install frontend-dev-mcp
frontend-mcp

Connect to MCP Client (Cursor, Claude Desktop, etc.)

{
  "mcpServers": {
    "frontend-dev-server": {
      "command": "uvx",
      "args": ["--from", "frontend-dev-mcp", "frontend-mcp"],
      "env": {
        "FRONTEND_MCP_SKILLS_DIR": "C:/path/to/your-project/.agents/skills"
      }
    }
  }
}

Environment variables

Variable	Description
FRONTEND_MCP_SKILLS_DIR	Extra skills path (your project's .agents/skills)
FRONTEND_MCP_PROMPTS_DIR	Where project prompts are saved (default: ~/.frontend-mcp/prompts)
FRONTEND_MCP_CLI_TIMEOUT	Timeout for external CLI tools in seconds (default: 120)

Tools

Call list_frontend_capabilities for a full discovery list.

Design tokens

• get_color_palette, check_contrast_ratio, get_typography_scale, get_spacing_scale
• get_design_token_schema, export_design_tokens — export CSS or Tailwind theme

Styling & layout

• get_design_system_guide, get_icon_system_advice, get_animation_easing
• get_layout_patterns, get_motion_patterns, get_responsive_strategy

Components & UX

• get_component_states, get_complex_ui_patterns, get_microcopy_guide
• get_data_viz_guide

Accessibility & performance

• get_accessibility_checklist, get_performance_tips, get_frontend_security_checklist

Engineering

• get_framework_stack_guide — React, Next.js, Vue, Svelte, Astro, etc.
• get_state_and_data_guide — Zustand, TanStack Query, server actions
• get_form_patterns — react-hook-form + Zod
• get_testing_strategy — Vitest, RTL, Playwright
• get_project_structure_guide — folder conventions, monorepo
• get_error_loading_patterns — skeletons, errors, empty states
• get_seo_checklist, get_i18n_strategy, get_auth_ui_patterns

Skills & prompts (project memory)

• list_available_skills, get_agent_skill
• save_project_prompt, get_project_prompt, list_project_prompts

Optional external CLIs

• ask_gemini_cli, ask_cli_skill_prompt — require gemini / claude / cursor in PATH

Prompts

• frontend_project_kickoff — plan new project architecture
• frontend_engineering_workflow — stack → tokens → UI → quality → launch
• saas_dashboard_workflow — dashboard build checklist
• design_system_audit, component_design_session, dark_mode_strategy
• base_system_prompt, typography_prompt, distilled_aesthetics

Testing via Inspector

npx @modelcontextprotocol/inspector uvx --from frontend-dev-mcp frontend-mcp

Local development

uv run server.py

Publish

Remove-Item dist\* -Force
uv build
uvx twine upload dist/*