Skills Guide

Vérification UI avant commit

VérifiéSûr

Génère les actifs du projet, démarre un serveur local et demande à l'utilisateur de vérifier visuellement l'interface avant de valider. Aide à détecter les régressions UI avant qu'elles ne soient commit. Utilisé lorsque les modifications affectent les templates, composants, styles ou autres comportements observables de l'interface.

Télécharger et utiliser
Spar Skills Guide Bot
TestingIntermédiaire
02/06/2026
Claude Code
#verify-ui#visual-approval#templ#tailwind-css#go

Recommandé pour

Claude CodeGénération de testsIngénieur QA / test

Synthèse automatique

Cette compétence permet de construire les assets statiques, de lancer le serveur et d'obtenir une approbation visuelle avant de valider les modifications.

Points forts

  • Intègre la vérification visuelle directement dans le flux de validation.
  • Automatise les étapes de build et de migration.
  • Réduit les risques de déploiement de modifications non vérifiées.
  • Fonctionne avec des projets Go utilisant Templ et Tailwind CSS.

Limites

  • Nécessite que le serveur soit accessible en local (port 8080).
  • Dépend d'une validation humaine, ce qui peut ralentir le processus.
  • Ne couvre pas les tests automatisés (ex: tests d'interface).
Quand l'utiliser

Utilisez cette compétence avant chaque validation qui modifie l'interface utilisateur (composants, templates, styles, migrations).

Quand l'éviter

Ne l'utilisez pas pour des changements purement backend ou sans impact visuel, ni lorsqu'une validation humaine n'est pas possible (CI/CD).

Analyse de sécurité

Sûr
Score qualité90/100

The skill runs local build commands and a local development server; no destructive, exfiltrating, or obfuscated actions. User is prompted before database migrations. It is safe for its intended use.

Aucun point d'attention détecté

Comment cette analyse est faite

Exemples

Verify UI before commit
I have changes to the homepage template and some CSS. Please verify the UI before I commit.
Build and check UI
Run the verify-ui workflow for my current changes.

name: verify-ui description: Build assets, run server, and get visual approval before committing observable changes.

When to use

  • Before committing any changes that affect observable UI behavior
  • This includes: templates, components, styles, handlers, models surfaced in UI, migrations
  • When CLAUDE.md or /commit skill directs you here

Prerequisites

  • Changes to verify should already be implemented (not staged/committed yet)

Workflow

  1. Build static assets:

    • Run templ generate to regenerate templ files
    • Run make css to rebuild Tailwind CSS
    • Report any errors and stop if build fails

  2. Database migrations (if applicable):

    • Check for pending migrations: make migrate-status
    • If pending, ask user before running: make migrate
    • Skip if no database changes

  3. Start server:

    • Run go run ./cmd/tfo-webapp in background
    • Wait for server to be ready (check output for listening message)
    • Report the URL (typically http://localhost:8080)

  4. Request visual inspection:

    • Tell user: "Server running at http://localhost:8080 - please verify the UI"
    • Use AskUserQuestion to get approval:
      • "Does the UI look correct?"
      • Options: "Yes, looks good" / "No, needs changes"

  5. Handle response:

    • If approved: Stop server, report ready to commit
    • If not approved: Stop server, ask what needs to change, do NOT proceed to commit

  6. Cleanup:

    • Always stop the background server when done

Output

  • Commands run and their outcomes
  • Server URL for inspection
  • User's verification decision
  • Clear next step (proceed to commit or fix issues)

Du fichier au premier essai

Le téléchargement contient exactement le contenu affiché sur cette fiche. Cette copie peut différer de la dernière version du dépôt source.

Consulter la source et ses fichiers annexes

Ce téléchargement contient uniquement SKILL.md. Les scripts, références, modèles et dépendances éventuels ne sont pas inclus. Récupérez les fichiers nécessaires depuis la source en conservant leur arborescence avant de poursuivre.

1. Télécharger le fichier

Télécharger SKILL.md

Depuis la racine d’un projet de test, enregistrez le fichier sous .skill-downloads/ui-verification-before-commit-mmbizip5/SKILL.md, ou utilisez la commande suivante. Ce dossier sert à examiner la skill avant son installation.

Commande pour macOS/Linux ou WSL : un shell POSIX et curl sont nécessaires. Sous Windows sans WSL, utilisez le bouton de téléchargement et créez le dossier manuellement.

mkdir -p '.skill-downloads/ui-verification-before-commit-mmbizip5' && curl --fail --show-error --location 'https://skills-guides.com/api/skills/ui-verification-before-commit-mmbizip5/download' --output '.skill-downloads/ui-verification-before-commit-mmbizip5/SKILL.md.part' && mv '.skill-downloads/ui-verification-before-commit-mmbizip5/SKILL.md.part' '.skill-downloads/ui-verification-before-commit-mmbizip5/SKILL.md'

2. Vérifier les prérequis

Lisez SKILL.md avant de l’utiliser. Si le fichier cite des scripts ou services externes, examinez-les et préparez les accès nécessaires dans votre environnement de test.

Extrait original : Prerequisites
  • Changes to verify should already be implemented (not staged/committed yet)

Les plateformes de la fiche sont des indications du catalogue. Les chemins ci-dessous suivent la documentation des outils ; ils ne prouvent pas que cette skill y a été exécutée. Aucune version minimale de ces outils n’est attestée pour cette fiche.

3. Charger la skill

Après vérification, copiez le dossier complet dans le projet avec l’une des commandes ci-dessous, puis ouvrez une nouvelle session de l’outil. La commande s’arrête si un dossier du même nom existe déjà : comparez les fichiers avant de le remplacer.

Claude Code
test -f '.skill-downloads/ui-verification-before-commit-mmbizip5/SKILL.md' && test -s '.skill-downloads/ui-verification-before-commit-mmbizip5/SKILL.md' && mkdir -p '.claude/skills' && test ! -e '.claude/skills/verify-ui' && cp -R '.skill-downloads/ui-verification-before-commit-mmbizip5' '.claude/skills/verify-ui'

OpenSkills

OpenSkills doit déjà être installé. La procédure locale install/read est contrôlée avec OpenSkills 1.5.0, qui exige Node.js ≥ 20.6.0. Aucun slug du catalogue n’est résolu automatiquement.

Installation officielle d’OpenSkills
openskills install './.skill-downloads/ui-verification-before-commit-mmbizip5'

openskills read 'ui-verification-before-commit-mmbizip5'

La lecture doit afficher le contenu du fichier installé et son dossier de base. Elle ne lance ni la skill ni ses dépendances.

Pour un agent qui lit AGENTS.md, synchronisez ensuite l’index. Cette commande modifie AGENTS.md : relisez le diff avant de l’utiliser.

openskills sync

Mode manuel ou autre outil : joignez SKILL.md à une conversation, ou ouvrez-le dans un agent capable de lire les fichiers. Ajoutez les ressources annexes nécessaires. Il n’existe pas de dossier universel reconnu par tous les outils.

4. Faire un premier essai

Utilisez une entrée courte et fictive : un endpoint d’API, un petit document ou un brief d’interface. Dans une nouvelle conversation, joignez le fichier ou donnez son chemin à l’agent, puis adaptez cette demande :

Lis .skill-downloads/ui-verification-before-commit-mmbizip5/SKILL.md et applique ses instructions à cet exemple : [décrire une entrée de test]. Indique les fichiers, dépendances ou accès qui manquent. Produis le résultat demandé par la skill sans inventer de données ni exécuter de script non examiné.

Résultat attendu : une sortie correspondant aux instructions de la skill, ou une liste précise des prérequis manquants. Une simple confirmation de lecture ne valide pas le premier usage. Si une ressource externe est indisponible, ce parcours reste à tester.

Skills similaires

Comparaison de performances ClickHouse

Testing

Évaluez les résultats de tests de performance ClickHouse, analysez les régressions de PR, comparez avec l'historique et vérifiez la fiabilité des mesures.

Claude CodeintermediateSûr 49,547
Skills Guide Bot

Analyse des rapports de performance CI

Testing

Analyse les rapports de comparaison de performance CI pour une PR ClickHouse. Recoupe l'historique master pour distinguer les vraies régressions des tests instables.

Claude CodeintermediateSûr 49,516
Skills Guide Bot

Méthode Santa

Testing

Vérification adversarial multi-agents avec deux réviseurs indépendants. La sortie est vérifiée deux fois et corrigée itérativement jusqu'à ce que les deux acceptent avant publication.

Claude CodeCodexCursorintermediateSûr 244,766
Skills Guide Bot