ui-ux-pro-max

Überblick

Was ist ui-ux-pro-max?

ui-ux-pro-max ist ein UI/UX Design-Intelligence-Skill, der dir hilft, bessere Designentscheidungen für Web- und Mobile-Interfaces zu treffen. Statt Layouts, Farben, Typografie oder Interaktionsmuster zu raten, greift der Skill auf einen strukturierten Datensatz zurück aus:

• 50+ visuellen Styles
• 161 Farbpaletten
• 57 Font-Kombinationen
• 161 Produkttypen mit Entscheidungsregeln
• 99 UX-Guidelines
• 25 Chart-Typen
• Abdeckung für 10 Stacks: React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui und HTML/CSS

Der Skill ist als Design-Entscheidungsschicht konzipiert: Er hilft, Muster auszuwählen, Designentscheidungen zu begründen und die UX-Qualität während Konzeption und Umsetzung konsistent zu halten.

Für wen ist ui-ux-pro-max gedacht?

ui-ux-pro-max eignet sich besonders für:

• Product Designer & UI/UX Designer, die systematische Unterstützung für Layouts, Farbsysteme, Typografie und Interaktionsmuster wollen.
• Frontend Engineers in React, Next.js, Vue, Svelte, React Native oder Tailwind, die designbewusste Vorschläge bei der UI-Implementierung benötigen.
• Founder und Solo-Devs, die kein eigenes Designteam haben, aber trotzdem eine moderne, konsistente UI/UX wollen.
• Design-System-Owner, die eine Referenzebene für Styles, Chart-Muster und UX-Guidelines wollen, abgestimmt auf mehrere Stacks.

Besonders hilfreich ist der Skill, wenn du:

• Landing Pages, Dashboards, Admin Panels, SaaS-Apps, E-Commerce und Mobile Apps gestaltest oder reviewst.
• Zwischen Styles auswählst (Glassmorphism, Minimalism, Brutalism, Neumorphism, Bento Grid, Dark Mode etc.).
• Komponenten wie Buttons, Modals, Navbars, Sidebars, Cards, Tables, Forms und Charts an Best Practices ausrichten möchtest.

Welche Probleme löst ui-ux-pro-max?

ui-ux-pro-max reduziert Designtafelnheit und inkonsistente UX, indem es bereitstellt:

• Begründete Designentscheidungen: Nutzt Produkttyp und Kontext, um Farben, Typografie und Layout-Muster zu empfehlen.
• UX-Qualitätskontrolle: 99 UX-Guidelines helfen, Interaktions- und Usability-Probleme zu erkennen, bevor sie in Produktion gehen.
• Stack-übergreifende Guidance: Überführt Designentscheidungen in konkrete Implementierungsaspekte für React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui und HTML/CSS.
• Schnellere Ideation: Kombiniert Style-Richtungen, Paletten und Font-Kombinationen, die bereits kuratiert und kompatibel sind.

Damit ist ui-ux-pro-max immer dann wertvoll, wenn du Klarheit brauchst, wie etwas gestaltet werden sollte und warum eine bestimmte Richtung für deinen Produkttyp und deine Plattform sinnvoller ist.

Wann ist ui-ux-pro-max passend – und wann nicht?

Gut geeignet, wenn:

• Du Seiten-Layouts, Navigationsstruktur oder Interaktionsflows definierst.
• Du Farbpaletten, Typografie und Spacing-Systeme für ein neues oder bestehendes Produkt auswählst.
• Du UI in React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind oder shadcn/ui implementierst und designbewusste Unterstützung möchtest.
• Du UI/UX-Qualität für Dashboards, Landing Pages oder Mobile Screens systematisch reviewen willst.

Weniger geeignet, wenn:

• Du nur generelle Frontend-Engineering-Hilfe brauchst (komplexes State Management, Backend-Integration oder DevOps) ohne Designentscheidungen.
• Du bereits ein starres, vollständig definiertes Design-System hast und nur Code-Refactorings auf niedriger Ebene nötig sind.
• Du an rein textbasierten Interfaces mit minimalen visuellen oder interaktiven Elementen arbeitest.

Wenn dein Hauptbedarf visuelle Richtung, Interaktionsmuster oder UX-Qualitätskontrolle ist, ist ui-ux-pro-max sehr wahrscheinlich eine sinnvolle Ergänzung.

Nutzung

1. Installationsschritte

Um ui-ux-pro-max als Skill in einer kompatiblen Agent-Umgebung zu installieren, nutze:

npx skills add https://github.com/nextlevelbuilder/ui-ux-pro-max-skill --skill ui-ux-pro-max
``

Nach der Installation findest du die Skill-Dateien im Verzeichnis `.claude/skills/ui-ux-pro-max` innerhalb der Upstream-Repository-Struktur. Wichtige Artefakte sind:

- `SKILL.md` – zentrale Skill-Definition und Usage-Intent
- `data/` – die Design-Intelligence-Datensätze (Styles, Paletten, UX-Guidelines, Chart-Typen etc.)
- `scripts/` – Helper-Logik zum Suchen und Interpretieren der Designdaten

