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

Why use it

Key features

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

What it looks like in practice

oiloil-ui-ux-guide-skill.replay ▶ ready

0/0

Install

Pick your 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
    }
  }
}

Open Claude Desktop → Settings → Developer → Edit Config. Restart after saving.

~/.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 uses the same mcpServers schema as Claude Desktop. Project config wins over global.

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
    }
  }
}

Click the MCP Servers icon in the Cline sidebar, then "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
    }
  }
}

Same shape as Claude Desktop. Restart Windsurf to pick up changes.

~/.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 uses an array of server objects rather than a 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"
        ]
      }
    }
  }
}

Add to context_servers. Zed hot-reloads on save.

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

One-liner. Verify with claude mcp list. Remove with claude mcp remove.

Use Cases

Real-world ways to use OilOil UI/UX Guide

Have Claude critique a UI screenshot against design principles

👤 Solo devs without a designer ⏱ ~15 min intermediate

When to use: You built a screen and want a structured critique before shipping.

Prerequisites

Server/skill installed and authenticated — See repo README

Flow

Submit

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

→ Critique grouped by CRAP + HCI laws
Prioritize

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

→ Top-3 list with reasoning

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

Pitfalls

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.

Cost & Limits

What this costs to run

API quota: See provider docs for rate limits
Tokens per call: Varies by tool
Monetary: See repo README for pricing details
Tip: Cache tool results and avoid repeated identical calls.

Security

Permissions, secrets, blast radius

Credential storage: Use environment variables; never commit secrets

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

Troubleshooting

Common errors and fixes

critique is too generic

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

Verify: Re-run with context

skill doesn't see images

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

Verify: Test with a plain image first

Alternatives

OilOil UI/UX Guide vs others

Alternative	When to use it instead	Tradeoff
ai-friendly-web-design-skill	You want web-design-specific guidance	Narrower scope

More

Resources

📖 Read the official README on GitHub

🐙 Browse open issues

🔍 Browse all 400+ MCP servers and Skills