awesome-copilot icon indicating copy to clipboard operation
awesome-copilot copied to clipboard

Add vue-to-react-converter skill

Open is0383kk opened this issue 1 week ago • 0 comments

Pull Request Checklist

  • [x] I have read and followed the CONTRIBUTING.md guidelines.
  • [x] My contribution adds a new instruction, prompt, or chat mode file in the correct directory.
  • [x] The file follows the required naming convention.
  • [x] The content is clearly structured and follows the example format.
  • [x] I have tested my instructions, prompt, or chat mode with GitHub Copilot.
  • [x] I have run npm start and verified that README.md is up to date.

Description

This PR adds a comprehensive vue-to-react-converter skill that helps developers convert Vue.js components (Composition API & Script Setup) to React components using functional components and Hooks.

What's Included

This skill provides detailed guidance for converting Vue.js code to React, covering:

  • Basic conversion patterns: refuseState, computeduseMemo, lifecycle hooks → useEffect, etc.
  • Advanced patterns: slots, provide/inject, routing, animations, forms, and more
  • State management conversions: Vuex → Redux Toolkit, Pinia → Zustand/Jotai
  • TypeScript support: Type conversion examples and best practices
  • Common pitfalls: Warnings about frequent mistakes and how to avoid them

Key Features

  • Step-by-step workflow (5 clear steps from analysis to validation)
  • Comprehensive reference documentation
  • Side-by-side code examples (Vue vs React comparisons)
  • Selection guides for choosing the right state management solution
  • Best practices and reactivity model differences

File Structure

skills/vue-to-react-converter/
├── SKILL.md
│   - Main guide with workflow and principles
└── references/
    ├── conversion-guide.md
    │   - Basic conversion patterns and syntax transformations
    ├── common-patterns.md
    │   - Advanced patterns (slots, context, routing, forms)
    └── state-management.md
        - State management library conversions

Use Cases

This skill is valuable for:

  • Developers migrating Vue.js projects to React
  • Teams working with both Vue.js and React
  • Understanding the differences between Vue and React patterns
  • Learning React coming from a Vue.js background

Additional Notes

Review Notes

Given the comprehensive nature of this contribution, reviewers may want to focus on:

  1. Technical accuracy of Vue → React conversion patterns
  2. Code example quality and best practices
  3. Completeness of common use case coverage

Thank you for reviewing this contribution! I believe this skill will be highly valuable for developers working with both Vue.js and React.


By submitting this pull request, I confirm that my contribution abides by the Code of Conduct and will be licensed under the MIT License.

is0383kk avatar Dec 20 '25 10:12 is0383kk