← Zurück zum Katalog

Team · Version 1.0.0

Frontend und Designsysteme

Teammitglieder: 10

Entwickle barrierefreie Komponenten, konsistente Designsysteme und verlässliche Oberflächen für dein Framework.

Was bringt es dir?

Details… Weniger anzeigen

Frontend und Designsysteme

Entwickle barrierefreie Komponenten, konsistente Designsysteme und verlässliche Oberflächen für dein Framework.

Mitglieder: Aria, Basil, Cora, Dorian, Elara, Henrik, Iona, Leif, Maeve und Remy. Enthält ihre vollständigen Profile, Porträts und 60 gemeinsam verwendete unterstützende Skills.

Installiere das Team und ordne es einem Projekt zu. Die Spezialisten und ihre Skill-Abhängigkeiten werden gemeinsam bereitgestellt.

Was enthalten ist

Agenten 10

Teams 1

Frontend and design systems

Skills in diesem Team 60

Entdecke die Skills dieses Teams. Öffne eine Karte für eine verständliche Erklärung, ein praktisches Beispiel und die Agenten, die den Skill nutzen.

Design-Tokens verwalten

Regelt Verantwortung, Aliase und Versionierung, damit Designentscheidungen zuverlässig bei bestehenden Produkten ankommen.

design-token-governance

Enthaltene Dateien 1

SKILL.md

Visuelle Regressionstests

Erstellt stabile Bildvergleiche zur Trennung beabsichtigter Änderungen von Defekten ohne Bilder als Interaktionsnachweis zu behandeln.

visual-regression-testing

Enthaltene Dateien 1

SKILL.md

Design-Tokens und Themen

Verknüpft visuelle Werte mit semantischen Oberflächenrollen für konsistente Themen und Komponenten.

design-tokens-theming

Enthaltene Dateien 1

SKILL.md

Mehrere Marken und Dunkelmodus

Ermöglicht konsistente Theme-Wechsel mit semantischen Farben und Browserintegration statt getrennter fragiler Komponentenstile.

multi-brand-dark-mode

Enthaltene Dateien 1

SKILL.md

Gemeinsame Komponenten paketieren

Paketiert UI-Komponenten und Stile als klare versionierte Verträge für unterschiedliche Anwendungen und Buildumgebungen.

component-packaging-versioning

Enthaltene Dateien 1

SKILL.md

Designsystem-Komponenten migrieren

Ersetzt alte Oberflächenelemente in prüfbaren Schritten und entfernt Altbestand erst nach bestätigter Übernahme.

design-system-migration

Enthaltene Dateien 1

SKILL.md

Komponentendokumentation

Erklärt Komponentenauswahl und richtige Verwendung mit realistischen Beispielen, Tastaturverhalten und ausdrücklichen Grenzen.

component-documentation-examples

Enthaltene Dateien 1

SKILL.md

Barrierefreie Headless-Komponenten

Prüft, ob zusammengesetzte ungestaltete Grundkomponenten Tastatur-, Namens- und Fokusverhalten im Produkt erhalten.

headless-component-accessibility

Enthaltene Dateien 1

SKILL.md

Nachweise zur Barrierefreiheit

Erstellt eine Barrierefreiheitsbewertung, die automatische Befunde, manuelle Bedienprüfungen und tatsächliche Hilfstechnologie-Nachweise unterscheidet.

accessibility-testing-evidence

Enthaltene Dateien 1

SKILL.md

Tastatur und Fokus

Gestaltet vorhersehbare Tastaturnavigation und sichtbaren Fokus über Widgets, Fenster, Löschungen und Seitenwechsel hinweg.

keyboard-focus-engineering

Enthaltene Dateien 1

SKILL.md

Screenreader-Kompatibilität

Prüft tatsächliches Lesen und Bedienen durch Hilfstechnologie einschließlich Navigationsmodi und verständlicher Ansagen.

screen-reader-compatibility

Enthaltene Dateien 1

SKILL.md

Kombinierbare Komponenten-APIs

Gestaltet gemeinsame Komponenten mit kleiner vorhersehbarer Schnittstelle und flexibler Zusammensetzung unter Erhalt nativer Bedienung.

component-api-composition

Enthaltene Dateien 1

SKILL.md

Barrierefreie Formulare und Fehler

Gestaltet Formulare mit dauerhaften Beschriftungen, hilfreichen Hinweisen und auffindbaren, korrigierbaren Fehlermeldungen.

accessible-forms-validation

Enthaltene Dateien 1

SKILL.md

Komponentenwerkstätten und Storybook

