Trechos da trilha "Construir por vibecoding: ambiente, skills e código"
Curso Frontends com Vibecoding
alexandrecaramaschi.com/educacao/frontends-com-vibecoding#plugins-design-visual-claude-2

Dois trechos: a instalação da skill frontend-design e o pedido pronto de direção
estética em duas passadas, para colar na conversa com o agente antes da primeira
versão de uma tela de marca. Os cinco trechos de geração e preparo de imagem
vivem em imagens-formato-peso.txt. Leia antes o LEIA-ME.txt desta pasta.

================================================================================

### O que faz: instala a skill frontend-design a partir do catálogo oficial anthropics/skills
### Onde entra: o terminal, uma vez por máquina; no Claude Code, a alternativa é o marketplace
### Cuidado: leia o SKILL.md antes de usar, porque a skill roda com todas as permissões do agente

npx skills add https://github.com/anthropics/skills --skill frontend-design

No Claude Code, o mesmo catálogo entra pelo marketplace:
/plugin marketplace add anthropics/skills
/plugin install example-skills@anthropic-agent-skills

A instalação universal grava a pasta em ~/.agents/skills/ e cria um atalho em
~/.claude/skills/. O instalador avisa, em inglês: "Review skills before use;
they run with full agent permissions". Abra o SKILL.md, leia o frontmatter, o
corpo e a pasta scripts/, se houver, antes do primeiro uso.

================================================================================

### O que faz: pede a tela em duas passadas, o plano de tokens revisado contra o briefing antes de qualquer código
### Onde entra: conversa com o agente, com a skill frontend-design instalada, na primeira versão de uma landing ou tela de marca
### Cuidado: direção derivada do assunto não revoga o piso de acessibilidade; contraste, foco visível e movimento reduzido continuam obrigatórios

Use a skill frontend-design para a landing do ateliê de joias autorais Pedra e Prata.

Briefing.
Assunto: peças únicas em prata e pedras brasileiras, feitas à mão por uma ourives,
  em tiragem de uma.
Público: quem compra uma peça por ano, para uma ocasião, e quer saber quem fez a
  peça e de onde veio a pedra.
Trabalho principal da tela: levar a pessoa a agendar uma visita ao ateliê ou a
  pedir uma peça sob medida.

Eixos que o briefing fixa:
- O hero é a fotografia da peça em escala real, com a régua de milímetros que a
  ourives usa na bancada. Nada de manchete com número grande e rótulo pequeno.
- A paleta vem da bancada: a prata polida, a prata oxidada e uma cor de pedra da
  coleção do mês (hoje, a turmalina verde-escura). Quatro a seis hex nomeados,
  saídos dessas três origens.
- O texto nomeia cada peça pelo nome que a ourives deu e diz de que pedra e de
  que mina ela veio.

Eixos que o briefing deixa livres (proponha, e depois revise contra o briefing):
- Tipografia: uma família ou duas, escolhidas pelo assunto, com o papel de cada uma.
- Layout e alinhamento.
- Movimento: no máximo um momento orquestrado, se houver.

Passada 1, o plano. Antes de qualquer código, escreva um plano compacto de tokens:
- Cor: quatro a seis hex nomeados, com a origem de cada um.
- Tipo: as famílias e o papel de cada uma; a escala; linha abaixo de 80 caracteres.
- Layout: uma frase, um wireframe em texto e a decisão de alinhamento.
- Princípios: o que torna esta página diferente de qualquer outra landing de joias.

Passada 2, a revisão. Releia o plano contra o briefing e responda: um briefing
parecido, de outro ateliê, daria o mesmo resultado? Para cada item que pareceria
default, diga o que mudou e por quê. Nenhum eixo livre pode ser gasto nos cinco
padrões genéricos que a própria skill lista.

Só depois, o código: React e Tailwind, seguindo o plano revisado, os tokens e o
piso de acessibilidade do CLAUDE.md (contraste WCAG AA, foco visível, movimento
reduzido respeitado, estados de carregando e de erro). Cuide da especificidade
de seletores que se cancelam entre seção e botão.

Autocrítica. Abra a tela, tire um print, tire um acessório que não sirva ao
briefing e me devolva a lista das escolhas que fez, com o motivo de cada uma.