OilOil UI/UX Guide (Claude Skill) — Installer & Démo en direct

Pourquoi l'utiliser

Fonctionnalités clés

CRAP principle checklist (Contrast, Repetition, Alignment, Proximity)
Common HCI laws with concrete examples
Design system thinking (tokens, components, patterns)
Critique mode: 'review this UI against these principles'
Pairs well with frontend code-gen skills

Démo en direct

Aperçu en pratique

oiloil-ui-ux-guide-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": {
    "oiloil-ui-ux-guide-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/oil-oil/oiloil-ui-ux-guide",
        "~/.claude/skills/oiloil-ui-ux-guide"
      ],
      "_inferred": true
    }
  }
}

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

~/.cursor/mcp.json · .cursor/mcp.json

{
  "mcpServers": {
    "oiloil-ui-ux-guide-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/oil-oil/oiloil-ui-ux-guide",
        "~/.claude/skills/oiloil-ui-ux-guide"
      ],
      "_inferred": true
    }
  }
}

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": {
    "oiloil-ui-ux-guide-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/oil-oil/oiloil-ui-ux-guide",
        "~/.claude/skills/oiloil-ui-ux-guide"
      ],
      "_inferred": true
    }
  }
}

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

~/.codeium/windsurf/mcp_config.json

{
  "mcpServers": {
    "oiloil-ui-ux-guide-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/oil-oil/oiloil-ui-ux-guide",
        "~/.claude/skills/oiloil-ui-ux-guide"
      ],
      "_inferred": true
    }
  }
}

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

~/.continue/config.json

{
  "mcpServers": [
    {
      "name": "oiloil-ui-ux-guide-skill",
      "command": "git",
      "args": [
        "clone",
        "https://github.com/oil-oil/oiloil-ui-ux-guide",
        "~/.claude/skills/oiloil-ui-ux-guide"
      ]
    }
  ]
}

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

~/.config/zed/settings.json

{
  "context_servers": {
    "oiloil-ui-ux-guide-skill": {
      "command": {
        "path": "git",
        "args": [
          "clone",
          "https://github.com/oil-oil/oiloil-ui-ux-guide",
          "~/.claude/skills/oiloil-ui-ux-guide"
        ]
      }
    }
  }
}

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

claude mcp add oiloil-ui-ux-guide-skill -- git clone https://github.com/oil-oil/oiloil-ui-ux-guide ~/.claude/skills/oiloil-ui-ux-guide

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

Cas d'usage

Usages concrets : OilOil UI/UX Guide

Have Claude critique a UI screenshot against design principles

👤 Solo devs without a designer ⏱ ~15 min intermediate

Quand l'utiliser : You built a screen and want a structured critique before shipping.

Prérequis

Server/skill installed and authenticated — See repo README

Déroulement

Submit

Using the UI/UX skill, review attached screenshot of the settings page.✓ Copié

→ Critique grouped by CRAP + HCI laws
Prioritize

Rank the issues by impact and tell me the top 3 to fix.✓ Copié

→ Top-3 list with reasoning

Résultat : A short, ranked action list rather than 30 vibes.

Pièges

Visual critique from a screenshot misses interaction issues. Pair with a real Playwright walkthrough for flows. — Visual critique from a screenshot misses interaction issues. Pair with a real Playwright walkthrough for flows.

Coût et limites

Coût d'exécution

Quota d'API: See provider docs for rate limits
Tokens par appel: Varies by tool
Monétaire: See repo README for pricing details
Astuce: Cache tool results and avoid repeated identical calls.

Sécurité

Permissions, secrets, portée

Stockage des identifiants : Use environment variables; never commit secrets

Sortie de données : Tool calls go to the provider's API as documented

Dépannage

Erreurs courantes et correctifs

critique is too generic

Provide the screen's purpose and audience. The skill's quality improves with context.

Vérifier : Re-run with context

skill doesn't see images

Ensure your Claude client supports image input; otherwise paste a Figma/HTML render.

Vérifier : Test with a plain image first

Alternatives

OilOil UI/UX Guide vs autres

Alternative	Quand l'utiliser	Compromis
ai-friendly-web-design-skill	You want web-design-specific guidance	Narrower scope

Plus

Ressources

📖 Lire le README officiel sur GitHub

🐙 Voir les issues ouvertes

🔍 Parcourir les 400+ serveurs MCP et Skills