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

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/*

Changelog

v0.1.4

• Semantic Search Tools: Added get_docs and index_docs tools to fetch, index, and query documentation using OpenRouter embeddings.
• Local Vector Database: Integrated chromadb for fast, local semantic retrieval.
• Web Scraping: Added beautifulsoup4 to fetch and parse live documentation URLs directly.