MÓDULO 3.4

🖥️ Monte seu próprio "sistema operacional" para o Claude Code

O módulo bônus / capstone. Você junta tudo que aprendeu numa camada que te dá visão do todo: uma pasta-raiz, um CLAUDE.md mestre e um painel HTML que lê seus dados e mostra projetos, skills, agentes e custo de relance.

6
Tópicos
~60
Minutos
Intermediário
Nível
Capstone
Tipo
0% 0 de 6
📁 meu-os/ 📋 CLAUDE.md 📁 projetos/ 📁 skills/ · agentes/ 📁 conhecimento/ 📁 dados/ (JSON) 🖥️ painel/index.html 🖥️ Painel — meu OS 📁 Projetos7 🧩 Skills/Agentes21 ⛽ Custo do mêssubutilizado ponteiro marcando uso baixo — sinal pra reavaliar o plano Seu sistema, seu painel — comece pequeno e cresça por demanda. (ilustrativo)

Conteúdo detalhado

1

🗺️ O que é um "OS pessoal" para IA

Conforme você usa o Claude Code, as peças se multiplicam: vários projetos, dezenas de skills, agentes especializados, várias assinaturas. Em algum momento você perde a visão do todo. O "sistema operacional pessoal" é a camada que te devolve essa visão — e não é um produto que você compra, é um arranjo de coisas simples que você junta sozinho.

O que é:

Pasta-raiz + CLAUDE.md mestre + painel visual que dá uma visão única do seu uso do Claude Code.

Por que aprender:

Sem essa camada, cada projeto é uma ilha; você não sabe quantas skills tem nem quanto gasta. Com ela, você opera com mapa, não no escuro.

Conceitos-chave:

Painel (dashboard) · fonte única de verdade · sistema = dados + visualização (não um app fechado) · "comece pequeno e cresça".

🚗 Analogia do painel do carro

Você não olha dentro do motor o tempo todo — olha o painel: velocidade, combustível, temperatura. Seu painel de IA faz o mesmo: quantos projetos ativos, quais skills existem, quanto gastou no mês, qual assinatura está subutilizada.

📌 Analogia do quadro de avisos

O CLAUDE.md mestre é o quadro na entrada: todo mundo que chega lê primeiro. Ele diz onde ficam as coisas e quais são as regras. O painel HTML é a "vitrine" desse quadro — a versão bonita e clicável.

A regra de ouro

O sistema é seu — então comece pequeno e cresça por demanda. Não tente reproduzir um painel cheio de funções no dia 1. Monte a estrutura, um CLAUDE.md mestre e uma página que mostra três coisas. Depois você adiciona custo, onboarding, agente. Cada peça é opcional e substituível.

2

📁 A estrutura de pastas: a espinha dorsal

O painel só consegue mostrar o que está organizado. Por isso a estrutura de pastas vem antes de tudo: uma pasta-raiz com subpastas para projetos, skills, agentes, conhecimento, o painel e — a peça-chave — uma pasta dados/ com arquivos simples que o painel e o Claude leem.

O que é:

Uma pasta-raiz (ex.: meu-os/) com subpastas por categoria e uma dados/ para os arquivos JSON.

Por que aprender:

A estrutura é o que torna o resto possível e automatizável. Sem ela, não há o que o painel possa ler.

Conceitos-chave:

Pasta-raiz como índice · uma subpasta por categoria · dados em formato simples (JSON/markdown) que o painel e o Claude leem.

Estrutura sugerida da pasta-raiz

meu-os/
├── CLAUDE.md            ← o "quadro de avisos" (mestre)
├── projetos/            ← um diretório por projeto seu
├── skills/              ← suas skills
├── agentes/             ← seus subagentes
├── conhecimento/        ← memória longa (notas, referências)
├── dados/               ← o painel LÊ daqui
│   ├── projetos.json
│   ├── skills.json
│   ├── agentes.json
│   └── custo.json
└── painel/
    └── index.html       ← a "vitrine" clicável
1

Crie a pasta-raiz

Algo como meu-os/. É o índice de tudo.

2

Crie uma subpasta por categoria

projetos/, skills/, agentes/, conhecimento/, painel/, dados/.

3

Reserve dados/ para o painel

É onde moram projetos.json, custo.json e companhia.

3

📋 O CLAUDE.md mestre: quem manda no conjunto

O CLAUDE.md na raiz do meu-os/ é o cérebro do sistema: descreve onde fica cada coisa, as regras gerais e como o Claude deve atualizar os dados. Quando você pede "atualize meu painel" em qualquer chat, o Claude lê esse arquivo e sabe exatamente o que fazer.

