frontend-dev-mcp 0.1.0__tar.gz

frontend_dev_mcp-0.1.0/PKG-INFO

@@ -0,0 +1,5 @@
+Metadata-Version: 2.4
+Name: frontend-dev-mcp
+Version: 0.1.0
+Summary: Frontend Development MCP Server
+Requires-Dist: mcp[cli]

frontend_dev_mcp-0.1.0/README.md

@@ -0,0 +1,51 @@
+# Frontend Development MCP Server
+
+This is a Model Context Protocol (MCP) server built with `FastMCP` that provides general frontend development guidance.
+
+## Tools Available
+- `get_design_system_guide(type)`: Get pros/cons of design systems ('utility-first', 'component-library', 'headless').
+- `get_color_palette(primary_hex)`: Generate a complete color palette from a primary hex code.
+- `get_accessibility_checklist()`: Essential a11y checklist.
+- `get_performance_tips(focus_area)`: Tips for 'images', 'javascript', or 'css'.
+
+## Prompts Available
+- `frontend_project_kickoff`: An interactive prompt to help plan architecture.
+
+## Installation
+
+### Standard Python (venv)
+```bash
+# Create a virtual environment
+python -m venv .venv
+# Activate it (Windows)
+.venv\\Scripts\\activate
+# Activate it (macOS/Linux)
+source .venv/bin/activate
+# Install dependencies
+pip install -r requirements.txt
+```
+
+## Running the Server
+
+### With the MCP Inspector
+To run interactively for testing:
+```bash
+npx @modelcontextprotocol/inspector .venv/Scripts/python server.py
+# Or on macOS/Linux: npx @modelcontextprotocol/inspector .venv/bin/python server.py
+```
+
+### Claude Desktop Integration
+Add the following to your Claude Desktop `claude_desktop_config.json`:
+```json
+{
+  "mcpServers": {
+    "frontend-dev": {
+      "command": "C:\\\\absolute\\\\path\\\\to\\\\.venv\\\\Scripts\\\\python.exe",
+      "args": [
+        "C:\\\\absolute\\\\path\\\\to\\\\server.py"
+      ]
+    }
+  }
+}
+```
+*(Make sure to use the absolute paths for your machine).*

frontend_dev_mcp-0.1.0/frontend_dev_mcp.egg-info/PKG-INFO

@@ -0,0 +1,5 @@
+Metadata-Version: 2.4
+Name: frontend-dev-mcp
+Version: 0.1.0
+Summary: Frontend Development MCP Server
+Requires-Dist: mcp[cli]

frontend_dev_mcp-0.1.0/frontend_dev_mcp.egg-info/SOURCES.txt

@@ -0,0 +1,9 @@
+README.md
+pyproject.toml
+server.py
+frontend_dev_mcp.egg-info/PKG-INFO
+frontend_dev_mcp.egg-info/SOURCES.txt
+frontend_dev_mcp.egg-info/dependency_links.txt
+frontend_dev_mcp.egg-info/entry_points.txt
+frontend_dev_mcp.egg-info/requires.txt
+frontend_dev_mcp.egg-info/top_level.txt

frontend_dev_mcp-0.1.0/frontend_dev_mcp.egg-info/dependency_links.txt

@@ -0,0 +1 @@
+

frontend_dev_mcp-0.1.0/frontend_dev_mcp.egg-info/entry_points.txt

@@ -0,0 +1,2 @@
+[console_scripts]
+frontend-mcp = server:mcp.run

frontend_dev_mcp-0.1.0/frontend_dev_mcp.egg-info/requires.txt

@@ -0,0 +1 @@
+mcp[cli]

frontend_dev_mcp-0.1.0/frontend_dev_mcp.egg-info/top_level.txt

@@ -0,0 +1 @@
+server

frontend_dev_mcp-0.1.0/pyproject.toml

@@ -0,0 +1,8 @@
+[project]
+name = "frontend-dev-mcp"
+version = "0.1.0"
+description = "Frontend Development MCP Server"
+dependencies = ["mcp[cli]"]
+
+[project.scripts]
+frontend-mcp = "server:mcp.run"

frontend_dev_mcp-0.1.0/server.py

