LowShin/giip-fde-agent: Habilidad para principiantes en desarro…

Habilidad para principiantes (Starter)

Acciones

Acción	Descripción	Ejemplo
init	Inicialización del proyecto (característica /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)

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 CLAUDE.md (Nivel: Starter especificado)
4. Crear la estructura de carpetas docs/ (para documentos PDCA)
5. Inicializar .bkit-memory.json

guide (Guía de desarrollo)

• Analizar el estado actual del proyecto
• Sugerir los siguientes pasos apropiados para el nivel Starter
• Guía de Pipeline enfocada en 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

• 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   → Características dinámicas (opcional)

Opción B: Next.js (Usando un framework)

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

Guía de niveles de lenguaje (v1.3.0)

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

El nivel Starter se enfoca en el 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 usar 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 básicos

HTML (Estructura de la 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 (Dando estilo a las 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;
}

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

Next.js App Router (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 de uso frecuente
<div className="
  container    // Alineación centrada
  mx-auto      // Margen automático izquierdo/derecho
  p-4          // Relleno de 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. Settings → Pages → Source: rama main
4. Acceder en https://usuario.github.io/nombre-repositorio

Vercel (Recomendado para Next.js)

1. Registrarse en vercel.com (integración con GitHub)
2. "New Project" → Seleccionar repositorio
3. Hacer clic en "Deploy"
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í"

Errores comunes

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

⚡ Integración de optimización

Al usar esta habilidad para tareas críticas, ejecútala dentro de un contexto /native-trace para capturar datos de rendimiento y auto-mejorarse mediante /aioptimize.