Pular para o conteúdo
Skillpedia
Interfaces (UI/UX)103 mil · #381

paperclip-capsules

Ajuda seu agente a criar visuais para 'cápsulas'. Isso inclui arte para agentes, status e identificação visual.

O que ela faz

Esta ferramenta ajuda a criar ou verificar a aparência de 'cápsulas' do Paperclip. Cápsulas são elementos visuais que representam agentes (como programas ou usuários) ou seus status.

Quando usar

  • ✓Criar a arte de uma cápsula para um agente.
  • ✓Verificar se o design de uma cápsula está correto com a marca Paperclip.
  • ✓Implementar um indicador visual de status para um agente.

Exemplo do que pedir para a IA

“Crie uma cápsula de agente para o usuário 'João Silva' com status de 'ativo'.”

Quer saber mais? Abra as seções abaixo.

Como usar

O jeito mais fácil: copie a mensagem abaixo e cole no Claude, ChatGPT, Cursor ou outra IA. Ela lê a skill e segue as instruções.

Link da skill

https://github.com/paperclipai/paperclip/blob/master/packages/skills-catalog/catalog/bundled/product/paperclip-capsules/SKILL.md

Mensagem pronta para colar

Use esta skill para me ajudar: https://github.com/paperclipai/paperclip/blob/master/packages/skills-catalog/catalog/bundled/product/paperclip-capsules/SKILL.md Leia o arquivo SKILL.md desse link e siga as instruções dele na minha tarefa.
Como funciona

A ferramenta usa regras específicas para garantir que as cápsulas representem agentes e sigam a identidade visual do Paperclip. Ela distingue entre diferentes tipos de cápsulas, como as de status ou as decorativas.

Instalação

Jeito mais fácil: copie o link da skill e cole no Claude, ChatGPT ou Cursor pedindo para seguir as instruções.

No terminal (Claude Code, Codex, Cursor), na pasta do projeto:

npx skills add paperclipai/paperclip --skill paperclip-capsules

Ou baixe só o arquivo:

curl -L https://raw.githubusercontent.com/paperclipai/paperclip/master/packages/skills-catalog/catalog/bundled/product/paperclip-capsules/SKILL.md -o SKILL.md
Conteúdo técnico (SKILL.md)

Tradução do texto original do autor no GitHub. Os comandos e códigos estão como no original.

Cápsulas Paperclip

Use esta habilidade ao criar ou verificar visuais de cápsulas Paperclip. A regra central é simples: a cápsula é o agente. Uma cápsula não é um cromo genérico, uma forma de botão, uma pílula de status aleatória ou uma decoração de fundo.

A única exceção decorativa aprovada é o banco canônico de cápsulas heróicas. Trate-o como uma superfície específica da marca Paperclip, não como uma licença para criar papéis de parede de cápsulas arbitrárias.

Quando Usar

  • Gerar arte de cápsulas Paperclip, avatares de agentes, campos de cápsulas, bancos de cápsulas heróicas ou identicons de cápsulas semeados.
  • Implementar uma cápsula de agente individual na interface do produto.
  • Renderizar cápsulas de status de batimento cardíaco para o status do agente.
  • Construir vídeos de recursos Paperclip ou gráficos de marketing que usam o motivo da cápsula.
  • Revisar um design para correção da marca da cápsula.

Quando Não Usar

  • Pílulas arredondadas genéricas, emblemas, botões, tags, itens de navegação ou bolhas decorativas.
  • Ilustrações não relacionadas a agentes onde as cápsulas seriam apenas textura visual.
  • Escolhas de cores da interface do produto não relacionadas a agentes ou status de batimento cardíaco.
  • Substituir os helpers de cor de status ou AgentCapsule existentes do aplicativo a partir da memória.

Regras Inegociáveis

  • Cápsulas representam agentes. Se a superfície não envolve agentes, não adicione cápsulas.
  • Não use a paleta de cápsulas de agente fora das cápsulas. Nunca aplique gradientes de agente em botões, texto, fundos de página, cartões ou cromo genérico da interface.
  • Mantenha as famílias de cápsulas separadas. Cápsulas de agentes individuais do aplicativo, cápsulas de status de batimento cardíaco, cápsulas de marketing de sites, cápsulas de vídeo, identicons semeados e o banco heróico têm dados diferentes.
  • O banco heróico é a única exceção decorativa. Use a especificação canônica do banco; não crie um novo banco manualmente.
  • Registre os dados de reprodutibilidade. Para ativos gerados, registre a semente, o modelo, a paleta, as dimensões e o fluxo de trabalho de origem.
  • Respeite o movimento reduzido. Qualquer animação de pulsação, pisca-pisca, respiração, onda ou preenchimento ascendente precisa de um fallback estático de movimento reduzido.

