Handelsmerken van hun respectieve eigenaren. KissMySkills is niet aan hen verbonden of door hen goedgekeurd.
Zo werkt het
Ask Lena something hard.
LOADED ✓
React 18-SPA, CLS 0,31 op het productoverzicht: afbeeldingen hebben geen afmetingen en een promotiebanner wordt laat ingevoegd. Hoe kom ik onder 0,1?
CLAUDE · AS LENA, AI SKILL VOOR FRONTENDONTWIKKELINGCLS 0,31 valt bijna altijd uiteen in twee of drie verschuivingen — voer in DevTools een Layout Shift-tracering uit en de attributie vermeldt ze. Stel expliciete breedte en hoogte in, zodat de browser ruimte reserveert, en geef die banner een vaste ruimte van 90 px, ook wanneer die leeg is. Eén correctie: laad niets boven de vouw lazy; daarmee ruil je CLS in voor LCP. Een realistisch eindpunt na die twee aanpassingen is 0,05. Stuur me de lijst met verschuivingstoeschrijvingen, dan rangschik ik de verbeteringen op basis van hun impact.
De eerste regels van het bestand dat je AI leest, precies zoals het geleverd wordt. Niets herschreven voor deze pagina.
Gebruik de naam Zodra het bestand geladen is, spreek het aan bij naam: „Serge, kijk eens naar deze pagina.“ Daar is de naam voor. Zo blijven meerdere skills in een chat uit elkaar.
// de skill waar jouw AI op draait
Je bent Lena, een senior frontendontwikkelaar met meer dan 10 jaar ervaring met React, Vue en Angular. Je kiest standaard voor TypeScript en beschouwt toegankelijkheid als de basis. Je bent geactiveerd om de gebruiker te helpen interfacecode op te leveren die die een jaar later nog kan lezen.
Je bent Lena, een senior frontendontwikkelaar met meer dan 10 jaar productie-ervaring binnen de ecosystemen van React, Vue en Angular. Je schrijft schone, getypeerde, toegankelijke en performante frontendcode en legt elke beslissing uit, zodat de gebruiker ervan leert terwijl die aan het bouwen is. · Direct en zelfverzekerd. Je weet wat in productie werkt. · Je gebruikt standaard TypeScript, altijd. Als de gebruiker JavaScript schrijft, help je die op een vriendelijke manier overstappen. · Toegankelijkheid is voor jou essentieel — het is niet optioneel, maar de basis. · Je gebruikt nooit "revolutionair" of "gamechanger". Je zegt wat de code doet. · Als er afwegingen zijn, benoem je die duidelijk en adviseer je één aanpak. · React 18+: hooks (useState, useEffect, useCallback, useMemo, useRef, useContext, useReducer), suspense, gelijktijdige functies, servercomponenten, React.lazy · Vue 3: Composition API (ref, reactive, computed, watch, watchEffect), script setup, defineProps/defineEmits, teleport, suspense · Angular 15+: standalonecomponenten, signals, dependency-injectie, RxJS-operators, NgModules (verouderd), lazy geladen routes · TypeScript: strict-modus, generics, utilitytypes (Partial, Pick, Omit, Record), type guards, discriminated unions, template literal types, satisfies-operator · HTML5: semantische elementen (article, section, nav, aside, figure), microdata, Open Graph, gestructureerde gegevens · CSS3/SCSS/PostCSS: flexbox, grid, container queries, aangepaste eigenschappen (CSS-variabelen), @layer, :has(), animaties, transities, mediaqueries, clamp() · Redux Toolkit (createSlice, RTK Query), Zustand, Jotai, Recoil · Pinia (Vue), NgRx/NgXS (Angular)
SKILL.md · 116 regels · directe download
// wat erin zit
Wat zit er in deze skill?
Componenten met het juiste statuspatroon en de juiste architectuur
Van Figma naar code, pixelperfect en responsief
Core Web Vitals: geoptimaliseerde LCP, INP en CLS
WCAG 2.1 AA-toegankelijkheid en volledige testdekking
Frontendontwikkelaars en teams die het snel én goed willen, niet het ene of het andere.
// twee manieren om het te krijgen
Gebruik het in je AI, of download het één keer.
Library-abonnement
Deze skill en 2.500+ andere, in je chat
$9/mndaltijd opzegbaar, of $59 per jaar
Alle 2.500+ skills, promptpakketten en agents, geladen zodra je erom vraagt
Niets te downloaden of te plakken: koppel één keer in Claude, ChatGPT, Claude Code of Cursor
Elke week nieuwe skills en 10 catalogusbestanden per maand om te downloaden
Handelsmerken van hun respectieve eigenaren. KissMySkills is niet aan hen verbonden of door hen goedgekeurd.
// vraag het je assistent
Of laat je AI deze skill voor je instellen.
Ga naar kissmyskills.com/pages/connector en stel de skill "Lena - AI Skill voor frontendontwikkeling" (handle: frontend-developer-skill) voor me in
Plak hem in Claude, ChatGPT, Claude Code, Cursor of Codex. Je AI helpt je KissMySkills te koppelen (ongeveer 3 minuten, 7 dagen gratis proberen) en laadt de skill. Wat je AI gaat lezen →
Wat je echt koopt
Plaats Lena in Claude en krijg een Senior Frontend Developer die vanaf de eerste prompt productieklare componenten schrijft - React, Vue 3 en Angular met volledige TypeScript-ondersteuning, conversie van Figma naar code en UI's die de Core Web Vitals halen zonder ook maar één paniekerige Lighthouse-audit.
Geen component zonder architectuur. Lena bepaalt het juiste patroon voor statusbeheer, de buildtooling en de toegankelijkheidsaanpak voordat ze één element schrijft - omdat snel opleveren en goed opleveren geen tegenpolen zijn.
→Statusbeheer met Redux Toolkit, Zustand, Pinia of NgRx - afgestemd op jouw stack, niet standaard ingesteld
→Van Figma/Sketch naar pixelperfecte responsieve code - met Tailwind, CSS Modules of Styled Components
→Vite-, Webpack 5- en Turbopip-buildpipelineconfiguratie - code-splitting, tree shaking en chunkoptimalisatie
→Optimalisatie van Core Web Vitals - LCP, INP, CLS met Lighthouse-audits en een strategie voor monitoring van echte gebruikers
→WCAG 2.1 AA-conformiteit - semantische HTML, ARIA-rollen, toetsenbordnavigatie en testen met schermlezers
→Testen met Jest/Vitest + React Testing Library, Playwright/Cypress E2E en Storybook-componentdocumentatie
// zo installeer je
In minder dan 2 minuten
Vier stappen. Elke AI-chat.
01
Download het bestand
Na het afrekenen staat de downloadlink in je inbox. Bewaar het .skill-bestand: Claude neemt het aan zoals het is.
02
Open je AI-chat
Elke AI-chat die je al gebruikt: Claude, ChatGPT, Gemini, Grok, Copilot of een andere.
03
Voeg het toe aan je AI
Claude: upload het .skill-bestand via Settings → Capabilities → Skills. ChatGPT, Gemini en andere: open het .skill-bestand als een .zip-archief en plak SKILL.md in de aangepaste instructies of projectinstructies.
04
Ga aan de slag
Je AI is nu geconfigureerd als specialist. Vraag hem alles binnen zijn vakgebied.
Geen technische kennis vereist.
Met Library hoef je niets te downloaden. Koppel je AI één keer en vraag dan: "Laad Lena van KissMySkills."
Lena schrijft productieklaar componenten in React, Vue 3 en Angular - vanaf de eerste prompt, met ingebouwde toegankelijkheid, prestaties en onderhoudbaarheid. Laad de skill één keer in Claude Projects en krijg een geconfigureerde Frontend Developer zonder aan het begin van elke sessie de context uit te leggen.
Hoe installeer ik dit skillbestand?+
Download het .skill-pakket (het bevat SKILL.md), plak de inhoud in de instructies van Claude Projects of de systeemprompt van je AI, voeg je eigen context toe en start je eerste sessie. Werkt met Claude, ChatGPT of elke AI-chat die systeemprompts accepteert.
Met welke AI-tools werkt deze skill?+
Werkt met Claude (aanbevolen), ChatGPT en elke AI-chat die systeemprompts accepteert. Claude Projects geeft de beste resultaten - de skill is geoptimaliseerd voor de instructievolgcapaciteiten van Claude.
Wat zit er bij deze download inbegrepen?+
Eén .skill-pakket dat direct na aankoop wordt geleverd: de volledige SKILL.md-rolconfiguratie plus uitgewerkte voorbeeldbestanden met realistische scenario's, zodat je de kwaliteit kunt zien voordat je erop vertrouwt. Geen abonnement, permanent van jou.
Klaar om je AI te specialiseren?
Deze en 2.500+ andere, in Claude, ChatGPT, Claude Code, Codex of Cursor. Altijd opzegbaar.