Toutes les ressources premium et membres pour 8,99 €/mois, en abonnement sans engagement. Voir les offres

PalateKit

Se connecter
Menu

Demander une ressource

Décrivez en une phrase la ressource qui vous manque. Nous vous écrirons quand elle sera publiée.

0 / 280

Une page, une vidéo ou une image en ligne.

Débloquer PalateKit

Tout débloquer

Offre

Le paiement vaut acceptation de nos conditions générales de vente.

Paiement sécurisé par Stripe. Reçus et factures envoyés par e-mail.

Content de vous revoir

Connectez-vous pour installer, télécharger ou sauvegarder cette ressource. Un compte gratuit suffit pour les ressources gratuites.

Garde-fous qualité pour interfaces web v1.0.0

Utilisez cette ressource pour vérifier qu'une interface web ne casse pas avec des textes longs, de petits écrans et des états rares

Nouveau

  • 457 téléchargements
  • 181 mentions J'aime
  • 227 sauvegardes

4,49 €

Accès à vie à cette ressource, avec ses mises à jour.

Installer avec la CLI

Dans un terminal, depuis le dossier voulu :

npx --yes palatekit@latest install frontend-text-overflow-guardrails

Sans option, la skill va dans ~/.agents/skills/ ; ajoutez --agent claude-code (ou codex, cursor…) pour viser un agent.

Première fois : connectez la CLI avec

npx --yes palatekit@latest login

L'agent part du principe que chaque libellé, nom, prix ou traduction peut être plus long que la maquette. Il décide pour chaque zone de texte s'il faut passer à la ligne, tronquer, limiter ou faire défiler, puis corrige le style de façon ciblée. Il vérifie ensuite plusieurs largeurs d'écran et les états vide, chargement et erreur.

Choisie surtout par

Mise à jour le 2 novembre 2026

Cartes et tableaux avec titres très longs, tronqués ou à la ligne sans casser la page.

Caractéristiques

Fonctionne dans
Guides d'installation
Génère avec
Le modèle de votre agent
Licence
MIT

Ressources similaires

Tout voir

Ce que vous obtenez

  • SKILL.md traduit en français : règles de débordement, pièges flex et grid, responsive et accessibilité
  • code-review-checklist.md : liste de contrôle pour relire du code d'interface
  • visual-standards.md et browser-verification.md : critères visuels et vérification par captures d'écran

Pour qui

  • Un tableau, un menu ou des cartes qui débordent avec des noms très longs
  • Un site traduit en plusieurs langues dont les boutons se cassent
  • Une relecture de qualité avant la mise en ligne d'une interface

Pas pour qui

  • Créer une identité de marque, un logo ou des illustrations
  • Reproduire une capture d'écran au pixel près
  • Un projet sans interface visible (serveur, base de données)

Étiquettes

  • débordement
  • responsive
  • qualité
  • css
  • accessibilité

À propos

Vous dites

« Contrôle la page de mon catalogue avec des titres de 80 caractères et des noms de fichiers sans espaces, sur mobile et sur ordinateur. »

Cartes et tableaux avec titres très longs, tronqués ou à la ligne sans casser la page.

Skill publiée par yangsonhung sous licence MIT, traduite par PalateKit.

Voir plus

Prérequis

À préparer
Le code ou l'URL de l'interface à contrôler et Les largeurs d'écran et langues à prendre en compte

Comment l'utiliser

  1. Copiez le dossier de la skill dans le dossier de skills de votre agent.
  2. Demandez à l'agent de contrôler ou de corriger une page en citant la skill.
  3. Vérifiez les captures d'écran et la liste des risques restants.

Aperçu du contenu

Fichiers

  • LICENSE1 Ko
  • NOTICE-PALATEKIT.md0,5 Ko
  • references/browser-verification.md4,6 Ko
  • references/code-review-checklist.md7,2 Ko
  • references/visual-standards.md5,7 Ko
  • SKILL.md24,6 Ko

Origine et licence

Modifié par PalateKit

Auteur
yangsonhung
Source
github.com/yangsonhung/awesome-agent-skills/tree/cb9d2b21801a687d4bd8e52b2c88e8ec9c0e48af/skills/en/frontend-quality-guardrails
Licence
MIT

Notice

Version modifiée de « frontend-quality-guardrails » (yangsonhung, MIT) : traduction française et fiche par PalateKit.

Avis des utilisateurs

–

Aucune note pour l'instant

Chargement des avis…

Supprimer votre avis ?

Votre note et votre commentaire seront retirés de la fiche.

Questions fréquentes

Faut-il un navigateur piloté par l'agent ?

C'est recommandé pour les captures d'écran, mais la skill reste utile sans navigateur : l'agent relit alors le code et signale ce qu'il n'a pas pu vérifier.

Change-t-elle le design existant ?

Non. Elle préfère de petites corrections locales et conserve les jetons, composants et conventions du projet.