MCP HubMCP Hub
Retour aux compétences

vercel-react-best-practices

TechNickAI
Mis à jour 19 days ago
7 vues
20
4
20
Voir sur GitHub
Autrereactdata

À propos

Cette compétence fournit les directives d'optimisation des performances de Vercel pour React et Next.js, avec 57 règles prioritaires réparties en 8 catégories. Utilisez-la lors de l'écriture, de la revue ou de la refactorisation de code pour résoudre des problèmes de performance tels que les re-rendus, la taille des bundles et les modèles de récupération de données. Elle couvre les domaines clés d'optimisation, y compris les composants serveur/client, Suspense et les hooks React.

Installation rapide

Claude Code

Recommandé
Principal
npx skills add TechNickAI/ai-coding-config -a claude-code
Commande PluginAlternatif
/plugin add https://github.com/TechNickAI/ai-coding-config
Git CloneAlternatif
git clone https://github.com/TechNickAI/ai-coding-config.git ~/.claude/skills/vercel-react-best-practices

Copiez et collez cette commande dans Claude Code pour installer cette compétence

Dépôt GitHub

TechNickAI/ai-coding-config
Chemin: plugins/core/skills/vercel-react-best-practices
0
ai-agentsai-codinganthropicclaude-codeclaude-code-marketplaceclaude-code-plugins

Compétences associées

chatbot-widget-creator

Autre

Cette compétence crée un widget de chatbot de type ChatGPT, prêt pour la production, destiné à l'intégration frontend. Elle inclut des fonctionnalités essentielles telles que la protection contre les re-rendus infinis, la fonctionnalité "Demander à l'IA" par sélection de texte, et une intégration prête à l'emploi avec des backends RAG et le streaming SSE. Utilisez-la pour déployer rapidement une interface de chat éprouvée en conditions réelles et surveillée.

Voir la compétence

chatbot-widget-creator

Autre

Cette compétence génère un widget de chatbot de type ChatGPT prêt pour la production, avec des solutions intégrées pour les problèmes frontend courants. Elle offre une protection contre les re-rendus infinis, une fonctionnalité de sélection de texte "Demander à l'IA", et une prise en charge intégrée des backends SSE en streaming et RAG. Utilisez-la pour implémenter rapidement une interface de chat surveillée et performante dans votre application web.

Voir la compétence

gemini-frontend-assistant

Autre

Cette compétence utilise l'interface en ligne de commande Gemini pour générer du code d'interface utilisateur frontend à partir de descriptions textuelles ou d'images. Elle se spécialise dans la création de composants React avec Tailwind CSS, ce qui la rend idéale pour convertir des captures d'écran ou des concepts de design en code fonctionnel. Les développeurs devraient l'utiliser pour le prototypage rapide, l'assistance au style et les tâches de refactorisation de code.

Voir la compétence

typescript-docs

Autre

Cette compétence génère une documentation TypeScript complète en utilisant JSDoc et TypeDoc pour divers publics. Elle crée une documentation d'API, des enregistrements de décisions architecturales (ADR), ainsi que des exemples spécifiques aux frameworks NestJS, Express, React, Angular et Vue. Utilisez-la pour documenter des modules, générer des documentations d'API ou établir des modèles de documentation en couches.

Voir la compétence