Tyoudoii Illust Fetcher Skill

Compétence de récupération d'illustrations Tyoudoii

Objectif

• Utiliser l'API REST WordPress de tyoudoii-illust lorsque le site lui-même est difficile à scraper en raison du rendu JS.
• Remplacer les émojis, les icônes textuelles ou les images de substitution par des illustrations téléchargeables qui s'intègrent au design de la page.
• Associer cette compétence avec .agent/skills/web-design/frontend-design/SKILL.md lorsque la mise en page environnante ou l'interface des cartes nécessite également une refonte.

Flux de travail

Phase 1 : Identifier les illustrations nécessaires

1. Lister tous les émojis, icônes textuelles et images temporaires dans le HTML/JSX/composant.
2. Transformer le thème de chaque emplacement en mots-clés.
3. Utiliser d'abord des phrases courtes et significatives pour les mots-clés.
4. Déterminer le répertoire de destination des téléchargements.

Exemples :

• homme_inquiet
• robot
• poignée_de_main
• {projet}/images/
• {projet}/public/images/

Phase 2 : Recherche via l'API REST WordPress

1. Utiliser d'abord l'API REST pour trouver des articles candidats.
2. Point de terminaison :

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

3. Extraire l'URL de la vignette depuis _embedded["wp:featuredmedia"][0].source_url de la réponse.
4. Si l'URL de la vignette n'est pas trouvée, basculer entre les mots-clés japonais et anglais et relancer la recherche.

Exemple d'URL de vignette :

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

Phase 3 : Déduire l'URL réelle de l'illustration

1. Remplacer le suffixe _サムネ.png à la fin de l'URL de la vignette par _color.png pour créer l'URL cible.
2. Vérifier d'abord si elle retourne un code HTTP 200.

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

3. Si _color.png renvoie 404, essayer successivement :

• _カラー.png
• _illust.png

4. Si aucun ne renvoie 200, revenir à la recherche API avec un autre mot-clé.

Phase 4 : Téléchargement

1. Utiliser un nom de fichier anglais significatif dans le projet.
2. Exemples :

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

3. Exemple de téléchargement :

curl -L "{url}" -o "{projet}/images/{nom_sémantique}.png"

Phase 5 : Intégration dans HTML et CSS

1. Remplacer les émojis ou icônes textuelles par des images locales.

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

2. Dans les cartes ou listes de caractéristiques, utiliser la même taille de conteneur pour toutes les icônes.
3. Gérer le ratio d'aspect des images avec object-fit: contain.

.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;
}

Règles de qualité

• Ne pas s'obstiner avec WebFetch ou la récupération de HTML rendu ; privilégier d'abord l'API REST.
• Si l'URL de vignette n'est pas trouvée, réessayer avec des synonymes japonais/anglais.
• Si _color.png renvoie 404, vérifier également _カラー.png et _illust.png.
• Ne pas mélanger les tailles de conteneurs d'icônes dans un même groupe de cartes.
• Ne pas omettre l'attribut alt.
• Le nom de fichier enregistré doit être un nom anglais significatif dans le projet.
• En cas d'utilisation commerciale, vérifier impérativement les conditions d'utilisation les plus récentes sur tyoudoii-illust.com. Même en partant du principe que le site est gratuit et utilisable en usage commercial, ne pas sauter cette vérification finale.

Coordination

• Si themeisle-illustration-fetcher est également candidat, ne pas choisir automatiquement ; demander toujours à l'utilisateur lequel utiliser.
• Si une refonte complète de l'UI ou une conception de section est nécessaire, lire d'abord la compétence frontend-design, et ne traiter avec cette compétence que l'étape de remplacement des icônes.
• S'il existe un design existant, ajuster uniquement les dimensions de .icon-container en fonction de ses marges, ratios de cartes et tailles d'images.

Vérification

1. Invoquer cette compétence dans un nouveau projet web, et lancer la recherche API à partir des mots-clés.
2. Vérifier que tout le processus (vérification du code 200 pour les URL candidates, téléchargement PNG, intégration HTML) est effectué.
3. Vérifier visuellement dans le navigateur que toutes les images des cartes sont alignées avec la même taille.