Die 8 besten Claude Skills für UI/UX-Engineers

Wenn Sie Zeit in r/Frontend, r/UXDesign oder den Foren der Figma Community verbringen, ist Ihnen wahrscheinlich aufgefallen, dass Designer und Front-end-Entwickler anders über KI-Tools sprechen. Vor zwei Jahren drehte sich vieles um die Frage, ob KI Designer vollständig ersetzen würde. Diese Sorge ist nicht verschwunden (und wird das wahrscheinlich auch nie), doch inzwischen gibt es einen pragmatischeren Diskussionsstrang: Designer teilen Workflows, bei denen KI die mühsamen Aufgaben übernimmt, damit sie sich auf die kreativen konzentrieren können.

Die Zahlen spiegeln das wider. Laut der jährlichen Umfrage von Loop11 stieg die KI-Nutzung unter UX-Forschern 2025 auf 80 %. Senior-Designer berichten, dass sie ein Arbeitsvolumen bewältigen, für das früher ein Team aus drei Personen nötig war – ein Trend, der den „Super-IC“ (Super Individual Contributor) hervorgebracht hat, der wie ein Ein-Personen-Designstudio arbeitet. Auf Reddit fällt die Resonanz begeistert und pragmatisch aus. In r/webdesign und r/Frontend erstellen Entwickler mit Claude Code vollständige Prototypen in 30 Minuten. Auf UX Collective veröffentlichen Designer detaillierte Workflows, in denen sie zeigen, wie sie mit Claude Designs automatisch in den Dark Mode umwandeln, barrierefreie Komponentenvarianten generieren und Seiten anhand der WCAG-Richtlinien prüfen.

Die Skepsis ist nach wie vor vorhanden – und das ist gut so. 91 % der UX-Forscher sorgen sich um die Genauigkeit der Ergebnisse und Halluzinationen. Der Konsens in der Community ist eindeutig: KI-Builder eignen sich hervorragend für erste Mock-ups und Grundgerüste, scheitern aber weiterhin an individuellen Anpassungen, nuancierten Interaktionsmustern und dem Designurteil, das aus jahrelanger Beobachtung echter Nutzer beim Umgang mit echten Benutzeroberflächen entsteht. KI ersetzt nicht das Auge von Designern. Sie übernimmt repetitive Aufgaben (responsive Varianten generieren, Kontrastverhältnisse prüfen, Komponenten-Grundgerüste erstellen und Checklisten durchgehen), damit Menschen mehr Zeit für die tatsächlich wichtigen Entscheidungen haben.

Play Video: YouTube Video: jmDLqqWxCco

Brian Clark von Snyk zeigt Schritt für Schritt, wie sich mit Bolt und Figma gemeinsam eine Website erstellen lässt – ein Beispiel für den KI-gestützten Design-Workflow, den Front-end-Entwickler zunehmend einsetzen.

Claude Skills sind einer der interessanteren Einstiege in diesen Workflow. Falls Sie noch nicht mit ihnen vertraut sind, lohnt es sich, sie kennenzulernen, denn sie nehmen im Claude-Ökosystem eine besondere Stellung ein.

Was sind Claude Skills (und was sind sie nicht)?

Im Claude-Ökosystem gibt es mehrere Erweiterungsmechanismen, die leicht verwechselt werden können. Hier eine kurze Abgrenzung:

• CLAUDE.md-Dateien dienen als dauerhaftes Projektgedächtnis. Sie werden in jede Sitzung geladen und geben Claude Informationen wie „Dieses Projekt verwendet Tailwind v4“ oder „Verwenden Sie immer 2 Leerzeichen für Einzüge“. Sie stellen einen permanent verfügbaren Kontext dar und keine Funktionen, die bei Bedarf aktiviert werden.

