/ Diretório / Playground / Responsive Craft
● Comunidade kylezantos ⚡ Instantâneo

Responsive Craft

por 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.

Demo ao vivo

Como fica na prática

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

Instalar

Escolha seu cliente

~/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"
      ]
    }
  }
}

Abra Claude Desktop → Settings → Developer → Edit Config. Reinicie após salvar.

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

Cursor usa o mesmo esquema mcpServers que o Claude Desktop. Config de projeto vence a global.

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

Clique no ícone MCP Servers na barra lateral do Cline, depois "Edit Configuration".

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

Mesmo formato do Claude Desktop. Reinicie o Windsurf para aplicar.

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

O Continue usa um array de objetos de servidor em vez de um map.

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

Adicione em context_servers. Zed recarrega automaticamente ao salvar.

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

Uma linha só. Verifique com claude mcp list. Remova com claude mcp remove.

Casos de uso

Usos do mundo real: Responsive Craft

Get started with Responsive Craft

Quando usar: When you want to bring Responsive Craft into your Claude workflow.

Fluxo
  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.✓ Copiado

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

Mais

Recursos

📖 Leia o README oficial no GitHub

🐙 Ver issues abertas

🔍 Ver todos os 400+ servidores MCP e Skills