Hoe je Claude gebruikt voor frontendontwikkeling: de Lena Skill-gids

Frontend werk zit vol met kleine, lastige problemen die een middag opslokken: een flex-layout die niet meewerkt, een component die toegankelijk moet zijn, een responsive bug die alleen op mobiel verschijnt. Vraag het aan een kale chatbot en je krijgt een snippet die je framework negeert en iets anders kapotmaakt. Goed gebruik van Claude voor frontend ontwikkeling betekent werken met iets dat React, CSS en de eigenaardigheden van de browser kent — niet alleen JavaScript in abstracte zin. Een echte AI frontend developer schrijft code die bij jouw component past, niet een nieuwe.

Lena is gebouwd voor de voorkant van de stack. Ze is een frontend persona die je één keer laadt in Claude, ChatGPT of elke AI-chat, en ze werkt binnen jouw framework en conventies. Dit zijn de taken die ze het beste aanpakt.

“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 een eenmalige klodder. Ze schrijft het standaard toegankelijk (labels, rollen, toetsenbordbediening) in plaats van als bijzaak, want toegankelijkheid achteraf toevoegen is duur.

“Waarom is deze lay-out kapot?”

Plak de markup en CSS en Lena analyseert de werkelijke oorzaak — het ingeklapte flex-kind, de marge die ontsnapt, de z-index valstrik — in plaats van te gokken. Ze legt de oplossing uit zodat de volgende keer jij het kunt oplossen, en ze weet het verschil tussen een bug in jouw code en een browsereigenaardigheid waar je omheen moet werken.

“Maak dit responsive / sneller / netter”

Ze refactort een verward component tot iets leesbaars, maakt een vaste lay-out responsive zonder herschrijven, en wijst op de voor de hand liggende prestatieverbeteringen — de onnodige re-render, de gigantische afbeelding, het lay-out geschud. Praktische verbeteringen, uitgelegd, geen college over best practices.

Het meeste eruit halen

Geef je framework en stylingmethode vooraf aan — React en Tailwind vraagt een ander antwoord dan gewone CSS. Plak de echte code en de echte fout in plaats van ze te beschrijven. En vraag waarom naast wat, zodat elke oplossing je de volgende keer iets minder vastzet.

Voor wie het is

Frontend- en full-stack developers, oprichters die hun eigen UI bouwen, ontwerpers die code leren, en iedereen die de voorkant van de stack wil leren. Het werkt met Claude, ChatGPT of elke AI-chat die een system prompt accepteert. Voor de rest van de bouw dekt de tech & development skills collectie full-stack codering, architectuur en code review — elk een gerichte assistent in plaats van een algemene chatbot.