BIBLIOTECA

O que eu construo, pronto pra você reusar.

Recursos de código que eu uso de verdade e libero de graça: skills de IA pra baixar e efeitos CSS pra copiar, com demo ao vivo. Sem cadastro, sem pegadinha. A coleção cresce com o tempo.

Skills de IA

Pacotes SKILL.md no padrão Agent Skills. Baixe, jogue em ~/.claude/skills/ e a IA aciona sozinha quando a tarefa casa. Funcionam no Claude Code, Cursor, Codex e afins.

commit-craft

Mensagens de commit no padrão Conventional Commits, a partir do diff.

Baixar .zip

code-reviewer

Revisa um diff por bugs, segurança e clareza, por severidade.

Baixar .zip

redator-ptbr

Melhora textos em PT-BR (clareza e tom) sem mudar o sentido.

Baixar .zip

seo-meta

Gera title, meta description e Open Graph otimizados.

Baixar .zip

Baixar as 4 num pacote Criar a sua no SkillForge

Efeitos CSS

6 que eu uso de verdade, copia-e-cola (CSS puro, funciona em qualquer framework). Use com parcimônia e sempre respeite prefers-reduced-motion.

Glow

1 · Glow / neon

.glow {
  color: #fff;
  text-shadow:
    0 0 8px  #8b5cf6,
    0 0 22px #8b5cf6,
    0 0 44px rgba(139,92,246,.6);
}

CTA com border-beam

2 · Border-beam (o do CTA)

@property --beam { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.beam { position: relative; border-radius: 12px; isolation: isolate; }
.beam::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 2px;
  background: conic-gradient(from var(--beam), transparent 0 70%, #38bdf8 85%, #818cf8 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: beam-spin 4s linear infinite;
}
@keyframes beam-spin { to { --beam: 360deg; } }

Gradiente

3 · Texto com gradiente animado

.grad-text {
  background: linear-gradient(90deg,#8b5cf6,#ec4899,#38bdf8,#8b5cf6);
  background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: grad 6s linear infinite;
}
@keyframes grad { to { background-position: 300% 0; } }

Passe o mouse

4 · Shine (brilho varrendo no hover)

.shine { position: relative; overflow: hidden; }
.shine::after {
  content: ''; position: absolute; inset: 0; transform: translateX(-130%);
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.5) 50%, transparent 70%);
}
.shine:hover::after { transition: transform .8s ease; transform: translateX(130%); }

bpso.com.br

5 · Scramble / decode (texto)

function scramble(el, text, speed = 38) {
  const chars = 'ABCDEFGHJKLMNPQRSTUVWXYZ0123456789!<>-_/*';
  let frame = 0;
  const id = setInterval(() => {
    el.textContent = text.split('').map((c, i) =>
      i < frame / 2 ? c : chars[Math.floor(Math.random() * chars.length)]
    ).join('');
    if (frame / 2 >= text.length) clearInterval(id);
    frame++;
  }, speed);
}
// scramble(el, 'bpso.com.br');

6 · Aurora (fundo gradiente animado)

.aurora {
  background: linear-gradient(125deg,#1e1b4b,#4c1d95,#1e3a8a,#1e1b4b);
  background-size: 300% 300%;
  animation: aurora 12s ease infinite;
}
@keyframes aurora {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

Receba o que eu construo. Get what I build. Recibe lo que construyo.

Ferramentas novas, experimentos do Lab e artigos, quando saem. Sem spam, cancele quando quiser. New tools, Lab experiments and articles, when they ship. No spam, unsubscribe anytime. Nuevas herramientas, experimentos del Lab y artículos, cuando salen. Sin spam, cancela cuando quieras.

Quer um recurso que não está aqui, ou uma skill sob medida pro seu fluxo? Me conta.

bora conversar