How does Vue JSX differ from React JSX?

Vue JSX typically uses standard HTML attributes like 'class' and 'for' instead of the camelCase versions ('className', 'htmlFor') used in React. This skill helps identify and automate these corrections.

Does it provide configuration help for JSX plugins?

Yes, it includes best practices for configuring @vue/babel-plugin-jsx and other build tools to ensure JSX is transformed correctly for the Vue runtime.

Can this skill help with React to Vue migration?

Yes, it is specifically designed to recognize React JSX patterns and suggest the equivalent Vue implementation, including event handling and slot syntax differences.

Will this skill help with TypeScript errors in Vue JSX?

Absolutely. It provides guidance on attribute type definitions and interface mappings to resolve common TypeScript errors found in Vue render functions.

Vue JSX Best Practices

Name: Vue JSX Best Practices
Author: stevessr

bystevessr

0•

디자인 도구

Optimizes Vue.js development by providing specialized guidance on JSX syntax, attribute mappings, and React-to-Vue migration patterns.

This skill equips Claude with the technical expertise required to implement JSX within the Vue.js ecosystem effectively. It addresses common friction points such as attribute naming conventions (e.g., class vs className), JSX plugin configurations, and the subtle but critical differences between React and Vue render functions. By using this skill, developers can ensure their Vue JSX code follows community best practices, resolves type errors in render functions, and streamlines the process of porting UI components between frameworks.

주요 기능

01Ensures compliance with Vue-specific JSX patterns and best practices

02Provides guidance on Vue JSX plugin configuration and setup

03Resolves attribute type errors and naming conflicts in render functions

04Identifies and corrects React-specific syntax in Vue JSX components

05Offers clear migration paths for porting JSX logic from React to Vue

060 GitHub stars

사용 사례

01Migrating a legacy React component library to a modern Vue.js application

02Debugging type errors and rendering issues in Vue 3 render functions

03Configuring a Vite or Webpack project for optimal Vue JSX support

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add stevessr/dotsfiles vue-jsx-best-practices

For use in Claude.ai and ChatGPT

Download Skill