andreischuaste12-ctrl/create-frontend-from-zero-konvert

Frontend von Grund auf erstellen

Verwandeln Sie ein Produktbedürfnis in eine funktionale, zugängliche und überprüfbare Oberfläche. Diese Skill führt, wenn das Hauptziel darin besteht, ein neues Frontend zu bauen – in einem leeren Projekt oder in einem explizit angeforderten neuen Bereich. Sie implementiert, führt das Projekt aus, wenn möglich, und berichtet, was tatsächlich verifiziert wurde.

Grenzen und Zusammenarbeit

• Neues Frontend: Diese Skill führt, auch wenn eine Referenz hilft, eine originelle Erstellung zu leiten. Extrahieren Sie Prinzipien, ohne Marke, Inhalt oder Assets von Dritten zu kopieren.
• Vorhandene Oberfläche auditieren: Verwenden Sie audit-frontend-designer-konvert, das schreibgeschützt ist. Für „Auditiere und korrigiere“ beginnen Sie mit dieser Skill und folgen Sie dem Genehmigungsvertrag.
• Referenz anwenden, eine vorhandene Oberfläche direkt verfeinern oder einen genehmigten Bericht umsetzen: Verwenden Sie design-por-referencia-konvert und beachten Sie dessen Regeln zu Umfang, Genehmigung und externer Abhängigkeit.
• In gemischten Projekten implementieren Sie nur den autorisierten neuen Bereich; identifizieren und bewahren Sie vorhandene Integrationen und Oberflächen. Konsultieren Sie den Kollaborationsleitfaden, um das Wissen und die Werkzeuge der anderen Skills zu nutzen, ohne sie zu duplizieren.

Ablauf

1. Anfrage und Kontext verstehen. Lesen Sie Projektanweisungen, relevante Dateien, vorhandene Stack-Konventionen. Identifizieren Sie Produkt, Zielgruppe, Hauptaufgabe, Seiten, Daten, Identität, Einschränkungen und wo die Arbeit abgeliefert wird. Unterscheiden Sie gegebene Fakten von Hypothesen; erfinden Sie keine Personas oder Forschungsergebnisse. Wenn eine unverzichtbare Entscheidung nicht abgeleitet werden kann und irreversible Auswirkungen hat, fordern Sie Klärung; bei anderen Entscheidungen erklären Sie die Annahme und fahren Sie fort. Dokumentieren Sie das Ergebnis im Discovery- und Briefing Brief.
2. Einen konkreten Vorschlag definieren. Wählen Sie die relevante User Journey und Zustände: Initial, Laden, Leer, Erfolg, Fehler und ggf. Wiederherstellung. Listen Sie Komponenten und Zustände pro Bildschirm mit Zustände und Komponenten, unter Verwendung der Audit-Einheiten als Fertigstellungskriterium. Für Projekte mit mehreren Seiten oder Kategorien definieren Sie Pfade mit Inhalts- und Navigationsstruktur. Definieren Sie Inhalt, Hierarchie, Navigation und visuelle Richtung konsistent mit Zielgruppe und Ziel, mit Tokens gemäß der Visuellen Grundlage. Verwenden Sie die Visuelle Richtungserkundung, wenn zwei Optionen das Ergebnis wesentlich verändern. Nutzen Sie vorhandene lokale Materialien und, falls verfügbar und relevant, die Kataloge und Wissenseinheiten des Auditors. Zitieren Sie nur tatsächlich referenzierte Quellen. Eine visuelle Referenz ist Inspiration, kein Usability-Nachweis.
3. Bauplanung planen. Wiederverwenden Sie vorhandenes Framework, Routing, Komponenten und Tokens. Wählen Sie in einem leeren Projekt die einfachste, für die Anfrage und Umgebung geeignete Lösung mit der Stack-Auswahl; begründen Sie neue Abhängigkeiten, überprüfen Sie Versionen und Skripte vor der Ausführung. Gehen Sie nicht von einer Autorisierung für kostenpflichtige Dienste, Veröffentlichung, externe Konten oder echte Daten aus. Halten Sie Backend, Authentifizierung und Integrationen im Rahmen der Anfrage; fehlen diese, verwenden Sie synthetische Daten und kennzeichnen Sie die Einschränkung deutlich.
4. Implementieren. Bauen Sie echten Inhalt, semantische Struktur, Styles, Komponenten und Interaktionen innerhalb des autorisierten Umfangs. Vermeiden Sie Schaltflächen ohne Verhalten oder fiktive Links, die als funktional präsentiert werden: Implementieren Sie die angeforderte Aktion oder kennzeichnen Sie deren Nichtverfügbarkeit deutlich. Verwenden Sie konsistente Tokens, sichtbare Zustände und responsive Layouts. Wenden Sie die Regeln aus Inhalt, SEO, Performance und Messung an: fiktiven Inhalt kennzeichnen, Basis-SEO auf öffentlichen Seiten, kein Analytics ohne Anfrage. Konsultieren Sie Sicherheit und Lokalisierung, um das Frontend zu schützen und bei mehrsprachigen oder regionalen Produkten die Oberfläche an die definierten Locale anzupassen. Entfernen oder ersetzen Sie keinen Benutzercode, keine Daten, Integrationen oder Dateien ohne Notwendigkeit und entsprechende Autorisierung.
5. Verifizieren. Führen Sie die projektrelevanten Checks aus, starten Sie die Oberfläche lokal, wenn möglich, und öffnen Sie das gerenderte Ergebnis. Überprüfen Sie Hauptaufgaben, Inhalt, Navigation, Tastatur, Fokus, Formulare, relevante Zustände, schmale Bildschirme und Desktop; bewerten Sie Kontrast und reduzierte Bewegung, falls zutreffend. Verwenden Sie die Skripte der Referenz-Skill, wenn verfügbar, mit autorisierter Ausgabe und synthetischen Daten. Für eine Erstellung ohne Vorgängerversion erfinden Sie kein Vorher/Nachher: Dokumentieren Sie den ersten Screenshot als Basisreferenz und vergleichen Sie nur wirklich existierende Zustände oder Versionen. Konsultieren Sie Verifikation.
6. Liefern und berichten. Überprüfen Sie die Definition von „Fertig“ und verwenden Sie deren Berichtsvorlage. Informieren Sie über geänderte Dateien, relevante Entscheidungen und Annahmen, Ausführungsweise, durchgeführte Checks und deren Ergebnisse, simulierte Funktionen und was nicht validiert werden konnte. Dokumentieren Sie Aufgaben, geprüfte Bereiche, Entscheidungen und verifizierte Kriterien in execution-record.json im autorisierten Ausgabeverzeichnis, gemäß Ausführungsprotokoll und dessen Validator. Speichern Sie keine Prompts oder privaten URLs. Behaupten Sie keine Benutzertests, vollständige Konformität, Leistung oder kommerzielle Ergebnisse ohne Nachweis. Wenn der Browser nicht verfügbar ist, melden Sie explizit, dass die Oberfläche nicht visuell inspiziert wurde.

