frontend-ui-dark-ts
Erstellen dunkler React-UIs
Erstellen Sie moderne dunkle React-Anwendungen mit Tailwind CSS, Glassmorphismus-Effekten und flüssigen Framer Motion-Animationen für Dashboards und Admin-Panels.
Die Skill-ZIP herunterladen
In Claude hochladen
Gehe zu Einstellungen → Fähigkeiten → Skills → Skill hochladen
Einschalten und loslegen
Teste es
Verwendung von "frontend-ui-dark-ts". Erstellen einer dunklen Button-Komponente mit lila Marken-Farbhintergrund
Erwartetes Ergebnis:
Eine Button-Komponente mit bg-brand mit hover:bg-brand-hover, passenden Focus-Ring-Stilen und touch-freundlicher Größe
Verwendung von "frontend-ui-dark-ts". undefined
Erwartetes Ergebnis:
Eine Sidebar mit glass-panel-Klasse mit backdrop-blur-lg, dunklem Hintergrund und subtilem Rahmen-Styling
Verwendung von "frontend-ui-dark-ts". Einem Modal einen Fade-In-Animation hinzufügen
Erwartetes Ergebnis:
Modal mit anfänglicher Opazität 0, animiert zu Opazität 1, mit Framer Motion mit 0,3s easeOut-Übergang
Sicherheitsaudit
SicherStatic analysis flagged 69 potential issues, all of which are false positives. The flagged patterns (shell commands, hardcoded URLs, path traversal, weak crypto) are actually documentation examples and code templates in SKILL.md. No malicious code or security risks detected. This is a legitimate frontend UI skill for building dark-themed React applications.
Risikofaktoren
⚡ Enthält Skripte (1)
⚙️ Externe Befehle (53)
🌐 Netzwerkzugriff (3)
📁 Dateisystemzugriff (4)
Qualitätsbewertung
Was du bauen kannst
Ein dunkles Admin-Dashboard erstellen
Erstellen Sie ein professionelles Admin-Panel mit Sidebar-Navigation, Datentabellen und Statusindikatoren unter Verwendung der dunklen Design-Muster.
Eine Datenvisualisierungs-Oberfläche gestalten
Bauen Sie ein datenreiches Dashboard mit glassmorbhen Karten, sanften Übergängen und individuellen Farbtokens für die Datenvisualisierung.
Eine moderne Landing Page implementieren
Erstellen Sie eine elegante Landing Page mit animierten Abschnitten, Overlay-Modals mit Glas-Effekt und polierten Mikro-Interaktionen.
Probiere diese Prompts
Verwenden Sie die frontend-ui-dark-ts Skill, um ein neues React-Projekt mit Tailwind CSS Dark Theme-Konfiguration einzurichten. Fügen Sie individuelle Markenfarben, neutrale Hintergründe und Textfarb-Tokens hinzu.
Erstellen Sie eine glassmorphe Kartenkomponente mit den frontend-ui-dark-ts Mustern. Beinhaltet Backdrop-Blur, subtile Rahmen und passende Dark Theme-Farben.
Implementieren Sie flüssige Seitenübergänge mit Framer Motion. Verwenden Sie die Fade-In- und Slide-Up-Varianten aus der frontend-ui-dark-ts Skill für Routenänderungen.
Bauen Sie ein komplettes Dashboard-Layout mit App-Shell, Sidebar-Navigation, Seitenkopf und responsiven Glass-Karten. Beinhaltet Status-Badges und Farbtokens für Datenvisualisierung.
Bewährte Verfahren
- Verwenden Sie semantische Farb-Tokens (text-primary, text-secondary) anstatt fest kodierter Farben für bessere Wartbarkeit
- Setzen Sie Glass-Effekte sparsam ein - übermäßige Verwendung kann Lesbarkeit und Performance beeinträchtigen
- Testen Sie Animationen auf echten Geräten - reduzierte Bewegungs-Präferenzen sollten berücksichtigt werden
Vermeiden
- Vermeiden Sie rein schwarze Hintergründe - verwenden Sie neutral-bg-Farben mit passenden Kontrastverhältnissen
- Wenden Sie den Glass-Effekt nicht auf alle Elemente an - reservieren Sie ihn für erhöhte Oberflächen und Overlays
- Vermeiden Sie übermäßige Animationskomplexität, die Seitenladen oder Interaktions-Responsivität beeinträchtigt
Häufig gestellte Fragen
Funktioniert dies mit Create React App oder nur mit Vite?
Kann ich individuelle Farben anstelle der Standard-Markenfarbe Lila verwenden?
Funktionieren die Glass-Effekte in allen Browsern?
Wie füge ich weitere Animationsvarianten hinzu?
Kann ich dies mit TypeScript verwenden?
Ist diese Skill kompatibel mit Claude Code und Codex?
Entwicklerdetails
Autor
sickn33Lizenz
MIT
Repository
https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/frontend-ui-dark-tsRef
main
Dateistruktur
📄 SKILL.md