Génère un fichier de contexte UI sémantique pour tes agents IA. Coche tes règles, copie le Markdown et booste la précision de ton code.
Grille bento
Grille asymétrique inspirée du design Apple, avec des cartes de tailles variées pour créer une hiérarchie visuelle forte.
En-tête fixe
En-tête collant avec effet de fond au scroll pour maintenir la navigation visible.
Espacement fluide
Espacement fluide qui s'adapte au viewport via des classes responsive.
Vue divisée
Vue partagée entre deux panneaux (éditeur / prévisualisation) avec synchronisation du scroll.
Bordures minimalistes
Séparations légères pour structurer l'interface sans l'alourdir.
Texte dégradé
Textes en dégradé pour mettre en valeur les éléments clés, 1 occurrence par section maximum.
Carte glassmorphisme
Effet glassmorphisme subtil pour les cartes en premier plan, avec fond semi-transparent et flou.
Halo lumineux
Halo de lumière coloré derrière un élément clé pour attirer l'attention sans agresser.
Système de couleurs
Utilisation stricte des CSS variables shadcn/ui pour garantir la cohérence dark/light mode.
Retours visuels
Retours visuels et physiques immédiats sur toutes les actions interactives.
États vides
États vides soignés avec icône, message contextuel et CTA pour guider l'utilisateur.
Navigation clavier
Navigation complète au clavier avec focus trap dans les modales et gestion des raccourcis.
Skeleton de chargement
États de chargement qui miment exactement la forme du contenu cible pour éviter le layout shift.
Affichage progressif
Masquer la complexité par défaut et révéler les options avancées à la demande.
Notifications toast
Notifications non-bloquantes avec actions inline, positionnées en bas à droite.
Aperçu au survol
Carte de prévisualisation riche qui apparaît au survol d'un lien ou d'un item.
Glisser-Déposer
Réorganisation d'éléments par glisser-déposer avec zones de dépôt visuellement marquées.
Compteur animé
Compteurs numériques qui s'animent lors d'un changement de valeur.
Titres équilibrés
Titres équilibrés visuellement qui évitent les coupures disgracieuses sur plusieurs lignes.
Type scale cohérente
Échelle typographique stricte garantissant la hiérarchie visuelle sur toutes les pages.
Style code monospace
Mise en forme cohérente des blocs de code et snippets inline.
Line clamp avec expand
Textes longs tronqués avec bouton Voir plus inline, sans layout shift.
Palette de commandes
Modal de recherche globale accessible via Cmd+K, avec navigation clavier et résultats filtrés.
Sommaire avec scroll spy
Sommaire flottant qui met en surbrillance la section visible via IntersectionObserver.
Barre d'actions flottante
Barre d'actions flottante centrée qui apparaît lors d'une sélection, inspirée de Linear.
Onglets pill
Onglets en forme de pill avec indicateur glissant animé, style Linear/Vercel.
Indicateur d'étapes
Indicateur d'étapes pour les formulaires multi-étapes ou onboarding.
Menu déroulant contextuel
Menu contextuel au clic droit ou sur bouton, avec groupes logiques et raccourcis.