Communitygithub.com

digital-agency-design-system-apply

Unterstützt das Entwerfen, Implementieren und Überprüfen von Web-UI basierend auf dem offiziellen Markdown des Designsystems der Digitalen Agentur (Deutschland).

Was ist digital-agency-design-system-apply?

Diese Fähigkeit (Skill) ermöglicht es einem KI-Agenten, auf der Grundlage des offiziellen, genehmigten Markdown-Snapshots des Designsystems der Digitalen Agentur (Deutschland) zu arbeiten. Sie trennt die normale Arbeit von der Überprüfung offizieller Aktualisierungen und aktiviert Update-Kandidaten erst nach ausdrücklicher Zustimmung des Benutzers. Der Skill unterstützt die Klassifizierung von Aufgaben (Erstellen, Ändern, Überprüfen), die gezielte Auswahl von Referenzmaterialien und die Generierung von Begründungen für Designentscheidungen. Er ist in erster Linie für die Verwendung in Codex-Umgebungen konzipiert und umfasst Skripte zum Verwalten, Durchsuchen und Überprüfen der Designsystem-Dokumentation. Der Skill ist inoffiziell und nicht von der Digitalen Agentur bereitgestellt, genehmigt oder empfohlen.

Funktioniert mit✓Claude Code✓Codex CLI~Cursor
npx skills add Hideki-Kobayashi/apply-digital-agency-design-system

In Ihrer bevorzugten KI fragen

Öffnet einen neuen Chat, in dem dieser Agent-Skill bereits geladen ist.

Dokumentation

Designsystem der Digitalen Agentur anwenden

Wähle aus dem genehmigten offiziellen Markdown-Snapshot nur die für den Auftrag erforderlichen Begründungen aus und wende sie an. Trenne die normale Arbeit von der Überprüfung offizieller Aktualisierungen und aktualisiere Kandidaten nicht ohne Zustimmung des Benutzers. Im Folgenden wird <skill-root> durch den absoluten Pfad des Verzeichnisses ersetzt, in dem sich diese SKILL.md befindet. Im Folgenden wird <python> durch den Befehl ersetzt, der Python 3.10 oder höher ausführen kann. Unter macOS und Linux wird normalerweise python3 verwendet, unter Windows normalerweise py -3.

Grenzen der Informationen

  • Der active_snapshot.path in references/source-manifest.json ist der gültige Snapshot, der für die normale Arbeit verwendet wird.
  • Die source-index.json des gültigen Snapshots, references/task-index.md und references/foundation-map.md sind abgeleitete Materialien. Die offizielle Bedeutung ist im entsprechenden Markdown des gültigen Snapshots zu überprüfen.
  • Das offizielle Markdown ist eine für KI-Referenzen neu zusammengestellte Darstellung und kein vollständiger Ersatz für die offizielle Website. Wenn die lokalen Materialien die erforderliche Beschreibung nicht enthalten, wird dies als unbestätigter Punkt gemeldet.
  • Dieser Skill ist inoffiziell und stellt keine Bereitstellung, Genehmigung, Partnerschaft oder Empfehlung durch die Digitale Agentur dar.
  • Die aktuellen Werte eines bestehenden Projekts werden aus CSS-Variablen, Theme-Einstellungen, gemeinsamen Stilen und gemeinsamen Komponenten ermittelt. Sie werden nicht innerhalb des Skills dupliziert.
  • Erstellen, Ändern und Überprüfen sind Kategorien von Bearbeitungsberechtigungen. Neuerstellung, bestehende Überarbeitung und Einzelkomponenten sind Kategorien der Materialauswahl und werden nicht verwechselt.

Aktualisierungsfrist beim Start

Führe zuerst den folgenden Befehl aus. Dieser Befehl liest nur lokale Dateien und stellt keine Netzwerkverbindung her.

<python> <skill-root>/scripts/manage_upstream.py status

Der status der Ausgabe wird als status_at_start gespeichert und während des gesamten Auftrags beibehalten.

  • fresh: Keine Aktualisierungsbenachrichtigung ausgeben, mit der normalen Arbeit fortfahren.
  • due, never_checked, unknown: Die normale Arbeit nicht unterbrechen, den Status am Ende erneut überprüfen.
  • Wenn der Benutzer von Anfang an explizit z. B. „Auf neueste Version prüfen“ angibt: Die explizite Anfrage als Zustimmung zur externen Überprüfung behandeln und mit dem Wartungsverfahren fortfahren.

