husheng-web/personal-website-skills

Compare un itinéraire de site portfolio avec une référence visuelle approuvée en tailles desktop et mobile, puis rapporter les défauts visuels et les correctifs étayés par des preuves.

Qu'est-ce que personal-website-skills ?

Cette compétence est conçue pour les agents IA (tels que Claude Code, Cursor, Codex) afin d'effectuer une vérification visuelle complète d'un site web portfolio, en comparant un itinéraire donné à une référence visuelle approuvée sur les tailles d'écran desktop et mobile. Elle est particulièrement utile lors des phases de développement et de test, car elle remplace la revue de code par une évaluation visuelle précise, mettant en évidence les écarts de mise en page, de typographie, d'espacement, de couleurs, de rendu des ressources et d'états interactifs. La compétence prend en charge les tests de réactivité, l'accessibilité (focus clavier, mouvement réduit) et produit un rapport structuré avec des priorités P1, P2 ou P3, chacune incluant la route affectée, le comportement observé, la source probable et le correctif minimal crédible. Le rapport commence par les preuves et les limites, et exige une nouvelle vérification dans la taille de fenêtre concernée avant de valider.

Compatible avec~Claude Code~Codex CLI~Cursor

npx skills add https://github.com/husheng-web/personal-website-skills/tree/HEAD/skills/portfolio-visual-qa

Documentation

QA Visuelle du Portfolio

Effectuer une vérification visuelle plutôt qu'une revue de code uniquement.

Configuration

Confirmer la référence, l'itinéraire, l'état de l'UI, les tailles de fenêtre et si la tâche permet l'implémentation. Démarrer le site via sa commande établie et inspecter le rendu aux tailles demandées ; inclure une taille mobile lorsque la requête ne la spécifie pas.

Comparaison

Évaluer la hiérarchie, la typographie et le retour à la ligne, l'espacement et la géométrie, les couleurs et le contraste, la fidélité des ressources, le recadrage/débordement réactif et les états interactifs. Vérifier l'accessibilité par clavier et le comportement de mouvement réduit lorsque du mouvement ou de la navigation est impliqué.

Rapport

Indiquer d'abord les preuves et les limites. Regrouper les constats par priorité :

P1 : bloque la hiérarchie prévue, l'accès ou la tâche principale.
P2 : discordance visuelle ou réactive matérielle.
P3 : polissage qui peut attendre.

Pour chaque constat, nommer l'itinéraire/état concerné, le comportement observé, la source probable et le correctif le plus petit crédible. Re-tester les correctifs dans la fenêtre concernée. Ne pas déclarer qu'une vérification visuelle est réussie lorsque la capture du navigateur ou la référence cible était indisponible.