Zeigt relevante Zustände in vorhandener Vorschau mit denselben Grundlagen wie die Produktionsoberfläche.

storybook-component-workbenches

Enthaltene Dateien 1

SKILL.md

Designsystem einführen

Bewertet Designsysteme anhand derselben repräsentativen Produktaufgabe und macht Anpassungs- sowie Wartungspflichten sichtbar.

enterprise-design-system-adoption

Enthaltene Dateien 1

SKILL.md

Abhängigkeitsupdates verifizieren

Belegt funktionierende Abhängigkeitsupdates durch Lockfileprüfung, reproduzierbare Builds und tatsächliche Integrationspfade.

compatibility-regression-verification

Enthaltene Dateien 1

SKILL.md

Wiederverwendbare Komponenten finden

Findet tatsächlich gemeinsame Oberflächenmuster anhand realer Nutzung vor neuen Grundkomponenten oder Designsystemerweiterungen.

component-inventory-discovery

Enthaltene Dateien 1

SKILL.md

Lizenz- und Lieferkettenrisiken

Prüft Pflichten und Betriebsanforderungen von Abhängigkeiten zusammen mit Herkunft und Installationsverhalten.

license-supply-chain-operational-risk

Enthaltene Dateien 1

SKILL.md

Frameworkgerechte Komponenten

Erhält gemeinsame visuelle Regeln und implementiert Komponenten nach den Konventionen des tatsächlich verwendeten Frameworks.

framework-specific-components

Enthaltene Dateien 1

SKILL.md

Technische Lösungen vergleichen

Unterstützt Entscheidungen anhand von Entwicklungsaufwand, laufender Wartung und den Folgen eines späteren Kurswechsels.

trade-off-lifecycle-cost-analysis

Enthaltene Dateien 1

SKILL.md

Grundlagen für Geschäftsprojekte

Hilft bei der Auswahl einer Anwendungsgrundlage durch Vergleich tatsächlicher Ablaufeignung, Betriebsaufwand und Eigenentwicklungsalternativen.

business-project-foundations

Enthaltene Dateien 4

SKILL.md
references/README.md
references/adoption-checklist.md
references/repositories.json

React- und Next.js-Servergrenzen

Ordnet Zustand und Änderungen zwischen Browser und Server mit klaren Aktualitäts- und Zugriffsregeln.

react-next-server-boundaries

Enthaltene Dateien 1

SKILL.md

Frontend-Überprüfung

Prüft Frontendänderungen mit Projektwerkzeugen und echtem Browserverhalten und benennt den Umfang der Nachweise genau.

frontend-verification

Enthaltene Dateien 2

LICENSE.txt
SKILL.md

Serverseitige Richtlinien durchsetzen

Wendet dieselben Rechte auf Aktionen, Abfragen, Exporte und Hintergrundarbeit an und verweigert unklaren Kontext.

server-side-policy-enforcement

Enthaltene Dateien 1

SKILL.md

Mandantensichere Caches, Suche und Dateien

Erweitert Mandantentrennung über Datenbankzeilen hinaus auf Caches, Suchvorschläge, Indizes und Dateizugriff.

tenant-aware-cache-search-files

Enthaltene Dateien 1

SKILL.md

Typsichere Verträge

Stärkt Verträge an unvertrauenswürdigen Grenzen und modelliert Fachzustände so, dass ungültige Kombinationen schwerer entstehen.

type-safety-contracts

Enthaltene Dateien 1

SKILL.md

Leistungsmessungen analysieren

Interpretiert Latenz, tatsächlich erreichte Last und Serverdaten zur Erklärung von Engpässen und nutzbarem Durchsatz.

performance-measurement-analysis

Enthaltene Dateien 1

SKILL.md

Vue- und Nuxt-Anfragen isolieren

Trennt private Nutzerdaten beim Serverrendering und prüft, ob Browserstart und Navigation die richtigen Inhalte erhalten.

vue-nuxt-request-isolation

Enthaltene Dateien 1

SKILL.md

Mandantentrennung überprüfen

Prüft Mandantengrenzen adversariell mit vergleichbaren Daten zweier Arbeitsbereiche einschließlich indirekter Beziehungen und gemeinsamer Infrastruktur.

tenant-isolation-verification

Enthaltene Dateien 1

SKILL.md

Ein bestehendes Vue-Projekt verstehen

Erkundet ein Vue-Projekt, damit neue Funktionen zu tatsächlichen Versionen, vorhandenen Bausteinen und Zuständigkeiten für Daten passen.

vue-codebase-discovery

Enthaltene Dateien 2

