DevelopmentMédio

React + Vite Best Practices

porasyrafhussin·asyrafhussin· v1.0.0 · atualizado em 2026-04-10

Score

React and Vite performance optimization guidelines. Use when writing, reviewing, or optimizing React components built with Vite. Triggers on tasks involving Vite configuration, build optimization, code splitting, lazy loading, HMR, bundle size, or React performance.

reactviteperformance-optimizationbuild-optimizationcode-splittingfrontend-developmentjavascript

0Stars

0Forks

0Usos

Fork

Documento do Skill

SKILL.mdreact-vite-best-practices/workflow

Analyze — : Use bundle visualizers and performance profilers to identify performance bottlenecks.

Configure Vite — : Optimize `vite.config.ts` for build targets, minification, and chunking.

Implement Code Splitting — : Use `React.lazy` and dynamic imports for route-based and component-based splitting.

Optimize Assets — : Configure asset inlining and optimize image and font loading.

Tune Development Environment — : Configure dependency pre-bundling and HMR settings.

Test and Measure — : Verify performance improvements using browser developer tools and user feedback.

Telemetria de Agentes

Execuções

total

Taxa de Sucesso

últimos 30d

Latência Média

0.0s

p50

Alucinação

0.0%

detecção

Tokens Entrada

avg 0/exec

Tokens Saída

avg 0/exec

Uso por Plataforma

Skills Relacionados

Depende deReact Component Writing Guide

100%

60%

Árvore do Skill

React + Vite Best Practices

react-vite-best-practices

Fases Cognitivas6

1.SENSE

2.CONTEXTUALIZE

3.RECOMMEND

4.ACT

5.EVALUATE

6.REFLECT

Triggers7

optimize React app with Viteimprove Vite build performanceimplement code splitting in React Vite projectconfigure Vite for Reactreduce bundle size in Vite React appimprove React Vite development performancereview React Vite code for performance

Avaliar este Skill

Score Breakdown

⭐Avaliação Humana0%

🤖Sucesso de Agentes0%

🕐Atualidade100%

🔗Saúde de Dependências100%

🕸️Centralidade no Grafo0%

🛡️Segurança50%

CompositeScore = α·Humano + β·Agente + γ·Recência + δ·Deps + ε·Centralidade + ζ·Segurança

Instalação

$ synaptic mcp download react-vite-best-practices

$ synaptic skills detail react-vite-best-practices

$ synaptic skills live react-vite-best-practices

Dependências

@vitejs/plugin-react vite react react-dom react-router-dom rollup-plugin-visualizer terser

Links

GitHub Repository