freemcplab / الدليل / الملعب / OilOil UI/UX Guide

● مجتمع oil-oil ⚡ فوري

OilOil UI/UX Guide

Name: OilOil UI/UX Guide (Claude Skill)
Author: oil-oil

بواسطة oil-oil · oil-oil/oiloil-ui-ux-guide

Modern UI/UX guidance covering CRAP, HCI laws, and design system thinking.

A skill that teaches Claude design fundamentals — CRAP principle, Hick's law, Fitts's law, Gestalt — and how to apply them to wireframes and component design. Catches the 'AI design slop' that makes everything look like the same dashboard.

▶ شاهد العرض 📦 التثبيت 💡 حالات الاستخدام

لماذا تستخدمه

الميزات الأساسية

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

عرض مباشر

كيف يبدو في الممارسة

oiloil-ui-ux-guide-skill.replay ▶ جاهز

0/0

التثبيت

اختر العميل

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

افتح Claude Desktop → Settings → Developer → Edit Config. أعد التشغيل بعد الحفظ.

~/.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 نفس مخطط mcpServers مثل Claude Desktop. إعدادات المشروع أولى من الإعدادات العامة.

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

انقر على أيقونة MCP Servers في شريط Cline الجانبي، ثم "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
    }
  }
}

نفس الصيغة مثل Claude Desktop. أعد تشغيل Windsurf لتطبيق التغييرات.

~/.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 مصفوفة من كائنات الخادم بدلاً من خريطة.

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

أضف إلى context_servers. يعيد Zed التحميل تلقائيًا عند الحفظ.

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

أمر من سطر واحد. تحقق باستخدام claude mcp list. احذف باستخدام claude mcp remove.

حالات الاستخدام

استخدامات عملية: OilOil UI/UX Guide

Have Claude critique a UI screenshot against design principles

👤 Solo devs without a designer ⏱ ~15 min intermediate

متى تستخدمه: You built a screen and want a structured critique before shipping.

المتطلبات الأساسية

Server/skill installed and authenticated — See repo README

الخطوات

Submit

Using the UI/UX skill, review attached screenshot of the settings page.✓ تم النسخ

→ Critique grouped by CRAP + HCI laws
Prioritize

Rank the issues by impact and tell me the top 3 to fix.✓ تم النسخ

→ Top-3 list with reasoning

النتيجة: A short, ranked action list rather than 30 vibes.

المزالق

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.

التكلفة والحدود

تكلفة التشغيل

حصة API: See provider docs for rate limits
الرموز لكل استدعاء: Varies by tool
التكلفة المالية: See repo README for pricing details
نصيحة: Cache tool results and avoid repeated identical calls.

الأمان

الصلاحيات والأسرار ونطاق الأثر

تخزين بيانات الاعتماد: Use environment variables; never commit secrets

نقل البيانات الخارجي: Tool calls go to the provider's API as documented

استكشاف الأخطاء

الأخطاء الشائعة وحلولها

critique is too generic

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

تحقق: Re-run with context

skill doesn't see images

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

تحقق: Test with a plain image first

البدائل