Die Frist wird ab last_successful_check_at auf 30 Tage festgelegt. Das Datum des Vorschlags, das Datum des Fehlschlags und das daraus abgeleitete nächste Überprüfungsdatum sind kein Startpunkt für die Frist.

Normale Arbeit

  1. Klassifiziere den Auftrag in Erstellen, Ändern oder Überprüfen und lege den zulässigen Bearbeitungsumfang fest.
  2. Überprüfe die technische Konfiguration, vorhandene Stile, Markeneinschränkungen und Bildschirmstrukturen des Ziels.
  3. Bestimme den Pfad der Materialauswahl in der folgenden Prioritätsreihenfolge.
    • Beschränkt sich das Ziel auf eine einzelne UI-Komponente und deren Zustände, wird es als Einzelkomponente behandelt.
    • Sind bereits gemeinsame Stile vorhanden, wird es als bestehende Überarbeitung behandelt.
    • Andernfalls wird es als Neuerstellung behandelt.
  4. Wähle das Zieldokument aus references/task-index.md aus. Falls nicht zutreffend, suche mit dem folgenden Befehl im gültigen Snapshot.
<python> <skill-root>/scripts/search_guidance.py \
  --query '<Suchbegriffe durch Leerzeichen getrennt>' \
  --manifest-file <skill-root>/references/source-manifest.json
  1. Verwende references/foundation-map.md entsprechend dem Pfad der Materialauswahl.
    • Neuerstellung: Teile die 8 Kategorien in anzuwenden, nicht zutreffend und zurückgestellt ein und lies das offizielle Markdown für die Kategorien, deren Werte bestimmt werden müssen.
    • Bestehende Überarbeitung: Untersuche zuerst die vorhandenen Werte und lies nur die betroffenen Kategorien. Teile diese in beibehalten, migrieren und beabsichtigte Abweichungen ein.
    • Einzelkomponente: Lies nur die vorhandenen gemeinsamen Standards, die Zielkomponente und das betroffene grundlegende Design. Lege gemeinsame Werte nicht innerhalb der Komponente neu fest.
  2. Unterscheide zwischen offiziellen Optionen, Standardwerten, Beispielen, Prinzipien, Anforderungen und festen Werten. Ordne den übernommenen Werten die Begründungen zu.
  3. Implementiere mit der vorhandenen technischen Konfiguration. Wende offizielle Beispiele nicht als einheitliche feste Werte an und lockere offizielle Anforderungen nicht als ästhetische Vorlieben.
  4. Überprüfe je nach Ziel mehrere Bildschirmbreiten, Tastaturbedienung, Fokus, Zustandsänderungen, Vergrößerung und Refkow.
  5. Bei Überprüfungsaufträgen werden keine Dateien geändert, sondern nur begründete Hinweise zurückgegeben.

Abschlussbericht der normalen Arbeit

Berichte kurz Folgendes:

  • Referenzversion: Snapshot-ID aus der source-manifest.json, Version des Designsystems der Digitalen Agentur, Veröffentlichungsdatum des Markdowns.
  • Überprüfter Umfang: Gelesene offizielle Dokumente und durchgeführte Überprüfungen.
  • Unbestätigte Punkte: Nicht überprüfter Umfang, z. B. echte Geräte, unterstützende Technologien, aktuelle externe Seiten.
  • Abweichungen: Aus projektspezifischen Gründen vom offiziellen Beispiel oder der offiziellen Empfehlung geänderte Inhalte.

Führe den status-Befehl nur dann direkt vor dem Bericht erneut aus, wenn der Status beim Start due, never_checked oder unknown war. Wenn er durch eine andere Verarbeitung nicht fresh geworden ist, schlage am Ende des Abschlussberichts einmalig eine Aktualisierungsüberprüfung vor.

Seit der letzten offiziellen Aktualisierungsüberprüfung sind mehr als 30 Tage vergangen. Diese Aufgabe wurde mit der aktuellen genehmigten Version abgeschlossen. Möchten Sie auch eine Aktualisierungsüberprüfung durchführen?

