Horace-Maxwell/ui-master

UI Master：Eine Oberfläche, die nicht nach KI aussieht

Pfadkonvention: Diese Datei befindet sich im ui/-Verzeichnis des Repos; catalog/ und prompts/ sind auf derselben Ebene und werden mit dem Skill mitgeliefert.

• Im vollständigen Repository (oder bei Installation über setup.sh --link-skills): Zuerst realpath ausführen, um das Repository-Root zu finden, dann kann man mit python3 <Repository-Root>/scripts/find.py <Suchbegriff> alle Module durchsuchen.
• Bei separater Installation (mit npx skills add Horace-Maxwell/ai-master-prompt, nur den ui/-Ordner): Kein Suchskript, direkt in catalog/*.md suchen; andere Module wie Scaffolds, Skills, Tools finden sich unter https://github.com/Horace-Maxwell/ai-master-prompt.

KI-generierte UIs sehen oft schlecht aus, nicht wegen mangelnder Fähigkeiten, sondern weil ① vorhandene Komponentenbibliotheken nicht genutzt werden und ② der gewünschte Effekt nicht benannt werden kann. Dieses Skill löst diese beiden Probleme.

Arbeitsablauf

1. Zuerst vier Dinge klären

• Plattform & Tech-Stack: Web (React/Next? Vue? reines HTML?) oder React Native/Expo? Bestehendes Projekt oder Neuanlage?
• Seitentyp: Landing Page / Dashboard / SaaS-Anwendung / KI-Chatprodukt / Mobile App / Portfolio…
• Stil: Hat der Benutzer einen bestimmten Stil oder eine Referenzseite angegeben?
• Animationsintensität: dezent / moderat / spektakulär

Wann fragen, wann direkt loslegen: Nur fragen, wenn Plattform und Seitentyp unklar sind (maximal eine Frage-Runde). Für alles andere Standardwerte verwenden und in der Antwort erklären, was ausgewählt wurde:

Nicht erwähnt	Standard
Tech-Stack	Bei bestehendem Projekt: dem Projekt folgen; bei neuem Web: Next.js + Tailwind + shadcn/ui
Stil	2–3 Richtungen zur Auswahl geben (siehe prompts/style-recipes.md); bei „entscheide du“ nach Seitentyp den passendsten auswählen
Animationsintensität	Produktoberflächen: dezent; Landing Pages: moderat; Portfolio-/Eventseiten: spektakulär

Wenn der Benutzer den Effekt nicht beschreiben kann, mit prompts/effect-vocabulary.md zur Bestätigung fragen („Meinst du Text Scramble, bei dem Buchstaben wild springen und dann den richtigen Text ergeben?“).

2. Basis anhand der Entscheidungstabelle wählen

Wenn der Benutzer einen Stil vorgibt, hat die Stilzeile Vorrang: Eine handgezeichnete Landing Page verwendet die Handzeichnungsbibliothek, nicht zusätzlich Aceternity etc.

Situation	Basis	Was hinzufügen
Neues React/Next-Projekt (Standard)	npx create-next-app@latest, dann npx shadcn@latest init	Nach Bedarf Komponenten aus dem Namespace-Registry hinzufügen
Stilisiert (Handzeichnung/Retro/Roh/Glass/Terminal)	Entsprechende Stilbibliothek (siehe style-recipes)	Meist shadcn-Registry, direkt installiert und ersetzt gleichnamige Komponenten
Landing Page / Hero / Marketingseite (ohne Stilvorgabe)	shadcn + Magic UI / Aceternity / React Bits	Smooth Scroll: Lenis; Scroll-Animation: GSAP ScrollTrigger oder Motion
Dashboard / Backend	shadcn + Tremor oder shadcn charts	Kibo UI für erweiterte Komponenten
KI-Chat / Agent-Produkt	shadcn + AI Elements oder assistant-ui	affectUI für Agent-Beobachtbarkeitspanel; Daten von Langfuse / Phoenix; Python-Backend über AG-UI-Protokoll an Frontend anbinden
React Native / Expo	npx create-expo-app@latest + React Native Reusables oder ExpoKit	Liquid Glass mit expo-glass-effect, Frosted Glass mit expo-blur; beUI für Animationen
Vue / Nuxt	Nuxt UI oder shadcn-vue	Inspira UI für Effekte; goopUI (Flüssigkeitseffekte, pre-alpha)
Reines HTML / kein Framework	daisyUI oder Tailwind + natives CSS	Animate.css, Hover.css, GSAP

Vollständige Kandidatenliste:

• Komponentenbibliotheken: catalog/02 Basis, 03 Animation, 04 Stilisiert, 05 Mobil, 06 Effekte/3D, 07 KI-Produkte
• Falls nicht fündig, Aggregator-Seiten: catalog/01 (21st.dev, offizielles shadcn-Verzeichnis, registry.directory)

3. Komponenten installieren: shadcn-Namespace-Verwendung

Vom offiziellen Index erfasste Namespaces (548) benötigen keine Konfiguration:

npx shadcn@latest add @magicui/marquee
npx shadcn@latest add @aceternity/spotlight
npx shadcn@latest search @aceternity --query "card"     # Wenn der Eintragsname unbekannt ist: zuerst suchen
npx shadcn@latest list @magicui                    # Oder alle Einträge des Namespace auflisten
npx shadcn@latest view @magicui/border-beam        # Vor dem Hinzufügen den Code ansehen

Drei häufige Fallstricke:

1. Eintragsnamen nicht erraten. Die <item>-Platzhalter im Katalog sind variabel; die Benennung variiert pro Bibliothek. Zuerst search oder list.
2. React Bits-Einträge haben Variant-Suffix: <Komponentenname>-<TS|JS>-<TW|CSS>, z.B. npx shadcn@latest add @react-bits/DecryptedText-TS-TW. Ohne Suffix 404.
3. Nicht im offiziellen Index erfasste Bibliotheken (Looseleaf, Rare UI etc.) haben zwei Installationswege:

   • Direkt vollständige URL oder GitHub-Pfad angeben, null Konfiguration: npx shadcn@latest add https://kevintngo.github.io/looseleaf/r/button.json, npx shadcn@latest add swamimalode07/rare-ui/fluid-orb

   • Oder einmal in components.json registrieren, danach @looseleaf/button verwenden:

     { "registries": { "@looseleaf": "https://kevintngo.github.io/looseleaf/r/{name}.json" } }
     

Schnellübersicht häufig verwendeter Namespaces (alle im offiziellen Index): @magicui @aceternity @react-bits @animate-ui @motion-primitives @cult-ui @kokonutui @coss @shadcnblocks @tailark @kibo-ui @8bitcn @neobrutalism @retroui @glasscn @glassyui @ai-elements @assistant-ui @prompt-kit @affectui @beui @shaderscn @threecn @lucide-animated @svgl

4. Tools für den Agent installieren (nach Zustimmung des Benutzers)

Minimalkombination (am Beispiel Claude Code; bei anderen Agenten den npx …-Befehl nach -- in die eigene MCP-Konfiguration eintragen, siehe AGENTS.md im Repository-Root):

npx shadcn@latest mcp init --client claude                    # Hunderte Komponenten aus dem Registry durchsuchen/installieren (auch --client cursor / vscode)
claude mcp add context7 -- npx -y @upstash/context7-mcp        # Aktuelle Dokumentation jeder Bibliothek
npx skills add anthropics/skills --skill frontend-design       # Ästhetische Basislinie, KI-Geschmack vermeiden

Nach Bedarf hinzufügen: Magic UI MCP, 21st MCP, Figma MCP (wenn Design-Spezifikationen vorhanden), Motion AI Kit (npx motion-ai), GSAP Skills, Referenz-Screenshot-Sammlungen wie Mobbin / Refero / Lazyweb MCP (alle mit Account). Vollständige Liste in catalog/12.

5. Designsystem festlegen, dann Seite schreiben

1. Stil-Token festlegen: Farbschema (Realtime Colors / tweakcn generieren), Schriftarten (nicht Standard-Inter: von Fontshare oder Google Fonts ein charaktervolles Paar auswählen), Ecken, Schatten, Abstände. Falls der Benutzer eine Referenzmarke angibt, in awesome-design-md die passende DESIGN.md suchen und ins Projekt-Root legen.
2. Seitenstruktur: Inspiration aus den Inspirationsseiten in catalog/10 für ähnliche Seitentypen nutzen.
3. Komponenten priorisieren wiederverwenden: Was mit npx shadcn@latest add installiert werden kann, nicht von Hand schreiben.
4. Animationen mit Absicht: Einmaliger Eintritt, Hover-Feedback, Scroll-Erzählung. prefers-reduced-motion respektieren.

6. Selbstkontrolle (nicht überspringen)

• Mit Browser (Playwright / Chrome DevTools MCP / integrierter Browser) Screenshot der Seite machen und anhand der folgenden „KI-Geschmack“-Liste prüfen
• Mobile Breite (375px) überprüfen
• Keine Fehler in der Konsole; Animationen ruckelfrei (nur transform/opacity animieren)

Häufiger KI-Geschmack (vermeiden): Lila-blauer Verlauf + Inter + zentrierte große Überschrift; alle Karten mit gleichem Radius und Schatten; Emojis als Icons; Vollbild-Glassmorphismus; graue Texte ohne Hierarchie; jeder Block „fade-in und nach oben schieben“.

Bei Bedarf an Effekten/Stil-Vokabular

• Schnellübersicht: prompts/effect-vocabulary.md (mit direkt installierbaren Eintragsnamen)
• Stilrezepte: prompts/style-recipes.md
• Vorlage für Anforderungsbeschreibung (für Benutzer oder andere KI): prompts/request-template.md
• Galerien mit Vorschau: motion-prompt (192 Effekte, npx skills add showheyohtaki/motion-prompt), Motion Library (510 Effekte), aimotions (195 Textanimationen), siehe catalog/09