UI Components Expert

🎨 UI Components Expert (2026/2027 Edition)

English | Bahasa Indonesia

English

Description

Evaluate, audit, and build production-quality UI components. Apply the 4 pillars of UI components with modern tooling: shadcn/ui, Radix UI, Base UI, React 19, Tailwind v4, Material Design 3 (M3), WCAG 2.2, and micro-interaction design.

Trigger Conditions

• Build or review UI components (buttons, forms, modals, navigation, tooltips).
• Implement accessible components (ARIA patterns, keyboard navigation).
• Audit components against WCAG 2.2.
• Set up component libraries (shadcn/ui, Radix UI, Base UI).
• Add micro-interactions and animations.

Orchestration & Integration

This skill orchestrates and connects with:

• senior-frontend: For overall React 19 / Next.js 15 architecture.
• tailwind-expert: For Tailwind v4 styling and theming.
• design-system-architect: For system-wide design tokens and primitives.
• hig: For Human Interface Guidelines (Hierarchy, Harmony, Consistency).

Component Stack (2026/2027)

• Headless Primitives: Radix UI / Base UI (Accessibility, behavior).
• Component Library: shadcn/ui (Pre-styled, customizable).
• Styling: Tailwind CSS v4 (Utility-first, @theme tokens).
• Animation: Motion / Framer Motion v12 (Spring physics).
• Icons: Lucide React.
• Forms: React Hook Form + Zod.

The 4 Pillars of UI Components

1: Input Controls

Capture user intent and data (Buttons, Forms, Selects).

• M3 Integration (if requested): Use M3 button variants: Filled, Tonal, Elevated, Outlined, and Text. Include FABs (Floating Action Buttons) for primary screen actions.
• Visual States: Define default, hover, active, focus, disabled, and error.
• Touch Targets: Minimum 44×44px (WCAG 2.5.8), M3 recommends 48x48px.
• Immediate Feedback: Provide visual ripple or scale animation on interaction.
• Inline Validation: Show errors on blur. Use aria-invalid and aria-describedby.
• Stack: React Hook Form + Zod.

2: Navigation

Move through application structure (Navbars, Tabs, Command Palettes).

• M3 Integration (if requested): Use M3 Navigation Bar for mobile (bottom), Navigation Rail for tablet, and Navigation Drawer for desktop.
• Active State: Indicate current location with high-contrast visual indicators.
• Keyboard Navigation: Support Arrow Keys for tabs, Escape to close.
• Responsive: Bottom navigation (<768px), collapsible sidebar (tablet), full sidebar (desktop).
• Command Palette: Add ⌘K via cmdk.
• Next.js 15: Use <Link viewTransition> for smooth transitions.
• ARIA: Use role="navigation" and aria-current="page".

3: Information & Feedback

Display status and guidance (Toasts, Skeletons, Empty States).

• M3 Integration (if requested): Use Snackbar for transient messages. Use Badges on navigation icons for notifications.
• Color Semantics: Green (success), red (error), yellow (warning), blue (info).
• Toasts: Use Sonner. Limit to 3 concurrent. Auto-dismiss success, keep errors until dismissed.
• Loading: Use Skeletons matching exact content layout over spinners (prevents CLS).
• Empty States: Provide illustration, context, and clear CTA.
• ARIA: aria-live="polite" (updates), aria-live="assertive" (critical).

4: Containers & Layout

Group related content (Cards, Modals, Sheets).

• M3 Integration (if requested): Use M3 Card variants: Elevated, Filled, Outlined. Follow M3 Dialog guidelines for Modals.
• Modals: Use Radix UI Dialog. It handles focus trapping and scroll locking automatically.
• Animation: Animate in (animate-in fade-in zoom-in-95).
• Cards: Use subtle shadows + borders. Avoid heavy drop shadows in light mode.
• Sheets: Use bottom sheet for mobile secondary actions, side sheet for desktop.

Micro-Interaction Checklist

• Implement :focus-visible ring (2px, brand color) on all interactives.
• M3 State Layers: If using M3, ensure interactive elements have distinct Hover, Focus, Pressed, and Dragged state layers.
• Add loading state (spinner + disabled) to submit buttons.
• Use Framer Motion v12 spring physics (stiffness: 300, damping: 20) for natural, snappy interactions. Avoid rigid linear transitions.
• Use transition-all duration-200 ease-out for simple hovers.
• Test dark mode for all states (especially error contrast).

WCAG 2.2 Quick Reference