Bei never_checked oder unknown wird die verstrichene Zeit nicht angegeben, sondern der Grund genannt. Der Vorschlag allein führt weder zu externer Kommunikation noch zu einer Statusaktualisierung. Wenn der Benutzer ablehnt, wird das Ablehnungsdatum nicht gespeichert, sodass der Vorschlag bei zukünftigen Gelegenheiten erneut unterbreitet wird, bis eine erfolgreiche Überprüfung stattgefunden hat.

Offizielle Aktualisierungsüberprüfung

Führe Folgendes nur aus, wenn der Benutzer zustimmt. --network-approved wird nur hinzugefügt, nachdem die Zustimmung des Benutzers bestätigt wurde. Wenn auch innerhalb von weniger als 30 Tagen explizit die neueste Version überprüft werden soll, wird --force hinzugefügt.

Überlasse das Abruf-Backend dem Standard auto. Wenn auto ax findet, überträgt es das Abrufen der offiziellen Seite, die Link-Extraktion und das ZIP-Speichern an ax. Andernfalls verwendet es die Python-Standardbibliothek. ax wird empfohlen, ist aber optional. Seine Installation ist keine Voraussetzung für die Aktualisierungsüberprüfung. Der ax-Pfad validiert die endgültige URL nach der Weiterleitung, kann jedoch die zwischengeschalteten Weiterleitungen vor der Kommunikation nicht validieren. Wenn auch die Weiterleitungen vorab eingeschränkt werden müssen, verwende --fetch-backend stdlib. Wenn ein einmal gewähltes Backend fehlschlägt, wird nicht implizit auf ein anderes Backend umgeschaltet. Die Überprüfung der abgerufenen URL, Größe und des ZIP-Formats, die Hash-Berechnung, die Differenzerstellung und die Statusverwaltung erfolgen in Python. Füge --fetch-backend ax oder --fetch-backend stdlib nur hinzu, wenn die Methode für Testzwecke usw. festgelegt werden soll.

<python> <skill-root>/scripts/manage_upstream.py check \
  --network-approved
  • unchanged: Aktualisiere das erfolgreiche Überprüfungsdatum und melde das Abruf-Backend und die fehlenden Änderungen.
  • candidate_created oder candidate_exists: Melde das Abruf-Backend, die Kandidaten-ID, die Abrufquelle, den Hash sowie die Anzahl der hinzugefügten, geänderten und gelöschten Elemente.
  • skipped_fresh: Melde, dass die externe Überprüfung aufgrund von weniger als 30 Tagen übersprungen wurde.
  • Fehlschlag: Ändere weder last_successful_check_at noch den gültigen Snapshot und melde die fehlgeschlagene Abrufquelle und den Grund.

Behandle die Zustimmung zur externen Überprüfung nicht als Zustimmung zur Übernahme des Kandidaten. Auch wenn ein Kandidat gefunden wird, wird das erfolgreiche Überprüfungsdatum aktualisiert, wenn die Überprüfung der offiziellen Quelle und die Kandidatenspeicherung abgeschlossen sind.

Manuelles Abrufen des ZIP

Schlage dieses Verfahren nur als letztes Mittel vor, wenn der automatische Abruf endgültig fehlgeschlagen ist und check die URL des offiziellen ZIP bis zur manuellen Abrufanleitung identifizieren kann. Wenn es vor der URL-Identifizierung fehlschlägt, leite die Abrufquelle nicht aus URL oder Dateinamen ab, sondern melde nur den Fehlschlag.

Zeige dem Benutzer Folgendes an:

Der automatische Abruf des ZIP ist fehlgeschlagen. Sie können es manuell von der folgenden offiziellen URL abrufen:
<Offizielle ZIP-URL>

Speichern Sie das ZIP in einem beliebigen Ordner. Teilen Sie mir nach dem Speichern den absoluten Pfad einschließlich des Dateinamens mit.
Das erhaltene ZIP wird ohne Netzwerkverbindung validiert und als Update-Kandidat gespeichert. Die Umschaltung auf die aktive Version wird separat bestätigt.

Wenn Sie den absoluten Pfad vom Benutzer erhalten, führen Sie Folgendes aus. Wenn nur ein relativer Pfand bekannt ist, bestätigen Sie den absoluten Pfad, bevor Sie fortfahren.

