Skill Iniciante (Starter)

Ações

Ação	Descrição	Exemplo
`init`	Inicialização do projeto (/init-starter)	`/starter init my-portfolio`
`guide`	Exibir guia de desenvolvimento	`/starter guide`
`help`	Ajuda para iniciantes	`/starter help`

init (Inicialização do Projeto)

Criar estrutura de diretórios do projeto (HTML/CSS/JS ou Next.js)
Gerar package.json (quando Next.js for selecionado)
Criar CLAUDE.md (Nível: Starter especificado)
Criar estrutura da pasta docs/ (para documentos PDCA)
Inicializar o pipeline store — writeBkitMemory() em lib/pdca/status.js, que escreve .bkit/state/memory.json (caminho migrado de .bkit-memory.json). Isso armazena o nível do projeto e o pipelineStatus de 9 fases, lido pelos hooks de parada do pipeline para as fases 5, 6 e 9. Não é onde a fase PDCA reside — essa fica em .bkit/state/pdca-status.json.

guide (Guia de Desenvolvimento)

Analisar o estado atual do projeto
Sugerir próximos passos adequados ao nível Starter
Guia de Pipeline focado nas fases 1 a 3

help (Ajuda para Iniciantes)

Explicar conceitos básicos de HTML/CSS/JS
Responder perguntas frequentes
Fornecer código de exemplo

Público-Alvo

Pessoas aprendendo programação pela primeira vez
Pessoas que querem criar um site simples
Pessoas que precisam de um site portfólio

Stack Tecnológica

Opção A: HTML/CSS/JS Puro (Para Iniciantes Completos)

HTML5        → Estrutura da página web
CSS3         → Estilização
JavaScript   → Funcionalidades dinâmicas (opcional)

Opção B: Next.js (Usando Framework)

Next.js 14+  → Framework baseado em React
Tailwind CSS → CSS utilitário
TypeScript   → Segurança de tipos (opcional)

Orientação de Nível de Linguagem (v1.3.0)

Recomendado: Apenas linguagens Tier 1 (Python, TypeScript, JavaScript)

O nível Starter foca no desenvolvimento AI-Native com suporte máximo de ferramentas de IA.

Tier	Permitido	Motivo
Tier 1	✅ Sim	Suporte total de IA, otimizado para Vibe Coding
Tier 2	⚠️ Limitado	Considere o nível Dynamic em vez disso
Tier 3-4	❌ Não	Atualize para Dynamic/Enterprise

Estrutura do Projeto

Opção A: HTML/CSS/JS

projeto/
├── index.html          # Página principal
├── about.html          # Página Sobre
├── css/
│   └── style.css       # Estilos
├── js/
│   └── main.js         # JavaScript
├── images/             # Arquivos de imagem
├── docs/               # Documentos PDCA
│   ├── 01-plan/
│   └── 02-design/
└── README.md

Opção B: Next.js

projeto/
├── src/
│   ├── app/
│   │   ├── layout.tsx      # Layout comum
│   │   ├── page.tsx        # Página principal
│   │   └── about/
│   │       └── page.tsx    # Página Sobre
│   └── components/         # Componentes reutilizáveis
├── public/                 # Arquivos estáticos
├── docs/                   # Documentos PDCA
├── package.json
├── tailwind.config.js
└── README.md

Explicações de Conceitos Principais

HTML (Estrutura da Página Web)

<!-- Estrutura básica -->
<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <title>Meu Site</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <header>Cabeçalho</header>
    <main>Conteúdo principal</main>
    <footer>Rodapé</footer>
</body>
</html>

CSS (Estilizando Páginas Web)

/* Estilos básicos */
body {
    font-family: 'Inter', sans-serif;
    margin: 0;
    padding: 0;
}

/* Alinhamento central */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

/* Responsivo (suporte mobile) */
@media (max-width: 768px) {
    .container {
        padding: 10px;
    }
}

Next.js App Router (Criando Páginas)

// app/page.tsx - Página principal
export default function Home() {
  return (
    <main className="container mx-auto p-4">
      <h1 className="text-3xl font-bold">
        Bem-vindo(a)!
      </h1>
    </main>
  );
}

// app/about/page.tsx - Página Sobre
// URL: /about
export default function About() {
  return (
    <div className="container mx-auto p-4">
      <h1>Sobre</h1>
      <p>Eu sou ...</p>
    </div>
  );
}

Tailwind CSS (Estilização Rápida)

// Classes de uso frequente
<div className="
  container    // Alinhamento central
  mx-auto      // Margem automática esquerda/direita
  p-4          // Padding 16px
  text-center  // Texto centralizado
  text-xl      // Texto grande
  font-bold    // Texto em negrito
  bg-blue-500  // Fundo azul
  text-white   // Texto branco
  rounded-lg   // Cantos arredondados
  hover:bg-blue-600  // Mudança de cor ao passar o mouse
">

Métodos de Implantação

GitHub Pages (Gratuito)

1. Criar repositório no GitHub
2. Enviar o código
3. Configurações → Pages → Source: branch main
4. Acessar em https://seuusuario.github.io/nome-do-repositorio

Vercel (Recomendado para Next.js)

1. Cadastrar-se em vercel.com (integração com GitHub)
2. "New Project" → Selecionar repositório
3. Clicar em "Deploy"
4. URL gerada automaticamente

Limitações

❌ Login/Cadastro (requer servidor)
❌ Armazenamento de dados (requer banco de dados)
❌ Páginas de administração (requer backend)
❌ Funcionalidades de pagamento (requer backend)

Quando Atualizar

Mude para o Nível Dynamic se precisar de:

→ "Preciso de funcionalidade de login"
→ "Quero armazenar dados"
→ "Preciso de uma página de administração"
→ "Quero que os usuários se comuniquem entre si"

Funcionalidades bkit no Nível Starter (v1.5.1)

Estilo de Saída: bkit-learning (Recomendado)

Para a melhor experiência de aprendizado, ative o estilo de saída de aprendizado:

/output-style bkit-learning

Isso oferece:

Pontos de aprendizado após cada tarefa, explicando o que foi feito e por quê
Marcadores TODO(learner) incentivando a prática hands-on
Explicações de conceitos ajustadas para dificuldade de iniciante

Memória do Agente (Auto-Ativa)

Os agentes bkit lembram automaticamente seu progresso de aprendizado entre sessões. Nenhuma configuração necessária — seu agente starter-guide usa memória de escopo user, então o contexto de aprendizado persiste mesmo entre projetos diferentes.

Equipes de Agentes

Equipes de Agentes não estão disponíveis para projetos no nível Starter. Quando você atualizar para o nível Dynamic, desbloqueará o modo PDCA paralelo com 2 colegas de equipe.

Erros Comuns

Erro	Solução
Imagem não aparece	Verifique o caminho (`./images/photo.jpg`)
CSS não aplicado	Verifique o caminho da tag link
Navegação entre páginas não funciona	Verifique o caminho href (`./about.html`)
Quebra no mobile	Verifique a tag `<meta name="viewport">`

Iniciante (Starter) – Desenvolvimento Web para Iniciantes

O que é Iniciante (Starter) – Desenvolvimento Web para Iniciantes?

Perguntar na sua IA favorita

Documentação