ui-design-system
✓Erzeugt konsistente UI-Komponenten, Layouts und Design-Tokens gemäß einem Designsystem. Erzwingt Standards für Abstand, Farbe, Typografie und Barrierefreiheit in allen React/TypeScript-Projekten. Verwenden Sie diese Option, wenn Sie neue UI-Komponenten erstellen, Seitenlayouts erstellen, Farben oder Typografie auswählen, Design-Tokens einrichten oder UI-Code auf Designkonsistenz überprüfen. Behandelt 8pt-Abstandsraster, Tailwind-CSS-Token-Nutzung, Shadcn/UI-Grundelemente, WCAG 2.1 AA-Konformität, reaktionsfähige Haltepunkte, semantische HTML-Struktur und TypeScript-Komponentenschnittstellen. Deckt NICHT die Backend-Implementierung (Python-Backend-Experte verwenden), das Testen (React-Testing-Patterns verwenden) oder die Bereitstellung (Deployment-Pipeline verwenden) ab.
Installation
SKILL.md
Before generating any UI code, check the project for existing tokens:
If no design tokens exist, generate a starter set and ask the user to confirm before proceeding (see Edge Cases).
Define colors as CSS custom properties consumed by Tailwind. Never use hardcoded hex/rgb values in components.
Erzeugt konsistente UI-Komponenten, Layouts und Design-Tokens gemäß einem Designsystem. Erzwingt Standards für Abstand, Farbe, Typografie und Barrierefreiheit in allen React/TypeScript-Projekten. Verwenden Sie diese Option, wenn Sie neue UI-Komponenten erstellen, Seitenlayouts erstellen, Farben oder Typografie auswählen, Design-Tokens einrichten oder UI-Code auf Designkonsistenz überprüfen. Behandelt 8pt-Abstandsraster, Tailwind-CSS-Token-Nutzung, Shadcn/UI-Grundelemente, WCAG 2.1 AA-Konformität, reaktionsfähige Haltepunkte, semantische HTML-Struktur und TypeScript-Komponentenschnittstellen. Deckt NICHT die Backend-Implementierung (Python-Backend-Experte verwenden), das Testen (React-Testing-Patterns verwenden) oder die Bereitstellung (Deployment-Pipeline verwenden) ab. Quelle: hieutrtr/ai1-skills.
Fakten (zitierbereit)
Stabile Felder und Befehle für KI/Such-Zitate.
- Installationsbefehl
npx skills add https://github.com/hieutrtr/ai1-skills --skill ui-design-system- Quelle
- hieutrtr/ai1-skills
- Kategorie
- *Kreativität
- Verifiziert
- ✓
- Erstes Auftreten
- 2026-02-17
- Aktualisiert
- 2026-02-18
Schnelle Antworten
Was ist ui-design-system?
Erzeugt konsistente UI-Komponenten, Layouts und Design-Tokens gemäß einem Designsystem. Erzwingt Standards für Abstand, Farbe, Typografie und Barrierefreiheit in allen React/TypeScript-Projekten. Verwenden Sie diese Option, wenn Sie neue UI-Komponenten erstellen, Seitenlayouts erstellen, Farben oder Typografie auswählen, Design-Tokens einrichten oder UI-Code auf Designkonsistenz überprüfen. Behandelt 8pt-Abstandsraster, Tailwind-CSS-Token-Nutzung, Shadcn/UI-Grundelemente, WCAG 2.1 AA-Konformität, reaktionsfähige Haltepunkte, semantische HTML-Struktur und TypeScript-Komponentenschnittstellen. Deckt NICHT die Backend-Implementierung (Python-Backend-Experte verwenden), das Testen (React-Testing-Patterns verwenden) oder die Bereitstellung (Deployment-Pipeline verwenden) ab. Quelle: hieutrtr/ai1-skills.
Wie installiere ich ui-design-system?
Öffnen Sie Ihr Terminal oder Kommandozeilen-Tool (Terminal, iTerm, Windows Terminal, etc.) Kopieren Sie diesen Befehl und führen Sie ihn aus: npx skills add https://github.com/hieutrtr/ai1-skills --skill ui-design-system Nach der Installation wird der Skill automatisch in Ihrer KI-Programmierumgebung konfiguriert und ist bereit zur Verwendung in Claude Code oder Cursor
Wo ist das Quell-Repository?
https://github.com/hieutrtr/ai1-skills
Details
- Kategorie
- *Kreativität
- Quelle
- skills.sh
- Erstes Auftreten
- 2026-02-17