@@ -0,0 +1,232 @@
+import os
+import subprocess
+import colorsys
+from mcp.server.fastmcp import FastMCP
+
+mcp = FastMCP("Frontend Development Server")
+
+@mcp.tool()
+def get_design_system_guide(type: str) -> str:
+    """
+    Provides pros/cons of popular design systems and when to use them.
+    
+    Args:
+        type: The category of design system (e.g., 'utility-first', 'component-library', 'headless')
+    """
+    type = type.lower()
+    if type == "utility-first":
+        return """Utility-First (e.g., Tailwind CSS)
+Pros:
+- Highly customizable without leaving HTML.
+- Small bundle sizes in production.
+- Consistency out of the box.
+
+Cons:
+- Cluttered HTML markup.
+- Steep learning curve for the utility classes.
+
+When to use:
+When you need complete custom designs, fast prototyping, or have a team that is comfortable learning the utility syntax.
+"""
+    elif type == "component-library":
+        return """Component Libraries (e.g., Material UI, Ant Design, Bootstrap)
+Pros:
+- Faster initial development with pre-built components.
+- Standardized UI/UX.
+- Good documentation and community support.
+
+Cons:
+- Harder to deeply customize without fighting the framework.
+- Can lead to a generic "cookie-cutter" look.
+- Potentially large bundle sizes.
+
+When to use:
+For enterprise applications, dashboards, or MVPs where speed of delivery is more important than a unique custom design.
+"""
+    elif type == "headless":
+        return """Headless UI Libraries (e.g., Radix UI, Headless UI, React Aria)
+Pros:
+- Complete control over styling while maintaining accessibility and behavior.
+- Solves complex interactive patterns (dropdowns, modals, tabs).
+
+Cons:
+- Requires writing all the CSS yourself.
+- Initial setup takes more time than fully styled components.
+
+When to use:
+When you need a highly custom, accessible design system from scratch. Often paired with Tailwind CSS.
+"""
+    else:
+        return "Unknown design system type. Try 'utility-first', 'component-library', or 'headless'."
+
+
+def hex_to_rgb(hex_color: str):
+    hex_color = hex_color.lstrip('#')
+    if len(hex_color) == 3:
+        hex_color = ''.join(c + c for c in hex_color)
+    return tuple(int(hex_color[i:i+2], 16) / 255.0 for i in (0, 2, 4))
+
+def rgb_to_hex(r, g, b):
+    return '#{:02x}{:02x}{:02x}'.format(int(r*255), int(g*255), int(b*255))
+
+@mcp.tool()
+def get_color_palette(primary_hex: str) -> str:
+    """
+    Provides color palette recommendations based on a primary hex code.
+    
+    Args:
+        primary_hex: A 3 or 6-character hex string, e.g. '#3498db'
+    """
+    try:
+        r, g, b = hex_to_rgb(primary_hex)
+    except ValueError:
+        return "Invalid hex color format. Please provide a valid hex color like '#3498db'."
+    
+    h, l, s = colorsys.rgb_to_hls(r, g, b)
+    
+    # Calculate complementary
+    comp_h = (h + 0.5) % 1.0
+    r_c, g_c, b_c = colorsys.hls_to_rgb(comp_h, l, s)
+    complementary_hex = rgb_to_hex(r_c, g_c, b_c)
+    
+    # Calculate analogous
+    an1_h = (h + 1/12) % 1.0
+    an2_h = (h - 1/12) % 1.0
+    r_a1, g_a1, b_a1 = colorsys.hls_to_rgb(an1_h, l, s)
+    r_a2, g_a2, b_a2 = colorsys.hls_to_rgb(an2_h, l, s)
+    analogous1_hex = rgb_to_hex(r_a1, g_a1, b_a1)
+    analogous2_hex = rgb_to_hex(r_a2, g_a2, b_a2)
+
+    return f"""Based on your primary color {primary_hex}, here are generated recommendations for a complete palette:
+    
+- Primary: {primary_hex}
+- Secondary (Complementary): {complementary_hex}
+- Analogous 1: {analogous1_hex}
+- Analogous 2: {analogous2_hex}
+
+- Background: #F8FAFC (Light Mode) or #0F172A (Dark Mode)
+- Surface: #FFFFFF (Light Mode) or #1E293B (Dark Mode)
+- Text Primary: #0F172A (Light Mode) or #F8FAFC (Dark Mode)
+- Text Secondary: #64748B (Light Mode) or #94A3B8 (Dark Mode)
+- Error: #EF4444
+- Success: #22C55E
+
+Tip: Ensure contrast ratios between text and backgrounds meet at least AA standards (4.5:1).
+"""
+
+
+@mcp.tool()
+def get_accessibility_checklist() -> str:
+    """Returns an essential frontend accessibility (a11y) checklist."""
+    return """Frontend Accessibility (a11y) Checklist:
+
+1. Semantic HTML:
+   - Use correct tags (e.g., <button> for actions, <a> for links).
+   - Use headings (<h1> to <h6>) in a logical, sequential order.
+   
+2. Keyboard Navigation:
+   - Ensure all interactive elements are focusable via 'Tab'.
+   - Verify focus states are clearly visible (do not outline: none without a fallback).
+   
+3. ARIA & Screen Readers:
+   - Provide `alt` text for all meaningful images. Use empty `alt=""` for decorative ones.
+   - Use `aria-labels` or visually hidden text when interactive elements lack text content (e.g., icon buttons).
+   
+4. Color & Contrast:
+   - Check text-to-background contrast ratios (aim for 4.5:1 for normal text).
+   - Do not rely on color alone to convey information (e.g., error states should have text/icons).
+   
+5. Forms:
+   - Associate `<label>` elements with their corresponding `<input>` via the `for` attribute.
+   - Provide clear error messages and associate them with the invalid input.
+"""
+
+
+@mcp.tool()
+def get_performance_tips(focus_area: str) -> str:
+    """
+    Returns performance optimization tips for specific frontend areas.
+    
+    Args:
+        focus_area: The area to optimize (e.g., 'images', 'javascript', 'css')
+    """
+    focus = focus_area.lower()
+    if focus == "images":
+        return """Image Optimization Tips:
+- Use modern formats like WebP or AVIF.
+- Implement lazy loading (loading="lazy").
+- Provide multiple sizes using `srcset` and `<picture>` tags.
+- Compress images before uploading.
+- Serve images via a CDN.
+"""
+    elif focus == "javascript":
+        return """JavaScript Optimization Tips:
+- Code splitting: split bundles and load JS only when needed (e.g., dynamic imports).
+- Tree shaking: remove unused code during the build process.
+- Defer non-critical scripts (`defer` or `async` attributes).
+- Optimize third-party scripts (e.g., analytics, ads).
+- Minimize main thread work by moving heavy computations to Web Workers.
+"""
+    elif focus == "css":
+        return """CSS Optimization Tips:
+- Extract critical CSS and inline it in the `<head>`.
+- Defer non-critical CSS.
+- Minify CSS in production.
+- Avoid deeply nested selectors and overly complex rules.
+- Remove unused CSS (tools like PurgeCSS).
+"""
+    else:
+        return "Unknown focus area. Try 'images', 'javascript', or 'css'."
+
+
+@mcp.prompt()
+def frontend_project_kickoff() -> str:
+    """A prompt to help users start thinking about a new frontend architecture."""
+    return """I am starting a new frontend project. Help me plan the architecture by asking me these questions one by one:
+
+1. What is the core purpose and scale of the application (e.g., simple landing page, complex dashboard, e-commerce)?
+2. What are the key non-functional requirements (e.g., SEO, initial load performance, offline capabilities)?
+3. What is the team's experience level with different frameworks and paradigms?
+4. Do we need a custom design system, or should we use an off-the-shelf component library?
+5. How will state be managed (local vs. global, server state vs. client state)?
+
+Wait for my answer to each question before proceeding to the next.
+"""
+@mcp.tool()
+def get_agent_skill(skill_name: str) -> str:
+    """
+    Returns the content of a local agent skill based on the user input.
+    
+    Args:
+        skill_name: The name of the skill to retrieve (e.g., 'frontend-design').
+    """
+    base_dir = os.path.dirname(os.path.abspath(__file__))
+    skill_path = os.path.join(base_dir, ".agents", "skills", skill_name, "SKILL.md")
+    
+    if os.path.exists(skill_path):
+        with open(skill_path, "r", encoding="utf-8") as f:
+            return f.read()
+    else:
+        return f"Skill '{skill_name}' not found in the .agents/skills directory."
+
+
+@mcp.tool()
+def ask_gemini_cli(prompt: str) -> str:
+    """
+    Calls the locally installed Gemini CLI to process a prompt without needing an API key in the code.
+    
+    Args:
+        prompt: The question or task to send to the Gemini CLI.
+    """
+    try:
+        caveman_prompt = f"{prompt}\n\n[SYSTEM INSTRUCTION: Answer in 'caveman mode'. Be ultra-concise. Drop articles (a/an/the) and filler words. Keep technical terms exact. Fragments OK.]"
+        result = subprocess.run(["gemini", caveman_prompt], capture_output=True, text=True, check=True)
+        return result.stdout.strip()
+    except subprocess.CalledProcessError as e:
+        return f"Error executing Gemini CLI: {e.stderr.strip() or e.stdout.strip()}"
+    except FileNotFoundError:
+        return "Gemini CLI is not installed or not found in the system PATH. Please install it first."
+
+
+if __name__ == "__main__":
+    mcp.run()

frontend_dev_mcp-0.1.0/setup.cfg

@@ -0,0 +1,4 @@
+[egg_info]
+tag_build = 
+tag_date = 0
+