ww-w-ai/bkit-codex

Habilidade Iniciante (Starter)

Desenvolvimento web estático para iniciantes e não-desenvolvedores.

Ações

Ação	Descrição	Exemplo
init	Inicialização de projeto	$starter init meu-portfolio
guide	Exibir guia de desenvolvimento	$starter guide
help	Ajuda para iniciantes	$starter help

init (Inicialização de Projeto)

1. Criar estrutura de diretórios do projeto (HTML/CSS/JS ou Next.js)
2. Gerar package.json (quando Next.js for selecionado)
3. Criar AGENTS.md (com Nível: Starter especificado)
4. Criar estrutura da pasta docs/ (para documentos PDCA)
5. Inicializar .pdca-status.json

guide (Guia de Desenvolvimento)

• Analisar o estado atual do projeto
• Sugerir próximos passos apropriados para o nível Starter
• Guia de pipeline focado nas Fases 1-3 (1 -> 2 -> 3 -> 6 -> 9)

help (Ajuda para Iniciantes)

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

Público-alvo

• Pessoas aprendendo programação pela primeira vez
• Pessoas que desejam 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

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

Nível	Permitido	Motivo
Tier 1	Sim	Suporte total de IA, otimizado para Vibe Coding
Tier 2	Limitado	Considere usar o nível Dynamic
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

Conceitos Principais

HTML (Estrutura da Página Web)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <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 (Estilização)

body {
    font-family: 'Inter', sans-serif;
    margin: 0;
    padding: 0;
}

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

@media (max-width: 768px) {
    .container { padding: 10px; }
}

Next.js App Router

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

Métodos de Implantação

GitHub Pages (Gratuito)

1. Criar repositório no GitHub
2. Enviar código
3. Settings -> Pages -> Source: branch main
4. Acessar em https://usuario.github.io/nome-repositorio

Vercel (Recomendado para Next.js)

1. Cadastrar-se em vercel.com (com integração ao GitHub)
2. "New Project" -> Selecionar repositório
3. Clicar em "Deploy"

Limitações

• Sem login/registro (requer servidor)
• Sem armazenamento de dados (requer banco de dados)
• Sem páginas de administração (requer backend)
• Sem funcionalidades de pagamento (requer backend)

Quando Atualizar

Mude para o Nível Dynamic ($dynamic) se precisar de:

• Funcionalidade de login
• Armazenamento de dados
• Página de administração
• Funcionalidades de comunicação com usuário

Fluxo do Pipeline (Starter)

Fase 1 -> 2 -> 3 -> 6(estático) -> 9

Pular API (Fase 4), Sistema de Design (Fase 5 opcional), SEO apenas na Fase 7.

Erros Comuns

Erro	Solução
Imagem não aparece	Verificar caminho (./images/foto.jpg)
CSS não aplicado	Verificar caminho da tag de link
Navegação entre páginas não funciona	Verificar caminho href (./about.html)
Quebrado em dispositivos móveis	Verificar tag <meta name="viewport">