LICENSE.txt
SKILL.md

Vorhersehbare Vue-Zustandsänderungen

Ordnet reaktive Daten so, dass Ansichten zuverlässig aktualisieren, ohne doppelte Werte, Watcher-Schleifen oder zurückgelassene Hintergrundarbeit.

vue-reactivity

Enthaltene Dateien 2

LICENSE.txt
SKILL.md

Wiederverwendbares Vue-Verhalten

Bündelt wiederkehrende reaktive Logik in fokussierten Funktionen mit klaren Eingaben, ausdrücklichen Aktionen und automatischer Ressourcenfreigabe.

vue-composables

Enthaltene Dateien 2

LICENSE.txt
SKILL.md

Gemeinsamer Zustand mit Pinia

Ordnet Vue-Zustand passenden Bereichen zu und nutzt Pinia für tatsächlich ansichtsübergreifende Daten.

pinia-state

Enthaltene Dateien 2

LICENSE.txt
SKILL.md

Schnelle Vue-Oberflächen und konsistentes Rendering

Reduziert unnötige Arbeit in Vue-Ansichten und hält servergenerierte Seiten mit der ersten Browserdarstellung konsistent.

vue-performance-ssr

Enthaltene Dateien 2

LICENSE.txt
SKILL.md

Angular-Geschäftsformulare

Gestaltet Angular-Bearbeitungsabläufe anhand von Feldbeziehungen, Serverregeln, Berechtigungen und behandelbaren Speicherfehlern.

angular-business-form-architecture

Enthaltene Dateien 1

SKILL.md

Angular-Änderungen überprüfen

Prüft Templates, gezielte Verhaltenstests und echte Browserabläufe vor einer belastbaren Fertigmeldung.

angular-verification

Enthaltene Dateien 2

LICENSE.txt
SKILL.md

Angular-Codebasis erkunden

Ermittelt installierte Abhängigkeiten, Architektur und bestehende Konventionen vor einer passenden, gezielten Änderung.

angular-codebase-discovery

Enthaltene Dateien 2

LICENSE.txt
SKILL.md

Angular Reactive Forms

Implementiert typisierte Formulare, feldübergreifende Regeln und Serverrückmeldungen mit nachvollziehbarem Absendeverhalten.

angular-reactive-forms

Enthaltene Dateien 2

LICENSE.txt
SKILL.md

Angular-RxJS-Datenflüsse

Koordiniert asynchrone Angular-Ereignisse mit gezieltem Abbruch, Reihenfolge, Fehlerbehandlung und Abonnement-Lebensdauer.

angular-rxjs

Enthaltene Dateien 2

LICENSE.txt
SKILL.md

Feld- und Beziehungsrechte

Steuert sichtbare und bearbeitbare Daten anhand von Eigentum, Abteilung und Teambeziehungen.

field-relationship-permissions

Enthaltene Dateien 1

SKILL.md

Progressive SvelteKit-Abläufe

Baut servervalidierte Formulare mit Nutzen vor JavaScript-Erweiterung und erhaltenen Eingaben bei Fehlern.

sveltekit-progressive-workflows

Enthaltene Dateien 1

SKILL.md

Semantisches HTML und zugängliche Namen

Macht Struktur, Bedienelemente und Zustände durch sinnvolles natives HTML für Hilfstechnologien verständlich.

semantic-html-accessible-names

Enthaltene Dateien 1

SKILL.md

Browser- und Geräteprüfung

Prüft responsive Ansichten und Interaktionen bei festgelegten Browsergrößen, Eingabemethoden und Navigationszuständen.

browser-cross-device-qa

Enthaltene Dateien 1

SKILL.md

Designsystem-Einführung planen

Plant schrittweise Einführung über Teams hinweg mit Verantwortung, Kompatibilität und einem repräsentativen migrierten Ablauf.

design-system-adoption-migration

Enthaltene Dateien 1

SKILL.md

Bestandsverhalten und Regression prüfen

Hält vorhandenes Verhalten an stabilen Schnittstellen fest, um unbeabsichtigte Strukturfolgen zu erkennen.

characterization-regression-checks

Enthaltene Dateien 1

SKILL.md

Codemods und veraltete APIs

Wendet überprüfbare automatische Migrationen an und kontrolliert semantische Fälle, die mechanische Änderungen übersehen können.

codemods-deprecation-cleanup

Enthaltene Dateien 1

SKILL.md

CRM-Datentabellen

Hält große CRM-Tabellen, Auswahl, Exporte und Sammelaktionen mit demselben berechtigten Datenbestand in Einklang.

