Compétences react-server-components-framework

📦

react-server-components-framework

Name: react-server-components-framework
Author: AI Agent Hub

Risque moyen ⚡ Contient des scripts🌐 Accès réseau🔑 Variables d’environnement⚙️ Commandes externes

Créer des applications avec React Server Components

React Server Components modifie l’emplacement des données, du rendu et de l’interactivité dans une application Next.js. Cette compétence fournit à Claude, Codex et Claude Code des modèles pratiques pour l’architecture App Router, les Server Actions, le streaming et les travaux de migration.

Prend en charge: Claude Codex Code(CC)

⚠️ 50 Médiocre

Télécharger le ZIP du skill

Importer dans Claude

Allez dans Paramètres → Capacités → Skills → Importer un skill

Activez et commencez à utiliser

Ressources lisibles par les agents

Utilisez ces liens lorsqu'un AI Agent, un crawler ou un script a besoin d'un contexte propre au lieu de lire toute la page.

Détail Markdown GET /skills/ariegoldkin-react-server-components-framework.md Manifest signé GET /api/skills/ariegoldkin-react-server-components-framework/manifest Lockfile signé GET /api/skills/ariegoldkin-react-server-components-framework/lockfile

Tester

Utilisation de "react-server-components-framework". Un tableau de bord produit a besoin de filtres, de graphiques et de données de compte sécurisées.

Résultat attendu:

Un plan de frontières qui conserve les données de compte et les requêtes de graphiques sur le serveur, déplace les filtres dans un petit Client Component et diffuse les sections de graphiques lentes derrière Suspense.

Utilisation de "react-server-components-framework". Un éditeur de blog a besoin d’une action de publication et d’un rafraîchissement de route.

Résultat attendu:

Une checklist de Server Action couvrant la validation de schéma, les vérifications de session, les vérifications de propriété, la mise à jour de la base de données, la revalidation du chemin, le comportement de redirection et les messages d’erreur.

Utilisation de "react-server-components-framework". Une page d’article Pages Router utilise getStaticProps et Head.

Résultat attendu:

Un plan de migration qui remplace les props statiques par un Server Component async, déplace les métadonnées dans generateMetadata et préserve le comportement de revalidation.

Audit de sécurité

Risque moyen

v6 • 6/28/2026

Static analysis reported many command, network, environment, and browser-storage patterns, but review found these are primarily markdown and TypeScript examples for Next.js development rather than hidden executable behavior. No prompt-injection text or confirmed malicious intent was found. The skill should publish with a warning because some copyable examples need stronger security caveats, especially stored HTML rendering and authorization checks for destructive actions.

Fichiers analysés

2,709

Lignes analysées

résultats

Total des audits

Problèmes à risque moyen (2)

examples/blog-app-example.tsx:276-279

Copyable Stored HTML Rendering Example

The blog example renders post content with dangerouslySetInnerHTML. In a real application, stored HTML must be sanitized before rendering or it can create stored cross-site scripting risk.

templates/server-action-template.ts:110-117 templates/server-action-template.ts:151-161

Destructive Server Actions Lack Authorization in Template

The delete and bulk update Server Action examples mutate records by id without the same session and ownership checks shown in the update example. Copied as-is, this can teach insecure authorization patterns.

Problèmes à risque faible (3)

SKILL.md:45-58 checklists/rsc-implementation-checklist.md:8-18

Static Command Findings Are Markdown and Framework Syntax

The reported Ruby or shell backtick execution findings are mostly inline markdown code spans, JSX template literals, and framework snippets. They are not invoked by install scripts or runtime automation in this skill.

references/component-patterns.md:57-63

Environment and Network Examples Use Placeholder Endpoints

The environment-variable and fetch findings occur in server-component examples that show how to call an API with a server-side secret. This is a legitimate framework pattern, but users should avoid logging or returning secrets.

templates/client-component-template.tsx:27-33

Browser Storage Example Parses Local Data

The Client Component template reads localStorage and parses JSON. This is normal client-side behavior, but copied code should handle parse failures and avoid storing sensitive data in browser storage.

Facteurs de risque

⚡ Contient des scripts (1)

references/component-patterns.md:375

🌐 Accès réseau (24)

🔑 Variables d’environnement (6)

references/component-patterns.md:59 references/component-patterns.md:59 references/component-patterns.md:59 templates/server-component-template.tsx:30 templates/server-component-template.tsx:30 templates/server-component-template.tsx:30

⚙️ Commandes externes (246)

Motifs détectés

Static Dangerous Combination Dismissed After Context Review

Audité par: codex Voir l’historique des audits →

Score de qualité

Architecture

100

Maintenabilité

Contenu

Communauté

Sécurité

Conformité aux spécifications

Ce que vous pouvez construire

Planifier une architecture App Router

Cartographier les routes, les layouts, les frontières de données et les îlots interactifs avant de créer une nouvelle application Next.js.

Implémenter les Server Actions en toute sécurité

Créer des flux de mutation avec validation, revalidation, redirections et points de contrôle d’autorisation clairs.

Migrer les fonctionnalités Pages Router

Convertir les modèles de récupération de données, de métadonnées, de layouts et de routes API en équivalents App Router.

Essayez ces prompts

Choisir les frontières des composants

Examine mon idée de page Next.js et décide quelles parties doivent être des Server Components et quelles parties doivent être des Client Components. Explique brièvement chaque frontière.

Concevoir la récupération de données

Conçois la stratégie de récupération de données pour cette route App Router. Inclus le mode de mise en cache, la revalidation, l’interface de chargement et la gestion des erreurs.

Créer des Server Actions

Crée un plan de Server Action pour ce formulaire. Inclus la validation, l’autorisation, les étapes de mutation, la revalidation du cache et les états d’erreur visibles par l’utilisateur.

Auditer une migration RSC

Audite cette fonctionnalité Pages Router pour une migration vers l’App Router. Identifie les changements requis pour la route, le layout, les métadonnées, la récupération de données et les frontières client.

Bonnes pratiques

Gardez les Client Components petits et placez-les près de l’interface interactive qu’ils contrôlent.
Validez et autorisez chaque Server Action avant de modifier les données.
Utilisez des frontières Suspense autour des sections lentes afin que la page puisse diffuser rapidement du contenu utile.

Éviter

Ne marquez pas des pages entières comme Client Components lorsqu’un seul petit widget a besoin d’interactivité.
Ne transmettez pas de secrets ni d’objets réservés au serveur dans les props d’un Client Component.
Ne copiez pas les exemples en production sans ajouter une validation et une autorisation propres au projet.

Foire aux questions

Cette compétence installe-t-elle un framework React ?

Non. Elle fournit des conseils, des modèles, des exemples et des checklists pour créer avec React Server Components et Next.js.

Quels outils peuvent utiliser cette compétence ?

Le rapport indique la prise en charge de Claude, Codex et Claude Code.

Est-ce uniquement pour Next.js ?

La plupart des conseils ciblent Next.js App Router, car c’est le principal workflow pris en charge pour React Server Components.

Peut-elle aider avec des projets Pages Router existants ?

Oui. Elle inclut des conseils de migration pour la récupération de données, les layouts, les métadonnées et la structure des routes.

Couvre-t-elle les Server Actions ?

Oui. Elle inclut des modèles de Server Action pour les formulaires, la validation, la revalidation, les téléversements et les mises à jour optimistes.

Le contenu est-il prêt pour la production tel qu’il est écrit ?

Non. Les exemples sont des points de départ et nécessitent une authentification, une autorisation, une validation et une sanitisation propres à l’application.