vue-jsx-best-practices

Overview of vue-jsx-best-practices skill

The vue-jsx-best-practices skill helps you avoid the most common mistake people make when writing JSX in Vue: assuming React JSX conventions apply unchanged. They do not. In Vue JSX, you generally use standard HTML attribute names like class and for, not React-style className and htmlFor.

Who this skill is for

This skill is best for frontend developers who:

• write Vue 3 components with JSX or TSX
• migrate components from React to Vue
• hit TypeScript errors around JSX props and attributes
• want Vue render functions to match Vue template conventions

If your job is “make this Vue JSX code type-safe and idiomatic without trial and error,” vue-jsx-best-practices is a strong fit.

What job it actually helps you do

The real job-to-be-done is not “learn JSX.” It is to convert rough, mixed, or React-shaped JSX into Vue-compatible JSX that:

• passes TypeScript checks
• follows Vue conventions
• avoids subtle migration bugs
• stays readable for teams that use both templates and render functions

What makes vue-jsx-best-practices different

The skill is narrow, which is useful. Instead of trying to cover all Vue rendering topics, it focuses on a high-friction gotcha: Vue JSX uses HTML attribute names rather than React naming conventions. That gives it value when you are debugging incorrect attributes, reviewing migrated code, or standardizing TSX usage across a codebase.

What to know before installing

This is not a broad Vue architecture guide. The repository evidence shows a compact skill centered on one reference document: reference/render-function-jsx-vue-vs-react.md. Install vue-jsx-best-practices if you want targeted guidance on Vue JSX syntax differences and safer migration patterns, not a full JSX cookbook.

How to Use vue-jsx-best-practices skill

Install context for vue-jsx-best-practices

Use the skill when your agent or workflow is generating, reviewing, or migrating Vue JSX/TSX. A practical install command is:

npx skills add vuejs-ai/skills --skill vue-jsx-best-practices

Then invoke it when your task includes phrases like:

• “convert this React component to Vue TSX”
• “fix JSX attribute type errors in Vue”
• “review this Vue render function for React-style conventions”
• “make this Vue JSX idiomatic”

Read these repository files first

This skill is small, so the fastest reading path matters:

1. skills/vue-jsx-best-practices/SKILL.md
2. skills/vue-jsx-best-practices/reference/render-function-jsx-vue-vs-react.md

That second file carries most of the practical value. It explains the key rule, why TypeScript catches the issue, and what to change during migration.

What input the skill needs

vue-jsx-best-practices works best when you provide actual code and context, not just “help with Vue JSX.” Include:

• the component source
• whether it is Vue 3
• whether you are using JSX or TSX
• current TypeScript errors, if any
• whether the code came from React
• your build tool, such as Vite

Minimal useful input:

• “This is a Vue 3 TSX component migrated from React. Fix invalid JSX attributes and explain each change.”

Better input:

• “Review this Vue 3 TSX file migrated from React. Replace React-only JSX conventions with Vue equivalents, preserve behavior, and note anything that will still require plugin or TypeScript config checks in Vite.”

The key rule the skill helps enforce

The main practical takeaway is simple:

• use class, not className
• use for, not htmlFor
• use HTML-style attribute names aligned with Vue templates
• use standard event handler names with the on prefix such as onClick

This matters because Vue’s runtime may be lenient, but TypeScript should flag the React-style forms. That is useful: it catches inconsistency early.

Turn a rough goal into a strong prompt

Weak prompt:

• “Fix this JSX.”

Strong prompt:

• “Apply vue-jsx-best-practices to this Vue 3 TSX component. Identify any React JSX conventions such as className or htmlFor, replace them with Vue JSX equivalents, keep event handlers intact, and explain which changes are for type safety versus runtime behavior.”

Why this is better:

• it names the migration source of the problem
• it asks for concrete substitutions
• it separates compile-time issues from runtime leniency
• it reduces generic Vue advice

Suggested workflow for migration tasks

A good vue-jsx-best-practices usage workflow is:

1. Paste the original React or mixed JSX component.
2. Ask for a first-pass conversion to Vue JSX conventions.
3. Ask for a second pass focused only on TypeScript compatibility.
4. Compare props, labels, and event bindings line by line.
5. Run your local type checker and feed any remaining errors back into the skill.

This staged approach is better than asking for “full migration” in one shot because this skill is strongest on JSX convention cleanup, not full framework rewrites.

What to check in converted code

After using vue-jsx-best-practices, inspect:

• labels using for
• CSS class bindings using class
• DOM prop naming copied from React
• event handler spelling
• whether the output still assumes React component patterns

The skill can improve syntax and conventions, but you still need to validate framework-specific logic like hooks, state, and component APIs.

TypeScript and Vite considerations

