Anfänger (Einstiegs-) Skill
Aktionen
| Aktion | Beschreibung | Beispiel |
|---|---|---|
init | Projektinitialisierung (/init-starter Funktion) | /starter init my-portfolio |
guide | Entwicklungsleitfaden anzeigen | /starter guide |
help | Anfängerhilfe | /starter help |
init (Projektinitialisierung)
- Projekteverzeichnisstruktur erstellen (HTML/CSS/JS oder Next.js)
package.jsongenerieren (wenn Next.js ausgewählt)CLAUDE.mderstellen (Level: Starter festgelegt)- Ordnerstruktur
docs/erstellen (für PDCA-Dokumente) - Den Pipeline-Store initialisieren –
writeBkitMemory()inlib/pdca/status.js, schreibt.bkit/state/memory.json(den migrierten Pfad von.bkit-memory.json). Diese Datei enthält das Projekt-Level und den 9-Phasen-pipelineStatus, der von den Pipeline-Stop-Hooks für die Phasen 5, 6 und 9 gelesen wird. Sie ist NICHT der Ort, an dem die PDCA-Phase lebt – das ist.bkit/state/pdca-status.json.
guide (Entwicklungsleitfaden)
- Aktuellen Projektstatus analysieren
- Nächste Schritte geeignet für das Starter-Level vorschlagen
- Pipeline-Leitfaden mit Fokus auf Phase 1–3
help (Anfängerhilfe)
- Grundlegende HTML/CSS/JS-Konzepte 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)
Sprach-Tier-Empfehlung (v1.3.0)
Empfohlen: Nur Tier-1-Sprachen (Python, TypeScript, JavaScript)
Starter-Level konzentriert sich auf KI-native Entwicklung mit maximaler KI-Tool-Unterstützung.
| Tier | Erlaubt | Grund |
|---|---|---|
| Tier 1 | ✅ Ja | Volle KI-Unterstützung, für Vibe Coding optimiert |
| Tier 2 | ⚠️ Eingeschränkt | Stattdessen Dynamic-Level in Betracht ziehen |
| Tier 3–4 | ❌ Nein | Auf Dynamic/Enterprise upgraden |
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
Erklärungen zu Kernkonzepten
HTML (Webseitenstruktur)
<!-- Grundstruktur -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<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 (Webseiten gestalten)
/* Grundlegende Styles */
body {
font-family: 'Inter', sans-serif;
margin: 0;
padding: 0;
}
/* Zentrierung */
.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
/* Responsiv (Mobile-Unterstützung) */
@media (max-width: 768px) {
.container {
padding: 10px;
}
}
Next.js App Router (Seiten erstellen)
// app/page.tsx - Hauptseite
export default function Home() {
return (
<main className="container mx-auto p-4">
<h1 className="text-3xl font-bold">
Willkommen!
</h1>
</main>
);
}
// app/about/page.tsx - Über-Seite
// URL: /about
export default function About() {
return (
<div className="container mx-auto p-4">
<h1>Über mich</h1>
<p>Ich bin ...</p>
</div>
);
}
Tailwind CSS (Schnelles Gestalten)
// Häufig verwendete Klassen
<div className="
container // Zentrierung
mx-auto // Automatischer linker/rechter Rand
p-4 // Innenabstand 16px
text-center // Text zentrieren
text-xl // Großer Text
font-bold // Fetter Text
bg-blue-500 // Blauer Hintergrund
text-white // Weißer Text
rounded-lg // Abgerundete Ecken
hover:bg-blue-600 // Farbwechsel bei Mauszeiger
">
Bereitstellungsmethoden
GitHub Pages (Kostenlos)
1. GitHub-Repository erstellen
2. Code pushen
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. "Deploy" klicken
4. URL wird automatisch generiert
Einschränkungen
❌ Login/Registrierung (erfordert Server)
❌ Datenspeicherung (erfordert Datenbank)
❌ Admin-Seiten (erfordert Backend)
❌ Zahlungsfunktionen (erfordert Backend)
Wann upgraden
Wechsel zum Dynamic Level, wenn Sie Folgendes benötigen:
→ "Ich brauche eine Login-Funktion"
→ "Ich möchte Daten speichern"
→ "Ich brauche eine Admin-Seite"
→ "Ich möchte, dass Benutzer miteinander kommunizieren"
bkit-Funktionen für Starter-Level (v1.5.1)
Ausgabestil: bkit-learning (Empfohlen)
Für das beste Lernerlebnis den Lern-Ausgabestil aktivieren:
/output-style bkit-learning
Dies bietet:
- Lernpunkte nach jeder Aufgabe, die erklären, was getan wurde und warum
- TODO(learner)-Markierungen, die zur praktischen Übung anregen
- Konzepterklärungen, die auf Anfänger-Schwierigkeitsgrad abgestimmt sind
Agent Memory (Automatisch aktiv)
bkit-Agenten merken sich Ihren Lernfortschritt automatisch über Sitzungen hinweg.
Keine Einrichtung nötig – Ihr starter-guide-Agent verwendet user-Bereichsspeicher,
sodass der Lernkontext sogar über verschiedene Projekte hinweg erhalten bleibt.
Agent Teams
Agent Teams stehen für Starter-Level-Projekte nicht zur Verfügung. Wenn Sie auf Dynamic-Level upgraden, schalten Sie den 2-Teammitglied-Parallel-PDCA-Modus frei.
Häufige Fehler
| Fehler | Lösung |
|---|---|
| Bild wird nicht angezeigt | Pfad prüfen (./images/photo.jpg) |
| CSS wird nicht angewendet | Link-Tag-Pfad prüfen |
| Seitennavigation funktioniert nicht | href-Pfad prüfen (./about.html) |
| Auf mobilen Geräten defekt | <meta name="viewport">-Tag prüfen |