Habilidad para Principiantes (Starter)

Acciones

Acción	Descripción	Ejemplo
`init`	Inicialización del proyecto (función /init-starter)	`/starter init mi-portafolio`
`guide`	Mostrar guía de desarrollo	`/starter guide`
`help`	Ayuda para principiantes	`/starter help`

init (Inicialización del Proyecto)

Crear estructura de directorios del proyecto (HTML/CSS/JS o Next.js)
Generar package.json (cuando se selecciona Next.js)
Crear CLAUDE.md (Nivel: Starter especificado)
Crear estructura de carpeta docs/ (para documentos PDCA)
Inicializar el almacén del pipeline — writeBkitMemory() en lib/pdca/status.js, que escribe .bkit/state/memory.json (la ruta migrada de .bkit-memory.json). Esto contiene el nivel del proyecto y el pipelineStatus de 9 fases, leído por los hooks de parada del pipeline para las fases 5, 6 y 9. NO es donde reside la fase PDCA — eso está en .bkit/state/pdca-status.json.

guide (Guía de Desarrollo)

Analizar el estado actual del proyecto
Sugerir los siguientes pasos apropiados para el nivel Starter
Guía del Pipeline enfocada en las fases 1-3

help (Ayuda para Principiantes)

Explicar conceptos básicos de HTML/CSS/JS
Responder preguntas frecuentes
Proporcionar código de ejemplo

Público Objetivo

Personas que están aprendiendo programación por primera vez
Personas que quieren crear un sitio web simple
Personas que necesitan un sitio de portafolio

Stack Tecnológico

Opción A: HTML/CSS/JS puro (Para Principiantes Absolutos)

HTML5        → Estructura de página web
CSS3         → Estilos
JavaScript   → Funciones dinámicas (opcional)

Opción B: Next.js (Usando Framework)

Next.js 14+  → Framework basado en React
Tailwind CSS → CSS de utilidad
TypeScript   → Seguridad de tipos (opcional)

Guía de Niveles de Lenguaje (v1.3.0)

Recomendado: Solo lenguajes del Nivel 1 (Python, TypeScript, JavaScript)

El nivel Starter se enfoca en desarrollo nativo de IA con el máximo soporte de herramientas de IA.

Nivel	Permitido	Razón
Nivel 1	✅ Sí	Soporte completo de IA, optimizado para Vibe Coding
Nivel 2	⚠️ Limitado	Considera el nivel Dynamic en su lugar
Nivel 3-4	❌ No	Actualiza a Dynamic/Enterprise

Estructura del Proyecto

Opción A: HTML/CSS/JS

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

Opción B: Next.js

proyecto/
├── src/
│   ├── app/
│   │   ├── layout.tsx      # Diseño común
│   │   ├── page.tsx        # Página principal
│   │   └── about/
│   │       └── page.tsx    # Página Acerca de
│   └── components/         # Componentes reutilizables
├── public/                 # Archivos estáticos
├── docs/                   # Documentos PDCA
├── package.json
├── tailwind.config.js
└── README.md

Explicaciones de Conceptos Clave

HTML (Estructura de Página Web)

<!-- Estructura básica -->
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Mi Sitio Web</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <header>Encabezado</header>
    <main>Contenido principal</main>
    <footer>Pie de página</footer>
</body>
</html>

CSS (Estilizando Páginas Web)

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

/* Alineación centrada */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

/* Responsivo (soporte móvil) */
@media (max-width: 768px) {
    .container {
        padding: 10px;
    }
}

App Router de Next.js (Creando 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">
        ¡Bienvenido!
      </h1>
    </main>
  );
}

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

Tailwind CSS (Estilizado Rápido)

// Clases usadas frecuentemente
<div className="
  container    // Alineación centrada
  mx-auto      // Margen automático izquierdo/derecho
  p-4          // Relleno 16px
  text-center  // Texto centrado
  text-xl      // Texto grande
  font-bold    // Texto en negrita
  bg-blue-500  // Fondo azul
  text-white   // Texto blanco
  rounded-lg   // Esquinas redondeadas
  hover:bg-blue-600  // Cambio de color al pasar el ratón
">

Métodos de Despliegue

GitHub Pages (Gratuito)

1. Crear un repositorio en GitHub
2. Subir el código
3. Configuración → Pages → Fuente: rama main
4. Acceder en https://nombredeusuario.github.io/nombre-del-repositorio

Vercel (Recomendado para Next.js)

1. Registrarse en vercel.com (integración con GitHub)
2. "Nuevo Proyecto" → Seleccionar repositorio
3. Hacer clic en "Desplegar"
4. La URL se genera automáticamente

Limitaciones

❌ Inicio de sesión/Registro (requiere servidor)
❌ Almacenamiento de datos (requiere base de datos)
❌ Páginas de administración (requiere backend)
❌ Funciones de pago (requiere backend)

Cuándo Actualizar

Pasa al Nivel Dynamic si necesitas:

→ "Necesito funcionalidad de inicio de sesión"
→ "Quiero almacenar datos"
→ "Necesito una página de administración"
→ "Quiero que los usuarios se comuniquen entre sí"

Funciones de bkit para el Nivel Starter (v1.5.1)

Estilo de Salida: bkit-learning (Recomendado)

Para la mejor experiencia de aprendizaje, activa el estilo de salida de aprendizaje:

/output-style bkit-learning

Esto proporciona:

Puntos de aprendizaje después de cada tarea explicando qué hiciste y por qué
Marcadores TODO(learner) que fomentan la práctica práctica
Explicaciones de conceptos ajustadas para la dificultad de principiante

Memoria del Agente (Autoactiva)

Los agentes de bkit recuerdan automáticamente tu progreso de aprendizaje entre sesiones. No se necesita configuración — tu agente starter-guide usa memoria de ámbito user, por lo que el contexto de aprendizaje persiste incluso en diferentes proyectos.

Equipos de Agentes

Equipos de Agentes no está disponible para proyectos de nivel Starter. Cuando actualices al nivel Dynamic, desbloquearás el modo PDCA paralelo con 2 compañeros de equipo.

Errores Comunes

Error	Solución
La imagen no se muestra	Verifica la ruta (`./images/foto.jpg`)
El CSS no se aplica	Verifica la ruta de la etiqueta link
La navegación de página no funciona	Verifica la ruta href (`./about.html`)
Se rompe en móvil	Verifica la etiqueta `<meta name="viewport">`

ww-w-ai/bkit-claude-code

¿Qué es bkit-claude-code?

Preguntar en tu IA favorita

Documentación