The source material explicitly mentions TypeScript configuration for Vue JSX type inference and Vite configuration as relevant topics. In practice, that means you should not treat attribute errors as purely stylistic. If your TSX setup is correct, invalid React-style attributes should surface during type checking. If they do not, verify your Vue JSX plugin and TypeScript configuration before trusting a “working” runtime result.

Best fit and misfit usage

Best fit:

• React-to-Vue TSX migration
• code review for Vue JSX conventions
• fixing JSX attribute errors in Vue 3
• standardizing team style in render functions

Misfit:

• learning Vue from scratch
• template syntax help
• Composition API design
• full build setup troubleshooting beyond JSX-related config

Example request that gets better output

Use something like:

“Use vue-jsx-best-practices on this Vue 3 TSX component. Flag every React-style JSX attribute, replace it with Vue JSX syntax, keep the component behavior unchanged, and give me a short checklist I can apply to the rest of the codebase.”

That prompt gets you both a fix and a reusable review pattern.

vue-jsx-best-practices skill FAQ

Is vue-jsx-best-practices only for React migrations?

No. React migration is the clearest use case, but the skill also helps if your team writes Vue TSX directly and wants consistent, type-safe conventions. It is useful any time React-style attribute names leak into Vue JSX.

Does vue-jsx-best-practices install a plugin or change my config?

No. The skill provides guidance; it is not a package that automatically patches your toolchain. You still need your own Vue JSX and TypeScript setup in your app. The skill helps you identify what code should look like once that setup is in place.

What is the main difference from an ordinary prompt?

An ordinary prompt may produce plausible JSX without respecting Vue-specific attribute conventions. vue-jsx-best-practices is more reliable for this narrow problem because it centers the Vue-vs-React JSX mismatch and the type-safety implications.

Is this skill beginner-friendly?

Yes, if you already know basic Vue or JSX. The scope is narrow enough to be approachable. But if you are completely new to Vue rendering, this skill will not replace a broader introduction to components, templates, or render functions.

When should I not use vue-jsx-best-practices?

Skip it if your codebase uses Vue templates only and does not use JSX/TSX. Also skip it if your issue is unrelated to JSX attribute naming, such as routing, state management, or server rendering.

Does runtime behavior always break if I use React-style attributes?

Not always. The reference notes that Vue runtime can be lenient and convert some attributes correctly. The bigger issue is consistency and type safety: TypeScript should reject those React conventions in Vue JSX, which is exactly what you usually want.

How to Improve vue-jsx-best-practices skill

Give code, errors, and framework intent together

The fastest way to improve vue-jsx-best-practices results is to provide:

• the source component
• the desired target framework shape
• actual compiler or editor errors
• whether the goal is migration, cleanup, or review

Without that, the output may stop at obvious attribute swaps and miss surrounding JSX assumptions.

Ask for a diff-oriented review

A high-value prompt is:

“Review this file using vue-jsx-best-practices. Do not rewrite everything. Only flag JSX conventions that are invalid, risky, or non-idiomatic in Vue, and explain each change briefly.”

This reduces over-editing and makes review easier in existing codebases.

Separate syntax fixes from framework rewrites

One common failure mode is asking the skill to solve both JSX syntax differences and full React-to-Vue behavioral migration at once. Improve output quality by splitting those tasks:

1. normalize JSX conventions
2. fix type errors
3. refactor framework logic

That keeps vue-jsx-best-practices focused on what it actually covers well.

Ask for a reusable checklist

The repository already suggests a task checklist mindset. Build on that by asking the skill to produce a team-ready audit list, for example:

• replace className with class
• replace htmlFor with for
• verify on* event handlers
• rerun TS checks on converted files

This turns one-off help into a repeatable review process.

Validate config assumptions after the first pass

If the output looks correct but your editor does not flag bad attributes, ask a follow-up question about TSX environment assumptions. The skill references TypeScript inference and Vite config as relevant context, so weak validation in your local setup can hide real mistakes.

Common failure modes to watch

Watch for these issues after using vue-jsx-best-practices:

• React attribute names left behind in nested elements
• output that “works” at runtime but fails TS checks
• migration advice that changes behavior, not just syntax
• incomplete cleanup of labels, classes, and DOM props

These are good candidates for a second review pass.

Improve the prompt after the first output

A strong iteration prompt is:

“Now do a second pass with vue-jsx-best-practices focused only on missed React-style JSX conventions and any Vue JSX typing issues. Keep logic unchanged.”

That follow-up is often more effective than requesting a brand-new rewrite.

Use the reference file as the decision anchor

If you are unsure whether to trust the output, compare it against:

reference/render-function-jsx-vue-vs-react.md

That file is the clearest anchor for this skill’s intended behavior. For install decisions, that is also a good sign: the skill is compact, but its guidance is specific enough to reduce avoidable Vue JSX mistakes.