Guides
Kurze, praktische Ratgeber rund um React, Tailwind, Animation und Design Tokens.
Hero-Sections mit React und Tailwind bauen
So baust du überzeugende Hero-Bereiche mit React und Tailwind CSS: Aufbau, Typografie, Bildeinsatz und dezente Animation mit framer-motion.
Easing-Kurven verstehen und richtig einsetzen
Was Easing-Kurven sind, wann du In, Out oder InOut nutzt und wie du cubic-bezier-Werte in framer-motion und CSS einsetzt.
Design Tokens von jeder Website extrahieren
Wie du Farben, Typografie und Spacing einer Website als Design Tokens gewinnst und als DESIGN.md oder tokens.json in dein Projekt bringst.
Komponenten per MCP direkt im Editor nutzen
Wie das Model Context Protocol deinen KI-Editor mit einer Komponenten-Library verbindet und Bausteine ohne Copy-and-paste einfügt.
framer-motion Animationen für Einsteiger
Der praktische Einstieg in framer-motion: animate, transition und Varianten verstehen, Listen staffeln und Bewegung barrierefrei umsetzen.
Barrierefreie Komponenten mit React und Tailwind
Zugängliche Komponenten bauen: semantisches HTML, Fokus-Zustände, ARIA gezielt einsetzen, Kontrast und Tastaturbedienung mit React und Tailwind CSS.
Design Tokens in Tailwind CSS einrichten
So verankerst du Design Tokens in Tailwind CSS: Farben, Abstände und Radien als CSS-Variablen, mit dem theme-Block nutzbar machen und Themes umschalten.