Wissensbasis

Link:Emil Kowalski·8. Nov. 2026

Sonner: Eine Toast-Komponente für React-Anwendungen

Sonner ist eine spezialisierte Toast-Komponente für React, die vorgefertigte Benachrichtigungen mit Animationen bereitstellt. Entwickler können sie am Root ihrer Anwendung platzieren und Meldungen über Funktionsaufrufe steuern. Das Tool richtet sich an Webentwickler, die flexible Benachrichtigungen ohne großen Konfigurationsaufwand integrieren möchten.

Aus Video: UI Libraries for Claude Code: Avoiding the Default AI Aesthetic

Repository:Leonxlnx/taste-skill·6. Nov. 2026

taste-skill: Design-Fähigkeiten für KI-Coding-Agenten

taste-skill erweitert KI-Programmierassistenten um Art Direction, Referenzbilder und visuelle Browser-Prüfungen, um austauschbare KI-Designs zu verhindern.

110.780SterneJavaScript

Aus Video: Seven Claude Skills to Eliminate Generic AI Web Design

Video:CURT·4. Nov. 2026

Sieben Claude-Skills gegen generisches AI-Webdesign

Griffin Wooldridge stellt sieben kuratierte Claude-Skills vor, die typische Schwächen von KI-generierten Benutzeroberflächen beheben und Design-Workflows verbessern.

Repository:cocopon/tweakpane·1. Nov. 2026

Tweakpane: Schlanke GUI-Bibliothek zur Parametersteuerung im Browser

Tweakpane ist eine abhängigkeitsfreie UI-Komponente für Webentwickler, um Parameter in Echtzeit zu steuern und Werte zu überwachen. Die von dat.GUI inspirierte Bibliothek richtet sich vor allem an Creative Coding, 3D-Demos und Frontend-Experimente.

4630SterneTypeScript

Aus X-Post: 20 Open-Source Skills and Tools for Programmatic Motion Design with Claude

X-Post:Adham Dannaway·30. Okt. 2026

Hairline: Interaktive isometrische SVG-Grafiken für das Web

Hairline von Lucas Marques ist eine Bibliothek mit 33 isometrischen Linienzeichnungen für Websites. Die Grafiken reagieren direkt auf den Mauszeiger, kommen ohne externe Abhängigkeiten aus und lassen sich in React oder nativem DOM nutzen.

113Lesezeichen4987Aufrufe

X-Post:jhey ʕ•ᴥ•ʔ·30. Okt. 2026

Segue: Sammlung von Seitenübergängen mit CSS View Transitions

Entwickler Jhey Tompkins hat unter dem Projektnamen Segue eine wachsende Prototypensammlung für Seitenübergänge veröffentlicht. Die Beispiele basieren auf CSS View Transitions und bieten Code zum Kopieren sowie für KI-Agenten.

64Lesezeichen2718Aufrufe

X-Post:David Aerne·29. Okt. 2026

Konfigurierbare Physik- und Ballanimation von David Aerne

David Aerne stellt ein visuelles Update für ein interaktives Ball-Experiment vor. Um das Verhalten und Aussehen flacher wirken zu lassen, ergänzte er anpassbare Einstellungen.

40Lesezeichen4442Aufrufe

Link:shaduocn.vercel.app·27. Okt. 2026

Interaktive Demo für faltbare Seitenleiste: Fold Lab

Die Webanwendung demonstriert eine faltbare Seitenleiste mit progressivem Unschärfeeffekt (Blur) in einem Dashboard-Kontext. Die Oberfläche bietet Kontrollmöglichkeiten für Scharnierwinkel, Unschärfe und Faltung sowie eine Übersicht über Deployments und Leistungsmetriken.

Aus X-Post: Shu showcases experimental folding sidebar concept 'shaduocn'

Link:Solace·27. Okt. 2026

Shaders / Solace: Interaktive WebGL-Shader für das Web

Solace bietet eine Sammlung interaktiver WebGL-Shader für Websites, digitale Markenauftritte und Produkte. Entwickler und Designer können visuelle Effekte direkt im Browser testen, anpassen und in eigene Projekte integrieren.

Aus X-Post: Open-source branding lab mixes shaders with branding assets

Link:Gustavo Fior·27. Okt. 2026

Craft: Eine Sammlung praxisnaher Design-Engineering-Konzepte

Craft von Gustavo Fior ist eine kuratierte Referenzsammlung kurzer Essays und praktischer Tipps zu Design Engineering. Die Themen reichen von Typografie und Farbgestaltung über Layout und Animationen bis hin zu Sound und Datenvisualisierung.

Aus X-Post: Craft: Curated Design Engineering Concepts by Gustavo Fior

Link:pixelcave·17. Okt. 2026

CodedVisuals: Bibliothek für animierte UI-Illustrationen via shadcn

CodedVisuals stellt eine Sammlung von 122 animierten, code-basierten Illustrationen mit über 1.150 vorgefertigten Varianten bereit. Die Komponenten sind in 32 Kategorien unterteilt und lassen sich kopieren oder direkt über die shadcn-Registry in Webprojekte einbinden.

Aus X-Post: Animated Visuals Library for React and shadcn/ui Landing Pages

Link:reactbits.dev·16. Okt. 2026

React Bits: Browserbasierte Kreativwerkzeuge für Hintergründe, Formen und Texturen

React Bits stellt kostenlose, direkt im Browser laufende Kreativtools bereit. Mit ihnen lassen sich animierte Hintergründe, Formen und Texturen anpassen und in verschiedenen Formaten für Webprojekte exportieren.