• Benutzerdefinierte Slash-Befehle (.claude/commands/*.md) waren einfache Prompt-Vorlagen, die durch /command-name ausgelöst wurden. Sie wurden praktisch in Skills integriert. Skills, in deren Frontmatter ein argument-hint definiert ist, lassen sich als Slash-Befehle aufrufen; andere werden je nach Aufgabe kontextbezogen aktiviert.

• MCP-Server sind laufende Prozesse, die Tools und Datenquellen über das Model Context Protocol bereitstellen. Damit kann Claude APIs aufrufen, Datenbanken abfragen oder mit externen Diensten interagieren. Dafür sind ein Serverprozess und Code erforderlich.

• Claude Connectors verbinden Claude über Remote-MCP-Server mit OAuth mit externen Diensten wie Slack, Figma oder Asana.

• Claude Apps bezeichnet die Plattformen, auf denen Claude ausgeführt wird (Claude.ai, Claude Code, Mobilgeräte, Desktop) – nicht Erweiterungen für Claude.

• Plugins sind Pakete, die Skills, Agents, Hooks und MCP-Server für die Verteilung bündeln.

Claude Skills sind Verzeichnisse mit einer SKILL.md-Datei (mit YAML-Frontmatter und Markdown-Anweisungen) sowie optionalen Zusatzdateien wie Skripten, Vorlagen und Referenzdokumenten. Das macht sie besonders:

1. Sie sind Verzeichnisse, keine einzelnen Dateien. Ein Skill kann neben seinen Anweisungen Shell-Skripte, Python-Hilfsprogramme, Referenzdokumentation und Asset-Dateien enthalten.

2. Progressive Offenlegung. Beim Start lädt Claude aus dem YAML-Frontmatter nur den name und die description jedes Skills (ungefähr 100 Tokens pro Skill) – ähnlich wie MCP-Tool-Beschreibungen in den Kontext eingefügt werden. Claude gleicht Ihre Aufgabe mit diesen Beschreibungen ab, um zu entscheiden, welcher Skill aktiviert werden soll. Findet Claude eine Übereinstimmung, lädt es die vollständigen Anweisungen aus der SKILL.md. Zusatzdateien (Referenzen, Skripte, Assets) werden erst geladen, wenn sie während der Ausführung ausdrücklich benötigt werden. Dieser dreistufige Ansatz hält Ihr Kontextfenster schlank, selbst wenn Dutzende Skills installiert sind. Deshalb ist auch das Feld description eines Skills entscheidend: Vage Beschreibungen führen zu unzuverlässiger Aktivierung, während präzise Beschreibungen mit konkreten Auslösephrasen (wie „Verwenden Sie diesen Skill, wenn Nutzer Webkomponenten erstellen möchten“) die Aktivierung zuverlässig auslösen.

3. Sie können Code ausführen. Skills können Skripte in scripts/ enthalten, die Claude während der Ausführung startet. Außerdem können sie die Syntax !`command` verwenden, um dynamische Ausgaben in den Prompt-Kontext einzufügen.

4. Sie folgen einem offenen Standard. Die Agent Skills-Spezifikation wird von Claude Code, OpenAI Codex, Cursor, Gemini CLI und anderen unterstützt, wodurch Skills portabel sind.

5. Sie lassen sich als Slash-Befehle registrieren. Skills mit einem argument-hint-Feld im YAML-Frontmatter können direkt mit /skill-name aufgerufen werden. Skills ohne Argumenthinweis werden stattdessen kontextbezogen aktiviert. Das heißt, Claude wählt sie automatisch aus, wenn Ihre Aufgabe zur Beschreibung passt.

Die offizielle Spezifikation und die Dokumentation zu Skills von Anthropic erläutern das vollständige Format. Auch der Engineering-Blogbeitrag von Anthropic zu Agent Skills ist lesenswert, wenn Sie mehr über die Designgrundlagen erfahren möchten.

Einen Claude Skill installieren

Die Installation eines Skills dauert etwa 30 Sekunden.

Auf Projektebene (über die Versionsverwaltung mit Ihrem Team geteilt):

your-project/
└── .claude/
    └── skills/
        └── skill-name/
            ├── SKILL.md
            └── scripts/
                └── helper.sh

Auf Nutzerebene (persönlich und in allen Projekten verfügbar):

~/.claude/
└── skills/
    └── skill-name/
        ├── SKILL.md
        └── references/
            └── REFERENCE.md

Über Plugins (für Skill-Sammlungen wie Vercel):

/plugin marketplace add vercel-labs/agent-skills
/plugin menu

Skills auf Projektebene werden über die Versionsverwaltung mit Teammitgliedern geteilt. Skills auf Nutzerebene sind nur für Sie verfügbar. Bei Namenskonflikten haben Skills auf Unternehmensebene Vorrang vor persönlichen Skills, und persönliche Skills Vorrang vor Skills auf Projektebene.

Ein wichtiger Hinweis: Das Agent Skills-Ökosystem ist neu und wächst schnell. Daher ist die Sicherheit der Software-Lieferkette entscheidend. Snyks ToxicSkills-Forschung fand Prompt-Injection in 36 % der getesteten Skills sowie 1.467 schädliche Payloads im gesamten Ökosystem. Prüfen Sie vor der Installation immer die SKILL.md und alle enthaltenen Skripte. Behandeln Sie Skills wie jeden Code von Drittanbietern, den Sie in Ihrer Umgebung ausführen.

Entwickeln Sie einen Claude Skill? Wenn Sie einen Open-Source-Claude-Skill oder MCP-Server erstellen oder pflegen, bietet das Snyk Secure Developer Program kostenlose Sicherheits-Scans auf Enterprise-Niveau für Open-Source-Projekte. Snyk sichert mehr als 585.000 Open-Source-Projekte und bietet qualifizierten Maintainerinnen und Maintainer vollständigen Enterprise-Zugang, Support durch die Discord-Community sowie Unterstützung bei der Integration. Hier bewerben, wenn Sie bereits ein Projekt haben, oder hier, wenn Sie ein neues starten.

Kommen wir nun zur Liste. Diese acht Skills (und Skill-Sammlungen) decken ein breites Spektrum ab: von hochwertigem Front-end-Design bis zu Accessibility-Audits, React-Performance-Optimierung, Komponentenarchitektur und Mustern für mobile Benutzeroberflächen.

1. Anthropic frontend-design

Quelle: anthropics/skills (Pfad: skills/frontend-design/) und anthropics/claude-code (Pfad: plugins/frontend-design/) Sterne: 65,847 (skills-Repo) / 65,362 (claude-code-Repo) Lizenz: Benutzerdefiniert (siehe LICENSE.txt) Zuletzt aktualisiert: Februar 2026 Verifizierte SKILL.md: Ja

Das ist Anthropics eigene Antwort auf ein Problem, mit dem alle Designer konfrontiert sind, die Claude Code verwenden: KI-generierte Front-ends, die alle gleich aussehen. Die generischen violetten Farbverläufe auf weißem Hintergrund. Die immer gleichen Schriftkombinationen aus Inter und Roboto. Die vorhersehbaren Kartenlayouts. In der Beschreibung des Skills wird das als „KI-Einheitsbrei“ bezeichnet. Die Anweisungen zielen ausdrücklich darauf ab, Claude aus diesen Mustern auszubrechen zu lassen.

Der Skill liest sich wie ein Design-Briefing einer Creative Directorin, die es leid ist, immer dieselben Ergebnisse zu sehen. Bevor Claude Code schreibt, soll es vier Dimensionen durchdenken: Zweck (wer nutzt die Oberfläche und warum), Tonalität (eine konkrete ästhetische Richtung wählen), Rahmenbedingungen (Framework, Performance, Barrierefreiheit) und Differenzierung (was macht diese Benutzeroberfläche einprägsam?).

Was der Skill leistet

Die zentralen Anweisungen decken fünf Bereiche ab:

• Typografie: Wählen Sie ausdrucksstarke Schriftarten mit Charakter. Der Skill schließt Inter, Roboto, Arial, Systemschriften und Space Grotesk ausdrücklich aus (als „von KI überstrapaziert“ bezeichnet). Er regt zu ungewöhnlichen Kombinationen an, etwa einer markanten Display-Schrift mit einer eleganten Fließtextschrift.

• Farben und Theme: Entscheiden Sie sich für eine stimmige Farbpalette. Verwenden Sie CSS-Variablen für Konsistenz. Setzen Sie auf dominante Farben mit prägnanten Akzenten statt auf zurückhaltende, gleichmäßig verteilte Paletten. Kein abgedroschenes Violett auf Weiß.

• Animationen: Setzen Sie gezielt wirkungsvolle Momente ein. Ein sorgfältig inszenierter Seitenaufbau mit zeitversetzten Einblendungen sorgt für mehr Begeisterung als verstreute Mikrointeraktionen. Für HTML gibt es reine CSS-Lösungen, für React die Motion-Bibliothek.

• Räumliche Komposition: Unerwartete Layouts. Asymmetrie, Überlagerungen, diagonale Blickführung, Elemente, die das Raster durchbrechen, und großzügig bemessener Negativraum.

• Hintergründe und visuelle Details: Gradient-Meshes, Rauschtexturen, geometrische Muster, geschichtete Transparenzen, dramatische Schatten, dekorative Rahmen, benutzerdefinierte Cursor und Körnungs-Overlays.

Der Ansatz ist klar positioniert. Er lenkt Claude zu mutigen, unverwechselbaren Ergebnissen statt zu sicheren Standardlösungen. Wenn Sie interne Tools entwickeln, bei denen Konsistenz wichtiger ist als Kreativität, empfiehlt sich die Kombination mit einem strukturierteren Skill für Designsysteme (siehe Nr. 5 oder 6 weiter unten). Für Landingpages, Marketing-Websites, Portfolio-Projekte und alle Vorhaben, bei denen eine eigenständige visuelle Persönlichkeit gefragt ist, verhindert dieser Skill jedoch, dass Claude jedes Mal dieselbe Benutzeroberfläche generiert.

Installation

An zwei Stellen verfügbar (derselbe Skill in zwei Repositories):

# From the skills repo (recommended)
git clone https://github.com/anthropics/skills.git
cp -r skills/skills/frontend-design ~/.claude/skills/

# Or from the claude-code plugins repo
/plugin marketplace add anthropics/claude-code
# Select frontend-design from the plugin menu
/plugin menu

Verwendung

Der Skill wird automatisch aktiviert, wenn Sie Claude mit der Erstellung von Webkomponenten, Seiten oder Anwendungen beauftragen:

Build a landing page for a fintech startup. Dark, editorial tone.
Create a dashboard component for a health app. Organic, warm aesthetic.
Design a portfolio site. Brutalist, typographic focus.

Für wen eignet sich dieser Skill? Front-end-Entwickler und Designer, die möchten, dass Claude visuell unverwechselbare Benutzeroberflächen statt generischer Vorlagen erstellt. Besonders nützlich für Landingpages, Portfolio-Websites, Marketingseiten und alle Projekte, bei denen eine individuelle Ästhetik wichtig ist.

2. Vercel Web Design Guidelines

Quelle: vercel-labs/agent-skills (Pfad: skills/web-design-guidelines/) Stars: 19.487 Lizenz: MIT Zuletzt aktualisiert: Januar 2026 Verifiziertes SKILL.md: Ja

Während sich Anthropics Frontend-Design-Skill auf die kreative Ausrichtung konzentriert, steht bei diesem Skill von Vercel die Korrektheit im Mittelpunkt. Er prüft Ihren vorhandenen UI-Code anhand der Web Interface Guidelines – einer umfassenden Sammlung von über 100 Regeln zu Barrierefreiheit, Performance und UX-Best Practices.

Was der Skill leistet

Der Skill folgt einem klaren Ablauf:

1. Ruft die neuesten Richtlinien von der Quell-URL ab (die Regeln stehen im Repository vercel-labs/web-interface-guidelines und sind dadurch stets aktuell)

2. Liest die von Ihnen angegebenen Dateien

3. Prüft jede Datei anhand aller Regeln

4. Gibt die Ergebnisse im knappen Format file:line aus

Die Richtlinien decken Bereiche ab, die erfahrene UI/UX-Engineers bei Code-Reviews prüfen, unter Zeitdruck aber leicht übersehen: korrekte ARIA-Attribute, sichtbare Fokuszustände, beschriftete Eingabefelder, Größe von Touch-Zielen, Unterstützung für reduzierte Bewegung, semantisches HTML, Tastaturnavigation, eine korrekte Überschriftenhierarchie und vieles mehr.

Das ist kein kreativer Skill, sondern ein Qualitätscheck. Stellen Sie sich ihn als Linter für UI/UX-Best-Practices vor, der Probleme erkennt, die bei einem WCAG-Audit durchfallen oder zu echten Bedienungsproblemen für Nutzer mit Tastatur oder Screenreader führen würden.

Installation

git clone https://github.com/vercel-labs/agent-skills.git
cp -r agent-skills/skills/web-design-guidelines ~/.claude/skills/

Oder über den Plugin-Marktplatz:

/plugin marketplace add vercel-labs/agent-skills
/plugin menu

Verwendung

Der Skill wird als Slash-Befehl registriert und bietet einen Argumenthinweis zur Angabe von Dateien:

/web-design-guidelines src/components/**/*.tsx
Review my UI code for accessibility issues
Audit this page against web interface best practices
Check my form components for WCAG compliance

Für wen ist der Skill gedacht: Frontend-Entwickler, die während der Entwicklung automatisierte UI/UX-Qualitätsprüfungen durchführen möchten. Engineers für Designsysteme, die Konsistenz in einer Codebasis sicherstellen müssen. Alle, die sich auf ein Barrierefreiheits-Audit vorbereiten.

Passende Ressourcen von Snyk:

• 10 Best Practices für die React-Sicherheit

• Lerninhalte zur JavaScript-Sicherheit

3. Vercel React Best Practices

Quelle: vercel-labs/agent-skills (Pfad: skills/react-best-practices/) Stars: 19.487 Lizenz: MIT Zuletzt aktualisiert: Januar 2026 Verifiziertes SKILL.md: Ja

Performance ist ein UX-Thema. Eine wunderschön gestaltete Oberfläche, die erst nach vier Sekunden interaktiv wird, bietet unabhängig von der Typografie eine schlechte Nutzererfahrung. Dieser Skill von Vercel Engineering umfasst 57 Performance-Optimierungsregeln in acht Kategorien, sortiert nach ihrer Wirkung.

Was der Skill abdeckt

Die Reihenfolge nach Priorität ist entscheidend. Sie spiegelt die praktische Engineering-Erfahrung von Vercel wider: Wasserfall-Effekte bei Anfragen zu vermeiden und die Bundle-Größe zu optimieren, wirkt sich viel stärker auf die wahrgenommene Performance aus als Anpassungen am Re-Rendering. Viele Entwickler (und KI-Assistenten) greifen sofort zu useMemo und React.memo, obwohl der eigentliche Engpass eine Kette sequenzieller API-Aufrufe oder eine Barrel-Datei ist, die die gesamte Icon-Bibliothek importiert.

Jede Regel enthält eine kurze Erklärung, fehlerhaften Code mit einer Erläuterung, warum er falsch ist, korrekten Code mit einer Erklärung sowie zusätzlichen Kontext. Im Verzeichnis mit den Regeln liegen für jede einzelne Regel Markdown-Dateien, sodass Claude bei Bedarf die vollständige Erklärung abrufen kann.

Besonders hervorzuheben:

• async-suspense-boundaries: Mit Suspense Inhalte streamen, statt vor dem Rendering auf alle Daten zu warten

• bundle-barrel-imports: Direkt importieren und Barrel-Dateien vermeiden (ein häufiges Problem in Designsystem-Bibliotheken)

• bundle-dynamic-imports: Für umfangreiche Komponenten next/dynamic verwenden

• rerender-derived-state: Abgeleitete boolesche Werte statt Rohwerte abonnieren

• rendering-content-visibility: Bei langen Listen CSS-content-visibility verwenden

• rendering-activity: Für Ein-/Ausblenden-Muster die Activity-Komponente verwenden

Installation

git clone https://github.com/vercel-labs/agent-skills.git
cp -r agent-skills/skills/react-best-practices ~/.claude/skills/

Verwendung

Der Skill wird bei der Arbeit mit React- oder Next.js-Code automatisch aktiviert:

Review this component for performance issues
Refactor this page to eliminate data fetching waterfalls
Optimize the bundle size of this Next.js app
Why is this component re-rendering unnecessarily?

Für wen ist der Skill gedacht: React- und Next.js-Entwickler, die Claude standardmäßig performanten Code schreiben lassen möchten. Engineers für Designsysteme, die Komponentenbibliotheken entwickeln, bei denen Performance im großen Maßstab wichtig ist.

Play Video: Can This New AI Write Safe Code? (Claude 3.7 Sonnet)

Brian Clark von Snyk testet, ob von Claude generierter Code Sicherheitsprüfungen besteht, und findet dabei echte Schwachstellen wie Regex-Denial-of-Service. Skills wie Vercels React Best Practices helfen Claude, Code zu generieren, der sowohl performant ist als auch etablierten Patterns folgt.

Passende Ressourcen von Snyk:

• Die KRITISCHE Next.js-Schwachstelle, die Sie kennen sollten (Video: YouTube)

• NPM-Sicherheit: Supply-Chain-Angriffe verhindern

• 10 Best Practices für npm-Sicherheit

4. Vercel Composition Patterns

Quelle: vercel-labs/agent-skills (Pfad: skills/composition-patterns/) Stars: 19.487 Lizenz: MIT Zuletzt aktualisiert: Januar 2026 Verifiziertes SKILL.md: Ja

Wenn Sie schon einmal eine React-Komponente mit 15 booleschen Props übernommen haben (isCompact, showHeader, isRounded, hasBorder, isHighlighted ...), kennen Sie das Problem, das dieser Skill löst. Eine übermäßige Zahl boolescher Props ist eines der häufigsten Anti-Patterns in Designsystemen. Sie erschwert es, Komponenten zu verstehen, zu testen und zu erweitern.

Dieser Skill vermittelt Claude skalierbare Composition-Patterns: Compound Components, Context-Provider, explizite Varianten und durchdachte Architekturen für die Zustandsverwaltung.

Was der Skill abdeckt

Zu den wichtigsten Patterns gehören:

• architecture-avoid-boolean-props: Fügen Sie keine booleschen Props zur Anpassung des Verhaltens hinzu. Verwenden Sie stattdessen Composition. Diese grundlegende Regel hat den größten Einfluss auf die Qualität der Komponenten-API.

• architecture-compound-components: Strukturieren Sie komplexe Komponenten mit gemeinsamem Kontext (wie <Select>, <Select.Trigger> und <Select.Content> in Radix UI).

• state-decouple-implementation: Nur der Provider weiß, wie der Zustand verwaltet wird. Komponenten nutzen eine klare Schnittstelle.

• state-context-interface: Definieren Sie für Dependency Injection eine generische Schnittstelle mit Zustand, Aktionen und Metadaten.

• patterns-explicit-variants: Erstellen Sie explizite Variantenkomponenten statt boolescher Modi (z. B. <Alert.Destructive> statt <Alert isDestructive>).

• patterns-children-over-render-props: Verwenden Sie für Composition children statt renderX-Props.

• react19-no-forwardref: Verzichten Sie in React 19+ auf forwardRef und verwenden Sie stattdessen den neuen Hook use() anstelle von useContext().

Jede Regeldatei im Verzeichnis rules/ enthält Beispiele für fehlerhaften und korrekten Code mit Erläuterungen. So werden diese Patterns konkret statt abstrakt.

Installation

git clone https://github.com/vercel-labs/agent-skills.git
cp -r agent-skills/skills/composition-patterns ~/.claude/skills/

Verwendung

Der Skill wird bei der Arbeit an der Komponentenarchitektur aktiviert:

Refactor this component to use compound components instead of boolean props
Design a flexible API for this dropdown component
Review this component library for composition anti-patterns
How should I structure this complex form component?

Für wen ist der Skill gedacht: Engineers für Designsysteme, Verantwortliche für Komponentenbibliotheken und Frontend-Entwickler, die wiederverwendbare UI-Komponenten erstellen. Besonders wertvoll ist dieser Skill, wenn Sie Komponenten-APIs entwerfen, die andere Entwickler nutzen werden.

5. UI/UX Pro Max

Quelle: nextlevelbuilder/ui-ux-pro-max-skill Stars: 29.636 Lizenz: MIT Zuletzt aktualisiert: Februar 2026 Verifiziertes SKILL.md: Ja

Dies ist der umfassendste Design-Intelligence-Skill im aktuellen Ökosystem. Während Anthropics Frontend-Design-Skill Claude ästhetisches Gespür vermittelt und sich die Skills von Vercel auf Engineering-Patterns konzentrieren, stellt UI/UX Pro Max Claude eine durchsuchbare Design-Datenbank bereit: über 50 UI-Stile, 97 Farbpaletten, 57 Schriftkombinationen, 99 UX-Richtlinien und 25 Diagrammtypen für neun Technologie-Stacks.

Was der Skill leistet

Der Skill enthält ein Python-CLI-Tool (scripts/search.py), mit dem Claude die Design-Datenbank durchsucht. Der Ablauf umfasst vier Schritte:

Schritt 1: Anforderungen analysieren. Produkttyp, Stil-Schlagwörter, Branche und Stack aus der Anfrage des Nutzers ableiten.

Schritt 2: Designsystem generieren (erforderlich). --design-system ausführen, um umfassende Empfehlungen samt Begründung zu erhalten. Dabei werden fünf Bereiche parallel durchsucht (Produkt, Stil, Farbe, Landingpage und Typografie), Schlussfolgerungsregeln aus einem CSV-Datensatz angewendet und ein vollständiges Designsystem mit Layoutmuster, Stil, Farben, Typografie, Effekten und zu vermeidenden Anti-Patterns erstellt.

Schritt 3: Detaillierte Suchanfragen ergänzen. Einzelne Bereiche (Stil, Diagramme, UX, Typografie, Landingpage) für weitere Details abfragen.

Schritt 4: Richtlinien für den Stack abrufen. Best Practices für die Implementierung im jeweiligen Stack abrufen (html-tailwind, react, nextjs, vue, svelte, swiftui, react-native, flutter, shadcn, jetpack-compose).

Der Skill unterstützt auch persistente Designsysteme mit einem Muster aus Masterdatei und Überschreibungen. Mit --design-system --persist werden eine Datei design-system/MASTER.md (die globale Quelle der Wahrheit) und ein Verzeichnis design-system/pages/ für seitenspezifische Überschreibungen erstellt. Eine durchdachte Funktion für größere Projekte, in denen eine Dashboard-Seite möglicherweise andere Dichte-Regeln als eine Marketingseite benötigt, aber weiterhin dieselbe grundlegende Farbpalette und Typografie nutzt.

Regelkategorien nach Priorität

Barrierefreiheit steht an erster Stelle. Der Skill prüft Mindest-Kontrastverhältnisse von 4,5:1, sichtbare Fokusringe, aussagekräftige Alt-Texte, ARIA-Labels, Tastaturnavigation und korrekte Formularbeschriftungen. Die Checkliste vor der Auslieferung umfasst visuelle Qualität, Interaktion, Kontrast im Hell- und Dunkelmodus, Layout und Barrierefreiheit.

Ein praktisches Detail: Der Skill enthält einen Abschnitt „Allgemeine Regeln für professionelle UIs“, der häufig übersehene Probleme aufführt. Keine Emoji-Icons (SVGs verwenden). Bei allen anklickbaren Elementen den Cursor-Pointer einsetzen. Sanfte Übergänge von 150 bis 300 ms. Glas-Karten im Hellmodus benötigen bg-white/80 oder höhere Deckkraft, nicht bg-white/10. Die Sichtbarkeit von Rahmen sowohl im Hell- als auch im Dunkelmodus prüfen.

Installation

git clone https://github.com/nextlevelbuilder/ui-ux-pro-max-skill.git
cp -r ui-ux-pro-max-skill/.claude/skills/ui-ux-pro-max ~/.claude/skills/

Oder über den Plugin-Marktplatz:

/plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skill
/plugin menu

Verwendung

Design a landing page for a beauty spa wellness service
Build a SaaS dashboard with dark mode
Create a fintech crypto trading interface
Review this component for UX anti-patterns

Der Skill unterstützt auch direkte CLI-Suchanfragen:

# Generate full design system
python3 skills/ui-ux-pro-max/scripts/search.py "beauty spa wellness" --design-system -p "Serenity Spa"

# Search specific domains
python3 skills/ui-ux-pro-max/scripts/search.py "glassmorphism dark" --domain style
python3 skills/ui-ux-pro-max/scripts/search.py "elegant luxury" --domain typography

Für wen ist der Skill gedacht: Designer und Entwickler, die möchten, dass Claude fundierte Designentscheidungen auf Basis von Produkttyp, Branche und ästhetischer Ausrichtung trifft, statt generische Standardeinstellungen zu verwenden. Die Funktion für persistente Designsysteme ist besonders nützlich für Teams, die an mehrseitigen Anwendungen arbeiten.

6. Bencium UX Designer

Quelle: bencium/bencium-claude-code-design-skill Stars: 72 Lizenz: Nicht angegeben Zuletzt aktualisiert: November 2025 Verifiziertes SKILL.md: Ja (2 SKILL.md-Dateien: bencium-controlled-ux-designer und bencium-innovative-ux-designer)

Dieser Skill bietet die umfassendste Behandlung der UX-Design-Grundlagen in einem einzelnen Skill des Claude-Skills-Ökosystems. Während andere Skills sich auf einzelne Themen konzentrieren (Barrierefreiheit, Performance, Ästhetik), ist Benciums Skill mit über 28.000 Zeichen ein vollständiges UX-Design-Nachschlagewerk, das Design Thinking, visuelle Standards, Interaktionsdesign und Barrierefreiheit in einem stimmigen Paket vereint.

Das Repository enthält zwei Varianten:

• bencium-innovative-ux-designer: Fördert mutige, kreative und unverwechselbare Designentscheidungen (ähnliche Philosophie wie Anthropics Frontend-Design-Skill, aber deutlich ausführlicher)

• bencium-controlled-ux-designer: Für Projekte, bei denen Konsistenz und Kontrolle wichtiger sind als Kreativität

Beide enthalten dieselben Referenzdokumente: ACCESSIBILITY.md, RESPONSIVE-DESIGN.md, MOTION-SPEC.md und DESIGN-SYSTEM-TEMPLATE.md.

Was der Skill abdeckt

Grundlegende Designphilosophie:

• Einfachheit durch Reduktion (mit Komplexität beginnen und gezielt entfernen, bis die einfachste effektive Lösung erreicht ist)

• Materialehrlichkeit (digitale Materialien haben einzigartige Eigenschaften – nutzen Sie sie)

• Funktionale Staffelung (eine Hierarchie durch Typografieskalierung, Farbkontraste und räumliche Beziehungen schaffen)

• Liebe zum Detail (jedes Pixel ist eine bewusste Entscheidung)

• Kohärente Designsprache (jedes Element sollte seine Funktion visuell vermitteln)

• Unsichtbare Technologie (Nutzer konzentrieren sich auf Inhalte und Ziele, nicht darauf, die Benutzeroberfläche zu verstehen)

Standards für visuelles Design:

• Vollständige Farbarchitektur (neutrale Basis- und Akzentpalette mit Anwendungsregeln für Hintergründe, Text, Buttons, Statusanzeigen und interaktive Zustände)

• Hervorragende Typografie (funktionale vs. emotionale Typografie, typografische Skala, Regeln zu Abständen und Lesbarkeit, responsive Typografie, spezifische UI-Empfehlungen für Buttons, Formularbeschriftungen, Eingabefelder und Fehlermeldungen)

• Layout und räumliches Design (kompositorische Balance, konsequente Raster, gezielte Aufmerksamkeitsführung)

Interaktionsdesign:

• Direkte Manipulation (Drag-and-drop statt Auf-/Ab-Buttons, Inline-Bearbeitung statt separater Formulare)

• Sofortiges Feedback innerhalb von 100 ms bei jeder Interaktion

• Fehlertolerante Muster (Strategien zur Prävention und Fehlerbehebung)

• Progressive Offenlegung (Übersicht, Details, erweiterte Optionen)

• Moderne UX-Muster: dialogorientierte Benutzeroberflächen, adaptive Layouts, ausdrucksstarke visuelle Gestaltung

Referenzdokumente:

• ACCESSIBILITY.md mit umfassenden WCAG-2.1/2.2-Empfehlungen

• RESPONSIVE-DESIGN.md mit Strategien für Breakpoints

• MOTION-SPEC.md mit Easing-Kurven, Dauer-Tabellen und animationsspezifischen Mustern für verschiedene Zustände

• DESIGN-SYSTEM-TEMPLATE.md zum Erstellen eines konsistenten Designsystems

Installation

git clone https://github.com/bencium/bencium-claude-code-design-skill.git

# Choose one (or install both):
cp -r bencium-claude-code-design-skill/bencium-innovative-ux-designer ~/.claude/skills/
cp -r bencium-claude-code-design-skill/bencium-controlled-ux-designer ~/.claude/skills/

Verwendung

Das Skill wird beim Erstellen von Webkomponenten, Seiten oder Anwendungen aktiviert:

Build a checkout flow with proper error handling and recovery
Design a settings page with progressive disclosure
Create an onboarding wizard with direct manipulation patterns
Review this form for UX issues

Für wen ist das gedacht: UX-Designer und Frontend-Entwickler, die möchten, dass Claude UX-Design-Grundlagen versteht und anwendet – nicht nur ästhetische Vorlieben. Die zwei Varianten (innovativ vs. kontrolliert) machen das Skill sowohl für kreative als auch für systematische Projekte geeignet.

7. AccessLint-Plugin

Quelle: accesslint/claude-marketplace Stars: 8 Lizenz: MIT Zuletzt aktualisiert: November 2025 Verifiziertes SKILL.md: Ja (Skills in plugins/accesslint/skills/: contrast-checker, refactor, use-of-color, link-purpose)

AccessLint ist ein spezialisiertes Barrierefreiheitstoolkit für Claude. Anders als die in andere Skills dieser Liste integrierten Barrierefreiheitsfunktionen, bei denen Barrierefreiheit eines von vielen Themen ist, konzentriert sich AccessLint vollständig darauf. Es umfasst vier spezialisierte Skills, einen KI-Prüfagenten und einen integrierten MCP-Server zur programmatischen Analyse von Farbkontrasten.

Das ist enthalten

4 Skills:

1 Agent:

Der Agent accesslint:reviewer führt umfassende, mehrstufige Code-Reviews zur Barrierefreiheit durch. Er durchsucht Ihre Codebasis nach Problemen mit der Konformität zu WCAG 2.1, Level A und AA, navigiert durch den Code, um den vollständigen Kontext zu erfassen, und erstellt strukturierte Prüfberichte mit priorisierten Problemen, Schweregraden und WCAG-Verweisen.

MCP-Server:

Das Plugin enthält außerdem einen MCP-Server (@accesslint/mcp) mit drei Tools:

• calculate_contrast_ratio: WCAG-Kontrastverhältnis zwischen zwei Farben berechnen

• analyze_color_pair: Detaillierte Bestanden/Nicht-bestanden-Analyse für alle Inhaltstypen und WCAG-Stufen

• suggest_accessible_color: Barrierefreie Farboptionen erhalten, die WCAG-Anforderungen erfüllen und zugleich die Designabsicht bewahren

Die MCP-Tools stehen allen anderen Skills und Agenten zur Verfügung. So können Sie AccessLint mit den anderen Design-Skills dieser Liste kombinieren. Die Tools zur Kontrastprüfung sind besonders nützlich in Verbindung mit Skills, die Farbpaletten generieren.

WCAG-Abdeckung

Das Plugin prüft die Konformität mit Level A und AA, einschließlich:

• Wahrnehmbar: Alternativtexte, semantische Struktur, Farbkontrast

• Bedienbar: Tastaturnavigation, Fokusverwaltung, Sichtbarkeit des Fokus

• Verständlich: Klare Beschriftungen, Fehlerkennzeichnung, konsistentes Verhalten

• Robust: Korrekte Verwendung von ARIA, barrierefreie Namen und Rollen

Installation

# Via plugin marketplace
/plugin marketplace add accesslint/claude-marketplace
/plugin install accesslint@accesslint

Oder manuell:

git clone https://github.com/accesslint/claude-marketplace.git
cp -r claude-marketplace/plugins/accesslint/skills/* ~/.claude/skills/

Verwendung

Check the contrast ratio between #333 and #f5f5f5 for normal text
Review src/components/ for accessibility issues
Fix accessibility problems in this form component
Check if my status indicators rely solely on color

Für wen ist das gedacht: Alle UI/UX-Engineers, denen Barrierefreiheit wichtig ist. Designsystem-Teams, die die WCAG-Konformität sicherstellen müssen. Entwickler, die sich auf Barrierefreiheitsprüfungen vorbereiten. Die Zahl der Stars ist niedrig (8), aber die Qualität des Skills ist hoch und sein Anwendungsbereich klar umrissen.

Verwandte Snyk-Ressourcen:

• Was ist Cross-Site-Scripting (XSS)? (relevant, weil XSS häufig nicht korrekt verarbeitete Formulareingaben ausnutzt. Das überschneidet sich mit Barrierefreiheitsthemen wie korrekten Beschriftungen und semantischem HTML)

• Wie kann eine Content-Security-Policy XSS verhindern?

8. Vercel React Native Skills

Quelle: vercel-labs/agent-skills (Pfad: skills/react-native-skills/) Stars: 19,487 Lizenz: MIT Zuletzt aktualisiert: Januar 2026 Verifiziertes SKILL.md: Ja

Mobile UI/UX bringt eigene Leistungsanforderungen und Interaktionsmuster mit sich. React-Native- und Expo-Apps müssen auf Geräten mit begrenztem Speicher 60 fps erreichen, gestenbasierte Navigation unterstützen und plattformspezifische Konventionen beachten, die sich zwischen iOS und Android unterscheiden. Dieses Skill erfasst die wichtigsten Muster für die Performance mobiler Benutzeroberflächen.

Abgedeckte Themen

Listen-Performance hat kritische Priorität, da Listen in mobilen Apps am häufigsten zum Performance-Engpass werden. Die 8 Regeln behandeln: FlashList statt FlatList verwenden, Listenelemente memoizieren, Callback-Referenzen stabil halten, Inline-Style-Objekte vermeiden, Funktionen außerhalb des Renderings definieren, Bilder in Listen optimieren, aufwendige Verarbeitung aus Listenelementen auslagern und Elementtypen für heterogene Listen verwenden.

UI-Muster umfassen 10 speziell auf Mobilgeräte zugeschnittene Regeln:

• Für alle Bilder expo-image verwenden (nicht die integrierte Image-Komponente von React Native)

• Pressable statt TouchableOpacity verwenden

• Safe Areas in ScrollViews berücksichtigen

• Für Header in ScrollViews contentInset verwenden

• Native Kontextmenüs und native Modals verwenden

• Für die Messung von Views onLayout statt measure() verwenden

• Zum Gestalten StyleSheet.create oder NativeWind verwenden

Animationsregeln konzentrieren sich auf GPU-beschleunigte Eigenschaften: Nur Transform und Opacity animieren, für berechnete Animationen useDerivedValue verwenden und bei gestengesteuerten Interaktionen Gesture.Tap statt Pressable einsetzen.

Installation

git clone https://github.com/vercel-labs/agent-skills.git
cp -r agent-skills/skills/react-native-skills ~/.claude/skills/

Verwendung

Why is this FlatList scrolling slowly?
Optimize the performance of this React Native list
Implement a smooth page transition animation
Review this Expo app for performance issues

Für wen ist das gedacht: React-Native- und Expo-Entwickler, die mobile Apps erstellen, bei denen UI-Performance entscheidend ist. Designsystem-Engineers pflegen plattformübergreifende Komponentenbibliotheken.

Wo Sie Claude Skills finden und installieren (Marketplace, GitHub und Community-Verzeichnisse)

Anthropic führte Agent Skills im Oktober 2025 ein. Eine offizielle Marketplace-Website gibt es nicht. Designer, die mit der Claude.ai-App arbeiten, finden Skills unter „Customize“, „Skills“ und „Browse skills“. Dort werden Skills von Anthropic und Partnern wie Notion, Figma und Atlassian angezeigt; außerdem können Sie eigene Skills hochladen. Anthropic veröffentlicht auch Beispiel-Skills unter github.com/anthropics/skills, darunter designrelevante Skills wie frontend-design.

Neben den offiziellen Repositories finden sich Tausende Community-Skills auf GitHub, zusammengestellt in kuratierten Listen wie travisvn/awesome-claude-skills und VoltAgent/awesome-agent-skills, sowie in inoffiziellen Verzeichnissen. Da ein Skill aus einem SKILL.md-Ordner mit optionalen Skripten besteht, die Claude ausführt, kann ein bösartiger Skill in seinen Anweisungen eine Reverse Shell verstecken und sie beim Laden des Skills auslösen. Untersuchungen zu manipulierten Skill-Marktplätzen haben zudem gezeigt, dass automatisierte Skill-Scanner ein trügerisches Sicherheitsgefühl vermitteln: Harmlos wirkende Anweisungen können sich zu Shell-Zugriff verketten. Prüfen Sie Skills aus inoffiziellen Quellen vor der Installation und begrenzen Sie ihren Zugriff.

Sicherheit bei der Installation von Skills

Es ist paradox, KI-Skills zur Verbesserung Ihres Design-Workflows einzusetzen, während das Skills-Ökosystem selbst Sicherheitsrisiken birgt. Snyks ToxicSkills-Studie ergab, dass 13 % der getesteten Skills kritische Sicherheitslücken enthielten und einige aktiv versuchten, Zugangsdaten auszuschleusen. Die Untersuchung SKILL.md to Shell Access zeigte, wie drei Markdown-Zeilen in einer Skill-Datei einem Angreifer Shell-Zugriff auf Ihren Computer verschaffen können.

Bevor Sie ein Skill installieren:

1. Lesen Sie die SKILL.md und alle enthaltenen Skripte. Skills bestehen aus Markdown- und Shell-Skripten, nicht aus kompilierten Binärdateien. Sie können jede Zeile lesen.

2. Prüfen Sie die Quelle. Skills etablierter Organisationen (Anthropic, Vercel) und bekannter Maintainer bergen ein geringeres Risiko. Community-Skills sollten Sie genauer prüfen.

3. Prüfen Sie die Berechtigungen. Im Frontmatter-Feld allowed-tools ist angegeben, welche Tools ein Skill verwenden darf. Ein Skill, der Zugriff auf Bash benötigt, sollte genauer geprüft werden als einer, der nur Read und Grep verwendet.

4. Scannen Sie mit Snyk. Wenn Sie bereits Snyk Code oder die Snyk MCP-Integration verwenden, können Sie Skill-Skripte genauso scannen wie jeden anderen Code.

5. Seien Sie bei Skills mit Python-Skripten besonders vorsichtig. UI/UX Pro Max (#5) enthält ein Python-Suchtool. Lesen Sie scripts/search.py durch, bevor Sie es ausführen. In diesem Fall fragt das Tool lokale CSV-Daten ab und ist sicher, doch das allgemeine Prinzip gilt weiterhin.

Die Skills auf dieser Liste stammen aus vertrauenswürdigen Quellen und verfügen über klare Lizenzbedingungen. Doch das allgemeine Prinzip gilt: Vertrauen Sie – und überprüfen Sie.

Play Video: YouTube Video: ky6o6PXCXos

Snyks Brian Clark zeigt, wie Sie mit Claude Code eine sichere App entwickeln und anschließend die KI-generierte Ausgabe auf Schwachstellen scannen. Diesen Scan-und-Fix-Workflow können Sie auch auf Skill-Skripte anwenden, bevor Sie sie installieren.

Fazit

Claude Skills bilden den idealen Mittelweg zwischen „nur einem Prompt“ und einer „vollständigen Integration“. Für UI/UX-Engineers lösen sie ein echtes Problem: KI-Coding-Assistenten sind leistungsstark, liefern aber meist generische Ergebnisse, wenn sie nicht den richtigen Kontext erhalten. Ein gut ausgearbeitetes Skill liefert diesen Kontext in einem Format, das effizient geladen wird und sich bei Bedarf aktiviert.

Die Skills lassen sich in einige Kategorien einteilen:

• Für kreative Ausrichtung: Das Frontend-Design-Skill von Anthropic und das UX-Designer-Skill von Bencium lenken Claude zu eigenständigem, bewusst gestaltetem Design statt zu KI-Standardlösungen.

• Für Design-Know-how: UI/UX Pro Max stellt Claude eine durchsuchbare Datenbank mit Stilen, Farbpaletten, Schriftarten und UX-Richtlinien zur Verfügung.

• Für Qualität und Konformität: Vercels Web Design Guidelines und AccessLint stellen sicher, dass die Ergebnisse Barrierefreiheitsstandards und Best Practices für das Web erfüllen.

• Für Engineering-Muster: Vercels React Best Practices, Composition Patterns und React Native Skills vermitteln das Performance- und Architekturwissen, das professionelle Komponentenbibliotheken von Prototypen unterscheidet.

Am effektivsten ist es, Skills aus mehreren Kategorien zu kombinieren. Installieren Sie den Frontend Design Skill für ästhetische Qualität, den Web Design Guidelines Skill für Barrierefreiheit und den React Best Practices Skill für Performance. Sie stehen nicht im Konflikt miteinander, sondern ergänzen sich und verleihen Claudes Ergebnissen jeweils eine weitere Qualitätsebene.

Dass die UI/UX-Community KI-Tools nutzt, bedeutet nicht, dass gestalterisches Urteilsvermögen ersetzt werden soll. Vielmehr geht es darum, Reibungsverluste bei Aufgaben zu beseitigen, die Designer und Frontend-Entwickler bereits beherrschen, aber als mühsam empfinden: barrierefreie Komponentenvarianten vorbereiten, Kontrastverhältnisse prüfen, anhand von Best-Practice-Checklisten kontrollieren und responsive Layouts erstellen. Skills machen diese Delegation systematisch.

Wenn Sie Claude Code bereits für die Frontend-Entwicklung nutzen, ist die Installation einiger dieser Skills eine Investition von fünf Minuten, die sich schon beim ersten Mal auszahlt: Claude erstellt eine Landingpage mit echter typografischer Persönlichkeit, erkennt einen Verstoß gegen die Barrierefreiheit, bevor er in die Produktion gelangt, oder refaktoriert eine Komponente mit zahlreichen Props zu einem klaren Compound-Component-Muster.

Wenn Sie statt Claude Skills nach MCP-Servern suchen, lesen Sie unseren Artikel 14 MCP-Server für UI/UX-Entwickler.