csh/playbook
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

📦 deps(thirdparty): update snapshots

Browse Source
This commit is contained in:
ci[bot]
2026-09-03 08:57:39 +00:00
parent 0b2b056032
commit 3294e63c9f
98 changed files with 3411 additions and 467 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ui-ux-pro-max/README.id.md
+663
View File
@@ -0,0 +1,663 @@
# [UI UX Pro Max](https://uupm.cc)
<p align="center">
<a href="https://github.com/nextlevelbuilder/ui-ux-pro-max-skill/blob/main/README.id.md">🇮🇩 Bahasa Indonesia</a> |
<a href="https://github.com/nextlevelbuilder/ui-ux-pro-max-skill/blob/main/README.ko.md">🇰🇷 한국어</a> |
<a href="https://github.com/nextlevelbuilder/ui-ux-pro-max-skill/blob/main/README.vi.md">🇻🇳 Tiếng Việt</a> |
<a href="https://github.com/nextlevelbuilder/ui-ux-pro-max-skill/blob/main/README.zh.md">🇨🇳 简体中文</a> |
<a href="https://github.com/nextlevelbuilder/ui-ux-pro-max-skill/blob/main/README.md">🇺🇸 English</a>
</p>
<p align="center">
<a href="https://github.com/nextlevelbuilder/ui-ux-pro-max-skill/releases"><img src="https://img.shields.io/github/v/release/nextlevelbuilder/ui-ux-pro-max-skill?style=for-the-badge&color=blue" alt="Rilis GitHub"></a>
<img src="https://img.shields.io/badge/reasoning_rules-192-green?style=for-the-badge" alt="192 aturan penalaran">
<img src="https://img.shields.io/badge/UI_styles-79_searchable-purple?style=for-the-badge" alt="79 gaya UI yang dapat dicari">
<img src="https://img.shields.io/badge/python-3.x-yellow?style=for-the-badge&logo=python&logoColor=white" alt="Python 3.x">
<a href="https://github.com/nextlevelbuilder/ui-ux-pro-max-skill/blob/main/LICENSE"><img src="https://img.shields.io/github/license/nextlevelbuilder/ui-ux-pro-max-skill?style=for-the-badge&color=green" alt="Lisensi"></a>
</p>
<p align="center">
<a href="https://www.npmjs.com/package/ui-ux-pro-max-cli"><img src="https://img.shields.io/npm/v/ui-ux-pro-max-cli?style=flat-square&logo=npm&label=CLI" alt="npm"></a>
<a href="https://www.npmjs.com/package/ui-ux-pro-max-cli"><img src="https://img.shields.io/npm/dm/ui-ux-pro-max-cli?style=flat-square&label=downloads" alt="unduhan npm"></a>
<a href="https://github.com/nextlevelbuilder/ui-ux-pro-max-skill/stargazers"><img src="https://img.shields.io/github/stars/nextlevelbuilder/ui-ux-pro-max-skill?style=flat-square&logo=github" alt="bintang GitHub"></a>
<a href="https://paypal.me/uiuxpromax"><img src="https://img.shields.io/badge/PayPal-Support%20Development-00457C?style=flat-square&logo=paypal&logoColor=white" alt="PayPal"></a>
</p>
Skill AI yang menyediakan kecerdasan desain untuk membangun UI/UX profesional di berbagai platform dan framework.
<p align="center">
<a href="https://uupm.cc">
<img src="screenshots/website.png" alt="UI UX Pro Max" width="800">
</a>
</p>
<p align="center">
<b>Jika proyek ini bermanfaat bagi Anda, pertimbangkan untuk mendukungnya:</b><br><br>
<a href="https://paypal.me/uiuxpromax"><img src="https://img.shields.io/badge/PayPal-Donate-00457C?style=for-the-badge&logo=paypal&logoColor=white" alt="Donasi PayPal"></a>
</p>
<p align="center">
<i>Proyek lainnya</i><br>
<a href="https://nextlevelbuilder.io">NextLevelBuilder.io</a> | <a href="https://goclaw.sh">GoClaw.sh</a> | <a href="https://claudekit.cc">ClaudeKit.cc</a> | <a href="https://tose.sh">TOSE.sh</a>
</p>
## Yang Baru di v2.0
### Pembuatan Design System Cerdas
Fitur unggulan v2.0 adalah **Design System Generator** — mesin penalaran berbasis AI yang menganalisis kebutuhan proyek Anda dan menghasilkan design system yang lengkap serta disesuaikan dalam hitungan detik.
```
+----------------------------------------------------------------------------------------+
| TARGET: Serenity Spa - DESIGN SYSTEM YANG DIREKOMENDASIKAN |
+----------------------------------------------------------------------------------------+
| |
| POLA: Hero-Centric + Social Proof |
| Konversi: Didorong emosi dengan elemen kepercayaan |
| CTA: Di atas fold, diulang setelah testimonial |
| Bagian: |
| 1. Hero |
| 2. Layanan |
| 3. Testimonial |
| 4. Booking |
| 5. Kontak |
| |
| GAYA: Soft UI Evolution |
| Kata kunci: Bayangan lembut, kedalaman halus, tenang, premium, bentuk organik |
| Cocok untuk: Wellness, kecantikan, brand lifestyle, layanan premium |
| Performa: cost:low | Aksesibilitas: risk:conditional; verifikasi kebutuhan |
| |
| WARNA: |
| Primer: #E8B4B8 (Soft Pink) |
| Sekunder: #A8D5BA (Sage Green) |
| CTA: #D4AF37 (Gold) |
| Background: #FFF5F5 (Warm White) |
| Teks: #2D3436 (Charcoal) |
| Catatan: Palet menenangkan dengan aksen emas untuk nuansa mewah |
| |
| TIPOGRAFI: Cormorant Garamond / Montserrat |
| Nuansa: Elegan, menenangkan, sophisticated |
| Cocok untuk: Brand mewah, wellness, kecantikan, editorial |
| Google Fonts: https://fonts.google.com/share?selection.family=... |
| |
| EFEK UTAMA: |
| Bayangan lembut + Transisi sesuai konteks + Hover state yang halus |
| |
| HINDARI (Anti-pattern): |
| Warna neon terang + Animasi keras + Dark mode + Gradien ungu/merah muda ala AI |
| |
| CHECKLIST PRA-DELIVERY: |
| [ ] Tidak menggunakan emoji sebagai ikon (gunakan SVG: Heroicons/Lucide) |
| [ ] cursor-pointer pada semua elemen yang dapat diklik |
| [ ] Timing interaksi mengikuti platform, komponen, dan preferensi pengguna |
| [ ] Light mode: kontras teks minimum 4.5:1 |
| [ ] Focus state terlihat untuk navigasi keyboard |
| [ ] Menghormati prefers-reduced-motion |
| [ ] Teks, chip, dan badge reflow tanpa terpotong atau merusak label |
| [ ] Responsive: 375px, 768px, 1024px, 1440px |
| |
+----------------------------------------------------------------------------------------+
```
### Cara Kerja Pembuatan Design System
```
┌─────────────────────────────────────────────────────────────────┐
│ 1. PERMINTAAN PENGGUNA │
│ "Buat landing page untuk spa kecantikan saya" │
└─────────────────────────────────────────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────────────────┐
│ 2. PENCARIAN MULTI-DOMAIN (5 pencarian paralel) │
│ • Pencocokan jenis produk (192 kategori) │
│ • Rekomendasi gaya (79 dapat dicari; 50 aktif) │
│ • Pemilihan palet warna (192 palet) │
│ • Pola landing page (34 pola) │
│ • Pasangan tipografi (74 kombinasi font) │
└─────────────────────────────────────────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────────────────┐
│ 3. MESIN PENALARAN │
│ • Cocokkan produk → aturan kategori UI │
│ • Terapkan prioritas gaya (ranking BM25) │
│ • Filter anti-pattern untuk industri │
│ • Proses aturan keputusan (kondisi JSON) │
└─────────────────────────────────────────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────────────────┐
│ 4. OUTPUT DESIGN SYSTEM LENGKAP │
│ Pola + Gaya + Warna + Tipografi + Efek │
│ + Anti-pattern yang dihindari + Checklist pra-delivery │
└─────────────────────────────────────────────────────────────────┘
```
### 192 Aturan Penalaran Khusus Industri
Mesin penalaran ini mencakup aturan khusus untuk:
| Kategori | Contoh |
|----------|--------|
| **Teknologi & SaaS** | SaaS, Micro SaaS, layanan B2B, Developer Tool / IDE, platform AI/chatbot, platform keamanan siber |
| **Keuangan** | Fintech/Crypto, perbankan, asuransi, pelacak keuangan pribadi, alat invoice & billing |
| **Kesehatan** | Klinik medis, apotek, kedokteran gigi, veteriner, kesehatan mental, pengingat obat |
| **E-commerce** | Umum, mewah, marketplace (P2P), subscription box, pengantaran makanan |
| **Layanan** | Kecantikan/spa, restoran, hotel, hukum, layanan rumah, booking & appointment |
| **Kreatif** | Portofolio, agensi, fotografi, gaming, streaming musik, editor foto/video |
| **Gaya Hidup** | Pelacak kebiasaan, resep & memasak, meditasi, cuaca, diari, pelacak suasana hati |
| **Teknologi Baru** | Web3/NFT, Spatial Computing, Quantum Computing, armada drone otonom |
Setiap aturan mencakup:
- **Pola yang Direkomendasikan** - Struktur landing page
- **Prioritas Gaya** - Gaya UI yang paling cocok
- **Nuansa Warna** - Palet yang sesuai dengan industri
- **Nuansa Tipografi** - Pencocokan karakter font
- **Efek Utama** - Animasi dan interaksi
- **Anti-Pattern** - Hal yang TIDAK boleh dilakukan (misalnya, "AI purple/pink gradients" untuk perbankan)
## Fitur
- **79 Gaya UI yang Dapat Dicari (50 aktif)** - Glassmorphism, Claymorphism, Minimalism, Brutalism, Neumorphism, Bento Grid, Dark Mode, AI-Native UI, dan lainnya
- **192 Palet Warna** - Palet khusus industri yang selaras 1:1 dengan 192 jenis produk
- **74 Pasangan Font** - Kombinasi tipografi pilihan dengan import Google Fonts
- **25 Jenis Chart** - Rekomendasi untuk dashboard dan analitik
- **22 Tech Stack** - React, Next.js, Astro, Vue, Nuxt.js, Nuxt UI, Svelte, SwiftUI, React Native, Flutter, HTML+Tailwind, shadcn/ui, Jetpack Compose, Angular, Laravel, Three.js, JavaFX, WPF, WinUI 3, UWP, Avalonia, Uno Platform
- **119 Panduan UX** - Best practice, anti-pattern, aturan aksesibilitas, layout teks yang tangguh, label ringkas, dan interaksi yang dapat dibatalkan
- **192 Aturan Penalaran** - Pembuatan design system khusus industri (BARU di v2.0)
### Teks Tangguh dan UI Ringkas
Panduan ini kini mencakup kegagalan umum di lingkungan production terkait heading, token panjang,
chip, badge, dan micro-interaction yang terinterupsi:
- Pembungkusan heading yang seimbang adalah progressive enhancement, bukan jaminan bahwa
kata tertentu akan tetap berada pada baris terakhir. Desain tetap harus berfungsi dengan
pembungkusan alami di berbagai lebar, font, dan locale.
- Teks penting harus dapat mengalir ulang tanpa terpotong pada lebar sempit, zoom browser, text
scaling, dan override spasi pengguna. URL dan identifier panjang boleh dibungkus dengan aman.
- Kumpulan chip dan tag sebaiknya membungkus atau menggunakan disclosure `+n` yang dapat dioperasikan. Label ringkas
sebaiknya tetap utuh jika memungkinkan; pemotongan yang tidak dapat dihindari memerlukan jalur
nilai penuh yang aksesibel bagi pengguna keyboard, pointer, dan sentuhan.
- Makna badge tidak boleh bergantung pada warna saja. Chip interaktif memerlukan semantik native,
focus yang terlihat, dan state yang dapat diprogram; live count memerlukan konteks yang bermakna.
- Interaksi cepat dapat membatalkan animasi, tetapi state semantik akhir, focus, dan
konten harus tetap benar. Timing dipilih sesuai platform dan komponen,
dengan tetap menghormati preferensi reduced-motion.
### Taksonomi Gaya
Katalog berisi **79 gaya yang dapat dicari** dengan dukungan ID dan alias yang stabil:
| Status | Jumlah | Perilaku pencarian |
|--------|-------:|--------------------|
| Aktif | 50 | Disertakan dalam rekomendasi normal dan ditampilkan secara default di gallery |
| Tambahan | 29 | Dikembalikan untuk intent varian/sistem yang eksplisit atau exact; tersedia melalui filter status gallery |
| Deprecated | 9 | Dikecualikan dari ranking normal; nama legacy dialihkan ke gaya canonical atau landing pattern |
Set aktif mencakup 43 keluarga visual umum, 2 gaya khusus mobile, 3 platform/design system resmi, 1 material platform, dan 1 gaya analitik inti. Sistem resmi saat ini mencakup Fluent 2, Shopify Polaris, dan Adobe Spectrum; Liquid Glass dikategorikan sebagai material platform Apple, Material 3 Expressive tetap menjadi varian Material mobile, dan Spectrum 2 bersifat tambahan. Struktur landing page berada dalam dataset terpisah yang berisi 34 pola landing, sehingga tidak bersaing dengan gaya visual dalam ranking BM25.
Lihat [`styles.csv`](src/ui-ux-pro-max/data/styles.csv) untuk taksonomi lengkap dan metadata yang menyertakan provenance.
## 💎 Perbandingan Versi Basic vs. Premium
Banyak pengguna bertanya mengenai perbedaan antara versi open-source dan premium. Berikut rincian untuk membantu Anda memilih yang paling sesuai dengan workflow Anda.
### 🟢 Versi Basic (Repository Ini)
* **Sepenuhnya Open Source:** Cocok untuk developer individu, hobbyist, dan proyek standar.
* **Kecerdasan UI/UX Inti:** Akses penuh ke 79 gaya UI yang dapat dicari (50 aktif), 192 jenis produk, palet warna, dan pasangan font pilihan.
* **Rekomendasi Cerdas:** Mesin pencarian BM25 bawaan untuk pencocokan desain yang sangat akurat.
* **Dukungan Cross-Platform:** Panduan khusus stack yang mendukung 22 framework utama (React, Vue, Tailwind, iOS, Android, dll.).
* **Pembuatan Design System:** Buat aturan UI, pola, dan logika yang disesuaikan secara instan melalui CLI.
### 🟡 Versi Premium
* **Skill Brand Design yang Diperluas:** Melampaui UI/UX dengan mencakup pembuatan Brand Identity, Logo Design, Corporate Identity Programs (CIP), Banner, Presentation Slides, dan Iconography kustom.
* **Pembuatan Aset Tingkat Lanjut:** Integrasi mendalam dengan image generation berbasis AI untuk membuat aset visual nyata, bukan sekadar placeholder.
* **Arsitektur Enterprise:** Arsitektur Design Token yang lebih komprehensif dan scalable untuk deployment tim skala besar.
* **Priority Support:** Dukungan teknis khusus untuk tim dan profesional yang membutuhkan workflow desain lengkap tanpa gangguan.
👉 *Untuk detail lebih lanjut tentang upgrade ke tier Premium, kunjungi [uupm.cc](https://uupm.cc).*
## Instalasi
### Menggunakan Claude Marketplace (Claude Code)
Instal langsung di Claude Code dengan dua perintah:
```
/plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skill
/plugin install ui-ux-pro-max@ui-ux-pro-max-skill
```
### Menggunakan CLI (Direkomendasikan)
```bash
# Install CLI globally
npm install -g ui-ux-pro-max-cli
# Go to your project
cd /path/to/your/project
# Install for your AI assistant
uipro init --ai claude # Claude Code
uipro init --ai cursor # Cursor
uipro init --ai windsurf # Windsurf
uipro init --ai antigravity # Antigravity
uipro init --ai copilot # GitHub Copilot
uipro init --ai kiro # Kiro
uipro init --ai codex # Codex CLI
uipro init --ai qoder # Qoder
uipro init --ai roocode # Roo Code
uipro init --ai gemini # Gemini CLI
uipro init --ai trae # Trae
uipro init --ai opencode # OpenCode
uipro init --ai continue # Continue
uipro init --ai codebuddy # CodeBuddy
uipro init --ai droid # Droid (Factory)
uipro init --ai kilocode # KiloCode
uipro init --ai warp # Warp
uipro init --ai augment # Augment
uipro init --ai codewhale # CodeWhale
uipro init --ai openclaw # OpenClaw
uipro init --ai universal # Universal / Agent Standard (.agents/skills/)
uipro init --ai all # All assistants
```
Paket npm-nya adalah `ui-ux-pro-max-cli`; paket tersebut tetap menginstal command `uipro`. Rilis lama `uipro-cli` sudah usang dan tidak boleh digunakan untuk aset saat ini.
### Instalasi Global (Tersedia untuk Semua Proyek)
```bash
uipro init --ai claude --global # Install to ~/.claude/skills/
uipro init --ai cursor --global # Install to ~/.cursor/skills/
uipro init --ai universal --global # Install to ~/.agents/skills/
```
### Command CLI Lainnya
```bash
uipro versions # List available versions
uipro update # Refresh skill files from installed CLI package
uipro update --global # Refresh global skill files from installed CLI package
uipro init --offline # Compatibility flag; installs bundled templates
uipro uninstall # Remove skill (auto-detect platform)
uipro uninstall --ai claude # Remove specific platform
uipro uninstall --global # Remove from global install
```
## Prasyarat
Python 3.x diperlukan untuk script pencarian (hanya standard library — script tidak menginstal apa pun dan tidak melakukan network call).
Periksa apakah Python sudah terinstal:
```bash
python3 --version
```
Jika belum ada, instal sendiri dari [python.org](https://www.python.org/downloads/) atau melalui package manager OS Anda (Homebrew, apt, winget). Langkah instalasi ini ditujukan untuk **Anda sebagai pengguna manusia** — agent AI yang menggunakan skill ini tidak boleh menginstal software di mesin Anda; agent diperintahkan untuk meminta Anda melakukannya.
## Penggunaan
### Mode Skill (Aktif Otomatis)
**Didukung:** Claude Code, Cursor, Windsurf, Antigravity, Codex CLI, Continue, Gemini CLI, OpenCode, Qoder, CodeBuddy, Droid (Factory), KiloCode, Warp, Augment, CodeWhale
Skill akan aktif otomatis saat Anda meminta pekerjaan UI/UX. Cukup gunakan percakapan secara natural:
```
Build a landing page for my SaaS product
```
> **Trae**: Beralihlah ke mode **SOLO** terlebih dahulu. Skill akan aktif untuk permintaan UI/UX.
### Mode Workflow (Slash Command)
**Didukung:** Kiro, GitHub Copilot, Roo Code, KiloCode
Gunakan slash command untuk menjalankan skill:
```
/ui-ux-pro-max Build a landing page for my SaaS product
```
### Contoh Prompt
```
Build a landing page for my SaaS product
Create a dashboard for healthcare analytics
Design a portfolio website with dark mode
Make a mobile app UI for e-commerce
Build a fintech banking app with dark theme
```
### Cara Kerjanya
1. **Anda meminta** - Minta tugas UI/UX apa pun (build, design, create, implement, review, fix, improve)
2. **Design System Dibuat** - AI secara otomatis menghasilkan design system lengkap menggunakan mesin penalaran
3. **Rekomendasi cerdas** - Berdasarkan jenis produk dan kebutuhan Anda, AI menemukan gaya, warna, dan tipografi yang paling sesuai
4. **Pembuatan kode** - Menerapkan UI dengan warna, font, spacing, dan best practice yang tepat
5. **Pemeriksaan sebelum delivery** - Memvalidasi hasil terhadap anti-pattern UI/UX umum
### Stack yang Didukung
Skill menyediakan panduan khusus stack untuk:
| Kategori | Stack |
|----------|-------|
| **Web (HTML)** | HTML + Tailwind (default) |
| **Ekosistem React** | React, Next.js, shadcn/ui |
| **Ekosistem Vue** | Vue, Nuxt.js, Nuxt UI |
| **Angular** | Angular |
| **PHP** | Laravel (Blade, Livewire, Inertia.js) |
| **Web Lainnya** | Svelte, Astro, Three.js |
| **Desktop** | JavaFX, WPF, WinUI 3, Avalonia, Uno Platform, UWP |
| **iOS** | SwiftUI |
| **Android** | Jetpack Compose |
| **Cross-Platform** | React Native, Flutter |
Cukup sebutkan stack pilihan Anda di prompt, atau biarkan default ke HTML + Tailwind.
## Command Design System (Lanjutan)
Untuk mengakses design system generator secara langsung:
> Catatan: Jika Anda menginstal melalui Continue, ganti `.claude/skills/` dengan `.continue/skills/` pada command di bawah. Untuk Droid (Factory), gunakan `.factory/skills/`.
```bash
# Generate design system with ASCII output
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "beauty spa wellness" --design-system -p "Serenity Spa"
# Generate with Markdown output
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "fintech banking" --design-system -f markdown
# Domain-specific search
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "glassmorphism" --domain style
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "elegant serif" --domain typography
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "dashboard" --domain chart
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "error summary validation" --domain ux
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "decorative icon aria hidden" --domain icons
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "icon button accessible label" --domain icons
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "orphan heading line balance" --domain ux
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "badge chip label wraps to second line" --domain ux
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "rapid chip animation interrupted" --domain ux
# Stack-specific guidelines
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "form validation" --stack react
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "responsive layout" --stack html-tailwind
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "chip badge overflow nowrap" --stack html-tailwind
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "tableview binding" --stack javafx
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "atlantafx primer enterprise theme" --stack javafx
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "enterprise tableview density permission" --stack javafx
```
Pencarian web-stack memahami versi. Query tanpa major version lama akan mengembalikan panduan yang aktif dan terkini. Istilah legacy atau major version lama yang eksplisit (misalnya, `Svelte 4` atau `Next.js 15`) hanya mengembalikan row legacy yang sudah dikurasi, dengan label `Status` dan `Applies To`; jika tidak ada panduan legacy yang sesuai, pencarian tidak mengembalikan hasil alih-alih mencampur generasi framework.
### Menyimpan Design System (Pola Master + Overrides)
Simpan design system ke file untuk **hierarchical retrieval lintas sesi**:
```bash
# Generate and persist to design-system/MASTER.md
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "SaaS dashboard" --design-system --persist -p "MyApp"
# Also create a page-specific override file
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "SaaS dashboard" --design-system --persist -p "MyApp" --page "dashboard"
```
Ini membuat struktur folder `design-system/`:
```
design-system/
├── MASTER.md # Global Source of Truth (colors, typography, spacing, components)
└── pages/
└── dashboard.md # Page-specific overrides (only deviations from Master)
```
**Cara kerja hierarchical retrieval:**
1. Saat membuat halaman tertentu (misalnya, "Checkout"), periksa `design-system/pages/checkout.md` terlebih dahulu
2. Jika file halaman ada, aturannya **menimpa** file Master
3. Jika tidak, gunakan `design-system/MASTER.md` saja
**Prompt context-aware retrieval:**
```
I am building the [Page Name] page. Please read design-system/MASTER.md.
Also check if design-system/pages/[page-name].md exists.
If the page file exists, prioritize its rules.
If not, use the Master rules exclusively.
Now, generate the code...
```
## Arsitektur & Kontribusi
### Untuk Pengguna
Codebase telah direstrukturisasi menggunakan **sistem pembuatan berbasis template**. Semua file khusus platform (`.cursor/`, `.windsurf/`, `.kiro/`, `.factory/`, dll.) sekarang dibuat secara dinamis oleh CLI.
**Selalu gunakan CLI untuk menginstal:**
```bash
npm install -g ui-ux-pro-max-cli
uipro init --ai <platform>
```
Ini memastikan Anda mendapatkan template terbaru yang dibundel bersama package CLI yang terinstal serta struktur file yang tepat untuk agent AI Anda. Update package npm terlebih dahulu ketika rilis baru diterbitkan.
### Untuk Kontributor
Jika Anda ingin berkontribusi pada proyek ini:
```bash
# 1. Clone the repository
git clone https://github.com/nextlevelbuilder/ui-ux-pro-max-skill.git
cd ui-ux-pro-max-skill
# 2. Understand the structure
src/ui-ux-pro-max/ # Source of truth (data, scripts, templates)
cli/ # CLI installer (generates files from templates)
.claude/ # Local dev/test for Claude Code skill
.factory/ # Local dev/test for Droid (Factory) skill
# 3. Make changes in src/ui-ux-pro-max/
# - data/*.csv → Database files
# - scripts/*.py → Search engine & design system
# - templates/ → Platform-specific templates
# 4. Sync to CLI and test locally
cd cli
npm run sync:assets
npm run check:assets
npm run verify:data
npm run typecheck
# 5. Build and test CLI
# `npm run build` uses Bun when available and falls back to TypeScript compiler output after `npm ci`.
npm run build
node dist/index.js init --ai claude --offline # Test in a temp folder
# 6. Create PR (never push directly to main)
git checkout -b feat/your-feature
git commit -m "feat: description"
git push -u origin feat/your-feature
gh pr create
```
Lihat [CLAUDE.md](CLAUDE.md) untuk panduan development yang lebih rinci.
### Provenance dan Refresh Katalog
Ringkasan katalog yang di-commit saat ini mencatat **1.934 Google Fonts yang disetujui**
serta **8 pengecualian review** yang tidak dipromosikan tanpa metadata lisensi resmi yang sesuai. Panduan ikon tetap berisi **105 row terkurasi** (100 import web
Phosphor langsung ditambah panduan React Native/fallback); sedangkan **manifest upstream Phosphor dengan 1.512 ikon** memvalidasi nama,
weight, dan import React/SSR tanpa membanjiri hasil pencarian dengan seluruh
package upstream.
Development biasa dan CI pull request tidak bergantung pada jaringan. Jalankan gate
offline lengkap, termasuk hash snapshot dan validasi jumlah hasil generate, dengan:
```bash
npm --prefix cli run verify:data
# Or check only the generated catalog summary:
npm --prefix cli run validate:catalog-summary
```
Normalisasi refresh juga dapat diuji sepenuhnya secara offline menggunakan
fixture yang sudah di-commit. Output disimpan ke direktori kandidat sementara dan tidak pernah
menggantikan data canonical:
```bash
candidate_dir="$(mktemp -d)"
python3 scripts/refresh-google-fonts.py \
--api-input src/ui-ux-pro-max/scripts/tests/fixtures/catalogs/google-api.json \
--metadata-input src/ui-ux-pro-max/scripts/tests/fixtures/catalogs/google-metadata.json \
--existing-csv src/ui-ux-pro-max/scripts/tests/fixtures/catalogs/google-existing.csv \
--overrides src/ui-ux-pro-max/scripts/tests/fixtures/catalogs/google-overrides.json \
--output-csv "$candidate_dir/google-fonts.csv" \
--license-output "$candidate_dir/google-font-licenses.json" \
--metadata-revision fixture-catalogs-v1 \
--verified-at 2026-08-13 --expected-count 2 --approve-changes
python3 scripts/refresh-icon-catalog.py \
--input src/ui-ux-pro-max/scripts/tests/fixtures/catalogs/phosphor-core.json \
--package-json src/ui-ux-pro-max/scripts/tests/fixtures/catalogs/phosphor-package.json \
--react-package-json src/ui-ux-pro-max/scripts/tests/fixtures/catalogs/phosphor-react-package.json \
--react-exports-input src/ui-ux-pro-max/scripts/tests/fixtures/catalogs/phosphor-react-exports.json \
--curated-csv src/ui-ux-pro-max/scripts/tests/fixtures/catalogs/icons-curated.csv \
--output "$candidate_dir/phosphor-icons-upstream.json" \
--verified-at 2026-08-13 --expected-count 2
```
Refresh upstream live sengaja diisolasi dalam workflow `refresh-catalogs.yml`,
dijadwalkan setiap Senin pukul 03:17 UTC dan juga tersedia untuk dijalankan secara manual.
Konfigurasikan `GOOGLE_FONTS_API_KEY` sebagai secret GitHub Actions, lalu jalankan dan
unduh artifact review-nya:
```bash
gh workflow run refresh-catalogs.yml
run_id="$(gh run list --workflow refresh-catalogs.yml --limit 1 --json databaseId --jq '.[0].databaseId')"
gh run watch "$run_id"
gh run download "$run_id" --name "catalog-refresh-review-$run_id"
```
Workflow membaca Google Fonts Developer API dan package resmi Phosphor yang di-pin,
menulis kandidat serta unified diff ke artifact, dan hanya memiliki izin read-only
pada repository. Workflow tidak pernah melakukan commit, push, membuka PR, atau merge. Tinjau
laporan perubahan, pengecualian, lisensi, relevance metrics, dan offline gate
sebelum secara manual mempromosikan file kandidat ke `src/ui-ux-pro-max/data/`.
## Rilis Otomatis
Repository ini menggunakan semantic-release dengan Conventional Commits untuk membuat rilis GitHub secara otomatis:
- Branch `dev` membuat GitHub prerelease beta seperti `2.6.0-beta.1`.
- Branch `main` membuat rilis GitHub stable resmi seperti `2.6.0`.
Release notes dan `CHANGELOG.md` dibuat dari pesan Conventional Commit. Nomor versi disinkronkan di `skill.json`, `.claude-plugin/plugin.json`, `.claude-plugin/marketplace.json`, `cli/package.json`, dan `cli/package-lock.json` selama persiapan rilis.
Gunakan tipe commit berikut agar version bump benar:
- `fix:` -> patch release
- `feat:` -> minor release
- `feat!:` atau `BREAKING CHANGE:` -> major release
Workflow rilis menggunakan `GITHUB_TOKEN` default untuk rilis GitHub dan secret repository `NPM_TOKEN` untuk memublikasikan `ui-ux-pro-max-cli` ke npm.
## Troubleshooting
### `uipro: unknown command 'uninstall'` atau `unknown command 'update'`
Versi `ui-ux-pro-max-cli` yang terinstal sudah usang. Perbarui lalu coba lagi:
```bash
npm install -g ui-ux-pro-max-cli@latest
uipro uninstall
```
### `uipro uninstall` menampilkan "No installed AI skill directories detected"
Skill terinstal di direktori yang berbeda dari tempat Anda menjalankan command. Pilih salah satu:
```bash
# Option A — run from the project root where you originally installed it
cd /path/to/your/project
uipro uninstall
# Option B — remove the global install
uipro uninstall --global
# Option C — remove manually
rm -rf .claude/skills/ui-ux-pro-max # Claude Code
rm -rf .cursor/skills/ui-ux-pro-max # Cursor
rm -rf .windsurf/skills/ui-ux-pro-max # Windsurf
rm -rf .agents/skills/ui-ux-pro-max # Antigravity / Codex
```
### Dialog "Upload a skill" Claude.ai menampilkan "Zip contains too many files (maximum 200)"
Jangan upload ZIP repository GitHub secara penuh. Itu adalah checkout development yang berisi source code, aset CLI, dokumentasi, preview, dan beberapa skill yang dibundel, sehingga melebihi batas upload 200 file milik Claude. ZIP tersebut bukan artifact upload skill Claude, dan proyek ini saat ini tidak menerbitkan ZIP manual terpisah untuk upload ke Claude.ai.
Untuk Claude Code, instal melalui Marketplace:
```bash
/plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skill
/plugin install ui-ux-pro-max@ui-ux-pro-max-skill
```
Atau gunakan installer CLI:
```bash
npx ui-ux-pro-max-cli init --ai claude
```
### Instalasi Claude Marketplace gagal dengan "Zip file contains a symbolic link"
Ini adalah masalah yang diketahui pada versi sebelum v2.5.1. Repository sebelumnya menggunakan symlink secara internal yang tidak dapat ditangani oleh sebagian tool instalasi. **Perbaikan:** gunakan installer CLI sebagai gantinya:
```bash
npm install -g ui-ux-pro-max-cli
uipro init --ai claude
```
Atau tunggu rilis berikutnya yang menyelesaikan masalah ini.
### `npm install -g ui-ux-pro-max-cli` gagal karena permission error
Gunakan Node version manager (direkomendasikan), atau lewati instalasi global sepenuhnya:
```bash
# npx without installing globally
npx ui-ux-pro-max-cli init --ai claude
```
### Python tidak ditemukan saat menjalankan command design system
Script pencarian memerlukan Python 3.x. Instal secara manual dari [python.org](https://www.python.org/downloads/) atau melalui package manager OS Anda (Homebrew, apt, winget). Agent AI tidak boleh menginstalnya untuk Anda — agent diperintahkan untuk meminta Anda melakukannya.
### Output design system terpotong / field ter-truncate
Output yang mudah dibaca manusia memotong field panjang pada 300 karakter. Gunakan `--json` untuk mendapatkan data lengkap tanpa pemotongan:
```bash
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "SaaS" --domain style --json
```
---
## Riwayat Star
[![Star History Chart](https://star-history.dera.page/svg?repos=nextlevelbuilder/ui-ux-pro-max-skill&type=Date)](https://star-history.dera.page/#nextlevelbuilder/ui-ux-pro-max-skill&Date)
## Lisensi
Proyek ini dilisensikan di bawah [MIT License](LICENSE).
## Agent yang Kompatibel
Skill ini bekerja dengan:
- [Claude Code](https://claude.com/product/claude-code)
- [AdaL](https://sylph.ai/) - Agent coding yang dapat berkembang secara mandiri ([Dokumentasi](https://docs.sylph.ai/) | [GitHub](https://github.com/SylphAI-Inc/adal-cli))