Hvordan bruke Claude for frontend-utvikling: Lena Skill-guiden

Frontend-arbeid er fullt av små, knotete problemer som spiser opp en ettermiddag: et flex-oppsett som ikke oppfører seg, en komponent som må være tilgjengelig, en responsiv feil som bare vises på mobil. Spør en enkel chatbot, og du får et utdrag som ignorerer rammeverket ditt og ødelegger noe annet. Å bruke Claude for frontend-utvikling godt betyr å jobbe med noe som kjenner React, CSS og nettleserens særegenheter — ikke bare JavaScript i abstrakt form. En ekte AI frontend-utvikler skriver kode som passer til din komponent, ikke en helt ny.

Lena er laget for fronten av stacken. Hun er en frontend-persona du laster inn én gang i Claude, ChatGPT eller hvilken som helst AI-chat, og hun jobber i ditt rammeverk og dine konvensjoner. Dette er oppgavene hun håndterer best.

«Bygg denne komponenten for meg»

Beskriv komponenten — eller lim inn et design — og Lena bygger den i ditt rammeverk med fornuftig state, props og struktur, ikke en tilfeldig klatt. Hun skriver den tilgjengelig som standard (etiketter, roller, tastaturhåndtering) i stedet for som en ettertanke, fordi ettermontering av tilgjengelighet er den dyre måten å gjøre det på.

«Hvorfor er dette oppsettet ødelagt?»

Lim inn markup og CSS, og Lena resonerer seg gjennom den faktiske årsaken — det kollapsede flex-barnet, marginen som slipper unna, z-indeks-fellen — i stedet for å gjette. Hun forklarer løsningen slik at neste gang er det du som løser det, og hun vet forskjellen på en feil i koden din og en nettlesersærhet du må jobbe rundt.

«Gjør dette responsivt / raskere / renere»

Hun refaktorerer en sammenfiltret komponent til noe lesbart, gjør et fast oppsett responsivt uten omskriving, og peker på åpenbare ytelsesgevinster — unødvendig re-render, det gigantiske bildet, oppsett som sliter. Praktiske forbedringer, forklart, ikke en forelesning om beste praksis.

Få mest mulig ut av det

Oppgi rammeverket og stiltilnærmingen din på forhånd — React og Tailwind gir et annet svar enn vanlig CSS. Lim inn den ekte koden og den faktiske feilen i stedet for å beskrive dem. Og spør hvorfor i tillegg til hva, så hver løsning gjør deg litt mindre fastlåst neste gang.

Hvem det er for

Frontend- og fullstack-utviklere, gründere som bygger sin egen UI, designere som krysser over til kode, og alle som lærer fronten av stacken. Det fungerer med Claude, ChatGPT eller hvilken som helst AI-chat som aksepterer en system prompt. For resten av byggingen dekker tech & development skills collection fullstack-koding, arkitektur og kodegjennomgang — hver en fokusert assistent i stedet for en generell chatbot.