Shoma-DS/team-info

Skill de Obtención de Ilustraciones Tyoudoii

Objetivo

• Usar la API REST de WordPress de tyoudoii-illust cuando el sitio en sí es difícil de extraer debido al renderizado de JavaScript.
• Reemplazar emojis, iconos de texto o imágenes de marcador de posición con ilustraciones descargables que se ajusten al diseño de la página.
• Combinar esta skill con .agent/skills/web-design/frontend-design/SKILL.md cuando el diseño circundante o la interfaz de tarjetas también necesiten limpieza.

Flujo de Trabajo

Fase 1: Identificar las ilustraciones necesarias

1. Listar emojis, iconos de texto e imágenes temporales en HTML / JSX / componentes.
2. Convertir el tema de la ilustración necesaria en cada ubicación a una palabra clave.
3. Colocar primero la palabra clave como una frase corta que tenga sentido.
4. Definir primero el directorio de descarga.

Ejemplo:

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

Fase 2: Buscar con la API REST de WordPress

1. Primero, usar la API REST para buscar publicaciones candidatas.
2. Endpoint:

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

3. Obtener la URL del thumbnail desde _embedded["wp:featuredmedia"][0].source_url en la respuesta.
4. Si no se puede obtener la URL del thumbnail, cambiar entre palabras clave en japonés e inglés y volver a buscar.

Ejemplo de URL de thumbnail:

https://tyoudoii-illust.com/wp-content/uploads/2024/01/ejemplo_thumbnail.png

Fase 3: Derivar la URL real de la ilustración

1. Reemplazar _thumbnail.png al final de la URL del thumbnail por _color.png para crear la URL real.
2. Primero, verificar si devuelve HTTP 200.

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

3. Si _color.png da 404, probar en orden lo siguiente:

• _color.png
• _illust.png

4. Si ninguno devuelve 200, volver a la búsqueda por API con otra palabra clave.

Fase 4: Descargar

1. Usar un nombre de archivo en inglés que tenga sentido dentro del proyecto.
2. Ejemplo:

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

3. Ejemplo de descarga:

curl -L "{url}" -o "{proyecto}/images/{nombre_semantico}.png"

Fase 5: Integración en HTML y CSS

1. Reemplazar emojis e iconos de texto con imágenes locales.

<div class="icon-container">
  <img src="images/{nombre}.png" alt="{descripción}">
</div>

2. En tarjetas o listas de características, usar el mismo tamaño de contenedor para todos los iconos.
3. Manejar la relación de aspecto de la imagen con 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;
}

Reglas de Calidad

• No insistir en WebFetch o en obtener HTML renderizado; usar primero la API REST.
• Si no se puede obtener la URL del thumbnail, reintentar con sinónimos en japonés/inglés.
• Si _color.png da 404, verificar también _color.png y _illust.png.
• No mezclar diferentes tamaños de contenedor de iconos en el mismo grupo de tarjetas.
• No omitir el atributo alt.
• El nombre del archivo guardado debe ser un nombre en inglés que tenga sentido dentro del proyecto.
• Para uso comercial, verificar siempre los términos de uso más recientes de tyoudoii-illust.com. Aunque se asuma que es gratuito y comercial, no omitir la verificación final.

Coordinación

• Si themeisle-illustration-fetcher también es una opción, no elegir automáticamente; preguntar siempre al usuario cuál usar.
• Si también se necesita una revisión general de la UI o el diseño de secciones, leer primero frontend-design y procesar solo el paso de reemplazo de iconos con esta skill.
• Si existe un diseño existente, ajustar solo las dimensiones de .icon-container según los márgenes, la proporción de tarjetas y la política de tamaño de imagen de ese diseño.

Verificación

1. Invocar esta skill en un nuevo proyecto web, comenzar la búsqueda por API con una palabra clave.
2. Confirmar que se completa todo el proceso: verificación 200 de la URL candidata, descarga del PNG e integración en HTML.
3. Verificar visualmente en el navegador que todas las imágenes de las tarjetas se vean alineadas con el mismo tamaño.