Agent Design Skills: UI-Feinschliff und Barrierefreiheit für KI-Agenten

X-PostAdham DannawaySammlung

Designer Adham Dannaway empfiehlt eine Sammlung spezialisierter Agent-Skills von Jakub Krehel. Das Paket erweitert KI-Agenten um konkretes Fachwissen in den Bereichen UI-Design, Typografie, OKLCH-Farben, Barrierefreiheit, Layout und Product Writing.

Das Wichtigste

  1. Installation der Skills über den Befehl 'npx skills add jakubkrehel/skills'.
  2. /better-ui und /better-typography behandeln visuelle Feinheiten wie optische Ausrichtung, hierarchische Radien, variable Fonts und Umbrüche.
  3. /better-colors unterstützt bei der Umstellung auf OKLCH, Palettengenerierung, Kontrastprüfungen und Gamut-Clamping.
  4. /better-accessibility optimiert Tastaturnavigation, Fokus-Zustände, Screenreader-Kompatibilität, ARIA und Klickflächen.
  5. /better-writing verbessert UX-Texte wie Fehlermeldungen, Onboarding-Texte, Button-Labels und leere Zustände.
  6. Zusätzliche Analyse-Werkzeuge wie /break und /variant ermöglichen Stresstests von Komponenten in allen Zuständen sowie automatisierte Variantengenerierung.

Warum das relevant ist

Standard-KI-Modelle erzeugen im Frontend-Code oft funktionale, aber optisch unausgereifte und unzugängliche Interfaces. Vordefinierte Prompts und Regelsätze schließen diese Lücke und verankern etablierte Design-System-Standards direkt in KI-unterstützten Entwicklungsworkflows.

Einordnung

Die Skill-Sammlung von Jakub Krehel setzt an typischen Schwachstellen automatisierter Code-Generierung an. Während Entwickler KI-Agenten bereits routiniert für Boilerplate und Logik einsetzen, vernachlässigen diese oft Details wie optisches Alignment, konsistente Microcopy oder WCAG-Konformität. Mit modularen Kommandos wie /break für Zustands-Stresstests und /better-interface für ganzheitliche Reviews fungieren die Skills als gezielte Qualitätsprüfung innerhalb von Frontend-Pipelines.

Original-Post

Adham Dannaway

@AdhamDannaway · 5. September 2026

🦾 A collection of agent design skills that help with animation, UI polish, accessibility and product writing. → t.co/WqxrypH0G2 By Jakub Krehel t.co/VWU4sNgem6

373 Likes2 Antworten492 Lesezeichen28.585 Aufrufe

Auf X ansehen
Ausgewählte Antworten (2)
  • @OlgaRotenberg @AdhamDannaway Those agent design skills are basically a tiny UI-polish gym for AI. Curating animation, accessibility, and product writing fits your Practical UI eye nicely. I’d rather show in DM; follow back if open, since X requires it, with examples and a quote for adhamdannaway . com
  • @Marwan_3atef @AdhamDannaway agent design skills for animation, a11y, and product writing is the pack I keep wishing default agent kits shipped with. bookmarked.

Erwähnte Links

Links und Tools aus diesem Beitrag

Zusammenfassung von KI erstellt (Gemini 3.8 Flash, 27. September 2026). Sie kann Fehler enthalten – maßgeblich ist die Originalquelle.

Ähnliche Einträge

Inhaltlich ähnlich, ermittelt über die KI-Suche.

  • Link:Jakub Krehel

    Skills: Agenten-Toolkit zur Optimierung von UI und UX

    Jakub Krehel stellt eine Sammlung spezialisierter Agent Skills vor, die Frontend-Teams bei Interface-Details wie Typografie, OKLCH-Farben, Barrierefreiheit, Layouts und Microcopy unterstützen.

    KI & AI· Tool

  • X-Post:Adham Dannaway

    Design Skills for AI Agents: UX- und UI-Wissen für KI-Coding-Tools

    Adham Dannaway empfiehlt eine von Carlos Cuéllar erstellte Sammlung strukturierter Design-Skills für Coding-Agents wie Claude Code, Cursor und Codex. Das Repository liefert fundierte Heuristiken, Accessibility-Regeln nach WCAG 2.2 und Designsystem-Standards direkt in den Arbeitskontext der KI.

    100Lesezeichen5174Aufrufe

    KI & AI· Sammlung

  • X-Post:Kiyotaka

    Fünf UI-Skills für Design Engineers mit KI-Coding-Agenten

    Kiyotaka (@SubhanHQ) empfiehlt fünf spezialisierte Regelwerke („Skills“) für KI-Agenten, die Frontend-Entwicklern bei UI-Polishing, Animationen, Barrierefreiheit und visueller Präzision helfen.

    986Lesezeichen39.486Aufrufe

    KI & AI· Sammlung

  • Repository:jakubkrehel/skills

    jakubkrehel/skills: Agent-Skills für UI- und Design-Engineering

    jakubkrehel/skills ist eine kuratierte Sammlung modularer Agent-Skills, die KI-Assistenten wie Claude Code fundiertes Wissen über Interface-Design, Typografie, Barrierefreiheit und UI-Engineering bereitstellen.

    5773SterneMarkdown

    KI & AI· Tool

  • Link:cuellarfr

    Design Skills: Kuratierte UI- und UX-Skills für KI-Agenten

    cuellarfr/design-skills stellt zehn strukturierte Wissenspakete für Entwicklungsagenten wie Claude Code, Cursor, Codex und OpenCode bereit. Die Sammlung deckt Disziplinen von UX Research über Barrierefreiheit bis hin zu Design Systems und UX Writing ab.

    KI & AI· Sammlung

Zurück zur Wissensbasis

Sprechen wir über Ihr Projekt.

Kontakt

Standorte

  • Mattersburg
    Johann Nepomuk Bergerstraße 7/2/14
    7210 Mattersburg, Austria
  • Wien
    Ungargasse 64-66/3/404
    1030 Wien, Austria

Ein Teil von diesem Inhalt wurde mit KI gemacht.