OilOil UI/UX Guide (Claude Skill) — Installieren & Live-Demo

Warum nutzen

Hauptfunktionen

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

Live-Demo

In der Praxis

oiloil-ui-ux-guide-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": {
    "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
    }
  }
}

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

~/.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 nutzt das gleiche mcpServers-Schema wie Claude Desktop. Projektkonfiguration schlägt die 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
    }
  }
}

Klicken Sie auf das MCP-Servers-Symbol in der Cline-Seitenleiste, dann "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
    }
  }
}

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

~/.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 nutzt ein Array von Serverobjekten statt einer 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"
        ]
      }
    }
  }
}

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

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

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

Anwendungsfälle

Praxisnahe Nutzung: OilOil UI/UX Guide

Have Claude critique a UI screenshot against design principles

👤 Solo devs without a designer ⏱ ~15 min intermediate

Wann einsetzen: You built a screen and want a structured critique before shipping.

Voraussetzungen

Server/skill installed and authenticated — See repo README

Ablauf

Submit

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

→ Critique grouped by CRAP + HCI laws
Prioritize

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

→ Top-3 list with reasoning

Ergebnis: A short, ranked action list rather than 30 vibes.

Fallstricke

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.

Kosten & Limits

Was der Betrieb kostet

API-Kontingent: See provider docs for rate limits
Tokens pro Aufruf: Varies by tool
Kosten in €: See repo README for pricing details
Tipp: Cache tool results and avoid repeated identical calls.

Sicherheit

Rechte, Secrets, Reichweite

Credential-Speicherung: Use environment variables; never commit secrets

Datenabfluss: Tool calls go to the provider's API as documented

Fehlerbehebung

Häufige Fehler und Lösungen

critique is too generic

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

Prüfen: Re-run with context

skill doesn't see images

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

Prüfen: Test with a plain image first

Alternativen

OilOil UI/UX Guide vs. andere

Alternative	Wann stattdessen	Kompromiss
ai-friendly-web-design-skill	You want web-design-specific guidance	Narrower scope

Mehr

Ressourcen

📖 Offizielle README auf GitHub lesen

🐙 Offene Issues ansehen

🔍 Alle 400+ MCP-Server und Skills durchsuchen