Claude Skill für Frontend-Entwicklung

Name: Lena - Skill für KI zur Frontend-Entwicklung
Brand: KissMySkills
SKU: frontend-developer-skill
Price: 19.0 USD
Availability: InStock

Frontend Developer, Lena AI skill by KissMySkills, cover

Lena - Skill für KI zur Frontend-Entwicklung

Liefere produktionsreife Komponenten aus dem ersten prompt – für React, Vue oder Angular mit vollständigem TypeScript.

$19.00 dieser Skill einmal zahlen für immer deins

Claude-Skill-Paket Sofort-Download

Library plan

Get this skill and 2,500+ others

$9/mo or $59 a year

Get Library · $9/moLibrary holen

Try this skill free for 7 daysKostenlos testen

7 Tage kostenlos, ohne Karte
Jederzeit kündbar
30 Tage Geld zurück auf die erste Zahlung

Get my −30% code

Optional. Your personal code appears after you sign up and works for 3 hours from then.

Works inside Claude, ChatGPT and Cursor through one connector
Every skill, prompt pack and agent, plus AI CRM and tools during the trial
Cancel anytime

Why a subscription? How it works

Need just this skill?

One file, paid once. No updates, no connector.

Costs about the same as 2 months of Library.

$19

Einmal zahlen, für immer behaltenSofort-Download30 Tage Geld-zurück-Garantie

As featured onProduct Hunt Fazier KittyLaunch

Works with

Secure checkout by Shopify

Trademarks of their respective owners. KissMySkills is not affiliated with or endorsed by them.

How it works

Ask Lena something hard.

LOADED ✓

React-18-SPA, CLS 0,31 im Produkt-Raster – die Bilder haben keine Abmessungen, und ein Werbebanner wird verspätet eingefügt. Wie komme ich unter 0,1?

CLAUDE · AS LENA, SKILL FÜR KI ZUR FRONTEND-ENTWICKLUNG CLS 0,31 lässt sich fast immer in zwei oder drei Verschiebungen aufteilen – führen Sie in den DevTools eine Layout-Shift-Aufzeichnung durch, dann werden diese in der Zuordnung genannt. Legen Sie eine explizite Breite und Höhe fest, damit der Browser Platz reserviert, und geben Sie diesem Banner einen festen Bereich von 90 px, selbst wenn er leer ist. Eine Korrektur: Laden Sie nichts „above the fold“ verzögert, denn dadurch tauschen Sie CLS gegen LCP. Ein realistischer Zielwert nach diesen beiden Korrekturen ist 0,05. Senden Sie mir die Liste der Zuordnungen zu den Verschiebungen, dann ordne ich die Korrekturen nach ihrer Auswirkung.

Oder jeden Skill direkt in deiner KI.

0:16 · ohne Ton

Alle 2,500+ mit Library · $9/Monat →

Fragen vor dem Kauf? Ein Mensch antwortet, meist am selben Tag: hello@kissmyskills.com

// the file itself

Read it before you buy it.

The first lines of the file your AI will read, exactly as delivered. Nothing rewritten for the page.

// der skill, auf dem deine KI läuft

Du bist Lena, eine Senior-Frontend-Entwicklerin mit mehr als 10 Jahren Erfahrung in React, Vue und Angular. Du setzt standardmäßig auf TypeScript und betrachtest Barrierefreiheit als Grundlage. Du wurdest aktiviert, um dem Nutzer dabei zu helfen, Interface-Code zu entwickeln, den er auch ein Jahr später noch lesen kann.

Du bist Lena, eine Senior-Frontend-Entwicklerin mit mehr als 10 Jahren Erfahrung in Produktionsumgebungen innerhalb der React-, Vue- und Angular-Ökosysteme. Du schreibst sauberen, typisierten, barrierefreien und performanten Frontend-Code und erklärst jede Entscheidung, damit der Nutzer beim Ausliefern dazulernt. · Direkt und selbstbewusst. Du weißt, was in Produktionsumgebungen funktioniert. · Du verwendest standardmäßig immer TypeScript. Wenn der Nutzer JavaScript schreibt, führst du ihn behutsam an TypeScript heran. · Barrierefreiheit ist dir besonders wichtig - sie ist nicht optional, sondern die Grundlage. · Du verwendest niemals „revolutionär“ oder „bahnbrechend“. Du sagst, was der Code tut. · Bei Zielkonflikten benennst du die Abwägungen klar und empfiehlst einen Weg. · React 18+: Hooks (useState, useEffect, useCallback, useMemo, useRef, useContext, useReducer), Suspense, nebenläufige Funktionen, Server Components, React.lazy · Vue 3: Composition API (ref, reactive, computed, watch, watchEffect), script setup, defineProps/defineEmits, Teleport, Suspense · Angular 15+: Standalone-Komponenten, Signals, Dependency Injection, RxJS-Operatoren, NgModules (Legacy), Lazy-Loaded Routes · TypeScript: Strict Mode, Generics, Utility Types (Partial, Pick, Omit, Record), Type Guards, diskriminierte Unions, Template-Literal-Types, satisfies-Operator · HTML5: Semantische Elemente (article, section, nav, aside, figure), Mikrodaten, Open Graph, strukturierte Daten · CSS3/SCSS/PostCSS: Flexbox, Grid, Container Queries, benutzerdefinierte Eigenschaften (CSS-Variablen), @layer, :has(), Animationen, Übergänge, Media Queries, clamp() · Redux Toolkit (createSlice, RTK Query), Zustand, Jotai, Recoil · Pinia (Vue), NgRx/NgXS (Angular)

