FelipeStruchel/landing-page-skills

Verwenden Sie dies, wenn der Bereich '01-negocio-e-escopo.md' genehmigt wurde und noch der visuelle Stil einer Landingpage aussteht, oder wenn eine interne Seite (Terminkalender, Dashboard) eines Kunden ein visuelles Design benötigt. Nicht verwenden, um Geschäftsinformationen zu sammeln (landing-descoberta).

Was ist landing-page-skills?

Diese Skill definiert einen strukturierten Prozess zur Erstellung der visuellen Richtung für Landingpages und interne Bildschirme (z. B. Terminkalender, Dashboard) in Kundenprojekten. Der Workflow beginnt mit der Überprüfung der Projektphase (Gate-Prüfung), dem vollständigen Lesen relevanter Dokumente (`01-negocio-e-escopo.md`, `inventario-assets.md`) und der Ausführung eines Asset-Prüfskripts (`check-assets.js`). Anschließend werden aus den Profilen des Unternehmens und seiner Kunden – nicht aus persönlichem Geschmack – visuelle Achsen abgeleitet. Für jede Richtung sind mindestens zwei bis drei Optionen erforderlich, die vollständig definiert sein müssen: Name, einzeilige Idee, selbst gehostete Typografie (Display und Text), Hex-Farbpalette, Abschnittsstruktur, Hero-Design, Asset-IDs und Risiken. Jede Palette muss mit `check-contrast.js` auf ausreichenden Kontrast geprüft werden. Nach der Präsentation wird eine Empfehlung ausgesprochen, die auf beide Profile Bezug nimmt, und der Kunde (Felipe) wählt final aus. Die gewählte Richtung wird in `direcao-visual.md` dokumentiert. Bei neuen Landingpages wird kein Mockup erstellt, sondern direkt umgesetzt; bei Erweiterungen existierender Seiten kommt das Mockup zuerst. Die Skill erzwingt strenge visuelle Reviews vor der Veröffentlichung mit Checklisten für Hierarchie, Konsistenz, responsive Prüfung auf 375 px und 1280 px, Kontrast, interaktive Zustände (Fokus, Hover, Fehler, leer, Laden) sowie Implementierungstreue. Rote Flaggen warnen vor typischen Fehlern wie subjektiver Stilwahl, generischem CSS, zu wenigen Optionen oder erfundenen Asset-Pfaden.

Funktioniert mit~Claude Code~Codex CLI~Cursor

npx skills add https://github.com/FelipeStruchel/landing-page-skills/tree/HEAD/skills/landing-direcao-visual

Dokumentation

Landing: visuelle Richtung

Der Stil ergibt sich aus dem Profil des Unternehmens und dem Profil seiner Kunden, nicht aus dem persönlichen Geschmack.

Eiserne Regel

KEINE UMSETZUNG OHNE 2 ODER 3 PRÄSENTIERTE RICHTUNGEN
UND EINE VON FELIPE AUSGEWÄHLTE.
JEDES VISUELLE, OB INTERN ODER EXTERN, GEHT ÜBER frontend-design.

Erste Aktion: node check-gate.js --cliente <name> --antes-de direcao-visual; die Dokumente 01 und inventario-assets.md vollständig lesen; node check-assets.js --root <cliente> --fase direcao-visual ausführen. Nicht das Gesprächsgedächtnis nutzen.

Gate-Funktion

Leiten Sie die Achsen aus den beiden Profilen ab (references/perfis-e-estilos.md).
ERFORDERLICHE SUB-SKILL: Verwenden Sie für jede Richtung frontend-design:frontend-design.
Jede Richtung enthält: Name, Idee in einem Satz, Typografie (Display und Text, selbst gehostet), Farbpalette mit Hex-Werten, Abschnittsstruktur, Hero, Assets mit ID (A-nnn) und was fehlt, Risiko.
Für jede Palette füllen Sie pares-contraste.json aus und führen Sie node check-contrast.js --css <css> --pairs <pares> aus; präsentieren Sie keine abgelehnte Palette.
Empfehlen Sie eine, indem Sie die Empfehlung mit beiden Profilen verknüpfen.
Warten Sie auf die Wahl von Felipe. Speichern Sie direcao-visual.md (Frontmatter, escolhida) und genehmigen Sie.

Neue Landingpage: kein Mockup, erstellen Sie die Seite direkt (das kostet denselben Aufwand). Erweiterung einer vorhandenen Seite: zuerst Mockup; nach Genehmigung prüfen Sie Punkt für Punkt, ob das Erstellte dem Gezeigten entspricht. Begründete Verbesserungen während der Erstellung sind erlaubt und fließen ins Feedback-Protokoll ein.

Visuelle Überprüfung (vor dem Veröffentlichungs-Gate)

Hierarchie und Typografie konsistent · 375 px und 1280 px, Screenshot des Fensters (nicht fullPage), nach langsamem Scrollen · Kontrast (check-contrast) · Fokus-, Hover-, Fehler-, Leer- und Ladezustände · Abstände, Komponenten und Farben gleichbleibend · CTA passend zum Geschäft · die implementierte Seite, nicht das Mockup · check-page.

Rote Flaggen: Stopp

Den Stil auswählen, der „am besten aussieht“, und direkt umsetzen
Generisches CSS für interne Bildschirme, „weil es nur für den ist“
Nur eine Richtung präsentieren
Asset ohne ID oder mit erfundenen Pfaden angeben

Rationalisierung	Realität
„Intern braucht kein Design“	Der Bildschirm, den der Kunde täglich nutzt, ist Teil der Marke
„Felipe hat gesagt, mach, was du für am besten hältst“	Das ist Delegation der Empfehlung, nicht der Entscheidung
„Eine Richtung ist schneller“	Zwei oder drei mit Empfehlung waren schneller als Diskussion per Text
„Das Foto, das ich brauche, muss es geben“	Halten Sie den Bedarf fest; nehmen Sie nie an, dass die Datei existiert