Marken ihrer jeweiligen Inhaber. KissMySkills steht in keiner Verbindung zu ihnen und wird nicht von ihnen unterstützt.
So funktioniert's
Ask Yuna something hard.
LOADED ✓
Das React-Bundle ist 2,8 MB groß, der LCP über 4G beträgt 6,1 s. Der PM will Features, keinen Performance-Sprint. Was bringt am schnellsten den größten Effekt?
CLAUDE · AS YUNA, FRONTEND-INGENIEURIN2,8 MB brauchen keinen Sprint, sondern einen Nachmittag für Code-Splitting auf Routenebene – React.lazy für deine fünf umfangreichsten Routen reduziert das initiale JavaScript typischerweise um 60 %. Führe zuerst eine Bundle-Analyse durch: Fast immer findet sich dort ein moment.js mit allen Locales, ein vollständiger lodash-Import und eine Chart-Bibliothek, die für eine einzige Admin-Seite auf jede Seite ausgeliefert wird. Durch das Aufteilen und das Vorladen des Hero-Assets liegt der LCP meist unter 3 Sekunden. Verkaufe es dem PM als einen Nachmittag mit Vorher-Nachher-Daten aus dem Feld, nicht als Sprint. Füge die 20 wichtigsten Module des Analyzers ein, und ich markiere die Einsparmöglichkeiten.
Die ersten Zeilen der Datei, die deine KI lesen wird, genau so, wie sie geliefert wird. Nichts für die Seite umgeschrieben.
Nutze den Namen Wenn die Datei geladen ist, sprich sie mit Namen an: „Serge, sieh dir diese Seite an.“ Dafür ist der Name da. So bleiben auch mehrere Skills in einem Chat auseinander.
// der skill, auf dem deine KI läuft
Du bist Yuna, eine Senior-Frontend-Entwicklerin, die semantisches HTML vor ARIA bevorzugt, Props ausgehend von der Datenstruktur typisiert und LCP, INP sowie CLS misst. Du wurdest aktiviert, um eine UI zu entwickeln, die per Tastatur funktioniert.
Integriere Yuna in Claude und erhalte eine Senior-Frontend-Engineer, die schnelles, typisiertes, barrierefreies und getestetes React liefert - keinen Haufen von any-Typen und useEffect-Chaos, das nur durch Hoffnung zusammengehalten wird. Yuna arbeitet so, wie ein starkes Produkt-Engineering-Team arbeitet: komponentenorientiert, standardmäßig barrierefrei, anhand echter Core Web Vitals gemessen und durch Tests abgedeckt, die sichtbares Nutzerverhalten prüfen - niemals Implementierungsdetails. Yuna deckt den modernen Frontend-Stack von Anfang bis Ende ab: React (Funktionskomponenten, Hooks, Komposition, Suspense, Error Boundaries), TypeScript (discriminated Unions, Generics, Prop-Typisierung, Narrowing), Styling (CSS Modules, Tailwind, CSS-in-JS, modernes Layout mit Grid/Flex/Container Queries), Datenabruf und State (TanStack Query, Context, Zustand, URL-State), Formulare (React Hook Form, Zod), Performance (Code-Splitting, Memoization, Virtualisierung, Bild-/Font-Strategie, Web Vitals), Barrierefreiheit (semantisches HTML, ARIA, Tastatur, Fokus, WCAG 2.2 AA) und Testing (React Testing Library, jest-axe, Playwright für E2E).
SKILL.md · 183 Zeilen · Sofort-Download
// was drin ist
Was steckt in diesem Skill?
React (Hooks, State, Komposition) und TypeScript
Performance: Bundle-Größe, Code-Splitting, Core Web Vitals
Marken ihrer jeweiligen Inhaber. KissMySkills steht in keiner Verbindung zu ihnen und wird nicht von ihnen unterstützt.
// frag deinen Assistenten
Oder lass deine KI diesen Skill für dich einrichten.
Öffne kissmyskills.com/pages/connector und richte den Skill "Yuna – Frontend-Ingenieurin AI Skill" (handle: yuna-frontend-engineer) für mich ein
Füge ihn in Claude, ChatGPT, Claude Code, Cursor oder Codex ein. Deine KI führt dich durch die Verbindung mit KissMySkills (etwa 3 Minuten, 7 Tage kostenlos testen) und lädt den Skill. Was deine KI lesen wird →
Was du wirklich kaufst
Füge Yuna in Claude ein und erhalte eine erfahrene Frontend-Entwicklerin, die schnelle, barrierefreie React-Komponenten mit sauberem TypeScript und echten Tests entwickelt.
Yuna entwickelt Frontends: React (Hooks, Zustand, Komposition), TypeScript, Performance (Bundle-Größe, Code-Splitting, Memoization, Core Web Vitals), Barrierefreiheit (semantisches HTML, ARIA, Tastaturbedienung, WCAG), responsives CSS, Zustandsverwaltung, Formulare und Tests (React Testing Library). Entwickle immer auf einem Branch, teste (Unit-Tests und Barrierefreiheit), führe ein Review durch und überprüfe alles in einem Preview-Build, bevor du es mergst.
Das bekommst du
→React (Hooks, Zustand, Komposition) und TypeScript
→Performance: Bundle-Größe, Code-Splitting, Core Web Vitals
→Responsives CSS, Zustandsverwaltung und React Testing Library
📄 yuna-frontend-engineer.skillInstallation in unter 2 Min.Funktioniert mit Claude, ChatGPT & jedem AI-Chat
So installierst du es
Lade das .skill-Paket herunter → öffne Claude → füge SKILL.md in deine Projektanweisungen oder deinen System-Prompt ein → beschreibe deine Anforderungen → Yuna erstellt die Antwort. Enthält ein vollständiges, ausgearbeitetes Beispiel, damit du genau siehst, was du bekommst.
// installation
Unter 2 Minuten
Vier Schritte. Jeder KI-Chat.
01
Datei herunterladen
Nach dem Kauf kommt der Download-Link per E-Mail. Speichere die .skill-Datei: Claude übernimmt sie so, wie sie ist.
02
Öffne deinen KI-Chat
Jeder KI-Chat, den du bereits nutzt: Claude, ChatGPT, Gemini, Grok, Copilot oder ein anderer.
03
Zu deiner KI hinzufügen
Claude: unter Settings → Capabilities → Skills die .skill-Datei hochladen. ChatGPT, Gemini und andere: die .skill-Datei wie ein .zip-Archiv öffnen und SKILL.md in die benutzerdefinierten Anweisungen oder Projektanweisungen einfügen.
04
Beginne mit der Arbeit
Deine KI ist jetzt als Spezialist konfiguriert. Frag sie alles innerhalb ihres Fachgebiets.
Keine technischen Kenntnisse erforderlich.
Mit Library gibt es nichts herunterzuladen. Verbinde deine KI einmal und bitte sie dann um einen beliebigen Skill beim Namen.
Frontend-Entwicklung: React und TypeScript, Performance, Barrierefreiheit, responsives CSS und Testing. Lade ihn einmal in Claude Projects, und du erhältst einen konfigurierten Frontend Engineer, ohne den Kontext zu Beginn jeder Sitzung erneut erklären zu müssen. Entwickle immer in einem Branch mit Tests, führe den Code in CI gegen eine Staging-Umgebung mit Code-Review aus und bringe ihn erst nach Tests und Freigaben in die Produktion; liefere niemals ungetestete Änderungen direkt in die Produktion.
Wie installiere ich diese Skill-Datei?+
Lade das .skill-Paket herunter (es enthält SKILL.md), füge den Inhalt in die Anweisungen von Claude Projects oder den System-Prompt deiner AI ein, ergänze deinen eigenen Kontext und starte deine erste Sitzung. Funktioniert mit Claude, ChatGPT oder jedem AI-Chat, der System-Prompts akzeptiert.
Mit welchen AI-Tools funktioniert dieser Skill?+
Funktioniert mit Claude (empfohlen), ChatGPT, Gemini, Perplexity und Copilot sowie jedem AI-Chat, der System-Prompts akzeptiert. Mit Claude Projects erhältst du die besten Ergebnisse.
Was ist in diesem Download enthalten?+
Ein .skill-Paket, das direkt nach dem Kauf bereitgestellt wird: die vollständige SKILL.md-Rollenkonfiguration sowie eine Datei mit einem ausgearbeiteten Beispiel und einem realen Szenario, damit du die Qualität siehst, bevor du dich darauf verlässt. Kein Abonnement, dauerhaft deins.
Bereit, deine KI zu spezialisieren?
Dieser und 2.500+ weitere, direkt in Claude, ChatGPT, Claude Code, Codex oder Cursor. Jederzeit kündbar.