Instale a skill belt CLI:
npx skills add belt-sh/cli
Escrita Técnica para Blog
Escreva posts de blog técnicos focados em desenvolvedores via CLI inference.sh.
Início Rápido
Requer o CLI inference.sh (
belt). Instruções de instalação
belt login
# Pesquisar profundidade do tópico
belt app run exa/search --input '{
"query": "construir API REST Node.js melhores práticas 2024 tutorial"
}'
# Gerar imagem de cabeçalho
belt app run infsh/html-to-image --input '{
"html": "<div style=\"width:1200px;height:630px;background:linear-gradient(135deg,#0f172a,#1e293b);display:flex;align-items:center;padding:60px;font-family:ui-monospace,monospace;color:white\"><div><p style=\"font-size:18px;color:#38bdf8;margin:0\">// blog de engenharia</p><h1 style=\"font-size:48px;margin:16px 0;font-weight:800;font-family:system-ui;line-height:1.2\">Como Reduzimos a Latência da API em 90% com Cache na Borda</h1><p style=\"font-size:20px;opacity:0.6;font-family:system-ui\">Um mergulho profundo em nossa arquitetura de CDN</p></div></div>"
}'
Tipos de Post
1. Tutorial / Como-Fazer
Instruções passo a passo. O leitor deve ser capaz de acompanhar e construir algo.
Estrutura:
1. O que estamos construindo (com screenshot/demo)
2. Pré-requisitos
3. Passo 1: Configuração
4. Passo 2: Implementação principal
5. Passo 3: ...
6. Código completo (link para GitHub)
7. Próximos passos / extensões
| Regra | Porquê |
|---|---|
| Mostre o resultado final primeiro | O leitor sabe se vale a pena continuar |
| Liste pré-requisitos explicitamente | Não perca tempo do público errado |
| Cada bloco de código deve ser executável | Copiar-colar-executar é o teste |
| Explique o "porquê", não apenas o "como" | Tutoriais que explicam o raciocínio são compartilhados |
| Inclua tratamento de erros | Código real tem erros |
| Link para o repositório completo | Referência após o tutorial |
2. Análise Aprofundada / Explicador
Explica um conceito, tecnologia ou decisão de arquitetura em profundidade.
Estrutura:
1. O que é [conceito] e por que você deveria se importar?
2. Como funciona (modelo mental simplificado)
3. Como funciona (mecânica detalhada)
4. Exemplo do mundo real
5. Trade-offs e quando NÃO usar
6. Leitura adicional
3. Postmortem / Relatório de Incidente
Descreve o que deu errado, por que e o que foi corrigido.
Estrutura:
1. Resumo (o que aconteceu, impacto, duração)
2. Linha do tempo dos eventos
3. Análise da causa raiz
4. Correção implementada
5. O que estamos fazendo para evitar recorrência
6. Lições aprendidas
4. Benchmark / Comparação
Comparação baseada em dados de ferramentas, abordagens ou arquiteturas.
Estrutura:
1. O que comparamos e porquê
2. Metodologia (para que os resultados sejam reproduzíveis)
3. Resultados com gráficos/tabelas
4. Análise (o que os números significam)
5. Recomendação (com ressalvas)
6. Dados brutos / instruções de reprodutibilidade
5. Arquitetura / Design de Sistema
Explica como um sistema é construído e por que as decisões foram tomadas.
Estrutura:
1. Problema que precisávamos resolver
2. Restrições e requisitos
3. Opções consideradas
4. Arquitetura escolhida (com diagrama)
5. Trade-offs que aceitamos
6. Resultados e lições
Regras de Escrita para Desenvolvedores
Voz e Tom
| Faça | Não Faça |
|---|---|
| Seja direto: "Use connection pooling" | "Você pode querer considerar usar..." |
| Admita trade-offs: "Isso adiciona complexidade" | Finja que sua solução é perfeita |
| Use "nós" para decisões de equipe | "Eu arquitetei sozinho..." |
| Números específicos: "reduziu p99 de 800ms para 90ms" | "melhorou significativamente o desempenho" |
| Cite fontes e benchmarks | Faça afirmações sem fonte |
| Reconheça alternativas | Finja que a sua é a única maneira |
O Que Desenvolvedores Odeiam
❌ "No mundo tecnológico acelerado de hoje..." (encheção de linguiça)
❌ "Como todos sabemos..." (se todos sabem, por que você está escrevendo?)
❌ "Simplesmente faça X" (nada é simples se você está lendo um tutorial)
❌ "É fácil..." (desdenha da experiência do leitor)
❌ "Obviamente..." (se é óbvio, não escreva)
❌ Linguagem de marketing em conteúdo técnico
❌ Enterrar a informação principal sob 3 parágrafos de contexto
Exemplos de Código
| Regra | Porquê |
|---|---|
| Todo bloco de código deve ser executável | Exemplos quebrados destroem a confiança |
| Mostre exemplos completos e funcionais | Snippets sem contexto são inúteis |
| Inclua identificador de linguagem nos blocos | Syntax highlighting |
| Mostre saída/resultado após o código | O leitor verifica o entendimento |
| Use nomes de variáveis realistas | calcularReceitaTotal não foo |
| Inclua tratamento de erros nos exemplos | Código real trata erros |
| Fixe versões de dependências | "Funciona com React 18.2" não "React" |
Formato de bloco de código bom:
```python
# O que este código faz (uma linha)
def calcular_atraso_retentativa(tentativa: int, atraso_base: float = 1.0) -> float:
"""Exponential backoff com jitter."""
atraso = atraso_base * (2 ** tentativa)
jitter = random.uniform(0, atraso * 0.1)
return atraso + jitter
# Uso
atraso = calcular_atraso_retentativa(tentativa=3) # ~8.0-8.8 segundos
### Profundidade da Explicação
| Sinal do Público | Profundidade |
|------------------|--------------|
| "Começando com X" | Explique tudo, assuma nenhum conhecimento prévio |
| "Padrões avançados de X" | Pule o básico, vá fundo nas nuances |
| "X vs Y" | Assuma familiaridade com ambos, foque nas diferenças |
| "Como construímos X" | Público técnico, pode pular fundamentos |
**Declare explicitamente o nível de público assumido** no início:
"Este post assume familiaridade com Docker e conceitos básicos de Kubernetes. Se você é novo em contêineres, comece com [nosso post introdutório]."
## Estrutura do Post de Blog
### A Estrutura Ideal
```markdown
# Título (contém palavra-chave principal, declara resultado)
[Imagem de herói ou diagrama]
**TL;DR:** [Resumo de 2-3 frases com a principal conclusão]
## O Problema / Por Que Isso Importa
[Contextualize por que o leitor deveria se importar — específico, não genérico]
## A Solução / Como Fizemos
[Conteúdo principal — código, arquitetura, explicação]
### Passo 1: [Primeira coisa]
[Explicação + código + saída]
### Passo 2: [Segunda coisa]
[Explicação + código + saída]
## Resultados
[Números, benchmarks, resultados — seja específico]
## Trade-offs e Limitações
[Honesto sobre desvantagens — constrói confiança]
## Conclusão
[Principal conclusão + o que fazer a seguir]
## Leitura Adicional
[3-5 links relevantes]
Contagem de Palavras por Tipo
| Tipo | Contagem de Palavras | Porquê |
|---|---|---|
| Dica rápida | 500-800 | Um conceito, um exemplo |
| Tutorial | 1.500-3.000 | Passo a passo precisa de detalhes |
| Análise aprofundada | 2.000-4.000 | Exploração completa |
| Post de arquitetura | 2.000-3.500 | Diagramas carregam parte do peso |
| Benchmark | 1.500-2.500 | Dados e gráficos fazem o trabalho pesado |
Diagramas e Visuais
Quando Usar Diagramas
| Cenário | Tipo de Diagrama |
|---|---|
| Fluxo de requisição | Diagrama de sequência |
| Arquitetura do sistema | Diagrama de caixas e setas |
| Lógica de decisão | Fluxograma |
| Modelo de dados | Diagrama ER |
| Comparação de desempenho | Gráfico de barras/linhas |
| Antes/depois | Lado a lado |
# Gerar diagrama de arquitetura
belt app run infsh/html-to-image --input '{
"html": "<div style=\"width:1200px;height:600px;background:#0f172a;display:flex;align-items:center;justify-content:center;padding:40px;font-family:system-ui;color:white\"><div style=\"display:flex;gap:40px;align-items:center\"><div style=\"background:#1e293b;border:2px solid #334155;border-radius:8px;padding:24px;text-align:center;width:160px\"><p style=\"font-size:14px;color:#94a3b8;margin:0\">Cliente</p><p style=\"font-size:18px;font-weight:bold;margin:8px 0 0\">React App</p></div><div style=\"color:#64748b;font-size:32px\">→</div><div style=\"background:#1e293b;border:2px solid #3b82f6;border-radius:8px;padding:24px;text-align:center;width:160px\"><p style=\"font-size:14px;color:#94a3b8;margin:0\">Borda</p><p style=\"font-size:18px;font-weight:bold;margin:8px 0 0\">Cache CDN</p></div><div style=\"color:#64748b;font-size:32px\">→</div><div style=\"background:#1e293b;border:2px solid #334155;border-radius:8px;padding:24px;text-align:center;width:160px\"><p style=\"font-size:14px;color:#94a3b8;margin:0\">API</p><p style=\"font-size:18px;font-weight:bold;margin:8px 0 0\">Node.js</p></div><div style=\"color:#64748b;font-size:32px\">→</div><div style=\"background:#1e293b;border:2px solid #334155;border-radius:8px;padding:24px;text-align:center;width:160px\"><p style=\"font-size:14px;color:#94a3b8;margin:0\">Banco de Dados</p><p style=\"font-size:18px;font-weight:bold;margin:8px 0 0\">PostgreSQL</p></div></div></div>"
}'
# Gerar gráfico de benchmark
belt app run infsh/python-executor --input '{
"code": "import matplotlib.pyplot as plt\nimport matplotlib\nmatplotlib.use(\"Agg\")\n\nfig, ax = plt.subplots(figsize=(12, 6))\nfig.patch.set_facecolor(\"#0f172a\")\nax.set_facecolor(\"#0f172a\")\n\ntools = [\"Express\", \"Fastify\", \"Hono\", \"Elysia\"]\nrps = [15000, 45000, 62000, 78000]\ncolors = [\"#64748b\", \"#64748b\", \"#3b82f6\", \"#64748b\"]\n\nax.barh(tools, rps, color=colors, height=0.5)\nfor i, v in enumerate(rps):\n ax.text(v + 1000, i, f\"{v:,} req/s\", va=\"center\", color=\"white\", fontsize=14)\n\nax.set_xlabel(\"Requisições por segundo\", color=\"white\", fontsize=14)\nax.set_title(\"Benchmark de Frameworks HTTP (Hello World)\", color=\"white\", fontsize=18, fontweight=\"bold\")\nax.tick_params(colors=\"white\", labelsize=12)\nax.spines[\"top\"].set_visible(False)\nax.spines[\"right\"].set_visible(False)\nax.spines[\"bottom\"].set_color(\"#334155\")\nax.spines[\"left\"].set_color(\"#334155\")\nplt.tight_layout()\nplt.savefig(\"benchmark.png\", dpi=150, facecolor=\"#0f172a\")\nprint(\"Salvo\")"
}'
Distribuição
Onde Desenvolvedores Leem
| Plataforma | Formato | Como Publicar |
|---|---|---|
| Seu blog | Artigo completo | Principal — seja dono do seu conteúdo |
| Dev.to | Cross-post (URL canônica de volta para o seu) | Importação Markdown |
| Hashnode | Cross-post (URL canônica) | Importação Markdown |
| Hacker News | Submissão de link | Show HN para projetos, Tell HN para histórias |
| Reddit (r/programming, r/webdev, etc.) | Link ou discussão | Siga as regras do subreddit |
| Twitter/X | Resumo em thread + link | Veja a skill de criação de threads no Twitter |
| Versão adaptada + link | Veja a skill de conteúdo no LinkedIn |
# Publicar thread no X
belt app run x/post-create --input '{
"text": "Novo post no blog: Como Reduzimos a Latência da API em 90%\n\nA versão curta:\n→ Movemos a computação para a borda\n→ Cabeçalhos agressivos de cache-control\n→ Eliminamos consultas N+1\n\np99 foi de 800ms para 90ms.\n\nMergulho profundo completo com código: [link]"
}'
Erros Comuns
| Erro | Problema | Correção |
|---|---|---|
| Sem TL;DR | Desenvolvedores ocupados vão embora sem entender o ponto | Resumo de 2-3 frases no topo |
| Exemplos de código quebrados | Destrói toda a credibilidade | Teste cada bloco de código antes de publicar |
| Sem fixação de versão | Código quebra em 6 meses | "Funciona com Node 20, React 18.2" |
| "Simplesmente faça X" | Desdenhoso, condescendente | Remova "simplesmente", "apenas", "facilmente" |
| Sem diagramas para arquitetura | Paredes de texto descrevendo sistemas | Um diagrama > 500 palavras de descrição |
| Tom de marketing | Desenvolvedores desengajam instantaneamente | Direto, técnico, honesto |
| Sem seção de trade-offs | Parece marketing tendencioso | Sempre discuta as desvantagens |
| Introdução gigante antes do conteúdo | Leitores saem | Vá direto ao ponto em 2-3 parágrafos |
| Dependências não fixadas | Tutorial quebra para leitores futuros | Fixe versões, anote a data de escrita |
| Sem "Leitura Adicional" | Beco sem saída, sem contexto | 3-5 links para aprofundar o entendimento |
Habilidades Relacionadas
npx skills add inference-sh/skills@seo-content-brief
npx skills add inference-sh/skills@content-repurposing
npx skills add inference-sh/skills@og-image-design
Navegue por todos os apps: belt app list