1. Habit
  2. Skills
  3. React Vite Best Practices skill
asyrafhussin · 3K installs

React Vite Best Practices skill
Runs by itself, PR opened or updated.

Your Vite bundle stays lean.

Install the React Vite Best Practices skill and make it a habit: follow https://gethabit.dev/skills/asyrafhussin/react-vite-best-practices.md

  1. 1Copy
  2. 2Paste into Claude Code, Codex or Cursor
  3. 3It runs by itself

3K installs92 starsMIT licenceSource on GitHub ↗

React Vite Best Practices

by asyrafhussin · 3K installs

The skill

The react vite best practices skill gives React developers 23 rules for Vite builds, code splitting, HMR, assets, environment variables and bundle analysis, ranked by impact.

Only when you ask.

The habit

Your Vite bundle stays lean.

↻ Runs by itselfPR opened or updated

How the habit works.
You don't have to.

Three questionsWhen does it start? How does it check its work? What does it remember?

01

It starts by itself

PR opened or updated. Runs in GitHub Actions or Claude Code routine.

  • ↻ PR opened or updated
  • pull_request.opened, pull_request.synchronize

02

It checks its work

build passes, chunks small. If a check fails, it tells you.

  • ✓the build passes
  • ✓no chunk exceeds the chunkSizeWarningLimit of 500
  • ✓client env vars use the VITE_ prefix and hold no secrets

03

It remembers

bundle size log. The next run reads it first: chunk sizes from the last build.

loops/vite-bundle-loop/runs.md

One run, step by step.
Then it stops.

Stop ruleStops after one build and one review per pull request.

  1. 01

    Read the log

    The agent loads chunk sizes from the last build.

  2. 02

    Build the app

    The production build must pass.

  3. 03

    Check chunk sizes

    No chunk may cross chunkSizeWarningLimit, and growth since last run gets flagged.

  4. 04

    Analyze the bundle

    rollup-plugin-visualizer shows which dependencies grew.

  5. 05

    Check splitting

    Heavy routes load through React.lazy inside Suspense boundaries.

  6. 06

    Check env vars

    Only VITE_ variables reach client code, and none hold secrets.

  7. 07

    Log sizes

    Chunk sizes and the critic's notes go into the run log.

What it may do.
Nothing more.

Safe by defaultIt writes only in its own folder and asks you before anything goes out.

Is it for you?
Use it when it fits.

Quick checkRead both lists. If the left one sounds like you, the React Vite Best Practices skill helps.

Use it when

  • ✓ You configure Vite for React
  • ✓ Your bundle is too large
  • ✓ You add lazy-loaded routes

Skip it when

  • – Your app does not use Vite
  • – You build a server-only app

Questions

React Vite Best Practices skill, answered.

Which rules does the critic use?

The skill's 23 rules across build, code splitting, development, assets, env config and bundle analysis.

Does it change vite.config.ts?

No. The loop reports and suggests changes. You decide what goes into the config.

How do I install the React Vite Best Practices skill?

Copy the prompt at the top into your agent. It installs the skill from asyrafhussin/agent-skills and sets up the habit. Or run npx skills add asyrafhussin/agent-skills --skill react-vite-best-practices.

Is the React Vite Best Practices skill free?

Yes. It is published under MIT. Habit is free too.

React Vite Best Practices. Now as a habit.

Install the React Vite Best Practices skill and make it a habit: follow https://gethabit.dev/skills/asyrafhussin/react-vite-best-practices.md

  • Free
  • No account
  • Undo in one line

All asyrafhussin skills →More code skills →

Works in

  • Claude Code
  • Codex
  • Cursor
  • ChatGPT
  • Claude app

Made by asyrafhussin, published under MIT. Habit links to the original and never changes it. Is this your skill?

Copying didn't work here. Select the line and copy it by hand.