Escolha a Superfície de Cápsula Certa

Use cápsulas de agentes individuais quando uma cápsula for igual a um agente na interface do produto, integração, superfícies de organização ou avatares. Leia references/individual-status-capsules.md antes de implementar ou alterar o comportamento da interface.

Use cápsulas de status de batimento cardíaco para marcadores de status sólidos pequenos: cinza ocioso/ativo, pulso azul em execução, âmbar pausado, pisca vermelho de erro. Estas não são cápsulas de identidade com gradiente alto.

Use o banco de cápsulas heróicas apenas para imagens heróicas da marca, cenas heróicas de vídeos de recursos ou trabalhos de motivo de marketing aprovados. Leia references/hero-capsule-bank.md antes de desenhá-lo.

Use layouts de gerador gráfico quando a tarefa solicitar gráficos de cápsulas, como linhas de mesclagem, cadeias, grades, marcas de ícones ou composições heróicas. Prefira ferramentas semeados e fluxos de trabalho exportáveis; leia references/generator-workflows.md.

Use identicons/pílulas de perfil semeados quando um agente precisar de uma marca de cápsula pessoal reproduzível. Leia references/identicon-prototyper.md antes de escolher variantes, esquemas de cores, algoritmos de dithering, densidade, brilho, aurora, malha, movimento ou exportações.

Fluxo de Trabalho de Implementação

  1. Identifique em qual família de cápsulas você está trabalhando: agente individual, cápsula de status, banco heróico, layout de gerador ou identicon.
  2. Carregue o arquivo de referência correspondente desta habilidade.
  3. Prefira implementações de origem existentes:
    • Interface do produto: ui/src/components/AgentCapsule.tsx, ui/src/index.css e ui/src/lib/status-colors.ts.
    • Banco heróico: especificação canônica em references/hero-capsule-bank.md.
    • Trabalho de vídeo: combine esta habilidade com a habilidade Paperclip feature-video HyperFrames quando disponível.
  4. Se estiver gerando um artefato, escolha um fluxo de trabalho reproduzível e anote a semente/configuração.
  5. Verifique se o resultado ainda é relacionado a agentes. Remova as cápsulas se elas se tornaram decoração.
  6. Anexe ou exponha de outra forma os entregáveis gerados ao trabalhar em issues, e nomeie o fluxo de trabalho exato usado.

Expectativas de Saída

Para qualquer ativo de cápsula gerado, inclua:

  • Família da cápsula: individual-agent, heartbeat-status, hero-bank, graphic-generator ou identicon.
  • Fluxo de trabalho de origem ou caminho de implementação.
  • Semente e configuração onde disponíveis.
  • Dimensões, formato e renderizador.
  • Qualquer divergência da renderização canônica do Paperclip.

Para alterações de código, inclua verificações direcionadas que exercitem a superfície editada. Para visuais, inclua capturas de tela ou SVG/PNG/HTML inspecionáveis quando possível.

Checklist de Validação

…

Perguntas frequentes

O que é uma 'cápsula'?

É um elemento visual usado para representar um agente (como um programa ou usuário) ou seu status dentro do sistema Paperclip.

Posso usar as cores das cápsulas em outros lugares?

Não, as cores e gradientes das cápsulas só devem ser usados nas próprias cápsulas, não em botões, fundos ou outros elementos da interface.

O que são 'cápsulas de status de batimento cardíaco'?

São marcadores visuais pequenos e simples que indicam o status de um agente, como 'ativo', 'em execução' ou 'erro', usando cores e animações sutis.

Detalhes

Descrição original do autor

Generate, implement, or review Paperclip capsule visuals. Use for capsule art, agent capsules, heartbeat status capsules, identicons, capsule banks, or brand-usage validation.

repo: paperclipai/paperclip

Popularidade

Estrelas no GitHub
103 mil
Posição no ranking
#381
Licença
MIT
Atualizada em
16/10/2026

Essa skill é útil?

0

Entre para votar.

Comentários

  • …

Mais skills deste repositório

Skills parecidas