Tyoudoii Illust Fetcher Skill

Habilidade de Busca de Ilustrações Tyoudoii

Objetivo

• Usar a API REST WordPress do tyoudoii-illust quando o site for difícil de fazer scraping por causa da renderização JS.
• Substituir emojis, ícones de texto ou imagens placeholder por ilustrações baixáveis que se encaixem no design da página.
• Combinar esta skill com .agent/skills/web-design/frontend-design/SKILL.md quando o layout ao redor ou a UI de cards também precisar de melhorias.

Fluxo de Trabalho

Fase 1: Listar as ilustrações necessárias

1. Fazer uma lista de emojis, ícones de texto e imagens temporárias no HTML / JSX / component.
2. Para cada item, criar uma palavra-chave que represente o tema da ilustração necessária.
3. Usar inicialmente palavras-chave curtas que façam sentido.
4. Decidir o diretório de destino para os downloads.

Exemplo:

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

Fase 2: Buscar na API REST WordPress

1. Primeiro, usar a API REST para encontrar posts candidatos.
2. Endpoint:

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

3. Extrair a URL da miniatura de _embedded["wp:featuredmedia"][0].source_url.
4. Se a URL da miniatura não estiver disponível, tentar novamente com palavras-chave em japonês e inglês.

Exemplo de URL de miniatura:

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

Fase 3: Derivar a URL real da ilustração

1. Substituir o sufixo _サムネ.png no final da URL da miniatura por _color.png para formar a URL principal.
2. Verificar se retorna HTTP 200.

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

3. Se _color.png retornar 404, tentar as seguintes opções em ordem:

• _カラー.png
• _illust.png

4. Se nenhuma retornar 200, voltar para a busca na API com outra palavra-chave.

Fase 4: Download

1. Usar um nome de arquivo em inglês que faça sentido no contexto do projeto.
2. Exemplo:

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

3. Exemplo de download:

curl -L "{url}" -o "{projeto}/images/{nome_semantico}.png"

Fase 5: Integração em HTML e CSS

1. Substituir emojis e ícones de texto por imagens locais.

<div class="icon-container">
  <img src="images/{nome}.png" alt="{descrição}">
</div>

2. Em cards ou listas de recursos, usar o mesmo tamanho de contêiner para todos os ícones.
3. Usar object-fit: contain para preservar a proporção da imagem.

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

Regras de Qualidade

• Não insistir em WebFetch ou em obter HTML renderizado; usar a API REST primeiro.
• Se a URL da miniatura não for obtida, tentar novamente com sinônimos em japonês/inglês.
• Se _color.png retornar 404, verificar também _カラー.png e _illust.png.
• Não misturar tamanhos de contêiner de ícones no mesmo grupo de cards.
• Não omitir o atributo alt.
• O nome do arquivo salvo deve ser em inglês e com significado semântico dentro do projeto.
• Para uso comercial, sempre verificar os termos de uso mais recentes em tyoudoii-illust.com. Mesmo assumindo que é gratuito e permitido para uso comercial, a verificação final não deve ser pulada.

Coordenação

• Se themeisle-illustration-fetcher também for uma opção, não escolher automaticamente; sempre perguntar ao usuário qual usar.
• Se a reforma geral da UI ou o design de seções forem necessários, ler frontend-design primeiro e usar esta skill apenas para a substituição de ícones.
• Se houver um design existente, ajustar apenas as dimensões de .icon-container para corresponder às margens, proporções de cards e diretrizes de tamanhos de imagem.

Verificação

1. Chamar esta skill em um novo projeto web e iniciar a busca na API com as palavras-chave.
2. Verificar a confirmação de URL candidata com 200, download do PNG e integração HTML.
3. Verificar visualmente no navegador se todas as imagens dos cards estão alinhadas no mesmo tamanho.