LowyShin/giip-fde-agent

Habilidade Iniciante (Starter)

Ações

Ação	Descrição	Exemplo
init	Inicialização de projeto (funcionalidade /init-starter)	/starter init meu-portfolio
guide	Exibe 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 selecionado)
3. Criar CLAUDE.md (Nível: Starter especificado)
4. Criar estrutura da pasta docs/ (para documentos PDCA)
5. Inicializar .bkit-memory.json

guide (Guia de Desenvolvimento)

• Analisar estado atual do projeto
• Sugerir próximos passos apropriados para o nível Starter
• Guia de Pipeline focado nas Fases 1-3

help (Ajuda para Iniciantes)

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

Público-Alvo

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

Pilha 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 de Nível 1 (Python, TypeScript, JavaScript)

O nível Starter foca no desenvolvimento Nativo para IA com máximo suporte de ferramentas de IA.

Nível	Permitido	Motivo
Nível 1	✅ Sim	Suporte completo de IA, otimizado para Vibe Coding
Nível 2	⚠️ Limitado	Considere o nível Dinâmico
Nível 3-4	❌ Não	Atualize para Dinâmico/Empresarial

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 Básicos

HTML (Estrutura da Página Web)

<!-- Estrutura básica -->
<!DOCTYPE html>
<html lang="pt">
<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 a 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!
      </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 frequentemente usadas
<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 código
3. Configurações → Pages → Fonte: branch main
4. Acessar em https://usuario.github.io/nome-do-repositorio

Vercel (Recomendado para Next.js)

1. Cadastre-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 administrativas (requer backend)
❌ Funcionalidades de pagamento (requer backend)

Quando Atualizar

Mude para o Nível Dinâmico se você precisar:

→ "Preciso de funcionalidade de login"
→ "Quero armazenar dados"
→ "Preciso de uma página administrativa"
→ "Quero que usuários se comuniquem entre si"

Erros Comuns

Erro	Solução
Imagem não aparece	Verifique o caminho (./images/foto.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)
Quebrado no mobile	Verifique a tag <meta name="viewport">

⚡ Integração de Otimização

Ao usar esta habilidade para tarefas críticas, execute-a dentro de um contexto /native-trace para capturar dados de desempenho para autoaperfeiçoamento via /aioptimize.