Design Frontend

---
name: design-frontend
description: Creer des interfaces frontend distinctives et de qualite production avec un design de haute qualite. Utilisez ce skill quand l'utilisateur demande de construire des composants web, pages, artefacts, posters ou applications (exemples : sites web, landing pages, dashboards, composants React, layouts HTML/CSS, ou quand il faut embellir une interface web). Genere du code creatif et soigne qui evite l'esthetique generique IA.
---

# Design Frontend

Ce skill guide la creation d'interfaces frontend distinctives et de qualite production qui evitent l'esthetique generique "AI slop".

## Reflexion Design

Avant de coder, comprendre le contexte et s'engager sur une direction esthetique AUDACIEUSE :
- **Objectif** : Quel probleme cette interface resout ? Qui l'utilise ?
- **Ton** : Choisir un extreme - brutalisme minimal, maximalisme, retro-futuriste, organique, luxe, ludique, editorial, art deco, pastel, industriel...
- **Contraintes** : Exigences techniques (framework, performance, accessibilite)
- **Differenciation** : Qu'est-ce qui rend cette interface MEMORABLE ?

**CRITIQUE** : Choisir une direction conceptuelle claire et l'executer avec precision.

## Guidelines Esthetiques

- **Typographie** : Polices belles et uniques. Eviter Arial, Inter, Roboto. Associer une police display distinctive avec une police body raffinee.
- **Couleur et theme** : Palette cohesive avec CSS variables. Couleurs dominantes + accents vifs.
- **Animations** : Micro-interactions CSS, reveals au scroll, hover states surprenants. Privilegier les solutions CSS-only.
- **Composition spatiale** : Layouts inattendus, asymetrie, chevauchements, grilles brisees.
- **Arriere-plans** : Gradients mesh, textures de bruit, motifs geometriques, transparences superposees.

**NE JAMAIS** utiliser : polices generiques (Inter, Roboto, system fonts), gradients violets sur fond blanc, layouts previsibles, design cookie-cutter.

(Source: github.com/anthropics/skills/skills/frontend-design)