colbyvk/skill-dev-site-web

website-dev

Construisez le site web personnel qu'une personne réfléchie se ferait pour elle-même. Il dit clairement qui elle est et ce qu'elle fait, met son vrai travail sur chaque écran, et a l'air de lui appartenir : pas un thème de portfolio, pas la moyenne statistique de tous les sites « Salut, je suis un développeur passionné » sur Internet, et pas une œuvre d'art qui cache le travail. La barre est celle des meilleurs sites personnels faits main par des designers, développeurs, écrivains, photographes et chercheurs : calmes, spécifiques, rapides et indubitablement ceux d'une seule personne.

Périmètre : sites personnels uniquement. Portfolio d'une personne, page d'accueil, blog, CV, page académique ou hub de liens. Le site d'un freelance compte, car il concerne une personne et son travail. Un site d'entreprise, de boutique, de produit, de startup ou d'agence ne compte pas. Si la tâche est l'un de ces cas, dites que ce skill est pour les sites personnels et ne l'appliquez pas.

Ce skill est un seul skill avec ses parties dans assets/. Le tableau ci-dessous indique quelle partie se charge quand, ce que chaque partie fait lors de la configuration initiale, et quand l'agent doit y écrire. Trois parties se chargent à chaque fois. Les autres se chargent lorsque la tâche les concerne.

Les fichiers