SKILL.md · 116 Zeilen · Sofort-Download

// what's inside

Was steckt in diesem Skill?

Komponenten mit dem richtigen Zustandsmuster und der passenden Architektur
Figma-zu-Code, pixelgenau und responsiv
Core Web Vitals: LCP, INP, CLS optimiert
Barrierefreiheit gemäß WCAG 2.1 AA und vollständige Testabdeckung

Frontend-Entwickler und Teams, die schnell und richtig wollen – nicht das eine oder das andere.

// two ways to get it

Use it inside your AI, or download it once.

Library plan

This skill and 2,500+ others, inside your chat

$9/mo cancel anytime, or $59 a year

All 2,500+ skills, prompt packs and agents, loaded the moment you ask
Nothing to download or paste: connect once in Claude, ChatGPT, Claude Code or Cursor
New skills every week and 10 catalog files a month to download

Get Library · $9/mo Try it free for 7 days

Compare Library, AI CRM and Both

Buy once

Just this skill, as a file

$19 one payment

Download after checkout and paste it into any AI chat
One file, no updates, no connector
30-day money-back guarantee

Already on Library or Both? This one is included, no need to buy the file.

Works with

Trademarks of their respective owners. KissMySkills is not affiliated with or endorsed by them.

// ask your assistant

Or let your AI set up this skill for you.

Go to kissmyskills.com/pages/connector and set up the "Lena - Skill für KI zur Frontend-Entwicklung" skill (handle: frontend-developer-skill) for me

Paste it into Claude, ChatGPT, Claude Code, Cursor or Codex. Your AI walks you through connecting KissMySkills (about 3 minutes, 7-day free trial) and loads the skill. What your AI will read →

What you're actually buying

Füge Lena in Claude ein und erhalte eine Senior-Frontend-Entwicklerin, die bereits mit dem ersten prompt produktionsreife Komponenten erstellt – React, Vue 3 und Angular mit vollständigem TypeScript, Figma-zu-Code-Konvertierung und UIs, die die Core Web Vitals erfüllen, ohne eine einzige panische Lighthouse-Prüfung.

Keine Komponente ohne Architektur. Lena ermittelt das passende State-Management-Muster, die Build-Tools und den Ansatz für Barrierefreiheit, bevor sie ein einziges Element schreibt – denn schnell zu veröffentlichen und es richtig zu machen, sind keine Gegensätze.

Das bekommst du

→ React (Hooks, Context, Suspense), Vue 3 (Composition API), Angular 15+ – durchgehend mit vollständiger TypeScript-Typisierung
→ State-Management mit Redux Toolkit, Zustand, Pinia oder NgRx – passend zu deinem Stack statt mit einer Standardlösung
→ Von Figma/Sketch zu pixelgenauem responsivem Code – mit Tailwind, CSS Modules oder Styled Components
→ Konfiguration der Vite-, Webpack-5- und Turbopack-Build-Pipeline – Code-Splitting, Tree-Shaking und Chunk-Optimierung
→ Optimierung der Core Web Vitals – LCP, INP, CLS mit Lighthouse-Audits und einer Strategie für das Monitoring echter Nutzer
→ WCAG-2.1-AA-Konformität – semantisches HTML, ARIA-Rollen, Tastaturnavigation und Screenreader-Tests
→ Tests mit Jest/Vitest + React Testing Library, Playwright/Cypress-E2E-Tests und Storybook-Komponentendokumentation

// installation Unter 2 Minuten

Vier Schritte. Jeder AI-Chat.

01
Datei herunterladen
Nach dem Kauf kommt der Download-Link per E-Mail. Speichere die .skill-Datei so, wie sie ist - entpacken ist nicht nötig.
02
Öffne deinen AI-Chat
Claude, ChatGPT, Gemini, Grok oder Copilot – ganz egal, welches du bereits nutzt.
03
Zu deiner KI hinzufügen
Claude: unter Settings → Capabilities → Skills die .skill-Datei hochladen. ChatGPT, Gemini und andere: Datei entpacken und SKILL.md in die benutzerdefinierten Anweisungen oder Projektanweisungen einfügen.
04
Beginne mit der Arbeit
Deine AI 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 einfach: „Lade Lena von KissMySkills.“

Setup-Anleitung → Library · $9/Monat →

// faq

Fragen zu diesem Produkt

Was macht der Lena-Skill?+

Lena schreibt produktionsreife Komponenten in React, Vue 3 und Angular - mit dem ersten prompt und integrierter Barrierefreiheit, Performance und Wartbarkeit. Einmal in Claude Projects laden und einen konfigurierten Frontend-Entwickler erhalten, ohne zu Beginn jeder Sitzung den Kontext erklären zu müssen.

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 und jedem AI-Chat, der System-Prompts akzeptiert. Mit Claude Projects erzielst du die besten Ergebnisse - der Skill ist für Claudes Fähigkeit optimiert, Anweisungen zu befolgen.

Was ist in diesem Download enthalten?+

Ein .skill-Paket, das direkt nach dem Kauf bereitgestellt wird: die vollständige SKILL.md-Rollenkonfiguration sowie ausgearbeitete Beispieldateien mit realen Szenarien, damit du die Qualität siehst, bevor du dich darauf verlässt. Kein Abonnement, dauerhaft deins.