brand-assets-setup
Vollständige Brand-Assets für Next.js-Projekte einrichten
Das Erstellen von Brand-Assets für Next.js-Projekte ist wiederholend und fehleranfällig. Dieser Skill scannt Ihr Projekt, erstellt eine vollständige Checkliste mit genauen Spezifikationen und importiert alle Assets mit korrekter Metadaten-Konfiguration.
Die Skill-ZIP herunterladen
In Claude hochladen
Gehe zu Einstellungen → Fähigkeiten → Skills → Skill hochladen
Einschalten und loslegen
Teste es
Verwendung von "brand-assets-setup". Richte Brand-Assets für mein Next.js-Projekt ein
Erwartetes Ergebnis:
Projekt-Scan abgeschlossen. 3 vorhandene Assets gefunden. Brand-Farben erkannt: Hintergrund #f7f9fb, Primärfarbe #2563eb. Eine fehlende Datei: apple-icon.png. Vollständige 12-Dateien-Checkliste inklusive Generierungs-Prompt zum Kopieren bereit.
Verwendung von "brand-assets-setup". Ich habe generierte Assets unter ~/Downloads/myapp_brand_assets
Erwartetes Ergebnis:
12 Dateien verifiziert. favicon.ico, icon.png, apple-icon.png, opengraph-image.png, twitter-image.png nach app/ kopiert. PWA-Icons nach public/ kopiert. manifest.json mit Brand-Farben erstellt. layout.tsx-Metadaten aktualisiert. Prüfschritte bereitgestellt.
Sicherheitsaudit
Niedriges RisikoAll 228 static findings are false positives. The scanner misidentified Markdown backtick code formatting as Ruby shell execution (181 locations) and treated documentation URLs and placeholder domain examples as network threats. The 'weak cryptographic algorithm' flags refer to natural language descriptions, not actual code. The skill's intended functionality of scanning a Next.js project for brand colors and copying asset files is legitimate. A minor promotional reference to casely.digital on SKILL.md line 290 is noted but does not pose a security risk.
Probleme mit niedrigem Risiko (1)
Risikofaktoren
⚙️ Externe Befehle (3)
🌐 Netzwerkzugriff (6)
Erkannte Muster
Qualitätsbewertung
Was du bauen kannst
Solo-Entwickler brandet ein neues Projekt
Ein Entwickler, der ein neues Next.js-Projekt startet, kann in Minuten alle Favicons, PWA-Icons und OG-Bilder einrichten, ohne manuelle Dateierstellung.
Team startet eine Produktionsanwendung
Ein Produktteam benötigt vor dem Launch vollständige PWA-Unterstützung, Social-Media-Karten und konsistentes Branding über alle Plattformen hinweg.
Entwickler fügt PWA-Unterstützung zu bestehendem Projekt hinzu
Ein bestehendes Next.js-Projekt benötigt manifest.json, korrekte Icon-Größen und Metadaten-Konfiguration für installierbare Web-App-Unterstützung.
Probiere diese Prompts
Richte Brand-Assets für mein Next.js-Projekt ein.
Generiere Favicon, OG-Bilder und PWA-Icons für meine App. Verwende die Brand-Farben aus meinem Projekt.
Scanne mein Next.js-Projekt und richte vollständiges Branding ein. Erkenne Farben aus der Tailwind-Konfiguration und generiere Metadaten mit OG-Bildern.
Ich habe eine Logo-Datei in meinem Downloads-Ordner. Hilf mir, alle Brand-Assets zu generieren, zu importieren und meine Metadaten zu aktualisieren.
Bewährte Verfahren
- Führen Sie den Skill aus, bevor Sie benutzerdefinierte Icons hinzufügen, damit vorhandene Assets genau erkannt werden können.
- Stellen Sie ein hochauflösendes Vektor-Logo bereit, um die besten Ergebnisse über alle Asset-Größen hinzu zu erzielen.
- Überprüfen Sie OG-Bilder mit opengraph.xyz nach der Bereitstellung in einer Staging- oder Produktionsumgebung.
Vermeiden
- Manuelles Hinzufügen von Icon-Referenzen in den Metadaten, die Next.js automatisch aus dem app/-Verzeichnis erkennt.
- Verwendung von Vollton-Hintergründen für Icons, bei denen das Betriebssystem Transparenz für adaptives Styling erwartet.
- Überspringen der Farberkennungsphase und Verwenden von generischen Farben, die nicht zur Marke passen.