Fichier	Invocation	Configuration initiale	Déclencheur de lecture	Déclencheur de mise à jour
principes-de-design	Toujours	Ne configure jamais. Lu tel quel lors de la configuration ; rien n'est demandé ni modifié.	Chaque fois que ce skill se charge, avant la première décision de design ou de code.	Jamais par l'agent. Modifié uniquement lorsque l'utilisateur demande explicitement de changer un principe. Un désagrément va dans les interdits de design, pas ici.
interdits-de-design	Toujours	S'exécute à chaque configuration. Chaque direction, palette, police et composant proposé lors de la configuration est vérifié par rapport à chaque ligne avant que l'utilisateur ne le voie. Tout site de référence ou trait que l'utilisateur n'aime pas devient immédiatement une ligne utilisateur. Sur un site existant, listez les lignes déjà enfreintes.	Chaque fois que ce skill se charge, et de nouveau avant que quoi que ce soit de visible sur le site ne soit écrit ou modifié.	Chaque fois que l'utilisateur dit qu'il n'aime pas quelque chose (couleur, forme, mise en page, effet, mot, police, mouvement, ou un site de référence). Ajoutez une ligne en bas dans le même tour, avant de continuer le travail. Chaque ligne ajoutée est une ligne utilisateur.
systeme-de-design-utilisateur	Toujours	S'il n'y a pas de véritable système de design, configurez d'abord. Pas de véritable système de design signifie : la ligne Direction n'est pas « confirmée », ou les tableaux de couleurs et de polices n'ont pas de lignes « confirmées ». Ensuite, avant tout travail de design, posez les questions de configuration depuis la configuration initiale. L'utilisateur peut aussi démarrer la configuration à tout moment (« configure le système de design », « recommence le design »). Si l'utilisateur répond « tu décides » ou « configure-le pour moi », suivez le chemin de recherche. Les réponses de l'utilisateur deviennent « confirmées », les recherches deviennent « proposées », les valeurs lues à partir du code existant deviennent « extraites ». Si un véritable système de design existe, ne demandez pas à nouveau : demandez uniquement les lignes nécessaires à la tâche en cours qui sont encore vides.	Chaque fois que ce skill se charge. Ses valeurs confirmées l'emportent sur toutes les valeurs par défaut des autres fichiers.	Chaque fois que l'utilisateur ajoute ou modifie quelque chose dans son système de design (couleur, police, taille, pas d'espacement, rayon, ombre, token de mouvement, règle de composant, logo ou monogramme, règle d'image, règle de voix). Mettez à jour la ligne dans le même tour et enregistrez la modification. Également lorsque la configuration extrait ou recherche des tokens.
configuration-initiale	Quand : un nouveau site ou dépôt, la première exécution sur un site, un début de refonte, ou le système de design utilisateur n'a pas de direction confirmée.	Exécute la configuration lorsqu'un signal se déclenche : (1) le système de design utilisateur n'a pas de véritable système de design, (2) un nouveau site ou dépôt, (3) l'utilisateur demande de configurer ou de refaire le système de design, (4) une refonte commence. Posez les séries de questions immédiatement, dans la première réponse, avant tout travail de design. Si l'utilisateur dit « tu décides », « résous-le » ou « configure-le pour moi », suivez le chemin de recherche à la place. Ignoré lorsqu'un véritable système de design existe et que l'utilisateur n'a pas demandé.	Au début de la tâche, avant que toute page ou composant ne soit écrit.	Lorsque l'utilisateur modifie la façon dont un site doit démarrer (les questions, la pile, les outils), ou lorsqu'une étape de configuration se révèle erronée en pratique.
directions-de-design	Quand : la configuration demande l'aspect général, le chemin de recherche est suivi, ou l'utilisateur demande de changer l'aspect du site.	S'exécute lorsque la configuration pose la question de direction ou suit le chemin de recherche. La première question de configuration propose les 3 directions qui correspondent le mieux à la personne, plus « Fais des recherches pour moi ». Le chemin de recherche commence à partir de ce catalogue, puis cherche des directions de niche au-delà.	Avant de poser la question de direction, et avant toute recherche de directions.	Lorsque la recherche trouve une direction absente du catalogue, ajoutez-la. Lorsque l'utilisateur choisit ou rejette une direction, enregistrez-la. Le trait définissant d'une direction rejetée va également dans les interdits de design.
design-hero	Quand : la tâche construit, refait ou révise la page d'accueil ou son premier écran.	S'exécute lorsque la configuration pose la Q13 (uniquement si la personne n'a pas d'image de travail ou de photo). La réponse définit la source visuelle du hero dans le système de design utilisateur.	À l'étape de planification de l'écran, avant que le hero ne soit construit, et lors de la révision.	Lorsque l'utilisateur approuve un hero, enregistrez-le et écrivez-le dans le système de design utilisateur. Un hero non apprécié va dans les interdits de design. Le prompt d'un hero généré va dans son journal.
modules-visuels	Quand : la tâche planifie une page ou une section, un site semble fade, ou l'utilisateur demande « plus de vie ».	S'exécute avec le chemin de recherche : chaque candidat nomme 2 à 4 modules.	À l'étape de planification de l'écran, avant que toute section ne soit construite, et lors de la révision.	Lorsque l'utilisateur aime un module, enregistrez-le et ajoutez-le au système de design utilisateur. Un module non apprécié va dans les interdits de design. Un module trouvé lors de la recherche va dans son catalogue.
motion-design	Quand : la tâche touche à l'animation, aux transitions, aux états de survol ou de pression, aux effets de défilement, aux chargeurs, aux entrées de page, ou à tout ce qui bouge.	S'exécute lorsque la configuration pose la question sur le mouvement. La réponse définit le niveau de mouvement dans le système de design utilisateur. Plus demandé une fois que le niveau est « confirmé ».	Avant que tout code de mouvement ne soit écrit ou révisé.	Lorsque l'utilisateur approuve un motif de mouvement ou modifie une valeur de mouvement : enregistrez-le dans son tableau de décisions. Un mouvement que l'utilisateur n'aime pas va dans les interdits de design.
redaction-copies	Quand : la tâche écrit, réécrit ou révise tout texte visible sur le site (l'intro, la bio, les descriptions de projets, les titres, les liens, le texte alternatif, les balises méta).	S'exécute lorsque la configuration pose la question sur la voix. La réponse définit la voix dans le système de design utilisateur. Plus demandé une fois que la voix est « confirmée ».	Avant que le premier mot de copie ne soit écrit, et de nouveau avant la transmission.	Lorsque l'utilisateur énonce une règle de copie qui s'applique au-delà d'une seule chaîne : ajoutez-la à son tableau de règles de copie utilisateur. Une phrase ou un ton non apprécié va également dans les interdits de design. Une règle de voix va dans le système de design utilisateur.
portail-de-revision	Quand : avant de transmettre toute page, section ou composant, et lorsque l'utilisateur demande de réviser ou d'auditer son site.	Ne configure jamais. Non utilisé lors de la configuration.	Après la construction, avant le rapport à l'utilisateur.	Lorsque l'utilisateur trouve un problème après la transmission que le portail n'avait pas détecté : ajoutez une vérification à son tableau de vérifications utilisateur, et ajoutez le problème aux interdits de design.

Ce que signifie le goût ici

Le goût n'est pas un style. C'est un ensemble de décisions prises délibérément, pour cette personne, là où un modèle prendrait autrement la valeur par défaut.

• Le spécifique bat le générique. Chaque site personnel qu'un modèle écrit dérive vers la version qui conviendrait à tout le monde : « Salut, je suis [Nom] 👋 », « un développeur passionné qui adore créer des expériences numériques », des barres de compétences, une chronologie, trois fiches de projet avec des boutons GitHub, une lueur violette. Chacune de ces décisions n'a été prise par personne. Le spécifique doit venir de la personne : son travail, ses mots, ses photographies, son système de design. Jamais d'une règle de style, et jamais inventé.
• Le travail est le héros. Un visiteur vient voir ce que cette personne a créé, écrit ou trouvé. Mettez le meilleur de son travail sur le premier écran ou à un défilement de distance. La décoration (orbes, particules, blobs 3D, faux terminaux, widgets de démonstration de concept) est ce qui remplit une page quand le travail manque.
• Une personne, une voix. Un site personnel sonne comme quelqu'un, pas comme un modèle de recruteur. Des phrases courtes, simples et spécifiques dans la voix que la personne a choisie. Pas d'auto-éloge : le travail fait l'éloge.
• Curatez, n'archivez pas. Trois à six pièces fortes battent trente vignettes. La meilleure mène et obtient plus d'espace. Le reste est à un lien de distance.
• La retenue est le luxe. Une palette. Une échelle de rayons. Un style de lien. Un thème. L'espace utilisé comme matériau. Un site avec moins de décisions, mais meilleures, semble plus réfléchi.
• Vivant, pas fade. Un site de texte et de gris est aussi générique qu'un site de lueurs. Donnez-lui de la couleur : deux couleurs assorties, et une touche qui les fait chanter dans l'en-tête et le hero uniquement. Donnez-lui un hero conçu et 2 à 4 modules visuels : le travail de la personne présenté avec soin, et une forme issue de la palette qui ne revendique rien. Jamais une fausse section pour remplir l'espace.
• Hiérarchie visible en plissant les yeux. Plissez les yeux sur la capture d'écran. Une chose mène chaque écran : le nom, le travail ou les mots.
• La typographie porte la personne. Choisissez la police pour cette personne, réglez-la avec un crénage d'affichage serré, une mesure de corps lisible (environ 65 caractères), et des étapes de poids réelles. Pour un écrivain, le texte du corps est le design.
• Rythme, pas uniformité. Laissez un projet s'étendre et un autre être de deux lignes. Des fiches identiques dans une grille, c'est l'aspect d'un thème.
• Le mouvement répond, il ne performe pas. L'intro arrive une fois, un moment conçu gagne sa place, et chaque lien répond au pointeur. Rien ne se tape tout seul, ne tourne ou ne s'estompe au défilement parce que c'est possible.
• Petit et rapide est une fonctionnalité. Un site personnel se charge en un clin d'œil, se lit bien sur un téléphone, fonctionne sans JavaScript, et fonctionne encore dans cinq ans.
• La personne choisit l'aspect, pas l'agent. Un photographe, un poète, un ingénieur backend et un illustrateur méritent chacun une réponse différente. La même demande ne doit pas produire le même site deux fois.

Les règles de la maison

Celles-ci l'emportent sur tout dans les actifs, sauf les propres mots de l'utilisateur et le système de design confirmé.

1. Sites personnels uniquement. Une personne et son travail. Tout le reste est hors du champ d'application.
2. Configurez avant de concevoir. S'il n'y a pas de véritable système de design (la ligne Direction dans système-de-design-utilisateur n'est pas « confirmée », ou les couleurs et polices n'ont pas de lignes « confirmées »), exécutez d'abord configuration-initiale et posez les séries de questions dans la première réponse. L'utilisateur peut également démarrer la configuration à tout moment, ou dire « tu décides » pour que l'agent recherche et propose le système. Ne commencez jamais un site sur un goût supposé.
3. Jamais de lueur, jamais de pilule avec lueur, jamais de violet IA. L'utilisateur les a interdits par leur nom. Pas de lueur extérieure, de néon, d'orbe lumineux, de bordure lumineuse, ou de dégradé violet et violet, sur aucune surface, jamais, sauf si le système de design de l'utilisateur le confirme.
4. Le registre est la loi. Avant d'écrire quoi que ce soit de visible, vérifiez-le par rapport à interdits-de-design. Une ligne utilisateur n'est jamais enfreinte.
5. Écoutez et écrivez. Lorsque l'utilisateur dit qu'il n'aime pas quelque chose, ajoutez la ligne du registre dans le même tour, avant de la corriger. Lorsque l'utilisateur nomme une couleur, une police ou un token, mettez à jour système-de-design-utilisateur dans le même tour. Le skill ne doit jamais commettre deux fois la même erreur pour la même personne.
6. Tokens, pas valeurs. Chaque couleur, taille, rayon, ombre et durée provient du système de design, via un seul bloc de variables CSS ou thème. Pas de hex brut dans un composant.
7. Montrez le vrai travail. De vraies images de projet, de vrais écrits, de vraies photographies de la personne si elle le souhaite. Jamais une fausse UI de projet faite de boîtes grises, jamais d'images génériques ou IA présentées comme les siennes. Une image sous licence ouverte ou générée n'est autorisée que comme ambiance du hero, après que l'utilisateur a accepté une image générée, et ne montre jamais la personne ou son travail.
8. N'inventez rien. Pas de témoignages, clients, employeurs, récompenses, chiffres ou histoire de vie inventés. Tout ce qui est supposé est marqué dans le code et listé dans le rapport.
9. Le premier écran dit qui et quoi à 1440 x 900 et à 390 x 844 : le nom, ce qu'il/elle fait en une ligne, et le chemin vers le travail ou le contact.
10. Accessible par défaut. Contraste 4,5:1, un anneau de mise au point visible, du texte alternatif sur chaque pièce de travail, des cibles tactiles de 44 px, mouvement réduit respecté. Jamais sacrifié pour l'apparence.
11. Regardez avant de transmettre. Exécutez portail-de-revision. Rapportez ce qui a échoué ou n'a pas été vérifié en premier.

Les trois niveaux

Après la configuration, trois niveaux guident chaque décision de mise en page, de mouvement et de densité. Leurs valeurs vivent dans le système de design de l'utilisateur (la configuration les définit ; l'utilisateur peut les changer en une phrase : « rends-le plus calme », « plus de mouvement », « plus dense »).

