GratuitVidéo
Fenêtre d'application et zoom
- 365365 téléchargements
- 125125 mentions J'aime
- 188188 sauvegardes
Compatible avec
+ HyperFrames- Claude Code
- Codex
- Cursor
- et 3 autres
Règles de design et d'UX pour Next.js, React et Tailwind v1.0.0
Utilisez cette ressource pour construire ou relire l'interface d'une application web Next.js
Nouveau
- 531 téléchargements
- 118 mentions J'aime
- 163 sauvegardes
Gratuit
Installer avec la CLI
Dans un terminal, depuis le dossier voulu :
npx --yes palatekit@latest install nextjs-ux-design-rulesSans 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 loginL'agent applique 34 règles de design et d'UX classées par priorité, chacune avec un exemple incorrect et un exemple correct. Il vérifie navigation, états de chargement et d'erreur, accessibilité, mode sombre et espacements. Vous obtenez des interfaces plus cohérentes et une relecture argumentée de l'existant.
Mise à jour le 2 novembre 2026
Aperçus
Caractéristiques
- Fonctionne dans
- Guides d'installation
- Génère avec
- Le modèle de votre agent
- Utilise
- Node.js
- Next.js 16
- Tailwind CSS 4
- Licence
- MIT
Ressources similaires
Tout voir- Gratuit
GratuitVidéo
Un seul grand chiffre
- 463463 téléchargements
- 223223 mentions J'aime
- 100100 sauvegardes
Compatible avec+ HyperFrames- Claude Code
- Codex
- Cursor
- et 3 autres
PROVidéo
PalateKit Motion, la bibliothèque
- 338338 téléchargements
- 198198 mentions J'aime
- 249249 sauvegardes
Compatible avec+ HyperFrames- Claude Code
- Codex
- Cursor
- et 3 autres
PROVidéo
Trois barres face à face
- 348348 téléchargements
- 133133 mentions J'aime
- 182182 sauvegardes
Compatible avec+ HyperFrames- Claude Code
- Codex
- Cursor
- et 3 autres
PROVidéo
Avant / après au curseur
- 322322 téléchargements
- 248248 mentions J'aime
- 238238 sauvegardes
Compatible avec+ HyperFrames- Claude Code
- Codex
- Cursor
- et 3 autres
PROVidéo
Carrousel de trois cartes
- 418418 téléchargements
- 157157 mentions J'aime
- 101101 sauvegardes
Compatible avec+ HyperFrames- Claude Code
- Codex
- Cursor
- et 3 autres
PROVidéo
Échange en bulles
- 564564 téléchargements
- 127127 mentions J'aime
- 161161 sauvegardes
Compatible avec+ HyperFrames- Claude Code
- Codex
- Cursor
- et 3 autres
PROVidéo
Liste qui se coche
- 442442 téléchargements
- 233233 mentions J'aime
- 160160 sauvegardes
Compatible avec+ HyperFrames- Claude Code
- Codex
- Cursor
- et 3 autres
Ce que vous obtenez
- SKILL.md traduit en français : contrat de pile technique et index des règles par priorité
- references/ : une fiche par règle (navigation, interactions, accessibilité, retour utilisateur, modèles d'UX, visuel)
- references/_sections.md : définition des catégories et niveaux d'impact
Pour qui
- Vous construisez une page de réglages, un formulaire ou une boîte de dialogue
- Votre interface « a l'air bizarre » sans que vous sachiez pourquoi
- Vous voulez relire une interface pour l'accessibilité et le mode sombre
Pas pour qui
- Un projet qui n'utilise pas React, Next.js et Tailwind
- Définir une identité de marque ou un style graphique
- Une application mobile native
Étiquettes
- nextjs
- ux
- design
- tailwind
- accessibilité
À propos
Vous dites
« Construis la page de réglages de mon application en suivant les règles : enregistrement automatique, navigation clavier et mode sombre. »
Skill publiée par pproenca sous licence MIT, traduite par PalateKit.
Voir plusVoir moins
Prérequis
- À préparer
- Un projet Next.js avec React 19 et Tailwind 4 et La page ou la fonctionnalité à construire ou à relire
- Dépendances
- Node.js, Next.js 16 et Tailwind CSS 4
Comment l'utiliser
- Installez la skill dans le dossier de skills de votre agent.
- Demandez de construire ou de relire une page de votre projet Next.js.
- Corrigez les écarts signalés avec les exemples de chaque règle.
Aperçu du contenu
Fichiers
- LICENSE1,1 Ko
- NOTICE-PALATEKIT.md0,4 Ko
- references/_sections.md2,1 Ko
- references/acc-color-contrast.md3,3 Ko
- references/acc-color-independent.md3,3 Ko
- references/acc-focus-management.md4,5 Ko
- references/acc-labels.md3,6 Ko
- references/acc-reduce-motion.md3 Ko
- references/acc-relative-units.md3 Ko
- references/acc-responsive-layout.md3,5 Ko
- references/acc-text-scaling.md2,8 Ko
- references/feed-empty-states.md3,8 Ko
- references/feed-error-states.md4,2 Ko
- references/feed-loading-states.md4,1 Ko
- references/feed-success-confirmation.md4 Ko
- references/feed-toasts.md3,4 Ko
- references/inter-drag-drop.md4,6 Ko
- references/inter-keyboard-navigation.md3,5 Ko
- references/inter-microinteractions.md3,4 Ko
- references/inter-pointer-patterns.md3,7 Ko
- references/inter-revalidation.md3,7 Ko
- references/inter-row-actions.md4 Ko
- references/inter-search.md4,1 Ko
- references/inter-touch-targets.md2,1 Ko
- references/nav-app-router.md3 Ko
- references/nav-page-actions.md2,8 Ko
- references/nav-primary.md2,7 Ko
- references/ux-data-entry.md5,6 Ko
- references/ux-destructive-confirmation.md4,4 Ko
- references/ux-modality.md4 Ko
- references/ux-onboarding.md3,9 Ko
- references/ux-permissions.md4,2 Ko
- references/ux-settings.md4,9 Ko
- references/ux-undo.md3,9 Ko
- references/vis-dark-mode.md4,2 Ko
- references/vis-icon-system.md3,7 Ko
- references/vis-spacing.md4 Ko
- SKILL.md8,8 Ko
Origine et licence
Modifié par PalateKit
- Auteur
- pproenca
- Source
- github.com/pproenca/dot-skills/tree/cf93c57cac89d6fc3e4194686000411567f5caf3/skills/.experimental/web-rules
- Licence
- MIT
Notice
Version modifiée de « web-rules » (pproenca, MIT) : traduction française et fiche par PalateKit.
Avis des utilisateurs
–
Aucune note pour l'instant
Chargement des avis…
Questions fréquentes
Faut-il respecter exactement la pile décrite ?
Les règles supposent React 19, Next.js 16, Tailwind 4 et shadcn/ui. Sur une autre pile, les principes d'UX restent utiles mais le code est à adapter.
Les fichiers de règles sont-ils traduits ?
Seul SKILL.md est traduit en français. Les fiches de règles du dossier references restent en anglais.