• 1.4.3: Text contrast ≥4.5:1.
• 2.5.8: Touch target ≥24×24px (min), 44×44px (target).
• 2.4.7: Visible focus indicator.

Bahasa Indonesia

Deskripsi

Evaluasi, audit, dan bangun komponen UI berkualitas produksi. Terapkan 4 pilar komponen UI dengan tooling modern: shadcn/ui, Radix UI, Base UI, React 19, Tailwind v4, Material Design 3 (M3), WCAG 2.2, dan desain micro-interaction.

Kondisi Pemicu

• Membangun atau me-review komponen UI (tombol, form, modal, navigasi).
• Implementasi komponen aksesibel (pola ARIA, navigasi keyboard).
• Audit komponen berdasarkan WCAG 2.2.
• Setup library komponen (shadcn/ui, Radix UI, Base UI).
• Menambahkan micro-interaction dan animasi.

Integrasi Orkestrasi

Skill ini mengorkestrasi dan terhubung dengan:

• senior-frontend: Untuk arsitektur keseluruhan React 19 / Next.js 15.
• tailwind-expert: Untuk styling dan theming Tailwind v4.
• design-system-architect: Untuk design token dan primitif skala sistem.
• hig: Untuk panduan Human Interface (Hierarki, Harmoni, Konsistensi).

QA Visual Mandatori

• Wajib gunakan browser_subagent dan visual-qa-vision-agent untuk validasi layout.
• Standar Pixel-Perfect: Jangan menebak ukuran. Ambil screenshot dan koreksi pergeseran tata letak.

Stack Komponen (2026/2027)

• Headless: Radix UI / Base UI.
• Library: shadcn/ui.
• Styling: Tailwind CSS v4.
• Animasi: Motion / Framer Motion v12.
• Form: React Hook Form + Zod.

4 Pilar Komponen UI

1: Kontrol Input

Tangkap data (Tombol, Form, Select).

• Integrasi M3 (jika diminta): Gunakan varian tombol M3: Filled, Tonal, Elevated, Outlined, dan Text. Sertakan FABs (Floating Action Buttons).
• Definisikan state visual: default, hover, active, focus, disabled, error.
• Target sentuh minimal 44×44px (M3 merekomendasikan 48x48px).
• Tampilkan error saat blur dengan aria-invalid dan aria-describedby.
• Gunakan React Hook Form + Zod.

2: Navigasi

Pergerakan pengguna (Navbar, Tab, Command Palette).

• Integrasi M3 (jika diminta): Gunakan Navigation Bar M3 untuk mobile, Navigation Rail untuk tablet, dan Navigation Drawer untuk desktop.
• Gunakan indikator visual kontras tinggi untuk lokasi aktif.
• Wajib dukung navigasi keyboard (Arrow Keys, Escape).
• Responsive: Bottom navigation (<768px), sidebar desktop.
• Gunakan cmdk untuk Command Palette ⌘K.
• Tandai navigasi aktif dengan aria-current="page".

3: Informasi & Feedback

Tampilkan status (Toast, Skeleton, Empty State).

• Integrasi M3 (jika diminta): Gunakan Snackbar untuk pesan sementara. Gunakan Badges pada ikon navigasi.
• Gunakan warna semantik secara konsisten.
• Gunakan Sonner untuk toast (maks 3 sekaligus).
• Gunakan Skeleton persis sesuai layout (jangan gunakan spinner untuk layout) guna mencegah CLS.
• Sediakan ilustrasi dan CTA pada Empty State.

4: Kontainer & Layout

Kelompokkan konten (Card, Modal, Sheet).

• Integrasi M3 (jika diminta): Gunakan varian Card M3: Elevated, Filled, Outlined. Ikuti panduan Dialog M3 untuk modal.
• Gunakan Radix UI Dialog untuk modal (menangani focus trap dan scroll lock).
• Animasikan kemunculan modal (fade + scale).
• Gunakan shadow tipis untuk elevasi card di mode terang.
• Gunakan bottom sheet di mobile.

Checklist Micro-Interaction

• Ring :focus-visible (2px) pada elemen interaktif.
• State Layers M3: Jika menggunakan M3, pastikan elemen interaktif memiliki lapisan status (Hover, Focus, Pressed, Dragged) yang berbeda.
• State loading pada tombol.
• Gunakan Framer Motion v12 spring physics (stiffness: 300, damping: 20) untuk interaksi alami.
• Transisi hover transition-all duration-200 ease-out.
• Uji kontras warna dark mode.