React- und Next.js-Apps optimieren
React- und Next.js-Apps leiden oft unter Waterfalls, großen Bundles und unnötigen Renders. Dieser Skill gibt Agenten konkrete Vercel-Performance-Regeln für sicherere Refactorings.
Kopieren Sie diese Anfrage in Ihren Agent. Sie enthält die maßgebliche Skill-Seite und das Manifest.
Review the Skillstore skill "vercel-react-best-practices" from https://skillstore.io/skills/am-will-vercel-react-best-practices.md and its manifest at https://skillstore.io/api/skills/am-will-vercel-react-best-practices/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.Ihr Agent sollte weiterhin seinen Plan anzeigen und alle von der Sicherheitsrichtlinie verlangten Bestätigungen anfordern.
Verwenden Sie diese Links, wenn ein KI-Agent, Crawler oder Skript sauberen Kontext benötigt, statt die vollständige Seite zu lesen.
„vercel-react-best-practices“ wird verwendet. Eine Next.js-Seite wartet auf Benutzer-, Konfigurations- und Sidebar-Daten, bevor sie rendert.
Erwartetes Ergebnis:
„vercel-react-best-practices“ wird verwendet. Eine React-Komponente importiert Icons aus einem Paket-Root und erstellt Filter während des Renderns neu.
Erwartetes Ergebnis:
„vercel-react-best-practices“ wird verwendet. Ein Dashboard verwendet localStorage, Cookies und globale Key-Listener.
Erwartetes Ergebnis:
Die Prüfung markiert Storage-Lesezugriffe, Listener-Duplizierung und Hydration-Tradeoffs. Sie empfiehlt Cache-Invalidierung, gemeinsame Subscriptions und CSP-sichere Inline-Skripte.
All 166 static findings were adjudicated as false positives after context review. They are documentation examples, Markdown formatting, public references, relative API examples, or keyboard event variables rather than executable malicious behavior. No prompt injection, data exfiltration, credential access, or automatic command execution was found.
Teile den versionierten Bewertungsbericht, das neutrale Badge, die Einbettungskarte und Zitate. Skillstore berichtet Nachweise, ohne zu entscheiden, ob dieser Skill sicher ist.
https://skillstore.io/skills/am-will-vercel-react-best-practices/audits/5?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report[](https://skillstore.io/skills/am-will-vercel-react-best-practices?utm_source=security_passport_badge)<a href="https://skillstore.io/skills/am-will-vercel-react-best-practices?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/am-will-vercel-react-best-practices/security.svg" alt="Skillstore security assessment" loading="lazy"></a><iframe src="https://skillstore.io/embed/skills/am-will-vercel-react-best-practices.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>am-will. (2026). vercel-react-best-practices security audit report (audit version 5) [Author version unspecified]. Skillstore. https://skillstore.io/skills/am-will-vercel-react-best-practices/audits/5@techreport{am-will-am-will-vercel-react-best-practices-2026,
author = {am-will},
title = {vercel-react-best-practices security audit report (audit version 5)},
institution = {Skillstore},
year = {2026},
number = {5},
url = {https://skillstore.io/skills/am-will-vercel-react-best-practices/audits/5},
note = {Author version unspecified}
}cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "vercel-react-best-practices security audit report (audit version 5)"
version: "unspecified"
type: report
authors:
- name: "am-will"
date-released: "2026-07-23"
url: "https://skillstore.io/skills/am-will-vercel-react-best-practices/audits/5"
identifiers:
- type: other
value: "skillstore:am-will-vercel-react-best-practices:audit:5"
description: "Skillstore immutable audit report identifier"
Jeder Autor bleibt ein eigener installierbarer Skill. Die empfohlene Variante wird nach Skillstore-Nachweisen bewertet.
Warum diese Variante zuerst steht
vercel-labs-vercel-react-best-practices
2026-09-09
am-will-vercel-react-best-practices
2026-09-09
sickn33-vercel-react-best-practices
2026-09-09
zhanlincui-vercel-react-best-practices
2026-09-09
Prüfe ein React-Feature vor dem Merge auf vermeidbare Waterfalls, Render-Churn und teure Schleifen.
Verbessere Next.js-Routes durch Streaming-Layouts, Caching geteilter Daten und kleinere RSC-Payloads.
Bitte einen KI-Coding-Assistenten, bei UI-Refactorings eine priorisierte Performance-Checkliste anzuwenden.
Prüfe diese React-Komponente anhand dieses Skills auf die Performance-Probleme mit der größten Wirkung. Konzentriere dich auf Waterfalls, Bundle-Größe und Re-Renders. Erkläre jede Korrektur in einfacher Sprache.
Refactore diese Next.js-Route, um unabhängige await Waterfalls zu entfernen. Starte unabhängige Operationen früh und verwende Suspense nur dort, wo das Layout sicher streamen kann.
Auditiere dieses Feature auf RSC-Grenzserialisierung, Wachstum des Client-Bundles und wiederholte Client-Fetches. Gib einen priorisierten Aktionsplan mit Risiken und Tests zurück.
Vergleiche zwei Implementierungen dieses Dashboard-Workflows anhand der Skill-Regeln. Empfiehl die Version mit besserer Latenz, besserem Bundle-Verhalten und stabilerem Rendering.
Autor
am-willLizenz
MIT
Skillstore-Revision
r2
Versionshinweis
Der Autor hat keine Version angegeben.
Ref.
89edfdc710d0846129dcee6a929477b04f08052c
Aktualität der Wartung
25.7.2026
Nutzung
22 Downloads · 189 Aufrufe
Dateistruktur
Codex Custom Agents erstellen
Benutzerdefinierte Codex-Agenten benötigen präzise TOML-Dateien und klare Laufzeiteinstellungen. Diese Skill unterstützt beim Rollendesign, schreibt Konfigurationen und validiert erforderliche Felder.
Markante Frontend-Oberflächen entwickeln
Generische Oberflächen schwächen Produktklarheit und Vertrauen. Diese Skill-Anleitung unterstützt Claude, Codex und Claude Code dabei, ausgefeilte Frontend-Seiten mit bewusster visueller Ausrichtung zu erstellen.
Parallele Agenten-Workflows planen
Große Codeänderungen lassen sich nur schwer auf mehrere Agenten aufteilen, ohne Abhängigkeitsfehler zu verursachen. Diese Skill erstellt abhängigkeitsbewusste Implementierungspläne mit Recherche, Klärung, Review und parallelen Ausführungsgruppen.
Phasenweise Implementierungsarbeit planen
Komplexe Programmierarbeit kann unklar werden, wenn Umfang, Abhängigkeiten und Validierungsschritte fehlen. Dieser Skill erstellt phasenweise Pläne mit Sprints, atomaren Aufgaben und Verifizierungs-Checkpoints.
Phasenweise Implementierungspläne erstellen
Komplexe Softwareaufgaben können scheitern, wenn Umfang, Reihenfolge und Validierung unklar sind. Dieser Skill erstellt phasenweise Pläne mit atomaren Aufgaben, Kontrollpunkten, Risiken und Review-Schritten.
Parallele Entwicklungspläne ausführen
Große Implementierungspläne sind schwer über mehrere Agenten hinweg zu koordinieren. Diese Skill wandelt einen Markdown-Plan in abhängigkeitsbewusste Wellen für Claude, Codex und Claude Code um.
Produktionsreife Frontend-Funktionen entwickeln
von davila7
Frontend-Teams benötigen projektübergreifend einheitliche Leitlinien für React und Next.js. Dieser Skill bietet Referenz-Workflows, Qualitätspraktiken und Hilfsskripte für die Frontend-Analyse.
React View Transitions implementieren
von vercel-labs
React View Transitions lassen sich leicht falsch platzieren, was zu unbemerkten oder störenden Animationen führt. Dieser Skill unterstützt Entscheidungen zu Animationen für Routen, Suspense, Listen und Shared Elements.
Fullstack-Apps mit Senior-Anleitung erstellen
von alirezarezvani
Fullstack-Projekte benötigen oft ein konsistentes Setup, Architekturentscheidungen und Qualitätsprüfungen. Dieser Skill bietet Skripte und Referenzen für Arbeiten mit React, Next.js, Node.js, GraphQL und PostgreSQL.
Next.js App Router-Architektur planen
von 89jobrien
Next.js-Teams können Schwierigkeiten haben, Routen, Komponenten, Datenladen und Migrationsschritte auszuwählen. Diese Skill bietet strukturierte Architekturberatung für App Router, Server Components und Performance.
Vue-3-Codequalität verbessern
von vuejs-ai
In Vue-Projekten sammeln sich im Laufe der Zeit häufig Fehler bei Reaktivität, Komponenten und Performance an. Dieser Skill bietet gezielte Vue-3-Anleitung für sicherere Muster und klareren Code.
Go-Performance mit Profiling optimieren
von 89jobrien
Go-Dienste können ohne klare Nachweise langsam oder speicherintensiv werden. Diese Skill-Anleitung unterstützt Profiling, Allokationsanalyse, Nebenläufigkeits-Tuning und benchmarkgestützte Optimierung.