⚠️ 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 Agent Skills?
Skill yang paling teknikal dan paling hardcore dari 8 yang ada di list ini. Dirancang untuk yang butuh UI yang benar-benar production-ready: lolos audit aksesibilitas dan konsisten dengan design system nyata, bukan sekadar kelihatan bagus. Yang bikin skill ini beda: library 138 design systems yang bisa dicari dan dipanggil, plus tools aksesibilitas yang langsung jalan (contrast checker WCAG, axe-core a11y, focus-trap, RTL support).
Isi Skill Ini
17 Slash-skills yang bisa dipanggil:
- Design token validator (W3C spec)
- Contrast checker WCAG otomatis
- axe-core accessibility testing
- Focus trap implementation
- RTL layout support
- Component state matrix generator
- Dan 11 lainnya
Library 138 Design Systems:
- System besar: Material 3, Apple HIG, Fluent, Carbon, shadcn/ui, Radix
- Brand system perusahaan: Stripe, Notion, Vercel, Spotify, Tesla, dan lainnya
- Semuanya bisa direferensikan langsung di prompt
Cara Install — 2 Pilihan
📁 Pilihan 1: Download ZIP dari GitHub
Langkah 1. Buka https://github.com/plugin87/ux-ui-agent-skills 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-agent-skills - Windows:
%USERPROFILE%\.claude\skills\ux-ui-agent-skills
Langkah 5. Rename folder jadi ux-ui-agent-skills
Langkah 6. Buka terminal, masuk ke folder tersebut:
cd ~/.claude/skills/ux-ui-agent-skills
Langkah 7. Jalankan setup (kalau ada file setup):
npx ux-ui-agent-skills init
Langkah 8. Buka Claude Code (claude di terminal). Skill siap dipakai.
⚡ Pilihan 2: Via npx langsung
Ketik di terminal:
npx ux-ui-agent-skills init
Atau via Claude Marketplace:
/plugin marketplace add plugin87/ux-ui-agent-skills
✅ Cara Verifikasi Install Berhasil
Ketik di Claude Code:
Cek kontras warna tombol #C8614A di atas background putih. Apakah lolos WCAG 2.2 AA?
Kalau Claude langsung kasih rasio kontras spesifik dan status pass/fail WCAG, skill sudah aktif.
Cara Pakai
Audit aksesibilitas:
Jalankan axe-core audit pada komponen form login ini. Fix semua issue WCAG 2.2 level AA.
Referensi design system spesifik:
Bikin komponen card dengan gaya Stripe — spacing, border, shadow, dan typography harus mengikuti Stripe design system.
Desain navigation sidebar mengikuti Carbon Design System IBM.
Pastikan focus management dan keyboard navigation benar.
Token validation:
Validasi semua design token di proyek ini terhadap W3C Design Token spec. Identifikasi yang tidak sesuai.
Cek kontras:
Cek kontras warna semua teks di halaman ini terhadap WCAG 2.2. Berikan nilai rasio dan rekomendasi perbaikan.
Kapan Pakai Skill Ini
Skill ini tepat dipakai saat:
- Proyek perlu lolos audit aksesibilitas formal
- Harus konsisten dengan design system klien yang sudah ada (Stripe, IBM, dsb)
- Butuh RTL support untuk pasar Timur Tengah atau Asia
- Perlu validasi token desain terhadap standar W3C Kalau kamu cuma butuh desain yang bagus dan tidak perlu audit ketat, Taste Skill atau UI-UX Pro Max lebih simpel dipakai.
Link GitHub: https://github.com/plugin87/ux-ui-agent-skills