O que é:

Um arquivo curto na raiz que descreve o sistema inteiro: mapa de pastas, regras e instruções de manutenção.

Por que aprender:

É a fonte de verdade que faz o sistema obedecer a comandos em linguagem natural, em qualquer chat novo.

Conceitos-chave:

Mapa de pastas · regras globais · instruções de manutenção ("ao adicionar uma skill, registre em dados/skills.json") · fica curto e estável (~250 palavras).

Esqueleto do meu-os/CLAUDE.md (~250 palavras)

# Meu OS pessoal — Claude Code

## Mapa de pastas
- projetos/      → um diretório por projeto
- skills/        → minhas skills
- agentes/       → meus subagentes
- conhecimento/  → memória longa
- dados/         → JSON que o painel lê
- painel/        → index.html (a vitrine)

## Arquivos de dados
- dados/projetos.json  → nome, status, objetivo
- dados/skills.json    → nome, descrição, modelo
- dados/custo.json     → serviço, gasto, % de uso

## Regras de manutenção
- Ao adicionar projeto/skill/custo, edite SÓ o JSON
  correto em dados/.
- Nunca invente preços ou valores — pergunte se faltar.
- Mantenha este arquivo curto; detalhes vão nos JSON.
Indo mais fundo (opcional): por que ~250 palavras?

Um CLAUDE.md inchado é lido por inteiro em todo chat — gasta contexto e envelhece rápido. Mantenha só o que é estável (mapa + regras). Tudo que muda toda hora (a lista de projetos, os gastos) vive nos JSON de dados/ e em conhecimento/, que o Claude lê só quando precisa.

4

🖥️ O painel HTML que lê JSON: a vitrine clicável

