Metadata-Version: 2.4
Name: frontend-dev-mcp
Version: 0.1.4
Summary: MCP server for frontend design systems, engineering patterns, accessibility, and UX workflows
Project-URL: Homepage, https://pypi.org/project/frontend-dev-mcp/
Project-URL: Repository, https://github.com/FarooqProProgrammer/frontend-development-mcp-server
Project-URL: Issues, https://github.com/FarooqProProgrammer/frontend-development-mcp-server/issues
Author: Muhammad Farooq
License-Expression: MIT
Keywords: accessibility,design-system,frontend,mcp,nextjs,react
Classifier: Development Status :: 4 - Beta
Classifier: Intended Audience :: Developers
Classifier: License :: OSI Approved :: MIT License
Classifier: Programming Language :: Python :: 3.12
Classifier: Topic :: Software Development :: User Interfaces
Requires-Python: >=3.12
Requires-Dist: beautifulsoup4
Requires-Dist: chromadb
Requires-Dist: httpx
Requires-Dist: mcp[cli]
Requires-Dist: openai
Requires-Dist: rich
Description-Content-Type: text/markdown

# Frontend Development MCP Server

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

**PyPI:** [`frontend-dev-mcp`](https://pypi.org/project/frontend-dev-mcp/)  
**GitHub:** [FarooqProProgrammer/frontend-development-mcp-server](https://github.com/FarooqProProgrammer/frontend-development-mcp-server)

## Install

Requires Python 3.12+ and [`uv`](https://docs.astral.sh/uv/).

```bash
# 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.)

```json
{
  "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

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

## Local development

```bash
uv run server.py
```

## Publish

```bash
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.
