/ Annuaire / Playground / Responsive Craft
● Communauté kylezantos ⚡ Instantané

Responsive Craft

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

Démo en direct

Aperçu en pratique

responsive-craft-skill.replay ▶ prêt
0/0

Installer

Choisissez votre 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"
      ]
    }
  }
}

Ouvrez Claude Desktop → Settings → Developer → Edit Config. Redémarrez après avoir enregistré.

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

Cursor utilise le même schéma mcpServers que Claude Desktop. La config projet l'emporte sur la globale.

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

Cliquez sur l'icône MCP Servers dans la barre latérale Cline, puis "Edit Configuration".

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

Même format que Claude Desktop. Redémarrez Windsurf pour appliquer.

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

Continue utilise un tableau d'objets serveur plutôt qu'une map.

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

Ajoutez dans context_servers. Zed recharge à chaud à la sauvegarde.

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

Une seule ligne. Vérifiez avec claude mcp list. Supprimez avec claude mcp remove.

Cas d'usage

Usages concrets : Responsive Craft

Get started with Responsive Craft

Quand l'utiliser : When you want to bring Responsive Craft into your Claude workflow.

Déroulement
  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.✓ Copié

Résultat : Claude can interact with Responsive Craft directly from your IDE.

Plus

Ressources

📖 Lire le README officiel sur GitHub

🐙 Voir les issues ouvertes

🔍 Parcourir les 400+ serveurs MCP et Skills