Shoma-DS/team-info

Tyoudoii-Illust-Fetcher Skill

Ziel

• Verwende die tyoudoii-illust WordPress-REST-API, wenn die Website selbst aufgrund von JS-Rendering schwer zu scrapen ist.
• Ersetze Emojis, Text-Icons oder Platzhaltergrafiken durch herunterladbare Illustrationen, die zum Seitendesign passen.
• Kombiniere diesen Skill mit .agent/skills/web-design/frontend-design/SKILL.md, wenn auch das umgebende Layout oder die Karten-UI bereinigt werden müssen.

Workflow

Phase 1: Benötigte Illustrationen identifizieren

1. Liste alle Emojis, Text-Icons und Platzhalterbilder im HTML/JSX/Komponenten auf.
2. Erstelle für jede Stelle ein thematisches Schlüsselwort.
3. Halte die Schlüsselwörter kurz und sinnvoll.
4. Lege vorab das Download-Verzeichnis fest.

Beispiel:

• worry_man
• robot
• handshake
• {projekt}/images/
• {projekt}/public/images/

Phase 2: Suche mit der WordPress-REST-API

1. Verwende zunächst die REST-API, um passende Beiträge zu finden.
2. Endpunkt:

https://tyoudoii-illust.com/wp-json/wp/v2/posts?search={schluesselwort}&_embed=true&per_page=5

3. Extrahiere die Thumbnail-URL aus _embedded["wp:featuredmedia"][0].source_url.
4. Falls keine Thumbnail-URL verfügbar ist, versuche es mit japanischen und englischen Synonymen erneut.

Beispiel einer Thumbnail-URL:

https://tyoudoii-illust.com/wp-content/uploads/2024/01/beispiel_サムネ.png

Phase 3: Tatsächliche Illustrations-URL ableiten

1. Ersetze _サムネ.png am Ende der Thumbnail-URL durch _color.png, um die Ziel-URL zu erhalten.
2. Prüfe zuerst, ob HTTP 200 zurückgegeben wird.

curl -s -o /dev/null -w "%{http_code}" "{kandidaten_url}"

3. Falls _color.png 404 zurückgibt, probiere der Reihe nach:

• _カラー.png
• _illust.png

4. Wenn keine der Varianten 200 liefert, kehre zur API-Suche mit einem anderen Schlüsselwort zurück.

Phase 4: Herunterladen

1. Verwende einen semantisch sinnvollen englischen Dateinamen im Projekt.
2. Beispiele:

• telework.png
• robot.png
• support.png

3. Beispiel für den Download:

curl -L "{url}" -o "{projekt}/images/{semantischer_name}.png"

Phase 5: Einbindung in HTML und CSS

1. Ersetze Emojis oder Text-Icons durch lokale Bilder.

<div class="icon-container">
  <img src="images/{name}.png" alt="{beschreibung}">
</div>

2. Verwende für Karten oder Feature-Listen bei allen Icons dieselbe Containergröße.
3. Gleiche das Seitenverhältnis der Bilder mit object-fit: contain aus.

.icon-container {
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.icon-container img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

Qualitätsregeln

• Verwende zuerst die REST-API, anstatt auf WebFetch oder gerendertes HTML zu setzen.
• Falls keine Thumbnail-URL verfügbar ist, versuche es mit japanischen/englischen Synonymen.
• Wenn _color.png 404 zurückgibt, überprüfe auch _カラー.png und _illust.png.
• Mische keine unterschiedlichen Icon-Containergrößen innerhalb derselben Kartengruppe.
• Lasse das alt-Attribut nicht weg.
• Verwende für gespeicherte Dateien semantisch sinnvolle englische Namen im Projektkontext.
• Überprüfe bei kommerzieller Nutzung stets die aktuellen Nutzungsbedingungen von tyoudoii-illust.com. Auch wenn von kostenloser und kommerzieller Nutzung ausgegangen wird, darf die finale Überprüfung nicht ausgelassen werden.

Koordination

• Falls auch themeisle-illustration-fetcher in Frage kommt, wähle nicht automatisch, sondern frage den Benutzer, welcher verwendet werden soll.
• Wenn eine Überarbeitung der gesamten UI oder des Abschnittsdesigns erforderlich ist, lies zuerst frontend-design und verwende diesen Skill nur für den Austausch der Icons.
• Passe bei vorhandenem Design die Maße von .icon-container an die Abstände, das Kartenverhältnis und die Bildgrößenstrategie an.

Verifikation

1. Rufe diesen Skill in einem neuen Webprojekt auf und starte die API-Suche mit einem Schlüsselwort.
2. Stelle sicher, dass die Überprüfung der Kandidaten-URLs auf 200, der PNG-Download und die Einbindung in HTML vollständig abgeschlossen werden.
3. Überprüfe visuell im Browser, ob alle Kartenbilder gleich groß aussehen.