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.

Techniques CSS modernes v1.0.0

Utilisez cette ressource pour écrire ou corriger les styles d'une page web avec du CSS moderne

Nouveau

  • 390 téléchargements
  • 234 mentions J'aime
  • 135 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 good-css-modern-techniques

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 applique des règles précises : couleurs en oklch, tailles fluides avec clamp, focus visible, survol réservé aux souris, animations respectueuses des préférences. Il consulte seulement les fichiers de référence utiles à ce qu'il écrit. Vous obtenez des styles plus courts, plus accessibles et plus robustes.

Choisie surtout par

Mise à jour le 2 novembre 2026

Aperçu de règles CSS modernes pour mise en page, couleurs et animations.

Caractéristiques

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

Ressources similaires

Tout voir
  • Gratuit

    Vidéo

    Fenêtre d'application et zoom

    • 365365 téléchargements
    • 125125 mentions J'aime
    • 188188 sauvegardes
    Compatible avec
    • Claude Code
    • Codex
    • Cursor
    • et 3 autres
    + HyperFrames
  • Gratuit

    Vidéo

    Un seul grand chiffre

    • 463463 téléchargements
    • 223223 mentions J'aime
    • 100100 sauvegardes
    Compatible avec
    • Claude Code
    • Codex
    • Cursor
    • et 3 autres
    + HyperFrames
  • PRO

    Vidéo

    PalateKit Motion, la bibliothèque

    • 338338 téléchargements
    • 198198 mentions J'aime
    • 249249 sauvegardes
    Compatible avec
    • Claude Code
    • Codex
    • Cursor
    • et 3 autres
    + HyperFrames
  • PRO

    Vidéo

    Trois barres face à face

    • 348348 téléchargements
    • 133133 mentions J'aime
    • 182182 sauvegardes
    Compatible avec
    • Claude Code
    • Codex
    • Cursor
    • et 3 autres
    + HyperFrames
  • PRO

    Vidéo

    Avant / après au curseur

    • 322322 téléchargements
    • 248248 mentions J'aime
    • 238238 sauvegardes
    Compatible avec
    • Claude Code
    • Codex
    • Cursor
    • et 3 autres
    + HyperFrames
  • PRO

    Vidéo

    Carrousel de trois cartes

    • 418418 téléchargements
    • 157157 mentions J'aime
    • 101101 sauvegardes
    Compatible avec
    • Claude Code
    • Codex
    • Cursor
    • et 3 autres
    + HyperFrames
  • PRO

    Vidéo

    Échange en bulles

    • 564564 téléchargements
    • 127127 mentions J'aime
    • 161161 sauvegardes
    Compatible avec
    • Claude Code
    • Codex
    • Cursor
    • et 3 autres
    + HyperFrames
  • PRO

    Vidéo

    Liste qui se coche

    • 442442 téléchargements
    • 233233 mentions J'aime
    • 160160 sauvegardes
    Compatible avec
    • Claude Code
    • Codex
    • Cursor
    • et 3 autres
    + HyperFrames

Ce que vous obtenez

  • SKILL.md traduit en français : règles générales et table de lecture
  • references/foundations.md et layout.md : base, tokens, mises en page
  • references/interaction.md, motion.md, show-and-hide.md : états, animations, dialogues
  • Quatre autres références : espacement, texte et médias, défilement

Pour qui

  • Construire ou restyler une page de vente ou un site vitrine
  • Rendre une interface accessible et fluide sans JavaScript
  • Relire des styles Tailwind ou CSS existants

Pas pour qui

  • Concevoir l'identité visuelle d'une marque
  • Créer des animations complexes ou des interactions riches
  • Cibler des navigateurs très anciens

Étiquettes

  • css
  • responsive
  • accessibilité
  • tailwind
  • mise en page

À propos

Vous dites

« Restyle ma page d'accueil avec des tailles fluides, un mode sombre et des états de focus accessibles. »

Aperçu de règles CSS modernes pour mise en page, couleurs et animations.

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

Voir plus

Prérequis

À préparer
La page ou le composant à styler et Le système de style du projet (CSS, Tailwind)

Comment l'utiliser

  1. Indiquez la page ou le composant à styler.
  2. L'agent lit les références correspondantes.
  3. Il écrit les styles dans votre système (CSS, Tailwind) et signale la compatibilité.

Aperçu du contenu

Fichiers

  • LICENSE1 Ko
  • NOTICE-PALATEKIT.md0,4 Ko
  • references/foundations.md9,3 Ko
  • references/interaction.md6,3 Ko
  • references/layout.md7,1 Ko
  • references/motion.md6,5 Ko
  • references/scroll-and-viewport.md7,1 Ko
  • references/show-and-hide.md5,3 Ko
  • references/spacing-and-shape.md4,7 Ko
  • references/text-and-media.md6,8 Ko
  • SKILL.md5,8 Ko

Origine et licence

Modifié par PalateKit

Auteur
vojtaholik
Source
github.com/vojtaholik/good-css/tree/92d436ba1937d1b1407c47e35abb3e199eaace2e/skills/good-css
Licence
MIT

Notice

Version modifiée de « good-css » (vojtaholik, 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

Fonctionne-t-elle avec Tailwind ?

Oui, les techniques s'écrivent aussi en utilitaires Tailwind ou en propriétés arbitraires.

Cite-t-elle d'autres skills ?

Elle mentionne des skills d'animation d'Emil Kowalski, facultatives : sans elles, elle suit ses propres entrées.