| name | ui-components-expert |
| description | Expert guide for checking and improving the 4 main pillars of UI components: input controls, navigation, information, and containers. / Panduan ahli untuk memeriksa dan meningkatkan 4 pilar utama komponen UI: kontrol input, navigasi, informasi, dan kontainer. |
🎨 UI Components 4 Pillars Expert
Skill ini memberikan panduan komprehensif untuk mengevaluasi, mengaudit, dan meningkatkan 4 pilar utama komponen User Interface (UI). Tujuannya adalah memastikan setiap komponen tidak hanya terlihat indah secara visual (Aesthetics), tetapi juga berfungsi secara intuitif (Usability), dapat diakses oleh semua pengguna (Accessibility/a11y), dan konsisten dengan sistem desain.
🎯 4 Pilar Utama Komponen UI
1. Kontrol Input (Input Controls)
Komponen yang memungkinkan pengguna berinteraksi dan memasukkan data.
Contoh: Buttons, Checkboxes, Radio Buttons, Text Fields, Toggles/Switches, Dropdowns.
✅ Checklist & Best Practices:
- State Visual yang Jelas: Pastikan ada perbedaan visual yang jelas untuk state
Default, Hover, Active/Pressed, Focus (untuk aksesibilitas keyboard), dan Disabled.
- Ukuran Target Sentuh (Touch Target): Minimal 44x44 pixel (berdasarkan standar HIG/Material) untuk kenyamanan pengguna mobile.
- Feedback Langsung: Berikan umpan balik instan saat input berinteraksi (misalnya riak/ripple effect, perubahan warna, animasi transisi).
- Validasi & Error Handling: Tampilkan pesan error yang spesifik dan inline pada form input, gunakan warna merah dan ikon peringatan, jangan hanya mengandalkan warna.
- Aksesibilitas (a11y): Gunakan tag label yang terhubung ke input (misal
htmlFor), sertakan atribut aria-invalid jika ada error.
2. Navigasi (Navigation)
Komponen yang membantu pengguna bergerak di dalam struktur aplikasi atau situs web.
Contoh: Menus, Tabs, Breadcrumbs, Pagination, Sidebars, Bottom Navigation.
✅ Checklist & Best Practices:
- Indikasi Lokasi Saat Ini (Active State): Pengguna harus selalu tahu di mana mereka berada. Highlight menu atau tab yang sedang aktif dengan warna kontras, garis bawah, atau background tebal.
- Hierarki yang Logis: Kelompokkan item navigasi berdasarkan kepentingannya. Jangan tampilkan terlalu banyak opsi (prinsip Hick's Law).
- Responsivitas: Gunakan Hamburger Menu atau Bottom Navigation di perangkat mobile, pertahankan tab yang bisa digeser (swipeable/scrollable).
- Breadcrumbs: Gunakan breadcrumbs untuk hierarki yang lebih dalam dari 2 level agar pengguna bisa dengan mudah kembali ke halaman induk.
3. Informasi (Information)
Komponen yang menyampaikan status, panduan, atau peringatan kepada pengguna.
Contoh: Notifications (Toasts), Tooltips, Badges, Alerts, Progress Bars, Spinners.
✅ Checklist & Best Practices:
- Pewarnaan Kontekstual: Gunakan warna standar untuk status: Hijau (Sukses), Merah (Error), Kuning/Oranye (Peringatan), Biru (Informasi).
- Kemudahan Menutup (Dismissibility): Berikan opsi (tombol X) untuk menutup notifikasi persisten. Untuk toast notifikasi sukses/info, berikan auto-dismiss (misalnya setelah 3-5 detik).
- Tooltips: Hanya muncul saat di-hover (desktop) atau ditekan lama (mobile). Jangan gunakan tooltips untuk informasi kritis yang wajib dibaca, gunakan teks bantuan inline.
- Animasi Transisi: Notifikasi harus muncul dan menghilang dengan animasi yang halus (slide in/out, fade in/out) agar tidak mengejutkan pengguna.
4. Kontainer (Containers)
Komponen yang mengelompokkan konten terkait menjadi unit visual yang terstruktur.
Contoh: Cards, Modals (Dialogs), Accordions, Drawers/Bottom Sheets, Carousels.
✅ Checklist & Best Practices:
- Visual Hierarchy & Depth: Gunakan Drop Shadows atau batas tipis (borders) untuk membedakan kontainer dari background utama. Bedakan elevasi (z-index) antara Card biasa dan Modal yang melayang.
- Fokus Manajemen pada Modal: Saat modal terbuka, background harus digelapkan (overlay/backdrop), scroll halaman di belakang harus dikunci (body
overflow: hidden), dan fokus keyboard harus "terperangkap" (trap focus) di dalam modal. Bisa ditutup dengan tombol Escape (ESC) atau mengklik di luar area modal (backdrop click).
- Padding dan Whitespace: Berikan ruang bernapas (padding) yang cukup di dalam kontainer. Hindari teks atau elemen yang terlalu menempel pada tepi Card.
- Clear Call to Action (CTA): Pada Modal atau Card interaktif, pastikan tombol aksi utama (misal: "Simpan", "Beli") jelas dan ditempatkan secara logis (biasanya di kanan bawah atau bawah tengah).
🛠 Panduan Penggunaan Skill
Ketika Anda diminta untuk memeriksa atau meningkatkan UI aplikasi:
- Identifikasi Komponen: Kategorikan setiap komponen yang ada di halaman tersebut ke dalam 4 pilar di atas.
- Audit Berdasarkan Checklist: Jalankan checklist di atas pada komponen yang sedang direview. Cari kekurangan dalam state, aksesibilitas, responsivitas, dan umpan balik (feedback).
- Usulkan Peningkatan Konkret:
- Perbaikan CSS/Tailwind: Usulkan penambahan class seperti
focus:ring-2 focus:outline-none, hover:bg-gray-100, atau transisi yang mulus transition-colors duration-200.
- Peningkatan Aksesibilitas (a11y): Berikan kode ARIA role atau atribut pendukung.
- Interaksi JavaScript (opsional): Jika diperlukan untuk modal atau tab, usulkan struktur state yang menangkap interaksi pengguna dengan benar.
- Fokus pada Detail "Micro-interactions": Peningkatan kecil pada hover state atau animasi toast berdampak besar pada impresi kualitas UI.