Je nach Umgebung können diese Pfade anders gemountet oder gespiegelt werden, aber auf diesen Kernbestandteilen baut der Skill auf.

### 2. Wichtige Dateien für den Einstieg
Nach der Installation solltest du mit diesen Dateien starten, um zu verstehen, wie ui-ux-pro-max arbeitet:

#### `SKILL.md`

- Beschreibt den übergeordneten Zweck: UI/UX Design Intelligence für Web und Mobile.
- Erläutert den Umfang: 50+ Styles, 161 Farbpaletten, 57 Font-Kombinationen, 161 Produkttypen, 99 UX-Guidelines, 25 Chart-Typen.
- Klärt **When to Apply** und **Must Use**-Szenarien, damit der Skill nur dann greift, wenn Designentscheidungen gefragt sind.

Diese Datei ist deine wichtigste Referenz dafür, was der Skill priorisiert und wie er getriggert werden soll.

#### `data/`

- Enthält die strukturierten Datensätze, die ui-ux-pro-max antreiben.
- Beinhaltet Referenzen zu Produkttypen, Farbsystemen, Typografie-Optionen, UX-Guidelines und Chart-Typen.
- Ermöglicht es dem Agent, Empfehlungen kontextbasiert zu finden (z. B. SaaS-Dashboard vs. E-Commerce-Checkout).

Diese Dateien bearbeitest du normalerweise nicht bei der Installation; sie dienen als Wissensbasis.

#### `scripts/`

- Stellt Helper-Skripte bereit, die die Daten lesen und interpretieren.
- Ermöglicht prioritätsbasierte Empfehlungen und strukturierte Lookups (z. B. Palette wählen → Font-Kombination → Layout-Muster).

Wenn du den Skill erweiterst oder in eigene Workflows integrierst, findest du hier Hooks oder Logik, die du wiederverwenden kannst.

### 3. Typische Workflows

#### Eine neue Seite oder einen neuen Screen gestalten
Nutze ui-ux-pro-max in der Planungsphase für:

- **Landing Pages** und Marketingseiten
- **Dashboards und Admin Panels**
- **SaaS-Apps und E-Commerce-Flows**
- **Mobile App Screens**

Ein typischer Ablauf:

1. Beschreibe Produkttyp, Zielgruppe und Plattform (z. B. „B2B SaaS Analytics Dashboard in React mit Tailwind“).
2. Bitte den Agent (mit aktiviertem ui-ux-pro-max) um Vorschläge für:
   - Gesamtstruktur des Layouts und Navigation
   - Empfohlenen Style (z. B. Minimalism, Bento Grid, Dark Mode)
   - Farbpalette und Font-Kombination passend zum Produkttyp
   - Zentrale Interaktionsmuster und UX-Guidelines, die zu beachten sind
3. Lass dir vom Skill component-level Muster für Buttons, Modals, Forms, Tables und Charts vorschlagen.
4. Wenn du mit React, Next.js, Vue, Svelte, React Native, Tailwind oder shadcn/ui arbeitest, bitte zusätzlich um implementierungsorientierte Hinweise, die die gewählte Designrichtung respektieren.

#### Bestehende UI verbessern oder reviewen
Wenn du bereits eine UI hast und sie optimieren möchtest:

1. Beschreibe das aktuelle Design, die Pain Points und deinen Stack.
2. Nutze ui-ux-pro-max, um:
   - Probleme gegen die 99 UX-Guidelines zu spiegeln.
   - Anpassungen bei Spacing, Hierarchie, Farbnutzung und Typografie für mehr Klarheit zu empfehlen.
   - Geeignetere Chart-Typen (aus den 25 Chart-Mustern) für deine Daten vorzuschlagen.
3. Bitte um einen Vorher/Nachher-Vorschlag inklusive Begründung, bezogen auf Produkttyp und Best Practices.

#### Abstimmung mit Design-Systemen und Komponentenbibliotheken
Wenn du mit Design-Systemen arbeitest (z. B. Tailwind-Setups oder shadcn/ui):

- Nutze ui-ux-pro-max, um zu entscheiden, **welche Muster** und **Token-Kombinationen** (Farben, Font Sizes, Spacing) für einen bestimmten Produkttyp sinnvoll sind.
- Mit shadcn/ui MCP-Integration in der Umgebung kannst du:
  - ui-ux-pro-max bitten, passende Komponenten-Muster zu identifizieren.
  - Über MCP konkrete Beispiele und Code für diese Muster nachschlagen.

So bleiben Designentscheidungen und Komponentenwahl konsistent, ohne dass du Dokumentation manuell durchforsten musst.

### 4. Wann du den Skill explizit aufrufen solltest
Entsprechend der Upstream-Guidance in `SKILL.md` solltest du ui-ux-pro-max vor allem dann einbinden, wenn der Task beinhaltet:

