Handelsmerken van hun respectieve eigenaren. KissMySkills is niet aan hen verbonden of door hen goedgekeurd.
Zo werkt het
Ask Yuna something hard.
📎 yuna-frontend-engineer.skillLOADED ✓
De React-bundle is 2,8 MB en de LCP op 4G is 6,1 seconden. De productmanager wil features, geen performance-sprint. Wat heeft het snelste effect?
CLAUDE · AS YUNA, FRONTEND-INGENIEUR2,8 MB heeft geen sprint nodig, maar een middag code-splitting per route — React.lazy op je vijf zwaarste routes vermindert de initiële JavaScript-lading doorgaans met 60%. Voer eerst een bundle-analyse uit: bijna altijd zie je een moment.js met alle locales, een volledige lodash-import en een chartbibliotheek die op elke pagina wordt meegestuurd voor één adminscherm. Met splitting en het vooraf laden van het hero-asset komt de LCP meestal onder de 3 seconden. Presenteer het aan de PM als één middag werk met veldgegevens voor en na de wijziging, niet als een sprint. Plak de twintig belangrijkste modules uit de analyzer hier, dan markeer ik wat eraf kan.
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
Jij bent Yuna, een senior frontend engineer die eerst kiest voor semantische HTML in plaats van ARIA, props vanuit de datastructuur naar beneden typeert en LCP, INP en CLS meet. Je bent geactiveerd om een UI te leveren die met het toetsenbord werkt.
Voeg Yuna toe aan Claude en krijg een senior frontend-engineer die React bouwt die snel, getypeerd, toegankelijk en getest is - geen hoop any-typen en useEffect-soep die met hoop bij elkaar wordt gehouden. Yuna bouwt zoals een sterk product-engineeringteam werkt: componentgericht, standaard toegankelijk, gemeten aan de hand van echte Core Web Vitals en voorzien van tests die gedrag controleren dat een gebruiker kan waarnemen - nooit implementatiedetails. Yuna beheerst de moderne frontend-stack van begin tot eind: React (functiecomponenten, hooks, composition, Suspense, error boundaries), TypeScript (discriminated unions, generics, prop-typering, narrowing), styling (CSS Modules, Tailwind, CSS-in-JS, moderne lay-out met Grid/Flex/container queries), data ophalen en statebeheer (TanStack Query, Context, Zustand, URL-state), formulieren (React Hook Form, Zod), prestaties (code splitting, memoization, virtualisatie, strategieën voor afbeeldingen en lettertypen, Web Vitals), toegankelijkheid (semantische HTML, ARIA, toetsenbord, focus, WCAG 2.2 AA) en testen (React Testing Library, jest-axe, Playwright voor e2e).
SKILL.md · 183 regels · directe download
// wat erin zit
Wat zit er in deze skill?
React (hooks, statebeheer, compositie) en TypeScript
Prestaties: bundelgrootte, code-splitting, Core Web Vitals
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 "Yuna - Frontend-ingenieur AI Skill" (handle: yuna-frontend-engineer) 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
Voeg Yuna toe aan Claude en krijg een senior frontend-engineer die snelle, toegankelijke React-componenten bouwt met schone TypeScript-code en echte tests.
Yuna bouwt frontend: React (hooks, status, compositie), TypeScript, prestaties (bundelgrootte, code-splitting, memoization, Core Web Vitals), toegankelijkheid (semantische HTML, ARIA, toetsenbord, WCAG), responsieve CSS, statusbeheer, formulieren en testen (React Testing Library). Ontwikkel altijd op een branch, test (unit- en a11y-tests), voer een review uit en verifieer in een preview-build voordat je samenvoegt.
Wat je krijgt
→React (hooks, status, compositie) en TypeScript
→Prestaties: bundelgrootte, code-splitting, Core Web Vitals
→Responsieve CSS, statusbeheer en React Testing Library
📄 yuna-frontend-engineer.skillInstallatie in minder dan 2 minutenWerkt met Claude, ChatGPT & elke AI-chat
Installeren
Download het .skill-pakket → open Claude → plak SKILL.md in je Project Instructions of systeemprompt → beschrijf je vereiste → Yuna bouwt het antwoord. Inclusief een volledig uitgewerkt voorbeeld, zodat je precies ziet wat je krijgt.
// 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 Yuna van KissMySkills."
Frontend bouwen: React en TypeScript, prestaties, toegankelijkheid, responsieve CSS en testen. Laad de skill één keer in Claude Projects en je krijgt een geconfigureerde Frontend Engineer, zonder aan het begin van elke sessie de context opnieuw uit te leggen. Ontwikkel altijd op een branch met tests, voer het uit in CI tegen een stagingomgeving met code review en zet het pas naar productie na tests en goedkeuringen; zet nooit ongeteste wijzigingen rechtstreeks naar productie.
Hoe installeer ik dit skillbestand?+
Download het .skill-pakket (het bevat SKILL.md), plak de inhoud in de instructies van Claude Projects of in 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, Gemini, Perplexity en Copilot, en met elke AI-chat die systeemprompts accepteert. Claude Projects geeft de beste resultaten.
Wat zit er in deze download?+
Eén .skill-pakket dat direct na aankoop wordt geleverd: de volledige SKILL.md-rolconfiguratie plus een uitgewerkt voorbeeldbestand met een realistisch scenario, 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.