/ Verzeichnis / Playground / Responsive Craft
● Community kylezantos ⚡ Sofort

Responsive Craft

von kylezantos · kylezantos/responsive-craft

Claude Code skill for responsive design — mobile-first layouts, sticky coordination, dashboards.

Claude Code skill for responsive design — mobile-first layouts, sticky coordination, dashboards.

Live-Demo

In der Praxis

responsive-craft-skill.replay ▶ bereit
0/0

Installieren

Wählen Sie Ihren Client

~/Library/Application Support/Claude/claude_desktop_config.json  · Windows: %APPDATA%\Claude\claude_desktop_config.json
{
  "mcpServers": {
    "responsive-craft-skill": {
      "command": "npx",
      "args": [
        "-y",
        "responsive-craft-skill"
      ]
    }
  }
}

Öffne Claude Desktop → Settings → Developer → Edit Config. Nach dem Speichern neu starten.

~/.cursor/mcp.json · .cursor/mcp.json
{
  "mcpServers": {
    "responsive-craft-skill": {
      "command": "npx",
      "args": [
        "-y",
        "responsive-craft-skill"
      ]
    }
  }
}

Cursor nutzt das gleiche mcpServers-Schema wie Claude Desktop. Projektkonfiguration schlägt die globale.

VS Code → Cline → MCP Servers → Edit
{
  "mcpServers": {
    "responsive-craft-skill": {
      "command": "npx",
      "args": [
        "-y",
        "responsive-craft-skill"
      ]
    }
  }
}

Klicken Sie auf das MCP-Servers-Symbol in der Cline-Seitenleiste, dann "Edit Configuration".

~/.codeium/windsurf/mcp_config.json
{
  "mcpServers": {
    "responsive-craft-skill": {
      "command": "npx",
      "args": [
        "-y",
        "responsive-craft-skill"
      ]
    }
  }
}

Gleiche Struktur wie Claude Desktop. Windsurf neu starten zum Übernehmen.

~/.continue/config.json
{
  "mcpServers": [
    {
      "name": "responsive-craft-skill",
      "command": "npx",
      "args": [
        "-y",
        "responsive-craft-skill"
      ]
    }
  ]
}

Continue nutzt ein Array von Serverobjekten statt einer Map.

~/.config/zed/settings.json
{
  "context_servers": {
    "responsive-craft-skill": {
      "command": {
        "path": "npx",
        "args": [
          "-y",
          "responsive-craft-skill"
        ]
      }
    }
  }
}

In context_servers hinzufügen. Zed lädt beim Speichern neu.

claude mcp add responsive-craft-skill -- npx -y responsive-craft-skill

Einzeiler. Prüfen mit claude mcp list. Entfernen mit claude mcp remove.

Anwendungsfälle

Praxisnahe Nutzung: Responsive Craft

Get started with Responsive Craft

Wann einsetzen: When you want to bring Responsive Craft into your Claude workflow.

Ablauf
  1. Install the skill in your client (see Install tab).
  2. Authenticate or configure required tokens.
  3. Ask Claude to use the new tools.
    Use Responsive Craft to help me with a task.✓ Kopiert

Ergebnis: Claude can interact with Responsive Craft directly from your IDE.

Mehr

Ressourcen

📖 Offizielle README auf GitHub lesen

🐙 Offene Issues ansehen

🔍 Alle 400+ MCP-Server und Skills durchsuchen