Créer avec l’IA

Les éditeurs IA et les agents de code se trompent souvent sur sitelo : ils reprennent des schémas React, Next ou Astro qui ne s’appliquent pas ici. Ce guide montre comment les orienter vers la documentation à jour de sitelo et garder le code généré dans le bon modèle.

Skills pour agents

sitelo fournit deux Agent Skills : des instructions qu’un agent de code ne charge que lorsqu’une tâche en a besoin. La CLI skills les installe dans votre projet pour Claude Code, Cursor, Codex et les autres agents qu’elle prend en charge :

npx skills add Paul-Browne/sitelo

• sitelo — pages, routage, chargement de données, configuration, assets, images, îlots serveur, Lighthouse et déploiement
• sitelo-ui — la bibliothèque de composants : les props de chaque composant, les thèmes, les presets, les icônes et les helpers côté client

Ajoutez --skill sitelo-ui pour n’en installer qu’une, ou -g pour les installer dans tous vos projets. Une skill vit dans le projet : l’agent la trouve sans qu’on ait à lui indiquer une URL.

llms.txt

sitelo publie un résumé du framework lisible par les machines à l’adresse sitelo.dev/llms.txt. Beaucoup d’agents savent récupérer une URL ; demandez au vôtre de lire ce fichier (et la documentation destinée aux humains) avant d’écrire du code sitelo.

• https://sitelo.dev/llms.txt — API et conventions au format compact
• https://sitelo.dev/llms-full.txt — tous les guides, pages de composants et exemples dans un seul fichier Markdown (en anglais) ; chaque page seule se trouve à son adresse suivie de .md, par ex. /docs/routing.md
• https://sitelo.dev/fr/docs — guides complets
• README GitHub — modèle mental et aperçu des fonctionnalités
• https://ht.js.org — documentation de javascript-to-html (recommandé pour écrire du HTML en JS)

Contrairement à un serveur MCP de documentation, llms.txt ne demande aucune installation — collez l’URL dans la conversation, ajoutez-la aux règles du projet, ou laissez l’agent la récupérer.

Règles de projet

Si votre outil accepte des instructions persistantes (AGENTS.md, règles Cursor, instructions Copilot, …), ajoutez une courte règle sitelo pour que chaque session démarre avec le bon modèle mental. L’exemple de base inclut un AGENTS.md à copier :

# sitelo

Ce projet utilise [sitelo](https://sitelo.dev) — un générateur de sites statiques propulsé par Vite.

## Règles

- Les pages sont des modules dans `src/` avec des extensions comme `.ht.js` / `.ht.ts` / `.ht.jsx` qui **exportent par défaut une fonction (ou une chaîne) renvoyant du HTML**.
- N’introduis **pas** React, Next.js, Astro, ni un framework à composants/hydratation sauf demande explicite de l’utilisateur.
- Le routage se base sur les fichiers : `about.ht.js` → `/about`, `[slug].ht.js` → dynamique (utilise `generateStaticParams` pour `sitelo build`).
- Charge les données avec `export async function data(ctx)`. Utilise `fetchWithCache` depuis `sitelo` pour du HTTP mis en cache. Lis du JSON local avec `readJson` / `readJsonCollection` depuis `sitelo/data`.
- Seuls les JS/CSS référencés depuis le HTML sont inclus dans `dist/`. Laisse le code serveur non référencé pour qu’il ne soit jamais livré.
- La configuration vit dans `sitelo.config.js`. Place les options Vite sous `vite`.
- Commandes : `sitelo` (dev), `sitelo build`, `sitelo preview`.
- Pour les API à jour, lis https://sitelo.dev/llms.txt et https://sitelo.dev/docs — n’invente pas d’API venant d’autres frameworks.
- Préfère [javascript-to-html](https://ht.js.org) (`ht.js`) pour le balisage : des fonctions de balise qui renvoient des chaînes HTML. Docs : https://ht.js.org

Cursor

Créez .cursor/rules/sitelo.mdc dans votre projet (ou collez le même texte dans l’interface des règles de projet de Cursor) :

---
description: conventions de sites statiques sitelo
alwaysApply: true
---

# sitelo

Les pages sont des modules `.ht.js` (etc.) qui renvoient des chaînes HTML — pas des composants React/Next/Astro.
Préfère javascript-to-html (https://ht.js.org) pour le balisage. Utilise le routage par fichiers, `data()` et `sitelo build`.
Consulte https://sitelo.dev/llms.txt pour les API de sitelo.

Conseils pour travailler sur sitelo avec l’IA

• Partez d’un modèle — demandez à l’agent de générer la structure depuis examples/basic ou examples/wordpress plutôt que d’inventer un framework.
• Préférez javascript-to-html (ht.js) pour le balisage — des fonctions de balise qui renvoient des chaînes HTML, sans moteur de gabarit ni React. Orientez les agents vers ht.js.org pour qu’ils n’inventent pas d’arbres de composants JSX.
• Les pages sont des fonctions qui renvoient du HTML — export default () => `<html>…</html>` ou composées avec javascript-to-html. JSX convient tant qu’il compile vers des chaînes ; un runtime React n’est pas nécessaire.
• Utilisez la CLI de sitelo — sitelo / sitelo build — et non vite directement, sauf si vous savez avoir besoin d’une configuration Vite sur mesure.
• Vérifiez les API contre llms.txt — en particulier generateStaticParams, fetchWithCache et les îlots serveur.
• Zéro JS par défaut — ne liez un <script> que si la page a besoin de code client ; les modules non référencés restent côté serveur.
• Relisez et exécutez — lancez toujours sitelo build (ou le serveur de développement) après que l’agent a modifié des pages ; traitez le balisage généré comme un brouillon.

Démarrage · Exemple de base · llms.txt