Fähigkeit für Anfänger (Starter)

Aktionen

Aktion	Beschreibung	Beispiel
`init`	Projektinitialisierung (/init-starter Funktion)	`/starter init my-portfolio`
`guide`	Entwicklungsleitfaden anzeigen	`/starter guide`
`help`	Hilfe für Anfänger	`/starter help`

init (Projektinitialisierung)

Erstellen der Projektverzeichnisstruktur (HTML/CSS/JS oder Next.js)
Generieren von package.json (wenn Next.js ausgewählt)
Erstellen von CLAUDE.md (Stufe: Starter festgelegt)
Erstellen des docs/-Verzeichnisses (für PDCA-Dokumente)
Initialisieren von .bkit-memory.json

guide (Entwicklungsleitfaden)

Analysieren des aktuellen Projektzustands
Vorschlagen nächster Schritte, geeignet für die Starter-Stufe
Phasen-1-bis-3-orientierter Pipeline-Leitfaden

help (Hilfe für Anfänger)

Erklärung grundlegender HTML/CSS/JS-Konzepte
Beantworten häufig gestellter Fragen
Bereitstellen von Beispielcode

Zielgruppe

Personen, die zum ersten Mal programmieren lernen
Personen, die eine einfache Website erstellen möchten
Personen, die eine Portfolio-Website 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 (v1.3.0)

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

Die Starter-Stufe konzentriert sich auf KI-native Entwicklung mit maximaler KI-Tool-Unterstützung.

Stufe	Erlaubt	Begründung
Stufe 1	✅ Ja	Volle KI-Unterstützung, optimiert für Vibe Coding
Stufe 2	⚠️ Eingeschränkt	Stattdessen Dynamische Stufe in Betracht ziehen
Stufen 3-4	❌ Nein	Auf Dynamisch/Enterprise upgraden

Projektstruktur

Option A: HTML/CSS/JS

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

projekt/
├── 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="de">
<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 (Gestaltung von Webseiten)

/* Grundlegende Styles */
body {
    font-family: 'Inter', sans-serif;
    margin: 0;
    padding: 0;
}

/* Zentrierte Ausrichtung */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

/* Responsiv (Mobile-Unterstützung) */
@media (max-width: 768px) {
    .container {
        padding: 10px;
    }
}

Next.js App Router (Erstellen von Seiten)

// 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</h1>
      <p>Ich bin ...</p>
    </div>
  );
}

Tailwind CSS (Schnelle Gestaltung)

// Häufig verwendete Klassen
<div className="
  container    // Zentrierte Ausrichtung
  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. Settings → Pages → Quelle: main-Branch
4. Zugriff unter https://benutzername.github.io/repo-name

Vercel (Empfohlen für Next.js)

1. Bei vercel.com anmelden (GitHub-Integration)
2. "New Project" → Repository auswählen
3. Auf "Deploy" klicken
4. URL wird automatisch generiert

Einschränkungen

❌ Anmeldung/Registrierung (erfordert Server)
❌ Datenspeicherung (erfordert Datenbank)
❌ Admin-Seiten (erfordert Backend)
❌ Zahlungsfunktionen (erfordert Backend)

Wann ein Upgrade sinnvoll ist

Wechsel zur Dynamischen Stufe, 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"

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 Mobilgeräten kaputt	`<meta name="viewport">`-Tag prüfen

⚡ Optimierungs-Integration

Bei Verwendung dieser Fähigkeit für kritische Aufgaben führen Sie sie bitte in einem /native-trace-Kontext aus, um Leistungsdaten für die Selbstverbesserung über /aioptimize zu erfassen.

LowyShin/giip-fde-agent

Was ist giip-fde-agent?

In Ihrer bevorzugten KI fragen

Dokumentation