Fähigkeiten vercel-react-best-practices
📦

vercel-react-best-practices

v1.0.0 Inhaltsrevision r1 Sicher ⚡ Enthält Skripte⚙️ Externe Befehle🌐 Netzwerkzugriff

React- und Next.js-Performance optimieren

React- und Next.js-Apps verlieren oft durch Waterfalls, große Bundles und vermeidbare Re-Renderings an Geschwindigkeit. Diese Skill gibt Agenten konkrete Regeln für sicherere, performanceorientierte Änderungen.

Unterstützt: Claude Codex Code(CC)
🥈 80 Silber

Dieser Skill ist Teil eines Skill-Pakets

Installieren Sie das gesamte Skill-Paket, um mit einem Befehl alle Skills zu erhalten, die die Aufgabe braucht.

KeywayTech Coding Skills · 19 Skills Gesamtes Paket installieren

Mit meinem Agent installieren

Kopieren Sie diese Anfrage in Ihren Agent. Sie enthält die maßgebliche Skill-Seite und das Manifest.

Agent-Anfrage
Review the Skillstore skill "vercel-react-best-practices" from https://skillstore.io/skills/vercel-labs-vercel-react-best-practices.md and its manifest at https://skillstore.io/api/skills/vercel-labs-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.

Agent-lesbare Ressourcen

Verwenden Sie diese Links, wenn ein KI-Agent, Crawler oder Skript sauberen Kontext benötigt, statt die vollständige Seite zu lesen.

Markdown-Detailseite GET /skills/vercel-labs-vercel-react-best-practices.md Signiertes manifest GET /api/skills/vercel-labs-vercel-react-best-practices/manifest Signiertes lockfile GET /api/skills/vercel-labs-vercel-react-best-practices/lockfile

Testen

„vercel-react-best-practices“ wird verwendet. Prüfe eine Next.js-Seite, die auf Benutzerdaten wartet, bevor sie die Shell rendert.

Erwartetes Ergebnis:

Das Ergebnis erklärt, dass das Layout durch Data Fetching blockiert wird, und empfiehlt, das Laden der Daten hinter eine Suspense-Grenze zu verschieben.

„vercel-react-best-practices“ wird verwendet. Prüfe eine Komponente, die viele Icons aus einem einzigen Package-Einstiegspunkt importiert.

Erwartetes Ergebnis:

Das Ergebnis weist auf das Risiko durch Barrel Imports hin und schlägt direkte Imports oder optimierte Next.js Package Imports vor.

„vercel-react-best-practices“ wird verwendet. Verbessere einen Route Handler mit Authentifizierung, Laden der Konfiguration und Data Fetching.

Erwartetes Ergebnis:

Das Ergebnis trennt unabhängige Operationen von abhängigen und empfiehlt, sichere Promises früher zu starten.

Sicherheitsaudit

Sicher
v5 • 7.7.2026 Versionsbericht öffnen

All 187 static findings were reviewed as false positives caused by markdown documentation, generated guide content, and illustrative React or Next.js examples. No prompt injection attempt, credential material, obfuscated executable payload, unauthorized network behavior, or shell execution was found in the reviewed source context.

58
Gescannte Dateien
5,894
Analysierte Zeilen
0
Prüfelemente
0
Falschmeldungen ignoriert

Risikofaktoren

