Does it cover build tool configuration?

Yes, it includes best practices for configuring the necessary JSX plugins in build tools like Vite to ensure your JSX is compiled correctly.

Can this skill help with TypeScript errors in Vue JSX?

Yes, it provides specific guidance on resolving attribute type errors and ensuring props are correctly typed within Vue render functions.

What is the main difference between Vue and React JSX handled by this skill?

The primary difference is attribute naming; for example, Vue JSX uses 'class' while React uses 'className'. This skill ensures Claude uses the correct syntax for the Vue runtime.

Does it support Vue 2 or Vue 3?

This skill is optimized for Vue 3 development, focusing on modern composition API patterns and current JSX plugin standards.

How does it assist in React migrations?

It identifies React-specific patterns and provides the direct Vue equivalent, helping to port logic and UI structure without introducing syntax errors.

Vue JSX Best Practices

Name: Vue JSX Best Practices
Author: vuejs-ai

byvuejs-ai

•

1,280

デザインツール

Implements idiomatic Vue JSX syntax and patterns while preventing common React-style attribute errors.

概要

This skill provides specialized guidance for developers using JSX within the Vue 3 ecosystem. It ensures that Claude correctly differentiates between React and Vue JSX conventions—such as using 'class' instead of 'className'—and helps resolve complex attribute type errors. It is particularly useful for teams migrating React components to Vue or those who prefer the flexibility of render functions over template-based development, offering precise configuration patterns for JSX plugins and TypeScript integration.

主な機能

Enforces Vue 3 specific event handling and slot patterns in JSX
Guides the migration of React components to Vue render functions
Corrects React-to-Vue attribute mapping (e.g., class vs. className)
Provides optimal JSX plugin configuration for Vite and Webpack
1,280 GitHub stars
Resolves TypeScript attribute and prop type errors in JSX

ユースケース

Setting up a new Vue project with JSX support for advanced UI components
Migrating a legacy React component library to Vue 3
Debugging type mismatches in complex Vue render functions

概要

主な機能

Enforces Vue 3 specific event handling and slot patterns in JSX
Guides the migration of React components to Vue render functions
Corrects React-to-Vue attribute mapping (e.g., class vs. className)
Provides optimal JSX plugin configuration for Vite and Webpack
1,280 GitHub stars
Resolves TypeScript attribute and prop type errors in JSX

ユースケース

Setting up a new Vue project with JSX support for advanced UI components
Migrating a legacy React component library to Vue 3
Debugging type mismatches in complex Vue render functions