Pack de création d’interface utilisateur frontend

# Guide d’utilisation

## Présentation

Le plugin Frontend UI Builder Pack transforme vos idées en une **spécification de composant de carte tarifaire** prête pour la production. Il génère une spécification détaillée qui comprend :
- **Recommandations React/Tailwind** : code JSX prêt à l’emploi avec des classes Tailwind CSS.
- **Validation de l’accessibilité** : contrôles de conformité WCAG et suggestions de correction.
- **Contraintes de mise en page mobile** : points de rupture responsive et interactions adaptées au tactile.

Ce plugin est idéal pour les designers, les développeurs frontend ou les product managers qui souhaitent prototyper ou finaliser rapidement une section tarifaire sans rédiger manuellement de spécification.

## Comment l’utiliser

### Étape 1 : Activer le plugin

Activez Frontend UI Builder Pack dans votre assistant IA ou votre environnement de développement. Le plugin fonctionne mieux lorsque vous avez une idée claire de la mise en page de carte tarifaire dont vous avez besoin.

### Étape 2 : Décrire votre carte tarifaire

Fournissez une description en langage naturel de votre carte tarifaire. Incluez des détails tels que :
- Nombre de niveaux (par exemple, Gratuit, Pro, Entreprise)
- Fonctionnalités par niveau (par exemple, stockage, utilisateurs, support)
- Montants tarifaires et devise
- Préférences visuelles éventuelles (par exemple, minimaliste, coloré, mettre en avant l’offre recommandée)

**Exemple d’entrée :**
> "Crée une carte tarifaire à 3 niveaux pour une application SaaS : Gratuit ($0/mo) avec 10 utilisateurs, Pro ($29/mo) avec 100 utilisateurs mis en avant, et Entreprise ($99/mo) illimité. Utilise un arrière-plan blanc épuré avec un accent vert pour l’offre recommandée."

### Étape 3 : Recevoir la spécification

Le plugin produira une spécification structurée qui comprend :

- **Exigences du composant** : une décomposition de la carte tarifaire en composants React (par exemple, `PricingCard`, `PricingFeatures`, `PricingTier`).
- **Implémentation Tailwind** : code JSX avec des classes utilitaires pour le design responsive (par exemple, `grid grid-cols-1 md:grid-cols-3`).
- **Rapport d’accessibilité** : identifie des problèmes comme des libellés ARIA manquants, les ratios de contraste des couleurs, la prise en charge de la navigation au clavier.
- **Contraintes mobiles** : suggère des points de rupture, des cibles tactiles (min 44x44px) et une mise en page sur une seule colonne sur les petits écrans.

### Étape 4 : Implémenter et valider

Copiez le code React/Tailwind généré dans votre projet. Le plugin fournit également une checklist pour les tests d’accessibilité et mobiles. Par exemple :

```jsx
// Example output snippet
export default function PricingCard({ tier }) {
  return (
    <div className="max-w-sm rounded overflow-hidden shadow-lg bg-white">
      <h3 className="text-xl font-bold text-center">{tier.name}</h3>
      <p className="text-3xl text-center">${tier.price}/mo</p>
      <ul role="list" className="text-sm text-gray-600">
        {tier.features.map((feature, index) => (
          <li key={index} className="py-1" aria-label={feature}>{feature}</li>
        ))}
      </ul>
    </div>
  );
}
```

## Bonnes pratiques

- Soyez précis dans votre description afin d’obtenir une spécification qui correspond à votre design system.
- Passez en revue les suggestions de correction d’accessibilité avant de finaliser.
- Testez la mise en page mobile sur des appareils réels ou des émulateurs.
- Utilisez la compétence **requirement-translator** si votre demande initiale est vague – elle vous aidera à clarifier les objectifs et les contraintes.

## Compétences supplémentaires

- **requirement-translator** : affine les demandes ambiguës en spécifications structurées.
- **frontend-slides** : pas directement lié, mais utile pour présenter des niveaux tarifaires sous forme de diapositives.
- **checkpoint** : enregistre votre progression pendant les longues sessions afin d’éviter de perdre votre travail.