Compétence Débutant (Starter) – Développement Web Statique

Compétence Débutant (Starter)

Actions

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

init (Initialisation du projet)

1. Créer la structure de répertoires du projet (HTML/CSS/JS ou Next.js)
2. Générer package.json (si Next.js est sélectionné)
3. Créer CLAUDE.md (Niveau : Starter spécifié)
4. Créer la structure de dossier docs/ (pour les documents PDCA)
5. Initialiser .bkit-memory.json

guide (Guide de développement)

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

help (Aide pour débutant)

• Expliquer les concepts de base HTML/CSS/JS
• Répondre aux questions fréquentes
• Fournir du code d'exemple

Public cible

• Personnes apprenant la programmation pour la première fois
• Personnes souhaitant créer un site web simple
• Personnes ayant besoin d'un site portfolio

Pile technique

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

HTML5        → Structure de la page web
CSS3         → Styles
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é des types (optionnel)

Guide des niveaux de langage (v1.3.0)

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

Le niveau Starter se concentre sur le développement natif IA avec un support maximal des outils IA.

Niveau	Autorisé	Raison
Niveau 1	✅ Oui	Support IA complet, optimisé Vibe Coding
Niveau 2	⚠️ Limité	Envisagez plutôt le niveau Dynamic
Niveau 3-4	❌ Non	Passez à Dynamic/Enterprise

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 clés

HTML (Structure de la page web)

<!-- Structure de base -->
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Mon site web</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 (Mise en forme 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;
}

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

Next.js App Router (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 (Style 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 grand
  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. Settings → Pages → Source : branche main
4. Accéder à 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 à un niveau supérieur

Passez au niveau Dynamic si vous avez besoin de :

→ "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"

Erreurs courantes

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

⚡ Intégration d'optimisation

Lors de l'utilisation de cette compétence pour des tâches critiques, veuillez l'exécuter dans un contexte /native-trace pour capturer les données de performance en vue d'une auto-amélioration via /aioptimize.