⚡ Enthält Skripte (12)
AGENTS.md:448 AGENTS.md:490 AGENTS.md:528 AGENTS.md:549 AGENTS.md:571 AGENTS.md:2628 rules/bundle-conditional.md:20 rules/bundle-defer-third-party.md:35 rules/bundle-dynamic-imports.md:28 rules/bundle-preload.md:18 rules/bundle-preload.md:40 rules/js-tosorted-immutable.md:57
⚙️ Externe Befehle (78)
AGENTS.md:1227-1235 AGENTS.md:1235-1253 AGENTS.md:1871-1877 AGENTS.md:2444-2448 AGENTS.md:2457-2463 README.md:88-89 README.md:89 README.md:96-97 README.md:97-98 README.md:98-99 README.md:99-100 README.md:100-101 README.md:101-105 README.md:105-106 README.md:106-107 README.md:107-108 README.md:108-115 README.md:115-118 rules/client-localstorage-schema.md:27-35 rules/client-localstorage-schema.md:35-53 rules/js-hoist-regexp.md:16-20 rules/js-hoist-regexp.md:29-35 rules/rendering-hydration-no-flicker.md:72-78 SKILL.md:27 SKILL.md:28 SKILL.md:29 SKILL.md:30 SKILL.md:31 SKILL.md:32 SKILL.md:33 SKILL.md:34 SKILL.md:40 SKILL.md:41 SKILL.md:42 SKILL.md:43 SKILL.md:44 SKILL.md:48 SKILL.md:49 SKILL.md:50 SKILL.md:51 SKILL.md:52 SKILL.md:56 SKILL.md:57 SKILL.md:58 SKILL.md:59 SKILL.md:60 SKILL.md:64 SKILL.md:65 SKILL.md:69 SKILL.md:70 SKILL.md:71 SKILL.md:72 SKILL.md:73 SKILL.md:74 SKILL.md:75 SKILL.md:79 SKILL.md:80 SKILL.md:81 SKILL.md:82 SKILL.md:83 SKILL.md:84 SKILL.md:85 SKILL.md:89 SKILL.md:90 SKILL.md:91 SKILL.md:92 SKILL.md:93 SKILL.md:94 SKILL.md:95 SKILL.md:96 SKILL.md:97 SKILL.md:98 SKILL.md:99 SKILL.md:100 SKILL.md:104 SKILL.md:105 SKILL.md:111-115 SKILL.md:115-125
🌐 Netzwerkzugriff (15)
AGENTS.md:1166 AGENTS.md:783 AGENTS.md:1038 metadata.json:7 metadata.json:8 metadata.json:9 metadata.json:10 metadata.json:11 metadata.json:12 metadata.json:13 README.md:84 README.md:123 rules/_sections.md:26 rules/client-swr-dedup.md:18 rules/server-serialization.md:10
Das letzte abgeschlossene statische und semantische Audit erkannte keine bestätigten Sicherheitsbefunde. Dies beweist nicht, dass der Skill keine Nebenwirkungen hat.
Geprüft von: codex Audit-Verlauf anzeigen →
Diesen Bericht teilen & zitieren

Teile den versionierten Bewertungsbericht, das neutrale Badge, die Einbettungskarte und Zitate. Skillstore berichtet Nachweise, ohne zu entscheiden, ob dieser Skill sicher ist.

Versionsbericht öffnen
Sicherheitsbewertung

Berichtslink kopieren

https://skillstore.io/skills/vercel-labs-vercel-react-best-practices/audits/5?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report

Markdown-Badge