Niveau	1 à 3	4 à 6	7 à 10
Variation (symétrie à asymétrie)	Centré, symétrique, une colonne de texte. Écrivains, académiques, sites CV.	Lecture alignée à gauche, une intro scindée, tailles d'images mélangées, dispositions de sections variées.	Grilles asymétriques, grandes zones vides, typographie en tant qu'image, sauts éditoriaux. Colonne unique en dessous de 768 px à tout niveau.
Mouvement (statique à cinématique)	États de survol et de pression uniquement.	Par défaut. Plus l'entrée de l'intro et un moment conçu.	Uniquement lorsque le travail de la personne est interactif ou en mouvement (codage créatif, motion design, etc.). Avec le consentement explicite de l'utilisateur.
Densité (aéré à dense)	Beaucoup d'espace blanc, grandes marges, espacement lâche. Écrivains, CV, designs éditoriaux.	Équilibre standard, espacement confortable.	Information dense, plus d'éléments sur l'écran, espacement serré. Portfolios de design, architectes, etc.

Exécution

1. Vérifiez la portée. Site personnel d'une seule personne ? Sinon, refusez poliment.
2. Chargez les fichiers toujours lus (principes, interdits, système).
3. Vérifiez le système de conception utilisateur. Direction confirmée et couleurs/polices confirmées ? Sinon, exécutez la configuration. Si la configuration vient d'être effectuée, les valeurs sont « proposées » ou « confirmées ».
4. Si la configuration s'exécute : utilisez configuration-initiale. Posez les questions immédiatement, dans la première réponse. Ne faites rien d'autre. Si l'utilisateur réponse avec "tu décides", suivez le chemin de recherche.
5. Planifiez l'écran ou la section en utilisant les fichiers pertinents (direction, hero, modules visuels, rédaction, mouvement).
6. Construisez. Utilisez des tokens. Utilisez des variables CSS. Pas de valeurs brutes. Vérifiez chaque décision par rapport aux interdits avant d'écrire. Chaque fichier de configuration peut avoir des règles de construction.
7. Avant la transmission, exécutez portail-de-revision. Corrigez les échecs. Rapportez l'état.
8. Transmettez avec un résumé de ce qui a été fait, de ce qui reste, et de ce qui est supposé.