Vue JSX Best Practices Skill for Claude Code: Vue vs React JSX

A small skill that tells your agent how Vue's JSX differs from React's, so it writes class and for, not className and htmlFor.

Installs: 11.5K; on skills.sh
Stars: 3.2K; on GitHub
Files: 1; besides SKILL.md
Updated: Oct 2026; last repo commit

This skill covers one narrow topic: JSX in Vue. SKILL.md has a single entry that points to a reference guide, and the agent should read it when migrating React JSX to Vue or when attribute type errors appear. The guide says to use class and for instead of className and htmlFor, and gives a table of other differences such as tabindex, readonly and onInput.

The guide also shows the tsconfig.json settings (jsx: preserve and jsxImportSource: vue), the Vite plugin setup with @vitejs/plugin-vue-jsx, and how event handlers and modifiers work. The README calls this repo an early experiment, so check its output.

Good for

Developers writing Vue 3 components in JSX or TSX
Teams porting React components to Vue
Anyone who sees type errors about className or htmlFor in Vue

Install vue-jsx-best-practices

Claude Code

Copy this prompt.

Install the vue-jsx-best-practices skill in Claude Code. Run this command:

/plugin marketplace add vuejs-ai/skills
/plugin install vue-jsx-best-practices@vue-skills

Then check that it loaded and tell me how to use it.

2
Paste it into Claude Code. It shows the change and asks before running it.

The README's marketplace route can install this skill on its own as a plugin, or all 8 Vue skills with vue-skills-bundle@vue-skills. The README's plain npx skills add vuejs-ai/skills installs all 8. Pick one route.

From the project README. Source.

What's in the skill

When it loads

JSX syntax in Vue (e.g., class vs className, JSX plugin config).

Sections in SKILL.md

Key facts

Author: vuejs-ai (named in the skill's frontmatter)
Repo: vuejs-ai/skills, folder skills/vue-jsx-best-practices
Installs on skills.sh: 11,524 as of 2026-11-02
GitHub stars: 3,229 for the whole vuejs-ai/skills repo, 2026-11-02
License: MIT
Last repo commit: 2026-10-23
What is inside: 2 files: SKILL.md and 1 reference guide
Project status: The README calls the repo an early experiment and community project whose skills may be incomplete

What it includes

Use class and for in Vue JSX, not className and htmlFor.
The guide says Vue's runtime is lenient, but the types reject the React names.
Read · Attribute rule
Lists React and Vue names for className, htmlFor, onChange, tabIndex and readOnly.
Includes using onInput for live updates.
Read · Attribute differences table
Sets jsx to preserve and jsxImportSource to vue in tsconfig.json.
The guide says Vue 3.4 and later need jsxImportSource for the JSX types.
Write · TypeScript configuration
Adds the vueJsx plugin next to the Vue plugin.
Uses @vitejs/plugin-vue-jsx.
Write · Vite configuration
Shows onClick and onInput handlers and withModifiers for modifiers.
For example, an onClick that only fires on the element itself.
Read · Event handling

From the official docs

Questions

What does the vue-jsx-best-practices skill do?

It tells your agent how Vue's JSX differs from React's. The main rule is class and for instead of className and htmlFor, plus TypeScript and Vite setup.

How do I install it?

Use the install box at the top of this page. The README also offers a plugin route that can install this skill alone or all 8 Vue skills.

Does it change my code?

Only when you ask the agent to write or migrate Vue JSX. The guide includes tsconfig and Vite settings the agent may suggest adding.

Is it related to the other Vue skills?

It is one of 8 skills listed in the vuejs-ai/skills README, which also covers best practices, Options API, Router, Pinia, testing, debugging and composables.

Does it need an API key?

No. SKILL.md names none.

Is it safe to use?

It is two Markdown files with no scripts. The repo README says the skills are an early experiment and may be incomplete, so check the code it writes.

Information

updated Nov 2, 2026

Repository: vuejs-ai/skills
Folder: skills/vue-jsx-best-practices

vuejs-ai/skills skills.sh

Sources

Docs, issue trackers and discussions this page is built from.

Show all 5

https://github.com/vuejs-ai/skills/blob/HEAD/README.md#installation · github.com
https://github.com/vercel-labs/skills/blob/main/docs/commands.md · github.com
https://github.com/vuejs-ai/skills · github.com
https://github.com/vuejs-ai/skills/blob/HEAD/skills/vue-jsx-best-practices/SKILL.md · github.com
https://github.com/vuejs-ai/skills/blob/HEAD/skills/vue-jsx-best-practices/reference/render-function-jsx-vue-vs-react.md · github.com