[![Skillstore security assessment](https://skillstore.io/badges/skills/vercel-labs-vercel-react-best-practices/security.svg)](https://skillstore.io/skills/vercel-labs-vercel-react-best-practices?utm_source=security_passport_badge)

HTML-Badge

<a href="https://skillstore.io/skills/vercel-labs-vercel-react-best-practices?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/vercel-labs-vercel-react-best-practices/security.svg" alt="Skillstore security assessment" loading="lazy"></a>

Einbettungskarte

<iframe src="https://skillstore.io/embed/skills/vercel-labs-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>
Wissenschaftliche Zitate (APA · BibTeX · CFF)

APA-Zitat

vercel-labs. (2026). vercel-react-best-practices security audit report (audit version 5) [Author version 1.0.0]. Skillstore. https://skillstore.io/skills/vercel-labs-vercel-react-best-practices/audits/5

BibTeX-Zitat

@techreport{vercel-labs-vercel-labs-vercel-react-best-practices-2026, author = {vercel-labs}, title = {vercel-react-best-practices security audit report (audit version 5)}, institution = {Skillstore}, year = {2026}, number = {5}, url = {https://skillstore.io/skills/vercel-labs-vercel-react-best-practices/audits/5}, note = {Author version 1.0.0} }

CITATION.cff

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: "1.0.0" type: report authors: - name: "vercel-labs" date-released: "2026-07-07" url: "https://skillstore.io/skills/vercel-labs-vercel-react-best-practices/audits/5" identifiers: - type: other value: "skillstore:vercel-labs-vercel-react-best-practices:audit:5" description: "Skillstore immutable audit report identifier"

Varianten vergleichen

4 installierbare Varianten

Jeder Autor bleibt ein eigener installierbarer Skill. Die empfohlene Variante wird nach Skillstore-Nachweisen bewertet.

Warum diese Variante zuerst steht

Höchster Skillstore-Score
vercel-labs Empfohlen Aktuell

vercel-labs-vercel-react-best-practices

Skillstore-Score 80
Evidenzvertrauen Hoch
Skillstore-Nutzung 33
Aktualisiert

2026-09-09

am-will

am-will-vercel-react-best-practices

Skillstore-Score 79
Evidenzvertrauen Hoch
Skillstore-Nutzung 27
Aktualisiert

2026-09-09

sickn33

sickn33-vercel-react-best-practices

Skillstore-Score 78
Evidenzvertrauen Hoch
Skillstore-Nutzung 10
Aktualisiert

2026-09-09

ZhanlinCui

zhanlincui-vercel-react-best-practices

Skillstore-Score 72
Evidenzvertrauen Hoch
Skillstore-Nutzung 104
Aktualisiert

2026-09-09

Skillstore-Score

Warum dieser Score Evidenzvertrauen: Hoch
55
Architektur
100
Wartbarkeit
87
Inhalt
72
Gemeinschaft
83
Spezifikationskonformität

Was Sie erstellen können

Einen React Pull Request prüfen

Waterfall-, Re-Rendering- und Bundle-Risiken finden, bevor eine Frontend-Änderung ausgeliefert wird.

Eine Next.js-Seite refaktorisieren

Suspense, paralleles Fetching und schlankere Client-Props nutzen, um die Seitenperformance zu verbessern.

Agentenausgaben standardisieren

Claude, Codex oder Claude Code bei der Codegenerierung konsistente React-Performance-Regeln geben.

Diese Prompts ausprobieren

Einsteigerprüfung 
Prüfe diese React-Komponente mit der Vercel React Best Practices Skill. Konzentriere dich auf offensichtliche Waterfalls, unnötige Re-Renderings und Bundle-Probleme.
Next.js Data-Fetching-Audit 
Prüfe diesen Next.js Data-Fetching-Flow auf sequenzielle awaits, fehlende Promise.all-Nutzung und Möglichkeiten für Suspense oder Komposition.
Plan zur Bundle-Optimierung 
Nutze diese Skill, um schwere Imports, Barrel Imports und nicht kritische Bibliotheken zu identifizieren. Empfiehl gezielte Änderungen, die die anfängliche Bundlegröße reduzieren.
Fortgeschrittene Refactoring-Strategie 
Erstelle einen priorisierten Refactoring-Plan mit den Vercel React Best Practices. Trenne kritische Waterfall-Korrekturen von weniger wirkungsvollen Rendering- und JavaScript-Verbesserungen.

Bewährte Praktiken

  • Beginne mit Waterfall- und Bundlegrößen-Regeln, weil sie meist den größten Performance-Effekt haben.
  • Prüfe jede Empfehlung anhand der aktuellen Projektstruktur, bevor gemeinsame Komponenten geändert werden.
  • Nutze die Beispiele als Muster und passe dann Namen, Abhängigkeiten und Framework-Versionen an die Ziel-App an.

Vermeiden

  • Wende nicht jede Optimierung blind an, wenn der Codepfad klein ist oder selten genutzt wird.
  • Füge keine Memoization oder kein Caching hinzu, ohne dass klare wiederholte Kosten oder ein gemeinsames Request-Muster vorliegen.
  • Verschiebe keine sensiblen Serverdaten über Client-Grenzen hinweg, wenn nur ein kleines Feld benötigt wird.

Häufig gestellte Fragen

Wobei hilft diese Skill?
Es hilft Agenten, React- und Next.js-Code mithilfe performanceorientierter Best Practices zu schreiben und zu prüfen.
Kann es Performance-Benchmarks ausführen?
Nein. Es bietet Anleitung und Prüfkriterien, misst die Laufzeitperformance aber nicht direkt.
Unterstützt es sowohl React als auch Next.js?
Ja. Es enthält allgemeine React-Regeln und Next.js-spezifische Regeln für Routing, Server Components und Server Actions.
Können Claude Code oder Codex es bei Refactorings nutzen?
Ja. Die Regeln sind für KI-Agenten strukturiert, die Anwendungscode generieren, prüfen oder refaktorisieren.
Sind die Codebeispiele produktionsreif?
Sie sind Beispiele für Muster. Agenten sollten sie an das Zielprojekt und die Framework-Version anpassen.
Konzentriert es sich auf Sicherheit?
Nur teilweise. Es enthält Hinweise zur Authentifizierung bei Server Actions, der Hauptfokus liegt jedoch auf Frontend-Performance.

Entwicklerdetails

Lizenz

MIT

Autorenversion

v1.0.0

Skillstore-Revision

r1

Repository

https://github.com/vercel-labs/agent-skills/tree/main/skills/react-best-practices/

Ref.

36e07d5e13068e5be64447e8f20b427cf2cbd21a

Aktualität der Wartung

22.7.2026

Nutzung

23 Downloads · 339 Aufrufe

Dateistruktur

📁 rules/

📄 _sections.md

📄 _template.md

📄 advanced-event-handler-refs.md

📄 advanced-use-latest.md

📄 async-api-routes.md

📄 async-defer-await.md

📄 async-dependencies.md

📄 async-parallel.md

📄 async-suspense-boundaries.md

📄 bundle-barrel-imports.md

📄 bundle-conditional.md

📄 bundle-defer-third-party.md

📄 bundle-dynamic-imports.md

📄 bundle-preload.md

📄 client-event-listeners.md

📄 client-localstorage-schema.md

📄 client-passive-event-listeners.md

📄 client-swr-dedup.md

📄 js-batch-dom-css.md

📄 js-cache-function-results.md

📄 js-cache-property-access.md

📄 js-cache-storage.md

📄 js-combine-iterations.md

📄 js-early-exit.md

📄 js-hoist-regexp.md

📄 js-index-maps.md

📄 js-length-check-first.md

📄 js-min-max-loop.md

📄 js-set-map-lookups.md

📄 js-tosorted-immutable.md

📄 rendering-activity.md

📄 rendering-animate-svg-wrapper.md

📄 rendering-conditional-render.md

📄 rendering-content-visibility.md

📄 rendering-hoist-jsx.md

📄 rendering-hydration-no-flicker.md

📄 rendering-svg-precision.md

📄 rendering-usetransition-loading.md

📄 rerender-defer-reads.md

📄 rerender-dependencies.md

📄 rerender-derived-state.md

📄 rerender-functional-setstate.md

📄 rerender-lazy-state-init.md

📄 rerender-memo-with-default-value.md

📄 rerender-memo.md

📄 rerender-simple-expression-in-memo.md

📄 rerender-transitions.md

📄 server-after-nonblocking.md

📄 server-auth-actions.md

📄 server-cache-lru.md

📄 server-cache-react.md

📄 server-dedup-props.md

📄 server-parallel-fetching.md

📄 server-serialization.md

📄 AGENTS.md

📄 metadata.json

📄 README.md

📄 SKILL.md