Fähigkeiten ui-skills
🎨

ui-skills

Sicher

Konsistente Benutzeroberflächen mit Design-Constraints erstellen

KI-Agenten produzieren oft inkonsistenten UI-Code über verschiedene Sitzungen hinweg. Diese Skill bietet opinionated Design-Constraints und Patterns, um konsistente, zugängliche Oberflächengenerierung jedes Mal zu gewährleisten.

Unterstützt: Claude Codex Code(CC)
📊 71 Angemessen
1

Die Skill-ZIP herunterladen

2

In Claude hochladen

Gehe zu Einstellungen → Fähigkeiten → Skills → Skill hochladen

3

Einschalten und loslegen

Teste es

Verwendung von "ui-skills". Generate a card component using ui-skills patterns

Erwartetes Ergebnis:

Eine wiederverwendbare Card-Komponente mit konsistentem Padding, Border-Radius, Shadow-Tokens und Support für Header-, Body- und Footer-Slots. Inkludiert Hover-States und Barrierefreiheits-Attribute.

Verwendung von "ui-skills". Create a modal dialog following ui-skills constraints

Erwartetes Ergebnis:

Eine Modal-Komponente mit Focus-Trap, Escape-Key-Handling, Backdrop-Click-Detection und korrekten ARIA-Roles für Screen-Reader.

Sicherheitsaudit

Sicher
v1 • 2/25/2026

This skill contains documentation-only content (SKILL.md) with no executable code. Static analysis flagged URLs and patterns that are false positives - the URLs are GitHub repository references in documentation, not network requests. No security risks detected.

1
Gescannte Dateien
23
Analysierte Zeilen
0
befunde
1
Gesamtzahl Audits
Keine Sicherheitsprobleme gefunden
Auditiert von: claude

Qualitätsbewertung

38
Architektur
100
Wartbarkeit
87
Inhalt
32
Community
100
Sicherheit
91
Spezifikationskonformität

Was du bauen kannst

Frontend-Entwickler baut ein Design-System

Verwenden Sie diese Skill, um konsistente Komponenten-Patterns zu generieren, die etablierte Designprinzipien und Barrierefreiheitsstandards einhalten.

KI-Agent erstellt UI-Komponenten

Ermöglichen Sie KI-Coding-Assistenten, UI-Code zu produzieren, der den Design-Constraints und Patterns Ihres Teams entspricht.

Startup-Team standardisiert UI-Entwicklung

Etablieren Sie einen geteilten Wortschatz an UI-Patterns für kleine Teams ohne dedizierte Design-Ressourcen.

Probiere diese Prompts

Basic Button-Komponente generieren 
Generieren Sie unter Verwendung der ui-skills Patterns eine Button-Komponente mit Primary-, Secondary- und Disabled-States. Inkludieren Sie Barrierefreiheits-Attribute und Focus-States.
Formular-Input mit Validierung erstellen 
Wenden Sie ui-skills Constraints an, um eine Text-Input-Komponente mit Label, Placeholder, Error-State und Validierungsmeldung zu erstellen. Folgen Sie den WCAG-Richtlinien.
Responsive Navigation-Komponente bauen 
Erstellen Sie unter Verwendung der ui-skills Patterns eine Navigation-Komponente, die auf Desktop und Mobile funktioniert. Inkludieren Sie Keyboard-Navigation und Screen-Reader-Support.
Data Table mit Sortierung entwerfen 
Wenden Sie ui-skills Constraints an, um eine Data-Table-Komponente mit sortierbaren Spalten, Zeilenauswahl und Paginierung zu generieren. Stellen Sie Barrierefreiheits-Konformität sicher.

Bewährte Verfahren

  • Definieren Sie immer Design-Tokens (Spacing, Colors, Typography), bevor Sie Komponenten generieren
  • Testen Sie Komponenten mit Keyboard-Navigation und Screen-Readern während der Entwicklung
  • Dokumentieren Sie Komponenten-Props, -States und Nutzungsbeispiele für Team-Konsistenz

Vermeiden

  • Farbwerte fest codieren anstatt Design-System-Tokens zu verwenden
  • Focus-States und Keyboard-Navigation in interaktiven Elementen ignorieren
  • Übermäßig komplexe Komponenten erstellen, die in kleinere Einheiten aufgeteilt werden sollten

Häufig gestellte Fragen

Welche Frameworks werden von dieser Skill unterstützt?
Diese Skill fokussiert sich auf React-basierte Komponenten-Patterns, aber die Design-Prinzipien gelten für jedes Frontend-Framework.
Generiert diese Skill tatsächlichen CSS-Code?
Nein, sie bietet Komponentenstruktur und Patterns. Styling sollte unter Verwendung Ihres bestehenden Design-Systems oder CSS-Frameworks angewendet werden.
Wie integriere ich dies mit meinem bestehenden Design-System?
Ordnen Sie Ihre Design-Tokens (Spacing, Colors, Typography) den Patterns in dieser Skill zu, bevor Sie Komponenten generieren.
Kann ich die Barrierefreiheits-Anforderungen anpassen?
Ja, die Skill verwendet WCAG als Baseline, aber Sie können zusätzliche Anforderungen in Ihren Prompts angeben.
Ist diese Skill für Mobile-First-Entwicklung geeignet?
Ja, die Patterns unterstützen Responsive Design und Mobile-First-Ansätze mit entsprechenden Constraints.
Wie oft werden die Design-Patterns aktualisiert?
Die Patterns entwickeln sich basierend auf Community-Feedback und aufkommenden Best Practices in der UI-Entwicklung weiter.

Entwicklerdetails

Autor

sickn33

Lizenz

MIT

Repository

https://github.com/sickn33/antigravity-awesome-skills/tree/main/web-app/public/skills/ui-skills

Ref

main

Dateistruktur

📄 SKILL.md