O painel é uma única página index.html que lê os arquivos de dados/ e mostra cards de projetos, lista de skills/agentes e um resumo de custo. Sem build, sem backend, sem framework — abre direto no navegador (file://) e transforma dados crus no "painel do carro".

O que é:

Uma página que carrega JSON local via fetch e renderiza blocos visuais; o Claude gera e atualiza o HTML pra você.

Por que aprender:

É o que faz você olhar de relance e entender seu uso, em vez de abrir cinco arquivos.

Conceitos-chave:

Uma página · sem build/backend · lê JSON via fetch · comece com três blocos: Projetos, Skills, Custo do mês.

Exemplo de painel — coração do painel/index.html

<div id="projetos"></div>
<div id="custo"></div>

<script>
async function carregar() {
  // lê os JSON de dados/ (caminho relativo ao index.html)
  const proj  = await fetch('../dados/projetos.json').then(r => r.json());
  const custo = await fetch('../dados/custo.json').then(r => r.json());

  // cards de projetos
  document.getElementById('projetos').innerHTML =
    proj.map(p => `<article><b>${p.nome}</b> — ${p.status}</article>`).join('');

  // soma de custo + alerta de subuso
  const total = custo.reduce((s, c) => s + c.gasto, 0);
  const subuso = custo.filter(c => c.uso < 40);
  document.getElementById('custo').innerHTML =
    `Total do mês: R$ ${total.toFixed(2)}` +
    (subuso.length ? ` · ⚠️ subutilizado: ${subuso.map(c => c.servico).join(', ')}` : '');
}
carregar();
</script>

Mock ilustrativo — o Claude monta o HTML/estilo completo pra você; o que importa é o padrão: ler JSON → renderizar → somar/alertar.

💡 Dica prática

Alguns navegadores bloqueiam fetch de arquivos locais por segurança. Se o painel abrir vazio em file://, peça ao Claude para subir um servidor local simples (uma linha) ou para embutir os dados direto no HTML enquanto você testa.

5

💸 Rastreio de custo e uso entre modelos

O dados/custo.json é o medidor de combustível: você registra gasto e uso por modelo/assinatura, e o painel soma e destaca o subuso. É aqui que o sistema "se paga" — ver uma assinatura subutilizada pode te fazer trocar de plano e economizar.

O que é:

Um arquivo com um item por serviço (modelo, gasto, % de uso) que o painel soma e analisa.

Por que aprender:

É o retorno mais concreto do sistema: clareza sobre onde o dinheiro de IA está indo (e onde está parado).

Conceitos-chave:

Registro manual ou semiautomático · um item por serviço · campos de gasto e utilização · preços vêm da página oficial — nunca chute valores.

Exemplo de dados/custo.json

[
  { "servico": "Claude (assinatura)", "gasto": 100.00, "uso": 78 },
  { "servico": "API Claude (avulso)", "gasto":  35.00, "uso": 55 },
  { "servico": "Editor IA",            "gasto":  50.00, "uso": 20 }
]

Valores são exemplo. Use os seus reais; para a API, consulte os preços oficiais. O serviço com uso baixo (aqui, 20%) é o que o painel sinaliza pra você reavaliar.

1

Liste um item por serviço

Modelo/assinatura, gasto mensal e percentual de uso.

2

Peça pro Claude somar e marcar subuso

Total do mês + alerta para os serviços de baixa utilização.

3

Mostre total e alertas no painel

De relance você decide se vale manter, baixar ou cancelar um plano.

6

🚀 Onboarding e catálogo de skills/agentes

Duas peças fecham o sistema. O onboarding faz o Claude vasculhar sua máquina (só leitura), descobrir as ferramentas que você usa e preencher os dados iniciais. O catálogo mantém um registro de cada skill e agente — com o modelo certo pra cada tarefa — pra você nunca reinventar a roda.

O que é:

Onboarding = detecção de ferramentas no PATH com confirmação antes de gravar. Catálogo = skills.json e agentes.json com nome, descrição e modelo recomendado.

Por que aprender:

O onboarding deixa o sistema "pronto para rodar" na sua máquina sem digitação manual; o catálogo evita esquecer o que você já tem.

Conceitos-chave:

Comandos seguros só de leitura · confirmação antes de gravar · modelo forte para raciocínio profundo, modelo leve para tarefas repetitivas · nada é fixo, tudo é editável.

✓ Boas práticas do onboarding

  • Detecte por binários no PATH e configs conhecidas — só leitura.
  • Mostre a lista e peça confirmação antes de gravar.
  • Grave em dados/ferramentas.json; o que faltar, você adiciona depois.

✗ O que evitar

  • Deixar o Claude gravar sem você revisar a lista.
  • Catálogo sem o campo de modelo recomendado.
  • Tratar o que não foi detectado como "impossível" — é só adicionar.

Exemplo de dados/skills.json (catálogo)

[
  { "nome": "revisar-texto", "faz": "revisa ortografia e clareza",
    "modelo": "leve (tarefa repetitiva)" },
  { "nome": "arquiteto", "faz": "planeja arquitetura de projeto",
    "modelo": "forte (raciocínio profundo)" }
]
Indo mais fundo (opcional): metas e um agente open-source

Para deixar o sistema mais vivo, registre metas de médio prazo num dados/metas.json que o painel exibe como progresso, e ligue conhecimento/ como memória longa. Se quiser conversar sobre suas metas, você pode plugar um agente open-source e gratuito — por exemplo o Hermes Agent, totalmente opcional e sem custos ocultos. Nada disso é obrigatório: o painel funciona muito bem sozinho.

Auto-checagem (opcional): o que torna o painel HTML capaz de se manter atualizado por comandos em linguagem natural?

🧪 Exemplo prático guiado

Monte uma versão mínima funcional do seu OS pessoal, do zero ao painel aberto no navegador.

1. Crie a estrutura

No terminal ou pedindo ao Claude, monte meu-os/ com as subpastas e os JSON vazios (use a árvore do tópico 2).

2. Abra meu-os/ no Claude Code

Aponte o Claude para a pasta-raiz.

3. Escreva o CLAUDE.md mestre

Use o prompt 1. Inclua o mapa de pastas e as regras de manutenção.

4. Preencha os dados

2–3 projetos reais em projetos.json; suas assinaturas em custo.json; 3 skills em skills.json.

5. Gere o painel

Peça painel/index.html lendo os três JSON: cards de projetos, lista de skills e total de custo com alerta de subuso.

6. Abra no navegador

Dois cliques em painel/index.html. Você deve ver seus dados.

7. Teste a manutenção

Em um chat novo, peça: "Adicione o projeto X e atualize o painel." Se o Claude editar o JSON certo lendo só o CLAUDE.md, o sistema está funcionando.

✏️ Exercícios

1. Monte a espinha dorsal (fácil)

Crie a pasta-raiz com todas as subpastas e arquivos vazios. Critério: a árvore de pastas existe e bate com o exemplo.

2. Escreva o CLAUDE.md mestre (médio)

Máximo ~250 palavras, com mapa de pastas e regras de manutenção. Critério: em um chat novo, o Claude descreve o sistema só lendo esse arquivo.

3. Gere o painel mínimo (médio)

Faça o index.html mostrar projetos, skills e custo a partir dos JSON. Critério: abre no navegador e exibe seus dados reais.

4. Rastreie custo de verdade (médio)

Preencha custo.json com suas assinaturas e marque a de menor uso. Critério: o painel destaca o serviço subutilizado.

5. Comando de manutenção (difícil)

Em um chat novo, adicione uma skill nova pedindo ao Claude. Critério: skills.json é atualizado e a skill aparece no painel sem você editar à mão.

⌨️ Prompts prontos

Cole estes no Claude Code apontado para a pasta meu-os/. Eles montam cada peça do sistema. O banco completo está na Biblioteca → Prompts.

1. Criar o CLAUDE.md mestre

Esta pasta é o meu "sistema operacional pessoal" para o Claude Code.
Crie um CLAUDE.md mestre, curto (~250 palavras), com:
- mapa de pastas (projetos, skills, agentes, conhecimento, dados, painel);
- o que cada arquivo em dados/ contém (projetos.json, skills.json, custo.json);
- regras de manutenção: ao eu pedir para adicionar projeto/skill/custo,
  atualize o JSON correto em dados/ e nunca invente valores.
Não escreva HTML aqui, só o CLAUDE.md.

2. Gerar o painel HTML simples

Crie painel/index.html: uma única página, sem framework e sem backend,
que carrega via fetch os arquivos dados/projetos.json, dados/skills.json
e dados/custo.json e mostra três blocos: cards de Projetos, lista de Skills
e resumo de Custo do mês. Deve abrir direto no navegador (file://).
Visual limpo e escuro. Comente o código.

3. Detectar ferramentas instaladas (onboarding)

Vasculhe minha máquina e detecte quais ferramentas de IA e dev eu uso
(CLIs, editores, terminais, agentes). Use comandos seguros, só de leitura.
Me mostre a lista para eu confirmar antes de salvar.
Depois grave o resultado em dados/ferramentas.json.
O que não achar, eu adiciono depois.

4. Comando de manutenção do sistema

Vou pedir mudanças no meu OS pessoal (adicionar projeto, skill, custo ou meta).
Sempre leia o CLAUDE.md mestre primeiro, edite só o JSON correto em dados/
e me diga o que mudou. Se algo não existir, me pergunte antes de criar.

⚠️ Erros comuns

  • Querer tudo no dia 1. Tentar reproduzir um painel cheio de funções de uma vez. Corrija: comece com pasta-raiz + CLAUDE.md + três blocos no painel; cresça por demanda.
  • Dados espalhados e sem formato. Guardar informação em lugares aleatórios que o painel não lê. Corrija: centralize em dados/ com JSON simples e consistente.
  • Chutar preços e gastos. Inventar valores no rastreio de custo. Corrija: use só o que você informar ou os preços oficiais.
  • CLAUDE.md mestre inchado. Encher de detalhes que mudam toda hora. Corrija: mantenha ~250 palavras; detalhes vão para os JSON e conhecimento/.
  • Tratar o sistema como fechado. Achar que é "tudo ou nada" e travar quando algo não é detectado. Corrija: tudo é editável; o que faltar, você adiciona pedindo ao Claude.

Resumo do módulo

O OS pessoal — uma camada que você junta (não compra): pasta-raiz + CLAUDE.md mestre + painel.
Estrutura e dados — uma subpasta por categoria e JSON simples em dados/ que o painel lê.
O painel — uma página que lê JSON e mostra projetos, skills e custo de relance.
Custo, onboarding e catálogo — o sistema se paga, se instala e nunca te deixa reinventar a roda.

Checklist de conclusão

  • ☐ Criei a pasta-raiz meu-os/ com todas as subpastas.
  • ☐ Escrevi um CLAUDE.md mestre (~250 palavras) com mapa de pastas e regras de manutenção.
  • ☐ Preenchi projetos.json, skills.json e custo.json com dados reais.
  • ☐ Gerei painel/index.html e ele abre no navegador mostrando meus dados.
  • ☐ O rastreio de custo soma os gastos e destaca um serviço subutilizado.
  • ☐ Testei um comando de manutenção em chat novo e o JSON certo foi atualizado.
  • ☐ (Opcional) Registrei uma meta e/ou explorei um agente open-source.

Você chegou ao fim da aprendizagem:

Este é o último módulo do curso. O próximo passo é a Biblioteca — seu acervo de prompts, skills e agentes prontos para consultar sempre que precisar.