Compétence Débutant (Starter)

Actions

Action	Description	Exemple
`init`	Initialisation de projet (fonctionnalité /init-starter)	`/starter init mon-portfolio`
`guide`	Afficher le guide de développement	`/starter guide`
`help`	Aide pour débutant	`/starter help`

init (Initialisation de projet)

Créer la structure du répertoire projet (HTML/CSS/JS ou Next.js)
Générer package.json (quand Next.js est sélectionné)
Créer CLAUDE.md (Niveau : Starter spécifié)
Créer la structure du dossier docs/ (pour les documents PDCA)
Initialiser le pipeline store — writeBkitMemory() dans lib/pdca/status.js, qui écrit .bkit/state/memory.json (le chemin migré de .bkit-memory.json). Cela contient le niveau du projet et le pipelineStatus en 9 phases, lu par les hooks d'arrêt du pipeline pour les phases 5, 6 et 9. Ce n'est PAS là où se trouve la phase PDCA — c'est .bkit/state/pdca-status.json.

guide (Guide de développement)

Analyser l'état actuel du projet
Suggérer les prochaines étapes appropriées pour le niveau Starter
Guide du pipeline axé sur les phases 1 à 3

help (Aide débutant)

Expliquer les concepts de base HTML/CSS/JS
Répondre aux questions fréquemment posées
Fournir des exemples de code

Public cible

Ceux qui apprennent la programmation pour la première fois
Ceux qui veulent créer un site web simple
Ceux qui ont besoin d'un site portfolio

Stack Technique

Option A : HTML/CSS/JS pur (Pour les débutants complets)

HTML5        → Structure de la page web
CSS3         → Style
JavaScript   → Fonctionnalités dynamiques (optionnel)

Option B : Next.js (Utilisation d'un framework)

Next.js 14+  → Framework basé sur React
Tailwind CSS → CSS utilitaire
TypeScript   → Sécurité de type (optionnel)

Guide des niveaux de langage (v1.3.0)

Recommandé : Langages de niveau 1 uniquement (Python, TypeScript, JavaScript)

Le niveau Starter se concentre sur le développement AI-Natif avec un support AI maximal.

Niveau	Autorisé	Raison
Niveau 1	✅ Oui	Support AI complet, optimisé pour Vibe Coding
Niveau 2	⚠️ Limité	Envisagez plutôt le niveau Dynamique
Niveau 3-4	❌ Non	Passez au niveau Dynamique/Entreprise

Structure du projet

Option A : HTML/CSS/JS

projet/
├── index.html          # Page principale
├── about.html          # Page à propos
├── css/
│   └── style.css       # Styles
├── js/
│   └── main.js         # JavaScript
├── images/             # Fichiers images
├── docs/               # Documents PDCA
│   ├── 01-plan/
│   └── 02-design/
└── README.md

Option B : Next.js

projet/
├── src/
│   ├── app/
│   │   ├── layout.tsx      # Mise en page commune
│   │   ├── page.tsx        # Page principale
│   │   └── about/
│   │       └── page.tsx    # Page à propos
│   └── components/         # Composants réutilisables
├── public/                 # Fichiers statiques
├── docs/                   # Documents PDCA
├── package.json
├── tailwind.config.js
└── README.md

Explications des concepts de base

HTML (Structure de la page web)

<!-- Structure de base -->
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Mon Site</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <header>En-tête</header>
    <main>Contenu principal</main>
    <footer>Pied de page</footer>
</body>
</html>

CSS (Style des pages web)

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

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

/* Responsive (support mobile) */
@media (max-width: 768px) {
    .container {
        padding: 10px;
    }
}

App Router Next.js (Création de pages)

// app/page.tsx - Page principale
export default function Home() {
  return (
    <main className="container mx-auto p-4">
      <h1 className="text-3xl font-bold">
        Bienvenue !
      </h1>
    </main>
  );
}

// app/about/page.tsx - Page à propos
// URL : /about
export default function About() {
  return (
    <div className="container mx-auto p-4">
      <h1>À propos</h1>
      <p>Je suis ...</p>
    </div>
  );
}

Tailwind CSS (Mise en forme rapide)

// Classes fréquemment utilisées
<div className="
  container    // Centrage
  mx-auto      // Marge automatique gauche/droite
  p-4          // Padding 16px
  text-center  // Texte centré
  text-xl      // Texte large
  font-bold    // Texte en gras
  bg-blue-500  // Fond bleu
  text-white   // Texte blanc
  rounded-lg   // Coins arrondis
  hover:bg-blue-600   // Changement de couleur au survol
">

Méthodes de déploiement

GitHub Pages (Gratuit)

1. Créer un dépôt GitHub
2. Pousser le code
3. Paramètres → Pages → Source : branche main
4. Accéder à l'adresse https://username.github.io/nom-du-depot

Vercel (Recommandé pour Next.js)

1. S'inscrire sur vercel.com (intégration GitHub)
2. "New Project" → Sélectionner le dépôt
3. Cliquer sur "Deploy"
4. URL générée automatiquement

Limitations

❌ Connexion/Inscription (nécessite un serveur)
❌ Stockage de données (nécessite une base de données)
❌ Pages d'administration (nécessite un backend)
❌ Fonctionnalités de paiement (nécessite un backend)

Quand passer au niveau supérieur

Passez au niveau Dynamique si vous avez besoin :

→ "J'ai besoin d'une fonctionnalité de connexion"
→ "Je veux stocker des données"
→ "J'ai besoin d'une page d'administration"
→ "Je veux que les utilisateurs communiquent entre eux"

Fonctionnalités bkit pour le niveau Starter (v1.5.1)

Style de sortie : bkit-learning (Recommandé)

Pour une meilleure expérience d'apprentissage, activez le style de sortie d'apprentissage :

/output-style bkit-learning

Cela fournit :

Des points d'apprentissage après chaque tâche expliquant ce que vous avez fait et pourquoi
Des marqueurs TODO(apprenant) encourageant la pratique pratique
Des explications de concepts adaptées au niveau débutant

Mémoire d'agent (Auto-active)

Les agents bkit se souviennent automatiquement de votre progression d'apprentissage entre les sessions. Aucune configuration nécessaire — votre agent starter-guide utilise la mémoire de portée user, le contexte d'apprentissage persiste donc même entre différents projets.

Équipes d'agents

Les équipes d'agents ne sont pas disponibles pour les projets de niveau Starter. Lorsque vous passez au niveau Dynamique, vous débloquez le mode PDCA parallèle avec 2 coéquipiers.

Erreurs courantes

Erreur	Solution
L'image ne s'affiche pas	Vérifiez le chemin (`./images/photo.jpg`)
Le CSS ne s'applique pas	Vérifiez le chemin de la balise link
La navigation entre pages ne fonctionne pas	Vérifiez le chemin href (`./about.html`)
Cassé sur mobile	Vérifiez la balise `<meta name="viewport">`

bkit-claude-code - Développement web statique débutant

Qu'est-ce que bkit-claude-code - Développement web statique débutant ?

Demander à votre IA préférée

Documentation