- **UI-Struktur** – Seitenlayout, Content-Hierarchie, Navigationsmuster.
- **Visuelle Designentscheidungen** – Styles, Farben, Typografie, Spacing, Shadows, Gradients.
- **Interaktionsmuster** – Hover/Focus-States, Loading-States, Error Handling, Micro-Interactions.
- **UX-Qualitätskontrolle** – Erkennen von Reibungspunkten und Anwenden von UX-Guidelines.

Bei reinen Code-Tasks ohne Designbezug kannst du diesen Skill weglassen, um Antworten auf Engineering-Aspekte zu fokussieren.


## FAQ

### Was steckt konkret in ui-ux-pro-max?
ui-ux-pro-max liefert eine kuratierte Design-Wissensbasis: über 50 Styles, 161 Farbpaletten, 57 Font-Kombinationen, 161 Produkttypen mit Entscheidungsregeln, 99 UX-Guidelines und 25 Chart-Typen, abgebildet auf 10 Stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui, HTML/CSS). Diese liegen als Daten und Skripte vor, die der Agent abfragen kann, um designbewusste Empfehlungen zu geben.

### Wie unterscheidet sich ui-ux-pro-max von einem normalen Coding-Helper?
Normale Coding-Helper konzentrieren sich auf Syntax, APIs und Implementierungsdetails. ui-ux-pro-max fokussiert auf **Designentscheidungen und UX-Qualität**: welches Layout du wählen solltest, welche Farbpalette zu deinem Produkt passt, wie Formulare strukturiert werden, welcher Chart-Typ Sinn ergibt und wie du UX-Anti-Patterns vermeidest. Anschließend werden diese Entscheidungen mit deinem Frontend-Stack in Einklang gebracht.

### Welche Tech-Stacks unterstützt ui-ux-pro-max?
Der Skill ist darauf ausgelegt, Design-Guidance für folgende Stacks zu liefern:

- Webframeworks: **React, Next.js, Vue, Svelte**
- Mobile- und App-Frameworks: **SwiftUI, React Native, Flutter**
- Styling und Components: **Tailwind, shadcn/ui und HTML/CSS**

Konzeptionell kannst du ihn auch mit anderen Stacks nutzen, aber diese Ökosysteme sind explizit adressiert.

### Kann ich ui-ux-pro-max mit Tailwind oder shadcn/ui nutzen?
Ja. ui-ux-pro-max kennt Tailwind und shadcn/ui explizit. Der Skill hilft dir, Designmuster, Farbsysteme, Spacing und Typografie zu wählen, die sich gut in Tailwind Utility Classes oder shadcn/ui Components übersetzen lassen. Mit verfügbarer shadcn/ui MCP-Integration kann er zusätzlich auf Komponentensuche und Beispiele zurückgreifen.

### Generiert ui-ux-pro-max vollständigen UI-Code?
Der Skill ist primär auf **Design Intelligence** ausgerichtet, mit Implementierungshilfe als zweitem Schritt. Er kann dir helfen:

- Struktur und Verhalten von UI-Komponenten zu definieren.
- Vorschläge zu machen, wie du diese in React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind oder HTML/CSS umsetzt.

Sein Hauptnutzen liegt jedoch darin, **Designentscheidungen zu treffen und zu begründen**, nicht nur Code-Snippets zu erzeugen.

### Wann sollte ich ui-ux-pro-max nicht einsetzen?
Verzichte auf diesen Skill, wenn deine Aufgabe:

- rein Backend- oder Infrastruktur-bezogen ist.
- ein Low-Level-Refactor ohne Auswirkungen auf UI oder UX ist.
- ein eng umrissenes Algorithmus- oder Performance-Problem ist.

In diesen Fällen bringt ui-ux-pro-max wenig Mehrwert, da keine Designentscheidungen anstehen.

### Wie starte ich am besten mit ui-ux-pro-max?
Nach der Installation:

1. Lies `SKILL.md`, um Scope und empfohlene Nutzung zu verstehen.
2. Beschreibe bei neuen oder überarbeiteten UIs Produkttyp, Zielnutzer, Plattform und Tech-Stack möglichst klar gegenüber dem Agent.
3. Bitte um strukturierte Outputs: Layout-Vorschläge, Style-Richtung, Farb- und Font-Empfehlungen, UX-Checklistenpunkte und Chart-Auswahl.
4. Iteriere: schärfe das Briefing und lasse ui-ux-pro-max die UX-Qualität erneut bewerten, während du auf die Implementierung zugehst.

### Wo kann ich die zugrundeliegenden Daten und Skripte einsehen?
Öffne den Files-Tab des Skills und prüfe:

- `SKILL.md` für die übergeordnete Definition und Einsatzregeln.
- `data/` für die strukturierten Design-Datasets.
- `scripts/` für Helper-Logik, die die Empfehlungen steuert.

Diese Ressourcen zeigen, wie ui-ux-pro-max über UI/UX „nachdenkt“, damit du seine Vorschläge besser einschätzen und an dein Projekt anpassen kannst.