Wie man Claude für die Frontend-Entwicklung nutzt: Der Lena Skill Guide

Frontend-Arbeit ist voller kleiner, kniffliger Probleme, die einen Nachmittag verschlingen: ein Flex-Layout, das sich nicht richtig verhält, eine Komponente, die barrierefrei sein muss, ein responsiver Fehler, der nur auf Mobilgeräten auftritt. Fragst du einen einfachen Chatbot, bekommst du einen Codeausschnitt, der dein Framework ignoriert und etwas anderes kaputt macht. Claude für Frontend-Entwicklung gut zu nutzen bedeutet, mit etwas zu arbeiten, das React, CSS und die Eigenheiten des Browsers kennt — nicht nur JavaScript abstrakt. Ein echter AI-Frontend-Entwickler schreibt Code, der zu deiner Komponente passt, nicht eine neue.

Lena ist für das Frontend des Stacks gebaut. Sie ist eine Frontend-Persona, die du einmal in Claude, ChatGPT oder jeden AI-Chat lädst, und sie arbeitet in deinem Framework und deinen Konventionen. Diese Aufgaben erledigt sie am besten.

„Baue mir diese Komponente“

Beschreibe die Komponente — oder füge ein Design ein — und Lena baut sie in deinem Framework mit sinnvollem State, Props und Struktur, nicht als einmaligen Klumpen. Sie schreibt sie standardmäßig barrierefrei (Labels, Rollen, Tastatursteuerung) und nicht als nachträglichen Gedanken, denn Barrierefreiheit nachträglich einzubauen ist teuer.

„Warum ist dieses Layout kaputt?“

Füge das Markup und das CSS ein und Lena findet die tatsächliche Ursache — das zusammengefallene Flex-Kind, der entweichende Margin, die z-index-Falle — statt zu raten. Sie erklärt die Lösung, damit du das nächste Mal selbst das Problem lösen kannst, und sie kennt den Unterschied zwischen einem Fehler in deinem Code und einer Browser-Eigenheit, die du umgehen musst.

„Mach das responsiv / schneller / sauberer“

Sie refaktoriert eine verhedderte Komponente in etwas Lesbares, macht ein fixes Layout responsiv ohne kompletten Umbau und zeigt die offensichtlichen Performance-Gewinne — das unnötige Neurendern, das riesige Bild, das Layout-Thrashing. Praktische Verbesserungen, erklärt, keine Vorlesung über Best Practices.

Das Beste herausholen

Gib dein Framework und Styling-Ansatz gleich zu Beginn an — React und Tailwind ist eine andere Antwort als reines CSS. Füge den echten Code und den echten Fehler ein, statt sie zu beschreiben. Und frage warum sowie was, damit dich jede Lösung beim nächsten Mal weniger festfährt.

Für wen es ist

Frontend- und Full-Stack-Entwickler, Gründer, die ihre eigene UI bauen, Designer, die in Code einsteigen, und alle, die das Frontend lernen. Es funktioniert mit Claude, ChatGPT oder jedem AI-Chat, der einen System-prompt akzeptiert. Für den Rest des Builds deckt die Tech- & Development-Skill-Sammlung Full-Stack-Coding, Architektur und Code-Review ab — jeweils ein fokussierter Assistent statt ein allgemeiner Chatbot.