awesome-copilot
awesome-copilot copied to clipboard
Add vue-to-react-converter skill
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 startand verified thatREADME.mdis 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:
ref→useState,computed→useMemo, 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:
- Technical accuracy of Vue → React conversion patterns
- Code example quality and best practices
- 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.