# [UI UX Pro Max](https://uupm.cc)

🇦🇿 Azərbaycanca | 🇮🇩 Bahasa Indonesia | 🇰🇷 한국어 | 🇻🇳 Tiếng Việt | 🇨🇳 简体中文 | 🇺🇸 English

GitHub Release 192 Reasoning Rules 79 searchable UI styles Python 3.x License

npm npm downloads GitHub stars PayPal

Müxtəlif platforma və framework-lər üçün peşəkar UI/UX qurmağa kömək edən dizayn intellekti təqdim edən süni intellekt skill-i.

UI UX Pro Max

Faydalı hesab edirsinizsə, layihəyə dəstək olmağı düşünün:

PayPal Donate

Digər layihələr
NextLevelBuilder.io | GoClaw.sh | AgentKit.best | TOSE.sh

---

Yeni skill-imizə baxın:
3Dviz Pro Max

İdeyanı kəşf etməyə dəyər 3D səhnəyə çevirin.

Harness Village: kamera naviqasiyası və animasiyalı canlıları olan fantaziya kəndi

Vizual ilham, benchmark deyil. Müəllif tərəfindən təqdim olunmuş, bu skill mövcud olmamışdan əvvəl çəkilmiş layihə; interfeysində Vyetnam dili var. Bu, tarixi görüntüdür, ingilis dilində demo və ya skill-in iş zamanı testi deyil — bax: media mənşəyi.

🤌 Vebsayt: https://3dviz.dev/

