Frontend-UI-Builder-Paket

# Nutzungsanleitung

## Überblick

Das Frontend UI Builder Pack plugin verwandelt Ihre Ideen in eine produktionsreife **Spezifikation für eine Pricing-Card-Komponente**. Es generiert eine detaillierte Spezifikation, die Folgendes enthält:
- **React/Tailwind-Anleitung**: Sofort nutzbarer JSX-Code mit Tailwind CSS-Klassen.
- **Accessibility-Validierung**: WCAG-Konformitätsprüfungen und Vorschläge zur Behebung.
- **Vorgaben für mobile Layouts**: Responsive Breakpoints und touch-freundliche Interaktionen.

Dieses plugin ist ideal für Designer, Frontend-Entwickler oder Product Manager, die schnell einen Pricing-Bereich prototypisieren oder finalisieren möchten, ohne manuell Spezifikationen zu schreiben.

## Verwendung

### Schritt 1: Plugin aktivieren

Aktivieren Sie das Frontend UI Builder Pack in Ihrem AI-Assistenten oder Ihrer Entwicklungsumgebung. Das plugin funktioniert am besten, wenn Sie eine klare Vorstellung vom benötigten Pricing-Card-Layout haben.

### Schritt 2: Pricing Card beschreiben

Geben Sie eine natürlichsprachliche Beschreibung Ihrer Pricing Card an. Fügen Sie Details hinzu wie:
- Anzahl der Tiers (z. B. Free, Pro, Enterprise)
- Features pro Tier (z. B. Speicher, Benutzer, Support)
- Preise und Währung
- Visuelle Präferenzen (z. B. minimal, farbenfroh, empfohlenen Plan hervorheben)

**Beispieleingabe:**
> "Erstelle eine 3-stufige Pricing Card für eine SaaS-App: Free ($0/mo) mit 10 Benutzern, Pro ($29/mo) mit 100 Benutzern hervorgehoben und Enterprise ($99/mo) unbegrenzt. Verwende einen klaren weißen Hintergrund mit grünem Akzent für den empfohlenen Plan."

### Schritt 3: Spezifikation erhalten

Das plugin gibt eine strukturierte Spezifikation aus, die Folgendes enthält:

- **Komponentenanforderungen**: Eine Aufschlüsselung der Pricing Card in React-Komponenten (z. B. `PricingCard`, `PricingFeatures`, `PricingTier`).
- **Tailwind-Implementierung**: JSX-Code mit Utility-Klassen für responsives Design (z. B. `grid grid-cols-1 md:grid-cols-3`).
- **Accessibility-Bericht**: Identifiziert Probleme wie fehlende ARIA-Labels, Farbkontrastverhältnisse und Unterstützung für Tastaturnavigation.
- **Mobile Vorgaben**: Schlägt Breakpoints, Touch-Ziele (min. 44x44px) und ein einspaltiges Layout auf kleinen Bildschirmen vor.

### Schritt 4: Implementieren und validieren

Kopieren Sie den generierten React/Tailwind-Code in Ihr Projekt. Das plugin stellt außerdem eine Checkliste für Accessibility- und Mobile-Tests bereit. Zum Beispiel:

```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>
  );
}
```

## Best Practices

- Seien Sie in Ihrer Beschreibung konkret, um eine Spezifikation zu erhalten, die zu Ihrem Design System passt.
- Prüfen Sie die Vorschläge zur Accessibility-Behebung vor der Finalisierung.
- Testen Sie das mobile Layout auf echten Geräten oder Emulatoren.
- Verwenden Sie die **requirement-translator** skill, wenn Ihre ursprüngliche Anfrage unklar ist – sie hilft dabei, Ziele und Einschränkungen zu klären.

## Zusätzliche Skills

- **requirement-translator**: Verfeinert mehrdeutige Anfragen zu strukturierten Spezifikationen.
- **frontend-slides**: Nicht direkt verwandt, aber nützlich, um Pricing Tiers in einem Folienformat zu präsentieren.
- **checkpoint**: Speichert Ihren Fortschritt während langer Sitzungen, um Arbeitsverlust zu vermeiden.