ww-w-ai/bkit-codex

Skill für Einsteiger (Starter)

Statische Webentwicklung für Anfänger und Nicht-Entwickler.

Aktionen

Aktion	Beschreibung	Beispiel
init	Projektinitialisierung	$starter init my-portfolio
guide	Entwicklungsleitfaden anzeigen	$starter guide
help	Hilfe für Einsteiger	$starter help

init (Projektinitialisierung)

1. Projektverzeichnisstruktur erstellen (HTML/CSS/JS oder Next.js)
2. package.json generieren (bei Auswahl von Next.js)
3. AGENTS.md erstellen (Level: Starter festgelegt)
4. docs/-Ordnerstruktur erstellen (für PDCA-Dokumente)
5. .pdca-status.json initialisieren

guide (Entwicklungsleitfaden)

• Aktuellen Projektstatus analysieren
• Nächste Schritte vorschlagen, die dem Starter-Level entsprechen
• Pipeline-Anleitung für die Phasen 1-3 (1 -> 2 -> 3 -> 6 -> 9)

help (Hilfe für Einsteiger)

• Grundkonzepte von HTML/CSS/JS erklären
• Häufig gestellte Fragen beantworten
• Beispielcode bereitstellen

Zielgruppe

• Personen, die zum ersten Mal programmieren lernen
• Personen, die eine einfache Website erstellen möchten
• Personen, die eine Portfolio-Seite benötigen

Technologie-Stack

Option A: Reines HTML/CSS/JS (Für absolute Anfänger)

HTML5        -> Webseitenstruktur
CSS3         -> Gestaltung
JavaScript   -> Dynamische Funktionen (optional)

Option B: Next.js (Mit Framework)

Next.js 14+  -> React-basiertes Framework
Tailwind CSS -> Utility-CSS
TypeScript   -> Typsicherheit (optional)

Sprachstufen-Empfehlung

Empfohlen: Nur Sprachen der Stufe 1 (Python, TypeScript, JavaScript)

Stufe	Erlaubt	Grund
Stufe 1	Ja	Volle KI-Unterstützung, für Vibe Coding optimiert
Stufe 2	Eingeschränkt	Stattdessen Dynamic-Level in Betracht ziehen
Stufe 3-4	Nein	Upgrade auf Dynamic/Enterprise erforderlich

Projektstruktur

Option A: HTML/CSS/JS

project/
├── index.html          # Hauptseite
├── about.html          # Über-Seite
├── css/
│   └── style.css       # Styles
├── js/
│   └── main.js         # JavaScript
├── images/             # Bilddateien
├── docs/               # PDCA-Dokumente
│   ├── 01-plan/
│   └── 02-design/
└── README.md

Option B: Next.js

project/
├── src/
│   ├── app/
│   │   ├── layout.tsx      # Gemeinsames Layout
│   │   ├── page.tsx        # Hauptseite
│   │   └── about/
│   │       └── page.tsx    # Über-Seite
│   └── components/         # Wiederverwendbare Komponenten
├── public/                 # Statische Dateien
├── docs/                   # PDCA-Dokumente
├── package.json
├── tailwind.config.js
└── README.md

Kernkonzepte

HTML (Webseitenstruktur)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Meine Website</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <header>Kopfzeile</header>
    <main>Hauptinhalt</main>
    <footer>Fußzeile</footer>
</body>
</html>

CSS (Gestaltung)

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

Bereitstellungsmethoden

GitHub Pages (Kostenlos)

1. GitHub-Repository erstellen
2. Code hochladen
3. Einstellungen -> Pages -> Quelle: main-Branch
4. Zugriff unter https://username.github.io/repo-name

Vercel (Empfohlen für Next.js)

1. Anmelden bei vercel.com (GitHub-Integration)
2. "New Project" -> Repository auswählen
3. Auf "Deploy" klicken

Einschränkungen

• Kein Login/Registrierung (benötigt Server)
• Keine Datenspeicherung (benötigt Datenbank)
• Keine Admin-Seiten (benötigt Backend)
• Keine Zahlungsfunktionen (benötigt Backend)

Wann ein Upgrade sinnvoll ist

Wechseln Sie zum Dynamic-Level ($dynamic), wenn Sie Folgendes benötigen:

• Login-Funktionalität
• Datenspeicherung
• Admin-Seite
• Benutzerkommunikationsfunktionen

Pipeline-Ablauf (Starter)

Phase 1 -> 2 -> 3 -> 6(statisch) -> 9

API (Phase 4) und Designsystem (Phase 5 optional) überspringen. SEO nur in Phase 7.

Häufige Fehler

Fehler	Lösung
Bild wird nicht angezeigt	Pfad prüfen (./images/photo.jpg)
CSS wird nicht angewendet	Pfad im link-Tag prüfen
Seitennavigation funktioniert nicht	href-Pfad prüfen (./about.html)
Auf Mobilgeräten defekt	<meta name="viewport">-Tag prüfen