--- ## v2.0-da yeniliklər ### Ağıllı dizayn sistemi yaradılması v2.0-ın əsas xüsusiyyəti **Design System Generator**-dur — layihə tələblərinizi təhlil edən və saniyələr içində sizə uyğunlaşdırılmış tam dizayn sistemi yaradan süni intellektli əsaslandırma mühərriki. ``` +----------------------------------------------------------------------------------------+ | TARGET: Serenity Spa - RECOMMENDED DESIGN SYSTEM | +----------------------------------------------------------------------------------------+ | | | PATTERN: Hero-Centric + Social Proof | | Conversion: Emotion-driven with trust elements | | CTA: Above fold, repeated after testimonials | | Sections: | | 1. Hero | | 2. Services | | 3. Testimonials | | 4. Booking | | 5. Contact | | | | STYLE: Soft UI Evolution | | Keywords: Soft shadows, subtle depth, calming, premium feel, organic shapes | | Best For: Wellness, beauty, lifestyle brands, premium services | | Performance: cost:low | Accessibility: risk:conditional; verify requirements | | | | COLORS: | | Primary: #E8B4B8 (Soft Pink) | | Secondary: #A8D5BA (Sage Green) | | CTA: #D4AF37 (Gold) | | Background: #FFF5F5 (Warm White) | | Text: #2D3436 (Charcoal) | | Notes: Calming palette with gold accents for luxury feel | | | | TYPOGRAPHY: Cormorant Garamond / Montserrat | | Mood: Elegant, calming, sophisticated | | Best For: Luxury brands, wellness, beauty, editorial | | Google Fonts: https://fonts.google.com/share?selection.family=... | | | | KEY EFFECTS: | | Soft shadows + Context-appropriate transitions + Gentle hover states | | | | AVOID (Anti-patterns): | | Bright neon colors + Harsh animations + Dark mode + AI purple/pink gradients | | | | PRE-DELIVERY CHECKLIST: | | [ ] No emojis as icons (use SVG: Heroicons/Lucide) | | [ ] cursor-pointer on all clickable elements | | [ ] Interaction timing follows the platform, component, and user preference | | [ ] Light mode: text contrast 4.5:1 minimum | | [ ] Focus states visible for keyboard nav | | [ ] prefers-reduced-motion respected | | [ ] Text, chips, and badges reflow without clipping or broken labels | | [ ] Responsive: 375px, 768px, 1024px, 1440px | | | +----------------------------------------------------------------------------------------+ ``` ### Dizayn sisteminin yaradılması necə işləyir ``` ┌─────────────────────────────────────────────────────────────────┐ │ 1. USER REQUEST │ │ "Build a landing page for my beauty spa" │ └─────────────────────────────────────────────────────────────────┘ │ ▼ ┌─────────────────────────────────────────────────────────────────┐ │ 2. MULTI-DOMAIN SEARCH (5 parallel searches) │ │ • Product type matching (192 categories) │ │ • Style recommendations (79 searchable; 50 active) │ │ • Color palette selection (192 palettes) │ │ • Landing page patterns (34 patterns) │ │ • Typography pairing (74 font combinations) │ └─────────────────────────────────────────────────────────────────┘ │ ▼ ┌─────────────────────────────────────────────────────────────────┐ │ 3. REASONING ENGINE │ │ • Match product → UI category rules │ │ • Apply style priorities (BM25 ranking) │ │ • Filter anti-patterns for industry │ │ • Process decision rules (JSON conditions) │ └─────────────────────────────────────────────────────────────────┘ │ ▼ ┌─────────────────────────────────────────────────────────────────┐ │ 4. COMPLETE DESIGN SYSTEM OUTPUT │ │ Pattern + Style + Colors + Typography + Effects │ │ + Anti-patterns to avoid + Pre-delivery checklist │ └─────────────────────────────────────────────────────────────────┘ ``` ### 192 sahəyə xas əsaslandırma qaydası Əsaslandırma mühərriki aşağıdakı sahələr üçün ixtisaslaşmış qaydaları ehtiva edir: | Kateqoriya | Nümunələr | |------------|-----------| | **Tech & SaaS** | SaaS, Micro SaaS, B2B Service, Developer Tool / IDE, AI/Chatbot Platform, Cybersecurity Platform | | **Maliyyə** | Fintech/Crypto, Banking, Insurance, Personal Finance Tracker, Invoice & Billing Tool | | **Səhiyyə** | Medical Clinic, Pharmacy, Dental, Veterinary, Mental Health, Medication Reminder | | **E-ticarət** | General, Luxury, Marketplace (P2P), Subscription Box, Food Delivery | | **Xidmətlər** | Beauty/Spa, Restaurant, Hotel, Legal, Home Services, Booking & Appointment | | **Yaradıcı sahələr** | Portfolio, Agency, Photography, Gaming, Music Streaming, Photo/Video Editor | | **Həyat tərzi** | Habit Tracker, Recipe & Cooking, Meditation, Weather, Diary, Mood Tracker | | **Yeni texnologiyalar** | Web3/NFT, Spatial Computing, Quantum Computing, Autonomous Drone Fleet | Hər qaydaya bunlar daxildir: - **Tövsiyə olunan pattern** - Landing page strukturu - **Üslub prioriteti** - Ən uyğun UI üslubları - **Rəng əhval-ruhiyyəsi** - Sahəyə uyğun palitralar - **Tipoqrafiya əhval-ruhiyyəsi** - Şriftin xarakterinə uyğunluq - **Əsas effektlər** - Animasiyalar və interaksiyalar - **Anti-pattern-lər** - Nəyi ETMƏMƏK lazımdır (məsələn, bankçılıq üçün "AI bənövşəyi/çəhrayı gradient-lər") ## Xüsusiyyətlər - **79 axtarıla bilən UI üslubu (50-si aktiv)** - Glassmorphism, Claymorphism, Minimalism, Brutalism, Neumorphism, Bento Grid, Dark Mode, AI-Native UI və s. - **192 rəng palitrası** - 192 məhsul növü ilə 1:1 uyğunlaşdırılmış sahəyə xas palitralar - **74 şrift cütü** - Google Fonts import-ları ilə seçilmiş tipoqrafiya kombinasiyaları - **25 qrafik növü** - Dashboard və analitika üçün tövsiyələr - **22 texnologiya stack-i** - 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 UX qaydası** - Ən yaxşı təcrübələr, anti-pattern-lər, əlçatanlıq qaydaları, davamlı mətn düzülüşü, yığcam etiketlər və ləğv edilə bilən interaksiyalar - **192 əsaslandırma qaydası** - Sahəyə xas dizayn sistemi yaradılması (v2.0-da YENİ) ### Davamlı mətn və yığcam UI Təlimat başlıqlar, uzun tokenlər, chip-lər, badge-lər və yarımçıq qalan mikro-interaksiyalarla bağlı tez-tez rast gəlinən istehsalat problemlərini əhatə edir: - Balanslaşdırılmış başlıq sətir keçidi mütərəqqi təkmilləşdirmədir, konkret sözün son sətirdə qalacağına zəmanət deyil. Dizaynlar müxtəlif en, şrift və lokallarda təbii sətir keçidi ilə də işləməlidir. - Vacib mətn dar enlərdə, brauzer zoom-unda, mətn miqyaslanmasında və istifadəçinin məsafə tənzimləmələrində kəsilmədən yenidən düzülməlidir. Uzun URL və identifikatorlar təhlükəsiz şəkildə sətirə bölünə bilər. - Chip və tag toplusu sətirə düzülməli və ya idarə oluna bilən `+n` açılışından istifadə etməlidir. Yığcam etiket mümkün olduqda bütöv qalmalıdır; qaçılmaz kəsilmə üçün klaviatura, kursor və toxunma istifadəçilərinə tam dəyərə əlçatan yol verilməlidir. - Badge-in mənası yalnız rəngə əsaslanmamalıdır. İnteraktiv chip-lər native semantikaya, görünən fokusa və proqramla oxuna bilən vəziyyətə malik olmalıdır; canlı sayğaclar mənalı kontekst daşımalıdır. - Sürətli interaksiyalar animasiyanı ləğv edə bilər, lakin son semantik vəziyyət, fokus və məzmun düzgün qalmalıdır. Vaxtlama platforma və komponentə görə seçilir, reduced-motion seçimlərinə hörmət edilir. ### Üslub taksonomiyası Kataloq sabit ID və alias-larla dəstəklənən **79 axtarıla bilən üslub** ehtiva edir: | Status | Say | Axtarış davranışı | |--------|----:|-------------------| | Active | 50 | Normal tövsiyələrə daxildir və qalereyada standart olaraq göstərilir | | Supplemental | 29 | Dəqiq və ya açıq variant/sistem niyyəti olduqda qaytarılır; qalereyanın status filtri ilə əlçatandır | | Deprecated | 9 | Normal sıralamadan çıxarılıb; köhnə adlar kanonik üslub və ya landing pattern-ə yönləndirilir | Aktiv dəstə 43 ümumi vizual ailə, 2 mobil üslub, 3 rəsmi platforma/dizayn sistemi, 1 platforma materialı və 1 əsas analitika üslubunu əhatə edir. Hazırkı rəsmi sistemlər Fluent 2, Shopify Polaris və Adobe Spectrum-dur; Liquid Glass Apple platforma materialı kimi, Material 3 Expressive mobil Material variantı kimi saxlanılır, Spectrum 2 isə supplemental-dır. Landing page strukturları BM25 sıralamasında vizual üslublarla rəqabət aparmasın deyə ayrıca 34 pattern-lik landing dataset-də yerləşir. Tam taksonomiya və mənşə məlumatlı metadata üçün [`styles.csv`](src/ui-ux-pro-max/data/styles.csv) faylına baxın. ## 💎 Basic və Premium versiya müqayisəsi Çox istifadəçi açıq mənbəli və premium versiyalar arasındakı fərqi soruşur. İş axınınıza uyğun olanı seçməyə kömək edəcək ətraflı müqayisə: ### 🟢 Basic versiya (bu repozitoriya) * **Tam açıq mənbə:** Fərdi developer-lər, hobbi layihələri və standart layihələr üçün idealdır. * **Əsas UI/UX intellekti:** 79 axtarıla bilən UI üslubuna (50-si aktiv), 192 məhsul növünə, rəng palitralarına və seçilmiş şrift cütlərinə tam çıxış. * **Ağıllı tövsiyələr:** Dəqiq dizayn uyğunluğu üçün daxili BM25 axtarış mühərriki. * **Çoxplatformalı dəstək:** 22 əsas framework üçün stack-ə xas təlimatlar (React, Vue, Tailwind, iOS, Android və s.). * **Dizayn sisteminin yaradılması:** CLI vasitəsilə uyğunlaşdırılmış UI qaydalarını, pattern-ləri və məntiqi dərhal yaradın. ### 🟡 Premium versiya * **Genişləndirilmiş brend dizayn skill-ləri:** UI/UX-dən kənara çıxaraq Brend kimliyi yaradılması, Loqo dizaynı, Korporativ kimlik proqramları (CIP), Bannerlər, Təqdimat slaydları və xüsusi ikonoqrafiyanı əhatə edir. * **Qabaqcıl aktiv yaradılması:** Sadəcə placeholder deyil, real vizual aktivlər yaratmaq üçün süni intellektli şəkil generasiyası ilə dərin inteqrasiya. * **Korporativ arxitektura:** Geniş miqyaslı komanda tətbiqləri üçün qurulmuş daha əhatəli və miqyaslana bilən Design Token arxitekturası. * **Prioritet dəstək:** Fasiləsiz tam dizayn iş axınına ehtiyacı olan komandalar və peşəkarlar üçün xüsusi texniki yardım. 👉 *Premium səviyyəyə keçid haqqında ətraflı məlumat üçün [uupm.cc](https://uupm.cc) saytına baxın.* ## Quraşdırma ### Claude Marketplace vasitəsilə (Claude Code) Claude Code-da iki əmrlə birbaşa quraşdırın: ``` /plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skill /plugin install ui-ux-pro-max@ui-ux-pro-max-skill ``` ### CLI vasitəsilə (Tövsiyə olunur) ```bash # CLI-ı qlobal olaraq quraşdırın npm install -g ui-ux-pro-max-cli # Layihənizə keçin cd /path/to/your/project # AI köməkçiniz üçün quraşdırın 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 zcode # ZCode uipro init --ai kimi # Kimi Code uipro init --ai amazonq # Amazon Q Developer uipro init --ai openclaw # OpenClaw (.agents/skills/) uipro init --ai universal # Universal / Agent Standard (.agents/skills/) uipro init --ai all # Bütün köməkçilər ``` npm paketi `ui-ux-pro-max-cli`-dır; o hələ də `uipro` əmrini quraşdırır. Köhnə `uipro-cli` buraxılışları köhnəlib və cari asset-lər üçün istifadə edilməməlidir. ### Qlobal quraşdırma (bütün layihələr üçün əlçatan) ```bash uipro init --ai claude --global # ~/.claude/skills/ qovluğuna quraşdırır uipro init --ai cursor --global # ~/.cursor/skills/ qovluğuna quraşdırır uipro init --ai zcode --global # ~/.zcode/skills/ qovluğuna quraşdırır uipro init --ai kimi --global # ~/.kimi-code/skills/ qovluğuna quraşdırır uipro init --ai universal --global # ~/.agents/skills/ qovluğuna quraşdırır ``` ### Digər CLI əmrləri ```bash uipro versions # Mövcud versiyaların siyahısı uipro update # Skill fayllarını quraşdırılmış CLI paketindən yeniləyir uipro update --global # Qlobal skill fayllarını quraşdırılmış CLI paketindən yeniləyir uipro init --offline # Uyğunluq flag-ı; daxil edilmiş şablonları quraşdırır uipro init --dry-run # Fayl yazmadan quraşdırma addımlarına önbaxış uipro uninstall # Skill-i silir (platforma avtomatik təyin olunur) uipro uninstall --ai claude # Konkret platformanı silir uipro uninstall --global # Qlobal quraşdırmanı silir ``` ## İlkin tələblər Axtarış skripti üçün Python 3.x tələb olunur (yalnız standart kitabxana — skriptlər heç nə quraşdırmır və şəbəkə sorğusu göndərmir). Python-un quraşdırılıb-quraşdırılmadığını yoxlayın: ```bash python3 --version ``` Əgər yoxdursa, onu özünüz [python.org](https://www.python.org/downloads/) saytından və ya əməliyyat sisteminizin paket menecerindən (Homebrew, apt, winget) quraşdırın. Bu quraşdırma addımları **sizin — insan istifadəçinin** üçündür; bu skill-dən istifadə edən AI agent-lər maşınınıza heç bir proqram quraşdırmamalıdır, onlara bunun əvəzinə sizdən soruşmaq tapşırılıb. ## İstifadə ### Skill rejimi (avtomatik aktivləşir) **Dəstəklənənlər:** Claude Code, Cursor, Windsurf, Antigravity, Codex CLI, Continue, Gemini CLI, OpenCode, Qoder, CodeBuddy, Droid (Factory), KiloCode, Warp, Augment, CodeWhale, ZCode, Kimi Code, Amazon Q Developer, OpenClaw, GitHub Copilot Skill UI/UX işi istədiyiniz zaman avtomatik aktivləşir. Sadəcə təbii şəkildə yazın: ``` Build a landing page for my SaaS product ``` > **Trae**: Əvvəlcə **SOLO** rejiminə keçin. Skill UI/UX sorğuları üçün aktivləşəcək. ### İş axını rejimi (slash əmri) **Dəstəklənənlər:** Kiro, Roo Code, KiloCode Skill-i çağırmaq üçün slash əmrindən istifadə edin: ``` /ui-ux-pro-max Build a landing page for my SaaS product ``` ### Nümunə sorğular ``` 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 ``` ### Mövcud tətbiqə tema tətbiq etmək [Skill-i quraşdırdıqdan](#quraşdırma) sonra tətbiqinizi AI köməkçinizdə açın və buna oxşar prompt istifadə edin. İş axını rejimində (Workflow Mode) əvvəlinə `/ui-ux-pro-max` əlavə edin. ```text Use the ui-ux-pro-max skill to retheme my existing React app. Target style: Minimalism & Swiss Style. First inspect the framework and styling-library versions, routes, components, styles, and existing theme tokens. Keep the current component structure, behavior, and business logic. Reuse and update the existing semantic tokens for colors, typography, spacing, radii, shadows, and interaction states; add missing tokens rather than creating a parallel theme system. Replace hard-coded styles one component at a time. Verify contrast, keyboard focus, responsive layouts, and all supported light/dark modes. Summarize changed files and any remaining hard-coded styles. ``` `Minimalism & Swiss Style` ifadəsini istədiyiniz [kataloq üslubu](src/ui-ux-pro-max/data/styles.csv) və ya vizual istiqamətlə əvəz edin. Axtarış nəticələri dizayn təlimatı verir; onlar tətbiqinizi avtomatik olaraq yenidən yazmır. **Tema miqrasiyası üçün yoxlama siyahısı:** - **Audit:** Üslub cədvəllərində, inline üslublarda və `bg-blue-600` və ya `text-[#1e293b]` kimi utility-lərdə temaya aid sərt kodlanmış dəyərləri tapın. - **Uyğunlaşdırma:** Tətbiqin mövcud üslub sistemində `background`, `surface`, `foreground`, `primary`, `border` və `ring` kimi semantik rolları təkrar istifadə edin. Çatışmayan rolları quraşdırılmış kitabxana versiyasının qaydalarına uyğun əlavə edin. - **Miqrasiya:** Sərt kodlanmış dəyərləri token istinadları ilə kiçik komponent qrupları ilə əvəz edin. Yalnız token-ləri dəyişmək onlardan istifadə etməyən üslublara təsir etməyəcək. - **Yoxlama:** Hər qrupdan sonra mətn/UI kontrastını, hover/focus/disabled vəziyyətlərini, responsiv düzülüşləri və dəstəklənən hər temanı yoxlayın. ### Necə işləyir 1. **Siz soruşursunuz** - İstənilən UI/UX tapşırığını verin (qurmaq, dizayn etmək, yaratmaq, implementasiya etmək, nəzərdən keçirmək, düzəltmək, yaxşılaşdırmaq) 2. **Dizayn sistemi yaradılır** - AI əsaslandırma mühərrikindən istifadə edərək avtomatik tam dizayn sistemi yaradır 3. **Ağıllı tövsiyələr** - Məhsul növünüzə və tələblərinizə əsasən ən uyğun üslubları, rəngləri və tipoqrafiyanı tapır 4. **Kod yaradılması** - UI-ı düzgün rənglər, şriftlər, məsafələr və ən yaxşı təcrübələrlə implementasiya edir 5. **Təhvildən əvvəl yoxlamalar** - Tez-tez rast gəlinən UI/UX anti-pattern-lərə qarşı yoxlayır ### Dəstəklənən stack-lər Skill aşağıdakılar üçün stack-ə xas təlimatlar təqdim edir: | Kateqoriya | Stack-lər | |------------|-----------| | **Web (HTML)** | HTML + Tailwind (standart) | | **React ekosistemi** | React, Next.js, shadcn/ui | | **Vue ekosistemi** | Vue, Nuxt.js, Nuxt UI | | **Angular** | Angular | | **PHP** | Laravel (Blade, Livewire, Inertia.js) | | **Digər web** | Svelte, Astro, Three.js | | **Desktop** | JavaFX, WPF, WinUI 3, Avalonia, Uno Platform, UWP | | **iOS** | SwiftUI | | **Android** | Jetpack Compose | | **Çoxplatformalı** | React Native, Flutter | Sorğunuzda istədiyiniz stack-i qeyd edin, yoxsa standart olaraq HTML + Tailwind istifadə olunacaq. ## Nümunələr ### Əvvəl/sonra: əməliyyat dashboard-u Sadə bir əməliyyat dashboard-u ([əvvəl](https://skill-fixture-before.theroost.dev)) yalnız UI UX Pro Max-ın onun üçün yaratdığı dizayn sistemindən istifadə edilərək yenidən üslublaşdırılıb ([sonra](https://ui-ux-pro-max-after.theroost.dev)). Əmr: `search.py "internal operations dashboard" --design-system --density 8 --motion 3 --variance 4`. *İllüstrativ, icma tərəfindən təqdim olunmuş nümunə; rəsmi demo, benchmark və ya skill-in iş zamanı testi deyil.* ## Dizayn sistemi əmri (qabaqcıl) Dizayn sistemi generatoruna birbaşa çıxış üçün: > Qeyd: Continue vasitəsilə quraşdırmısınızsa, aşağıdakı əmrlərdə `.claude/skills/` yolunu `.continue/skills/` ilə əvəz edin. Droid (Factory) üçün `.factory/skills/`, ZCode üçün `.zcode/skills/`, Amazon Q Developer üçün `.amazonq/skills/` istifadə edin (Amazon Q qaydanı yalnız `.amazonq/rules/ui-ux-pro-max.md` yolundan avtomatik yükləyir; `.amazonq/skills/` altındakı data və skriptlər qaydanın istinad etdiyi fayllardır). ```bash # ASCII çıxışı ilə dizayn sistemi yaradın python3 .claude/skills/ui-ux-pro-max/scripts/search.py "beauty spa wellness" --design-system -p "Serenity Spa" # Markdown çıxışı ilə yaradın python3 .claude/skills/ui-ux-pro-max/scripts/search.py "fintech banking" --design-system -f markdown # Domen üzrə axtarış 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-ə xas təlimatlar 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 ``` Web-stack axtarışı versiyaya həssasdır. Köhnə major göstərilməyən sorğular cari, aktiv təlimatları qaytarır. Açıq köhnə terminlər və ya köhnə major-lar (məsələn, `Svelte 4` və ya `Next.js 15`) yalnız seçilmiş köhnə sətirləri qaytarır; onlar `Status` və `Applies To` ilə qeyd olunur. Uyğun köhnə təlimat seçilməyibsə, axtarış framework nəsillərini qarışdırmaq əvəzinə nəticə qaytarmır. ### Dizayn sistemini saxlamaq (Master + Overrides pattern-i) Dizayn sisteminizi sessiyalar arasında **iyerarxik əldə etmə** üçün fayllara saxlayın: ```bash # Yaradın və design-system/myapp/MASTER.md faylına saxlayın python3 .claude/skills/ui-ux-pro-max/scripts/search.py "SaaS dashboard" --design-system --persist -p "MyApp" # Həmçinin səhifəyə xas override faylı yaradın python3 .claude/skills/ui-ux-pro-max/scripts/search.py "SaaS dashboard" --design-system --persist -p "MyApp" --page "dashboard" ``` Bu, `design-system/` qovluq strukturunu yaradır: ``` design-system/ └── myapp/ # Hər layihə üçün bir qovluq (-p "MyApp" dəyərinin slug-ı) ├── MASTER.md # Qlobal əsas mənbə (rənglər, tipoqrafiya, məsafələr, komponentlər) └── pages/ └── dashboard.md # Səhifəyə xas override-lar (yalnız Master-dən fərqlər) ``` **İyerarxik əldə etmə necə işləyir:** 1. Konkret səhifə qurarkən (məsələn, "Checkout") əvvəlcə `design-system/[project-slug]/pages/checkout.md` faylını yoxlayın 2. Səhifə faylı varsa, onun qaydaları Master faylını **əvəz edir** 3. Yoxdursa, yalnız `design-system/[project-slug]/MASTER.md` istifadə olunur **Kontekstə həssas əldə etmə prompt-u:** ``` I am building the [Page Name] page. Please read design-system/[project-slug]/MASTER.md. Also check if design-system/[project-slug]/pages/[page-name].md exists. If the page file exists, prioritize its rules. If not, use the Master rules exclusively. Now, generate the code... ``` ## Arxitektura və töhfə vermək ### İstifadəçilər üçün Kod bazası **şablon əsaslı yaratma sisteminə** keçirilib. Bütün platformaya xas fayllar (`.cursor/`, `.windsurf/`, `.kiro/`, `.factory/` və s.) indi CLI tərəfindən dinamik olaraq yaradılır. **Quraşdırmaq üçün həmişə CLI-dan istifadə edin:** ```bash npm install -g ui-ux-pro-max-cli uipro init --ai ``` Bu, quraşdırılmış CLI paketi ilə gələn ən son şablonları və AI köməkçiniz üçün düzgün fayl strukturunu əldə etməyinizi təmin edir. Yeni buraxılış çıxanda əvvəlcə npm paketini yeniləyin. ### Töhfə verənlər üçün Bu layihəyə töhfə vermək istəyirsinizsə: ```bash # 1. Repozitoriyanı klonlayın git clone https://github.com/nextlevelbuilder/ui-ux-pro-max-skill.git cd ui-ux-pro-max-skill # 2. Strukturu başa düşün src/ui-ux-pro-max/ # Əsas mənbə (data, skriptlər, şablonlar) cli/ # CLI quraşdırıcısı (şablonlardan fayllar yaradır) .claude/ # Claude Code skill-i üçün lokal dev/test .factory/ # Droid (Factory) skill-i üçün lokal dev/test # 3. Dəyişiklikləri src/ui-ux-pro-max/ içində edin # - data/*.csv → Verilənlər bazası faylları # - scripts/*.py → Axtarış mühərriki və dizayn sistemi # - templates/ → Platformaya xas şablonlar # 4. CLI ilə sinxronlaşdırın və lokal test edin cd cli npm run sync:assets npm run check:assets npm run verify:data npm run typecheck # 5. CLI-ı build edin və test edin # `npm run build` mümkün olduqda Bun-dan istifadə edir, `npm ci`-dan sonra isə TypeScript compiler çıxışına keçir. npm run build node dist/index.js init --ai claude --offline # Müvəqqəti qovluqda test edin node dist/index.js init --ai claude --dry-run # Quraşdırma addımlarına önbaxış (yazılmır) # 6. PR yaradın (heç vaxt birbaşa main-ə push etməyin) git checkout -b feat/your-feature git commit -m "feat: description" git push -u origin feat/your-feature gh pr create ``` Ətraflı inkişaf qaydaları üçün [CLAUDE.md](CLAUDE.md) faylına baxın. ### Kataloqun mənşəyi və yenilənməsi Commit olunmuş kataloq xülasəsi hazırda **1,934 təsdiqlənmiş Google Fonts** və rəsmi lisenziya metadata-sı uyğun gəlmədiyi üçün irəli çəkilməyən **8 yoxlama istisnasını** qeyd edir. İkon təlimatı **105 seçilmiş sətir** olaraq qalır (100 birbaşa Phosphor web import-u və React Native/fallback təlimatı); ayrıca **1,512 ikonluq upstream Phosphor manifesti** adları, çəkiləri və React/SSR import-larını yoxlayır və axtarış nəticələrini bütün upstream paketlə doldurmur. Adi inkişaf və pull request CI-ı şəbəkədən asılı deyil. Snapshot hash-ları və yaradılmış say yoxlaması daxil olmaqla tam oflayn yoxlamanı bununla işə salın: ```bash npm --prefix cli run verify:data # Və ya yalnız yaradılmış kataloq xülasəsini yoxlayın: npm --prefix cli run validate:catalog-summary ``` Yenilənmə normallaşdırması da commit olunmuş fixture-lərlə tamamilə oflayn sınaqdan keçirilə bilər. Çıxışlar müvəqqəti namizəd qovluğuna yazılır və kanonik datanı heç vaxt əvəz etmir: ```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 ``` Canlı upstream yenilənməsi qəsdən `refresh-catalogs.yml` workflow-unda təcrid olunub; o, bazar ertəsi günləri 03:17 UTC-də planlaşdırılıb və tələb üzrə də işə salına bilər. `GOOGLE_FONTS_API_KEY`-i GitHub Actions secret-i kimi konfiqurasiya edin, sonra işə salın və yoxlama artefaktını yükləyin: ```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 Google Fonts Developer API-ni və sabitlənmiş rəsmi Phosphor paketlərini oxuyur, namizədləri və unified diff-ləri artefakta yazır və repozitoriyaya yalnız oxuma icazəsinə malikdir. O, heç vaxt commit etmir, push etmir, PR açmır və ya merge etmir. Namizəd faylları `src/ui-ux-pro-max/data/` qovluğuna əl ilə irəli çəkməzdən əvvəl dəyişiklik hesabatlarını, istisnaları, lisenziyaları, uyğunluq metriklərini və oflayn yoxlamanı nəzərdən keçirin. ## Avtomatik buraxılışlar Bu repozitoriya GitHub buraxılışlarını avtomatik yaratmaq üçün Conventional Commits ilə semantic-release istifadə edir: - `dev` branch-ı `2.6.0-beta.1` kimi beta GitHub prerelease-ləri yaradır. - `main` branch-ı `2.6.0` kimi rəsmi stabil GitHub buraxılışları yaradır. Buraxılış qeydləri və `CHANGELOG.md` Conventional Commit mesajlarından yaradılır. Versiya nömrələri buraxılışa hazırlıq zamanı `skill.json`, `.claude-plugin/plugin.json`, `.claude-plugin/marketplace.json`, `cli/package.json` və `cli/package-lock.json` arasında sinxronlaşdırılır. Düzgün versiya artımı üçün bu commit növlərindən istifadə edin: - `fix:` -> patch buraxılışı - `feat:` -> minor buraxılışı - `feat!:` və ya `BREAKING CHANGE:` -> major buraxılışı Buraxılış workflow-u GitHub buraxılışları üçün standart `GITHUB_TOKEN`-dan, `ui-ux-pro-max-cli`-ı npm-də dərc etmək üçün isə repozitoriyanın `NPM_TOKEN` secret-indən istifadə edir. ## Problemlərin aradan qaldırılması ### Claude Code `response exceeded the ... output token maximum` xətası verir Bu, Claude Code-un tək cavabına qoyulan limitdir, UI/UX Pro Max quraşdırıcısında və ya axtarış skriptlərində xəta deyil. Əvvəlcə Claude-dan tapşırığı kiçik addımlara bölməyi və böyük nəticələri tədricən fayla yazmağı xahiş edin. Həqiqətən daha böyük tək cavaba ehtiyacınız varsa və aktiv model bunu dəstəkləyirsə, yeni sessiya başlamazdan əvvəl Claude Code-un output-token limitini təyin edin. Məsələn: ```bash # macOS, Linux və ya WSL export CLAUDE_CODE_MAX_OUTPUT_TOKENS="64000" claude ``` ```powershell # Windows PowerShell $env:CLAUDE_CODE_MAX_OUTPUT_TOKENS = "64000" claude ``` Shell mühit dəyişiklikləri yalnız həmin shell-dən başladılan proqramlara aid olur, ona görə dəyişəni təyin etdikdən sonra Claude Code-u yenidən başladın. Claude Code aktiv modelin output limitindən yuxarı dəyərləri məhdudlaşdırır; model və provayder limitləri fərqlidir. Bu dəyəri artırmaq gecikməni və istifadəni də artıra bilər, həmçinin avtomatik sıxışdırmadan əvvəlki effektiv konteksti azaldır. Rəsmi [Claude Code environment-variable reference](https://code.claude.com/docs/en/env-vars#variables) sənədinə baxın. ### `uipro: unknown command 'uninstall'` və ya `unknown command 'update'` Quraşdırılmış `ui-ux-pro-max-cli` versiyanız köhnədir. Yeniləyin və yenidən cəhd edin: ```bash npm install -g ui-ux-pro-max-cli@latest uipro uninstall ``` ### `uipro uninstall` "No installed AI skill directories detected" deyir Skill əmri işlətdiyiniz qovluqdan fərqli qovluğa quraşdırılıb. Ya: ```bash # Seçim A — ilk dəfə quraşdırdığınız layihə kökündən işlədin cd /path/to/your/project uipro uninstall # Seçim B — qlobal quraşdırmanı silin uipro uninstall --global # Seçim C — əl ilə silin 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 ``` ### Claude.ai-ın "Upload a skill" dialoqu "Zip contains too many files (maximum 200)" deyir Tam GitHub repozitoriya ZIP-ini yükləməyin. Bu, mənbə kodunu, CLI asset-lərini, sənədləri, önbaxışları və bir neçə daxil edilmiş skill-i ehtiva edən inkişaf checkout-udur, buna görə Claude-un 200 fayl yükləmə limitini aşır. O, Claude skill yükləmə artefaktı deyil və bu layihə hazırda Claude.ai üçün ayrıca əl ilə yükləmə ZIP-i dərc etmir. Claude Code üçün Marketplace vasitəsilə quraşdırın: ```bash /plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skill /plugin install ui-ux-pro-max@ui-ux-pro-max-skill ``` Və ya CLI quraşdırıcısından istifadə edin: ```bash npx ui-ux-pro-max-cli init --ai claude ``` ### Claude Marketplace quraşdırması "Zip file contains a symbolic link" xətası ilə uğursuz olur Bu, v2.5.1-dən əvvəlki versiyalarda mövcud olan məlum problemdir. Repozitoriya daxildə simvolik linklərdən istifadə edirdi və bəzi quraşdırma alətləri onları emal edə bilmir. **Həlli:** əvəzinə CLI quraşdırıcısından istifadə edin: ```bash npm install -g ui-ux-pro-max-cli uipro init --ai claude ``` Və ya problemin həll olunduğu növbəti buraxılışı gözləyin. ### `npm install -g ui-ux-pro-max-cli` icazə xətası ilə uğursuz olur Node versiya meneceri istifadə edin (tövsiyə olunur) və ya qlobal quraşdırmanı tamamilə atlayın: ```bash # Qlobal quraşdırmadan npx npx ui-ux-pro-max-cli init --ai claude ``` ### Dizayn sistemi əmrlərini işlədərkən Python tapılmır Axtarış skriptləri Python 3.x tələb edir. Onu [python.org](https://www.python.org/downloads/) saytından və ya əməliyyat sisteminizin paket menecerindən (Homebrew, apt, winget) özünüz quraşdırın. AI agent-lər onu sizin üçün quraşdırmamalıdır — onlara bunun əvəzinə sizdən soruşmaq tapşırılıb. ### Dizayn sistemi çıxışı kəsilir / sahələr qısaldılır İnsan tərəfindən oxunan çıxış uzun sahələri 300 simvolda kəsir. Tam, kəsilməmiş data üçün `--json` istifadə edin: ```bash python3 .claude/skills/ui-ux-pro-max/scripts/search.py "SaaS" --domain style --json ``` --- ## Ulduz tarixçəsi [![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) ## Lisenziya Bu layihə [MIT Lisenziyası](LICENSE) ilə lisenziyalaşdırılıb. ## Uyğun agent-lər Bu skill aşağıdakılarla işləyir: - [Claude Code](https://claude.com/product/claude-code) - [AdaL](https://sylph.ai/) - Özünü təkmilləşdirən AI kodlaşdırma agenti ([Docs](https://docs.sylph.ai/) | [GitHub](https://github.com/SylphAI-Inc/adal-cli))