Frontendwerk zit vol kleine, lastige problemen die een middag opslokken: een flexlay-out die niet wil meewerken, een component dat toegankelijk moet zijn, een responsive bug die alleen op mobiel optreedt. Vraag het aan een kale chatbot en je krijgt een snippet die je framework negeert en ergens anders iets stukmaakt. Claude gebruiken voor frontendontwikkeling betekent dat je goed samenwerkt met iets dat React, CSS en de eigenaardigheden van de browser kent - niet alleen JavaScript in abstracte zin. Een echte AI-frontendontwikkelaar schrijft code die bij jouw component past, niet nog een nieuw component.
Lena is gemaakt voor de voorkant van de stack. Ze is een frontendpersona die je één keer in Claude, ChatGPT of een willekeurige AI-chat laadt, en ze werkt binnen jouw framework en conventies. Dit zijn de taken die ze het beste uitvoert.
“Bouw dit component voor me”
Beschrijf het component - of plak een ontwerp - en Lena bouwt het in jouw framework met logische state, props en structuur, niet als een eenmalige klomp code. Ze schrijft het standaard toegankelijk (labels, rollen, toetsenbordbediening) in plaats van toegankelijkheid achteraf toe te voegen, omdat achteraf toegankelijkheid inbouwen de dure manier is.
“Waarom is deze lay-out kapot?”
Plak de markup en de CSS, en Lena achterhaalt de werkelijke oorzaak - het ingeklapte flex-element, de marge die buiten de container valt, de z-index-valkuil - in plaats van te gokken. Ze legt de oplossing uit, zodat je de volgende zelf kunt oplossen, en ze kent het verschil tussen een bug in je code en een eigenaardigheid van de browser waar je omheen moet werken.
“Maak dit responsief / sneller / schoner”
Ze refactort een verward component tot iets leesbaars, maakt een vaste layout responsief zonder herschrijven en wijst op de voor de hand liggende prestatiewinsten - de onnodige re-render, de enorme afbeelding, het voortdurend opnieuw berekenen van de layout. Praktische verbeteringen, uitgelegd, geen college over best practices.
Haal er het meeste uit
Geef vooraf je framework en stylingaanpak aan - React en Tailwind leveren een ander antwoord op dan gewone CSS. Plak de echte code en de echte foutmelding, in plaats van ze te beschrijven. En vraag zowel waarom als wat, zodat elke oplossing je de volgende keer iets minder laat vastlopen.
Voor wie het is
Frontend- en full-stackontwikkelaars, oprichters die hun eigen UI bouwen, ontwerpers die de overstap naar code maken en iedereen die de voorkant van de stack leert. Het werkt met Claude, ChatGPT of elke AI-chat die een systeemprompt accepteert. Voor de rest van het bouwen biedt de collectie skills voor technologie & development full-stackcodering, architectuur en code review - elk een gespecialiseerde assistent in plaats van een algemene chatbot.
Plaats één bestand in je AI en het bouwt componenten, debugt layouts en refactort CSS in jouw framework - toegankelijk en met uitleg. Geen abonnement, permanent van jou.
Bekijk Lena →
