ww-w-ai/bkit-codex

Habilidad para Principiantes (Inicial)

Desarrollo web estático para principiantes y no desarrolladores.

Acciones

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

init (Inicialización del Proyecto)

1. Crear la estructura de directorios del proyecto (HTML/CSS/JS o Next.js)
2. Generar package.json (cuando se selecciona Next.js)
3. Crear AGENTS.md (Nivel: Inicial especificado)
4. Crear la estructura de la carpeta docs/ (para documentos PDCA)
5. Inicializar .pdca-status.json

guide (Guía de Desarrollo)

• Analizar el estado actual del proyecto
• Sugerir los siguientes pasos apropiados para el nivel Inicial
• Guía de Pipeline enfocada en las Fases 1-3 (1 -> 2 -> 3 -> 6 -> 9)

help (Ayuda para Principiantes)

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

Público Objetivo

• Aquellos que aprenden programación por primera vez
• Aquellos que quieren crear un sitio web simple
• Aquellos que necesitan un sitio portafolio

Stack Tecnológico

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

HTML5        -> Estructura de la página web
CSS3         -> Estilos
JavaScript   -> Funcionalidades 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)

Orientación de Niveles de Lenguaje

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

Nivel	Permitido	Razón
Nivel 1	Sí	Soporte completo de IA, optimizado para Vibe Coding
Nivel 2	Limitado	Considere usar el nivel Dinámico en su lugar
Nivel 3-4	No	Actualice a Dinámico/Empresarial

Estructura del Proyecto

Opción A: HTML/CSS/JS

project/
├── 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

project/
├── 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

Conceptos Clave

HTML (Estructura de la Página Web)

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

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">¡Bienvenido!</h1>
    </main>
  );
}

Métodos de Despliegue

GitHub Pages (Gratuito)

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

Vercel (Recomendado para Next.js)

1. Registrarse en vercel.com (con integración de GitHub)
2. "New Project" -> Seleccionar repositorio
3. Hacer clic en "Deploy"

Limitaciones

• Sin inicio de sesión/registro (requiere servidor)
• Sin almacenamiento de datos (requiere base de datos)
• Sin páginas de administración (requiere backend)
• Sin funciones de pago (requiere backend)

Cuándo Actualizar

Pase al Nivel Dinámico ($dynamic) si necesita:

• Funcionalidad de inicio de sesión
• Almacenamiento de datos
• Página de administración
• Funciones de comunicación con usuarios

Flujo del Pipeline (Inicial)

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

Omitir API (Fase 4), Sistema de Diseño (Fase 5 opcional), SEO solo en la Fase 7.

Errores Comunes

Error	Solución
La imagen no se muestra	Verifique la ruta (./images/photo.jpg)
CSS no se aplica	Verifique la ruta del enlace
La navegación entre páginas no funciona	Verifique la ruta href (./about.html)
Se rompe en móvil	Verifique la etiqueta <meta name="viewport">