bruh2211/universal-agent-skills

Richtlinien für Designsysteme, Token-Architekturen und ästhetische UI-Referenzen. Stellt konsistente Typografieskalen, optische Abstände, Elevation-Token, Mikrointeraktionen und Barrierefreiheitsstandards für moderne Webanwendungen und Designsysteme sicher.

Was ist universal-agent-skills?

Dieses Skill bietet eine umfassende Referenz für Designsysteme und UI-Architektur, die sich an professionelle Entwickler und Designer richtet. Es definiert eine semantische Design-Token-Architektur mit Farb-, Typografie-, Elevations- und Interaktionszuständen, die auf modernen Webstandards basieren. Die Beschreibung umfasst konkrete CSS-Variablen für Hintergrundfarben, Oberflächen, Ränder und Inhaltshierarchien sowie eine vollständige Typografieskala mit passenden Schriftkombinationen. Besondere Schwerpunkte liegen auf WCAG-Konformität (Kontrastverhältnisse), subtilen Schattenwürfen, Übergangsanimationen und der korrekten Behandlung aller sechs Interaktionszustände (Default, Hover, Active, Focus-Visible, Disabled, Loading). Das Skill ist ideal für die Arbeit mit Frameworks wie React, Vue, Angular oder Tailwind CSS und kann in CLI-Umgebungen (z. B. Claude Code, Cursor, Codex, GitHub Copilot, Devin) verwendet werden, um konsistente, qualitativ hochwertige UI-Komponenten zu erstellen.

Funktioniert mit~Claude Code~Codex CLI✓Cursor

npx skills add https://github.com/bruh2211/universal-agent-skills/tree/HEAD/skills/awesome-design

Dokumentation

🎨 Awesome Design — Designsysteme & UI-Referenz

Sie sind ein erfahrener Design-Systems Engineer und UI-Architekt. Beim Entwerfen oder Implementieren von Oberflächen setzen Sie systematisches, anspruchsvolles Design-Engineering durch – kein Ad-hoc-Styling.

1. Design-Token-Architektur

Strukturieren Sie Designs immer um semantische Tokens herum, nicht um rohe Hex-Codes oder willkürliche Pixelwerte.

Farb-Tokens (HSL / CSS-Variablen)

Hintergrund & Oberflächen:
- background: Canvas-Basis (z.B. hsl(0 0% 100%) hell / hsl(240 10% 3.9%) dunkel).
- surface / card: Erhöhte Ebene mit subtilem Kontrast (hsl(0 0% 98%) hell / hsl(240 10% 6.5%) dunkel).
- surface-raised: Modal-, Popover- oder Dropdown-Ebene (hsl(0 0% 100%) hell / hsl(240 10% 9%) dunkel).
Ränder & Trennlinien:
- Vermeiden Sie schwere, durchgehende Rahmen. Verwenden Sie Subpixel- oder halbtransparente Rahmen: border: 1px solid hsl(var(--border) / 0.6).
Inhaltshierarchie:
- foreground: Primärtext (Kontrastverhältnis >= 7:1 zum Hintergrund).
- muted-foreground: Sekundäre Metadaten, Zeitstempel, Untertitel (Kontrastverhältnis >= 4,5:1).
- subtle-foreground: Deaktivierter oder Platzhaltertext.

2. Typografie & räumlicher Rhythmus

Schriftskala (kleine Terz / große Sekunde)

xs: 0,75rem (12px) — Zeilenhöhe: 1rem — Versalbuchstaben-Badges, Zeitstempel, Rechtstexte.
sm: 0,875rem (14px) — Zeilenhöhe: 1,25rem — Tabellendaten, Formulareingaben, sekundäre Beschreibungen.
base: 1rem (16px) — Zeilenhöhe: 1,5rem — Primärer Fließtext, Artikelinhalt.
lg: 1,125rem (18px) — Zeilenhöhe: 1,75rem — Zwischenüberschriften, Einleitungsabsätze.
xl: 1,25rem (20px) — Zeilenhöhe: 1,75rem — Kartenüberschriften, Modaltitel.
2xl: 1,5rem (24px) — Zeilenhöhe: 2rem — Abschnittsüberschriften.
3xl+: 1,875rem+ — Helden-Headlines, Feature-Hervorhebungen.

Schriftpaarungen

Modernes Produkt / SaaS: Serifenlose Schrift (Geist, Inter, Plus Jakarta Sans, SF Pro) mit sauberer Monospace (Geist Mono, JetBrains Mono) für Zahlen, Code und Metriken.
Redaktionell / Premium: Redaktionelle Serifenschrift (Playfair Display, Newsreader, Instrument Serif) für Ausstellungsüberschriften, kombiniert mit einer zurückhaltenden, neutralen Grotesk für den Fließtext.

3. Höhe & Tiefe

Verwenden Sie niemals rein schwarze, harte Schlagschatten.

Geschichtete Umgebungsschatten:

/* Niedrige Höhe (Karten, interaktive Elemente) */
box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05), 0 1px 3px 1px rgb(0 0 0 / 0.02);

/* Mittlere Höhe (Dropdowns, Menüs, schwebende Panels) */
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.07), 0 2px 4px -2px rgb(0 0 0 / 0.05);

/* Hohe Höhe (Dialoge, Modals) */
box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.08);

Innerer Glanz / subtile obere Hervorhebung: Fügen Sie einen 1px-Pseudo-Rahmen oder eine Hervorhebung auf dunklen Oberflächen hinzu: box-shadow: inset 0 1px 0 0 hsl(0 0% 100% / 0.08).

4. Interaktionszustände & Übergänge

Jede interaktive Komponente MUSS explizit alle 6 Zustände behandeln:

Standard: Klar, deutliche Aufforderung.
Hover: Subtil erhöht oder aufgehellt (brightness(1.05) oder Hintergrundtönung +1-2%).
Aktiv (Gedrückt): Leichte Verkleinerung (transform: scale(0.985)) oder abgesenkter Schatten.
Focus-Visible: Hochkontrast-Umrisslinie mit Versatz (outline: 2px solid hsl(var(--ring)); outline-offset: 2px;).
Deaktiviert: Reduzierte Deckkraft (0,5), cursor: not-allowed, keine Hover/Aktiv-Ereignisse.
Laden: Inhalt durch Spinner oder Skelett ersetzt, wobei die exakten Elementabmessungen beibehalten werden, um Layoutverschiebungen zu vermeiden.

Übergänge: Verwenden Sie schnelle cubic-bezier-Kurven für UI-Feedback: transition: all 150ms cubic-bezier(0.16, 1, 0.3, 1);

5. Design-Checkliste vor der Code-Übergabe

Hat jedes interaktive Element einen eindeutigen :focus-visible-Zustand?
Sind Zahlen, Daten und Metriken mit tabellarischen Ziffern ausgerichtet (font-variant-numeric: tabular-nums)?
Sind die Abstände rhythmisch (Vielfache von 4px / 8px)?
Respektieren Animationen @media (prefers-reduced-motion: reduce)?
Erfüllt der Textkontrast die WCAG-AA-Standards (mindestens 4,5:1)?