⚠️ Sebelum Install Skill Ini
Skill ini butuh Claude Code terinstall duluan. Claude Code berbeda dari Claude.ai di browser. Ini versi yang jalan di terminal.
Langkah 1: Buka terminal
- Mac: Cmd+Space → ketik "Terminal" → Enter
- Windows: Win+R → ketik "cmd" → Enter
Langkah 2: Cek Node.js
node --version
Kalau error, download di https://nodejs.org (pilih LTS).
Langkah 3: Install Claude Code
npm install -g @anthropic-ai/claude-code
Langkah 4: Login
claude
Ikuti instruksi login di layar.
Apa itu UX-UI Mastery?
Ini bukan skill ringan. 310.000+ kata di 87 file, 19 skill domain, 55 referensi, 10 commands. Kalau skill desain lain fokus ke estetika, UX-UI Mastery fokus ke fondasi ilmiah di balik desain yang baik. Ini seperti dapat akses ke pengetahuan karir senior UX designer dalam satu instalasi. Dibuat oleh phazurlabs, tersedia di Claude Code Marketplace.
Apa yang Ada di Dalamnya
Cognitive Psychology untuk UX:
- 25+ Laws of UX dengan formula lengkap (Fitts Law, Hick Law, Miller Law, Peak-End Rule, Doherty Threshold)
- 50+ cognitive bias dengan ethical annotations
- Neurodesign dan attention science
- Flow state design
Component Patterns + Kode:
- 15 komponen React/TypeScript siap pakai
- 10 SwiftUI views termasuk iOS 26 support
- 12 modern CSS patterns
Aksesibilitas:
- WCAG 2.2 full coverage
- WCAG 3.0 April 2026 preview
- ARIA authoring practices
- Cognitive accessibility untuk ADHD, dyslexia, autism spectrum
Case Studies Real:
- 10 product deep-dive: Stripe, Linear, Notion, Airbnb, Figma, Arc Browser, Duolingo, Vercel, Apple Health, Discord
- 10 redesign failures: Snapchat, Windows 8, Digg v4, Sonos 2024, Healthcare.gov
AI UX:
- Multi-agent orchestration UX
- Generative UI patterns
- LLM hallucination guardrails
- Conversational AI dialogue patterns
Cara Install — 2 Pilihan
📁 Pilihan 1: Download ZIP dari GitHub
Langkah 1. Buka https://github.com/phazurlabs/ux-ui-mastery di browser
Langkah 2. Klik tombol hijau "Code" → "Download ZIP"
Langkah 3. Extract file ZIP
Langkah 4. Pindahkan folder ke:
- Mac:
~/.claude/skills/ux-ui-mastery - Windows:
%USERPROFILE%\.claude\skills\ux-ui-mastery
Langkah 5. Rename folder jadi ux-ui-mastery (hapus "-main" di akhir jika ada)
Langkah 6. Buka Claude Code (claude di terminal). Skill aktif otomatis saat kamu request task UX/UI.
⚡ Pilihan 2: Via Claude Marketplace
Buka Claude Code, lalu ketik:
/plugin marketplace add phazurlabs/ux-ui-mastery
Tunggu selesai, lalu:
/plugin install ux-ui-mastery@ux-ui-mastery-marketplace
Skill langsung permanen di semua session.
✅ Cara Verifikasi Install Berhasil
Ketik di Claude Code:
Analisis checkout flow ini dengan Fitts Law dan Hick Law.
Kalau Claude langsung menyebut formula dan angka spesifik dari kedua hukum itu (bukan penjelasan generik), skill sudah aktif.
Cara Pakai
Skill aktif otomatis untuk task UX/UI. Bisa juga panggil langsung dengan command:
Generate W3C Design Token System:
Generate complete design token system untuk aplikasi fintech saya, output multi-platform (web, iOS, Android).
Audit AI feature:
Audit fitur AI autocomplete di aplikasi ini dari 4 dimensi: Trust, Safety, Usability, Accessibility.
HEART Framework metrics:
Generate HEART framework metrics plan untuk fitur onboarding baru kami, lengkap dengan KPI dan tracking.
Analisis dengan Laws of UX:
Analisis checkout flow ini dengan Fitts Law dan Hick Law. Identifikasi friction point dan rekomendasikan perbaikan.
Contoh Output Laws of UX
Kamu tanya: "Kenapa checkout flow ini terasa berat?" Skill analisis dengan:
- Hick Law: Terlalu banyak pilihan payment di satu screen (7 opsi vs optimal 3-4)
- Fitts Law: Tombol CTA terlalu kecil dan terlalu jauh dari natural thumb zone di mobile
- Peak-End Rule: Pengalaman paling buruk di step konfirmasi alamat. Itu yang diingat user
Link GitHub: https://github.com/phazurlabs/ux-ui-mastery