<python> <skill-root>/scripts/manage_upstream.py import-archive \
  --archive-file '<Absoluter Pfad des ZIP>'

import-archive verknüpft das lokale ZIP mit der bei einem Fehlschlag aufgezeichneten offiziellen URL, validiert es ohne Netzwerkverbindung hinsichtlich normaler Größe, ZIP-Format, interner Pfade, Markdown-Sammlung und Hash und erstellt daraus einen Kandidaten. Das ursprüngliche ZIP wird nicht geändert oder gelöscht. Der lokale Import wird nicht als erfolgreiche externe Überprüfung behandelt; last_successful_check_at und die bestätigte Vertragsversion werden nicht aktualisiert. Selbst wenn das Ergebnis candidate_created oder candidate_exists ist, wird nicht automatisch hochgestuft; fahre mit „Bewertung und Hochstufung des Update-Kandidaten“ fort.

Wenn seit der Identifizierung der offiziellen URL mehr als 30 Tage vergangen sind oder sich der Vertrag geändert hat, umgehe den Import nicht, sondern bitte um Zustimmung zu einer neuen Aktualisierungsüberprüfung. Selbst wenn der manuelle Abruf oder der lokale Import fehlschlägt, ändere last_successful_check_at und den gültigen Snapshot nicht.

Bewertung und Hochstufung des Update-Kandidaten

  1. Lese candidate-manifest.json und diff-summary.json innerhalb des Kandidaten.
  2. Validiere den Kandidaten mit verify_snapshot.py.

Der Standardspeicherort für Kandidaten ist candidates im benutzerspezifischen Zustandsverzeichnis.

<python> <skill-root>/scripts/verify_snapshot.py \
  --snapshot-dir <state-dir>/candidates/<Kandidaten-ID>/snapshot \
  --index-file <state-dir>/candidates/<Kandidaten-ID>/source-index.json
  1. Lese die hinzugefügten, geänderten und gelöschten offiziellen Dokumente und überprüfe die Auswirkungen auf task-index.md und foundation-map.md.
  2. Teste repräsentative Erstellungs-, Überarbeitungs- und Überprüfungsaufträge sowohl mit der alten als auch mit der Kandidatenversion.
  3. Zeige dem Benutzer die Kandidaten-ID, die Bedeutungsänderungen, die Änderungen an abgeleiteten Materialien und die Testergebnisse an und frage explizit nach der Zustimmung zur Übernahme.
  4. Führe Folgendes erst aus, nachdem der Benutzer die Kandidaten-ID angegeben und genehmigt hat.
<python> <skill-root>/scripts/manage_upstream.py promote \
  --candidate-id '<Kandidaten-ID>' \
  --human-approved

Nach der Hochstufung wird der vorherige Schnappschuss nicht gelöscht. Der Hochstufungsvorgang ändert last_successful_check_at nicht.

Entscheidungsregeln

  • Verwende MANIFEST.md nicht als maßgebliche Dateiliste. Durchsuche alle Markdowns.
  • Verwende die normalisierte source_url als Dokument-ID. slug kann im Text und im Änderungsprotokoll doppelt vorkommen, daher wird es nicht als eigenständige ID verwendet.
  • Erstelle keine nicht gefundenen Komponenten, Tokens oder Klassennamen als offizielle Spezifikationen.
  • Wenn vorhandene Werte mit offiziellen Anforderungen kollidieren, behalte oder ersetze sie nicht stillschweigend, sondern zeige die Auswirkungen und den Korrekturumfang auf.
  • Erkläre die vollständige Konformität mit dem Designsystem der Digitalen Agentur oder WCAG nicht allein auf der Grundlage einer Bildschirmüberprüfung.
  • Wenn eine Quellenangabe in veröffentlichten Materialien erforderlich ist, lies introduction/notices/index.md des gültigen Snapshots.
  • Speichere den Aktualisierungsstatus und Kandidaten im benutzerspezifischen lokalen Bereich und vermische sie nicht mit den Vertriebsdateien des Skills selbst. Verwende die Umgebungsvariable DADS_SKILL_STATE_DIR nur, um den Speicherort zu ändern.

Verwandte Skills