Aus X-Post: React Bits Launches Free In-Browser Design Suite

Repository:madebymustafa/design-taste·15. Okt. 2026

design-taste: Design-Vorgaben für KI-Coding-Agenten gegen austauschbare UIs

Das Open-Source-Projekt design-taste liefert 24 Agent-Skills für Werkzeuge wie Claude Code oder Cursor, um typische KI-Designmuster durch zielgerichtete Stilrichtungen wie Editorial Minimal oder Dark Tech zu ersetzen.

80SterneJavaScript

Aus X-Post: Open-source repositories to upgrade UI design in AI coding agents

Link:@Manixh02·11. Okt. 2026

Vercel Brand Guidelines für Berichts-Websites und Datenvisualisierung

Vercel beschreibt in einem Leitfaden Design- und Architekturprinzipien zur Erstellung offizieller Web-Reports, Benchmarks und ROI-Rechner im minimalistischen Geist-Design.

Aus X-Post: Curated Directory of DESIGN.md Resources and AI-Ready Design Systems

Link:good-css.com·8. Okt. 2026

good-css: Moderne CSS-Techniken und Best Practices für KI-Agenten und Entwickler

good-css ist eine kuratierte Referenz moderner CSS-Techniken, die praxiserprobte Best Practices von Branchenexperten zusammenfasst. Die Sammlung richtet sich sowohl an Entwickler als auch an autonome KI-Coding-Agenten und setzt konsequent auf standardisiertes, framework-unabhängiges CSS ohne unnötige Breakpoints oder JavaScript-Abhängigkeiten.

Aus X-Post: good-css: 47 Modern CSS Techniques for Coding Agents

X-Post:Vojta Holik·7. Okt. 2026

good-css: 47 moderne CSS-Techniken für Coding-Agents

Vojta Holik hat good-css vorgestellt, eine kuratierte Sammlung moderner CSS-Techniken, die speziell für KI-gestützte Coding-Agents aufbereitet wurde. Ziel ist es, Agents dazu zu bringen, moderne Standard-CSS-Features wie :has(), Subgrid oder Anchor Positioning anstelle von Workarounds und JavaScript zu verwenden.

374Lesezeichen27.291Aufrufe

X-Post:Gabriel·6. Okt. 2026

Begriffe für Scroll-Animationen als Prompting-Hilfe für KI-Tools

Gabriel stellt ein Video als Spickzettel vor, das gängige Fachbegriffe für Scroll-Animationen zeigt. Die Bezeichnungen sollen Nutzern helfen, gewünschte UI-Effekte gegenüber KI-Werkzeugen wie Claude oder Codex präziser zu beschreiben.

8679Lesezeichen224.034Aufrufe

Link:Taha Sh·6. Okt. 2026

Blendy: Framework-unabhängige Element-Übergänge für das Web

Blendy ist eine leichtgewichtige JavaScript-Bibliothek, mit der sich weiche Übergangsanimationen zwischen verschiedenen DOM-Elementen umsetzen lassen.

Aus X-Post: Five Micro-Interaction Libraries for the Web

Link:Daniel White·6. Okt. 2026

Cuelume: Web-Audio-Bibliothek für synthetisierte Interaktionsgeräusche

Cuelume ist eine leichtgewichtige Web-Audio-Bibliothek von Daniel White, die 14 Interaktionsklänge für Benutzeroberflächen direkt im Browser synthetisiert – ohne externe Audio-Dateien.

Aus X-Post: Five Micro-Interaction Libraries for the Web

Link:bencho.dev·1. Okt. 2026

Bencho: Sammlung von 47 interaktiven UI-Komponenten

Bencho stellt eine Kollektion von 47 interaktiven Frontend-Bausteinen bereit, die direkt im Browser getestet, angepasst und als Code kopiert werden können.

Aus X-Post: Curated UI and Micro-Interaction Libraries for React and Next.js

Link:uiarc.dev·1. Okt. 2026

Arc: Animierte React-Komponenten und UI-Blöcke für shadcn und KI-Tools

Arc (uiarc.dev) ist eine Komponentenbibliothek für React mit integrierten Animationen. Die Sammlung umfasst 140 UI-Komponenten und 83 Blöcke, die sich über das shadcn-CLI, einen MCP-Server oder KI-Tools wie Cursor und Claude in Projekte einbinden lassen.

Aus X-Post: Curated UI and Motion Component Libraries for Modern Web Interfaces

Link:reverseui.com·1. Okt. 2026

Reverse UI: Bibliothek mit animierten UI-Komponenten für Webanwendungen

Reverse UI bietet eine Sammlung von 68 vorgefertigten, animierten Oberflächenkomponenten für moderne Web-Apps, die Styling und Animationen direkt mitbringen.

Aus X-Post: Reverse UI: Animated Component Library for Modern Web Interfaces

Link:details.so·1. Okt. 2026

Details.so: Kuratierte Web-Animations-Snippets per Copy-and-Paste

Details.so bietet eine Sammlung vorgefertigter Code-Snippets für Web-Animationen und Interaktionen zum direkten Einfügen in eigene Webprojekte.

Aus X-Post: Parallax carousel built with Keen Slider for interactive frontend showcases

X-Post:Nero·30. Sep. 2026

Reverse UI: Komponentenbibliothek für animierte Web-Interfaces

Nero empfiehlt auf X die Plattform Reverse UI, eine Sammlung von über 68 vorgefertigten, animierten UI-Komponenten für moderne Webprojekte.

215Lesezeichen8552Aufrufe