crm-data-grid-engineering

Enthaltene Dateien 1

SKILL.md

Große Datenmengen darstellen

Reduziert und visualisiert große Datenbestände unter Erhalt der für die Analyse wichtigen Merkmale.

large-dataset-rendering

Enthaltene Dateien 1

SKILL.md

Bedeutung von Kennzahlen prüfen

Prüft, ob eine Kennzahl die beabsichtigte Frage mit richtiger Grundgesamtheit, Einheit und Zeitabgrenzung beantwortet.

data-semantics-metric-validation

Enthaltene Dateien 1

SKILL.md

Diagrammdaten und Exporte

Macht visualisierte Zahlen prüfbar und exportierbar unter Erhalt von Filtern, Berechtigungen und Tabellensicherheit.

data-export-tabular-alternatives

Enthaltene Dateien 1

SKILL.md

Eigenständiges Oberflächendesign

Entwickelt eine Gestaltung aus Produktthema, echten Inhalten und Zielgruppe unter Beachtung vorhandener Markenregeln.

frontend-design

Enthaltene Dateien 2

LICENSE.txt
SKILL.md

Frontend-Umsetzung

Setzt Entwürfe als nutzbare Oberflächen mit verständlichen Lade- und Fehlerzuständen, zuverlässigen Aktionen und passenden Layouts für verschiedene Bildschirme um.

frontend-ui-engineering

Enthaltene Dateien 2

LICENSE.txt
SKILL.md

Barrierefreie Oberflächen

Macht Oberflächen mit Tastatur und Screenreader nutzbar – mit gut lesbaren Kontrasten, klaren Beschriftungen und verständlichen Fehlermeldungen.

web-accessibility

Enthaltene Dateien 1

SKILL.md

Visuelle Oberflächenprüfung

Findet sichtbare Oberflächenfehler in echten Browserzuständen, Größen und Extremdaten vor der Fertigmeldung.

visual-qa

Enthaltene Dateien 2

LICENSE.txt
SKILL.md

Designsystem erweitern

Entwickelt konsistente Oberflächengrundlagen aus vorhandenen Komponenten, Tokens und tatsächlichem Wiederholungsbedarf.

design-system

Enthaltene Dateien 2

LICENSE.txt
SKILL.md

Sinnvolle Oberflächenanimationen

Macht Zustandswechsel und Rückmeldungen durch zurückhaltende Bewegung verständlich, ohne häufige Aktionen unnötig zu verzögern.

ui-motion

Enthaltene Dateien 2

LICENSE.txt
SKILL.md

Briefings für Bildressourcen

Übersetzt den Kommunikationsbedarf einer Seite in ein umsetzbares Bildbriefing mit Komposition, Ausgabeformaten und Markengrenzen.

visual-asset-brief

Enthaltene Dateien 1

SKILL.md

Schnellere Webseiten mit Messnachweis

Findet tatsächliche Ursachen langsamer Seiten und verzögerter Interaktionen und prüft Verbesserungen mit vergleichbaren Vorher-Nachher-Messungen.

web-performance

Enthaltene Dateien 1

SKILL.md

Landingpage-Konversion

Richtet eine Landingpage auf ein klares Besucherergebnis, wahrheitsgemäße Belege und eine gezielte nächste Aktion aus.

landing-page-conversion

Enthaltene Dateien 1

SKILL.md

Mobile Anwendungserfahrung

Gestaltet vollständige mobile Abläufe nach Plattformkonventionen, Berührung, Netzbedingungen und klaren Rückmeldungen.

mobile-app-ux

Enthaltene Dateien 1

SKILL.md

Voraussetzungen

Orqestria auf deinem Computer installiert.
Ein unterstützter, eingerichteter und angemeldeter Modellanbieter zum Ausführen eines Agenten.

Noch nicht in deiner App geprüft In Orqestria installieren

Die App zeigt vorhandene Elemente an. Vor der Installation kannst du die fehlenden Elemente prüfen.

Paket herunterladen

Orqestria herunterladen

Lade die App herunter und kehre über den Fortsetzungslink zu dieser Version zurück. Du kannst das heruntergeladene Paket auch in der App öffnen.

Orqestria für Mac herunterladen

Fortsetzungslink

Fortsetzungslink Genauer Installationslink

Version 1.0.0+3cb395e5dd199819288cdcb6

Die Installation erstellt eine lokale Kopie. Prüfe alle Dateien und Voraussetzungen in der App. Importierte Skills sind nicht vertrauenswürdig; die Installation führt keine Skripte aus.