vue-jsx-best-practices

Summary

This skill teaches Vue JSX syntax best practices, focusing on the key differences between Vue and React JSX conventions (e.g., `class` vs `className`, `for` vs `htmlFor`). It provides TypeScript configuration, code examples, and a reference table to help developers migrate React JSX code to Vue or avoid common attribute errors.

Detected Capabilities

Trigger Keywords

Phrases that MCP clients use to match this skill to user intent.

Referenced Domains

External domains referenced in skill content, detected by static analysis.

Use Cases

• Migrate React JSX components to Vue
• Fix TypeScript errors when writing Vue TSX
• Learn Vue JSX attribute naming conventions
• Configure TypeScript for proper Vue JSX type inference
• Understand Vue event handling in JSX
• Set up Vite with Vue JSX plugin support

Quality Notes

• Comprehensive coverage of Vue vs React JSX differences with concrete examples
• Well-structured reference document with task checklist for migration
• Includes TypeScript and Vite configuration examples
• Reference table clearly shows attribute mappings across React, Vue, and HTML
• Root SKILL.md is minimal—mostly acts as an entry point; substance is in supporting reference file
• Could benefit from troubleshooting section for common TS errors and their solutions
• Event modifier examples using `withModifiers` are helpful but could expand on other Vue-specific features