Datenschutz und Sicherheit

Verwenden Sie nur autorisierte Ziele und Umgebungen. Lesen oder exponieren Sie niemals .env, Anmeldeinformationen, Sessions oder unnötige personenbezogene Daten; verwenden Sie synthetischen Inhalt und überprüfen Sie Screenshots vor dem Teilen. Beachten Sie die Schutz- und Einschränkungen des Erfassungstools: Die Inspektion führt JavaScript aus und ist keine Sandbox für nicht vertrauenswürdige Websites. Speichern Sie Artefakte nur in einem autorisierten, von Git ignorierten Verzeichnis oder außerhalb des Checkouts; ändern Sie die Datenschutzeinstellungen des Projekts nicht ohne Notwendigkeit. Senden Sie keine Daten an Dritte, erstellen Sie keine Konten und veröffentlichen Sie nichts ohne Autorisierung.

Qualitätskriterien

Die Oberfläche muss die Hauptaufgabe klar unterstützen: mit visueller Hierarchie, konsistentem Inhalt und hilfreichem Feedback. Achten Sie auf Semantik, Fokus, zugängliche Namen, Labels und Reflow je nach Kontext; behaupten Sie keine Barrierefreiheitszertifizierung allein durch automatisierte Checks. Erfinden Sie keine Conversion-Metriken, Testimonials, Siegel, Preise, Integrationen oder Funktionen. Bevorzugen Sie eine vollständige und testbare Implementierung im Umfang gegenüber einer überzeugenden Optik mit defekten Aktionen.

Definition von „Fertig“

Die Lieferung ist erst fertig, wenn die Hauptaufgabe Ende-zu-Ende im vereinbarten Umfang funktioniert und jedes Element der Definition von „Fertig“ erfüllt, nicht zutreffend mit Begründung oder nicht verifiziert mit Begründung ist. Punkte, die bei Erstellungen von Grund auf am häufigsten fehlschlagen:

• Zustände jenseits des Normalzustands (Laden, Fehler, Leer, Erfolg, Wiederherstellung) ohne Beobachtungsmöglichkeit;
• Fokus entfernt oder verdeckt, Label nur im Platzhalter und Fehler nur durch Farbe angezeigt;
• Kontrast und Touch-Ziele nicht am gerenderten Ergebnis gemessen;
• Schaltflächen und Links, die funktionieren aussehen, aber nichts tun;
• Erfundene kommerzielle Daten, Testimonials oder Integrationen;
• Analytics oder externe Quellen ohne dokumentierte Entscheidung hinzugefügt.

Referenzen und Beispiele

Material	Wann verwenden
Discovery und Briefing	Vor dem Bau: Fragen mit Mustern und Dokumentation von Annahmen.
Stack-Auswahl	Leeres Projekt ohne definierte Plattform.
Visuelle Grundlage	Tokens und überprüfbare Beschränkungen für Kontrast, Ziel und Fokus.
Visuelle Richtungserkundung	Originelle Richtung, wesentliche Optionen und Überprüfung am Rendering.
Inhalts- und Navigationsstruktur	Pfade, Labels und Seitenorganisation in neuen Projekten.
Zustände und Komponenten	Inventar pro Bildschirm und Audit-Einheiten als Fertigstellungskriterium.
Inhalt, SEO, Performance und Messung	Öffentliche Seiten, brasilianische Formate, Core Web Vitals und Datenschutz.
Sicherheit und Lokalisierung	Variabler Inhalt, externe Ressourcen und, falls zutreffend, mehrere Sprachen oder Regionen.
Verifikation	Wie die Checks ausgeführt und dokumentiert werden.
Kollaboration	Wann der Auditor und der Ausführer verwendet werden.
Definition von „Fertig“ und Lieferung	Vor dem Bericht der Lieferung.
Landingpage-Brief, E-Commerce-Brief und Lieferbericht	Synthetische Beispiele des erwarteten Detailgrads.