Que fait premium-frontend-ui ?
Un guide complet pour GitHub Copilot afin de créer des expériences web immersives et hautes performances, alliant motion avancée, typographie et savoir-faire architectural.
Vue d'ensemble
Cette compétence oriente GitHub Copilot vers la production d'interfaces front-end haut de gamme en suivant des principes de conception avancés. Elle couvre l'utilisation d'animations fluides, d'une typographie soignée et d'une architecture de code évolutive pour garantir des performances optimales.
Principes clés
- Motion avancée : Utilisez des transitions CSS, des animations JavaScript ou des bibliothèques comme Framer Motion pour créer des interactions naturelles et engageantes.
- Typographie raffinée : Privilégiez des polices système ou des polices web optimisées avec un espacement et une hiérarchie clairs.
- Architecture modulaire : Structurez le code en composants réutilisables avec une séparation claire des préoccupations.
- Performance : Minimisez les re-rendus, utilisez le chargement paresseux et optimisez les ressources critiques.
Exemple d'utilisation
import { motion } from 'framer-motion';
const PremiumCard = ({ title, description }) => (
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.5, ease: 'easeOut' }}
className="card premium"
>
<h2 className="card-title">{title}</h2>
<p className="card-description">{description}</p>
</motion.div>
);
Bonnes pratiques
- Composants atomiques : Décomposez l'interface en petits composants indépendants.
- Gestion des états : Utilisez des états de chargement, d'erreur et vides pour chaque composant dynamique.
- Accessibilité : Assurez-vous que les animations respectent les préférences
prefers-reduced-motion. - Tests : Écrivez des tests unitaires pour les composants critiques.