MCP HubMCP Hub
SKILL·DF1DB4

vercel-react-best-practices

TechNickAI
Actualizado 1 month ago
7 vistas
20
4
20
Ver en GitHub
Otroreactdata

Acerca de

Esta habilidad proporciona las pautas de optimización de rendimiento de Vercel para React y Next.js con 57 reglas priorizadas en 8 categorías. Úsala al escribir, revisar o refactorizar código para abordar problemas de rendimiento como re-renderizados, tamaño del paquete y patrones de obtención de datos. Cubre áreas clave de optimización incluyendo componentes de servidor/cliente, Suspense y hooks de React.

Instalación rápida

Claude Code

Recomendado
Principal
npx skills add TechNickAI/ai-coding-config -a claude-code
Comando PluginAlternativo
/plugin add https://github.com/TechNickAI/ai-coding-config
Git CloneAlternativo
git clone https://github.com/TechNickAI/ai-coding-config.git ~/.claude/skills/vercel-react-best-practices

Copia y pega este comando en Claude Code para instalar esta habilidad

Repositorio GitHub

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

Frequently asked questions

What is the vercel-react-best-practices skill?

vercel-react-best-practices is a Claude Skill by TechNickAI. Skills package instructions and resources that Claude loads on demand, so Claude can perform vercel-react-best-practices-related tasks without extra prompting.

How do I install vercel-react-best-practices?

Use the install commands on this page: add vercel-react-best-practices to Claude Code as a plugin, or clone its repository into your skills directory, then restart Claude so it picks up the skill.

What category does vercel-react-best-practices belong to?

vercel-react-best-practices is in the frontend category, tagged react and data.

Is vercel-react-best-practices free to use?

Yes. vercel-react-best-practices is listed on AIMCP and free to install. It runs inside Claude, so no separate service account is required to use the skill itself.

Habilidades relacionadas

chatbot-widget-creator
Otro

Esta habilidad crea un widget de chatbot estilo ChatGPT listo para producción, diseñado para integración frontend. Incluye características críticas como protección contra re-renderizados infinitos, funcionalidad de "Preguntar a la IA" en selecciones de texto, e integración preparada con backends RAG y transmisión SSE. Úselo para implementar rápidamente una interfaz de chat probada en combate y monitoreada.

Ver habilidad
chatbot-widget-creator
Otro

Esta habilidad genera un widget de chatbot estilo ChatGPT listo para producción, con soluciones integradas para problemas comunes del frontend. Ofrece protección contra renderizados infinitos, funcionalidad de "Preguntar a la IA" en selecciones de texto, y soporte integrado para backends de transmisión SSE y RAG. Úsala para implementar rápidamente una interfaz de chat monitoreada y de alto rendimiento en tu aplicación web.

Ver habilidad
gemini-frontend-assistant
Otro

Esta habilidad utiliza la CLI de Gemini para generar código de interfaz de usuario frontend a partir de descripciones de texto o imágenes. Se especializa en crear componentes de React con Tailwind CSS, lo que la hace ideal para convertir capturas de pantalla o conceptos de diseño en código funcional. Los desarrolladores deben usarla para prototipado rápido, asistencia en estilos y tareas de refactorización de código.

Ver habilidad
typescript-docs
Otro

Esta habilidad genera documentación integral de TypeScript utilizando JSDoc y TypeDoc para múltiples audiencias. Crea documentación de API, registros de decisiones arquitectónicas (ADRs) y ejemplos específicos para frameworks como NestJS, Express, React, Angular y Vue. Úsala para documentar módulos, generar documentación de API o establecer patrones de documentación por capas.

Ver habilidad