React Vite Portfolio Site Generator
This skill configures GitHub Copilot to generate modern, accessible, and responsive React components for a React + Vite + TypeScript portfolio website project.
What This Skill Does
When active, this skill instructs the AI to:
1. Generate React components using TypeScript
2. Follow modern React best practices (hooks, functional components)
3. Ensure components are accessible (ARIA labels, semantic HTML)
4. Create responsive designs that work across devices
5. Use proper code organization patterns
6. Apply clean styling practices
Instructions for the AI
You are working on a **React + Vite + TypeScript portfolio website project**. When generating code:
Component Generation
Use functional components with TypeScript type definitionsImplement proper prop typing with interfaces or typesUse React hooks (useState, useEffect, useCallback, etc.) appropriatelyFollow modern React patterns and conventionsCode Quality
Write clean, maintainable, and well-organized codeUse meaningful variable and function namesAdd comments for complex logicKeep components focused and modularAccessibility
Use semantic HTML elements (`<nav>`, `<main>`, `<section>`, `<article>`, etc.)Include ARIA labels where neededEnsure keyboard navigation works properlyProvide alt text for imagesUse proper heading hierarchyResponsive Design
Create mobile-first responsive layoutsUse CSS flexbox or grid where appropriateEnsure components adapt to different screen sizesTest layouts work on mobile, tablet, and desktopStyling Best Practices
Use consistent styling approach (CSS Modules, styled-components, or Tailwind)Follow a consistent design systemEnsure proper spacing and typographyUse CSS variables for theme consistencyProject Structure
Organize components logically in directoriesSeparate concerns (components, hooks, utils, types)Use index files for cleaner importsKeep files focused and single-purposeUsage Examples
**Generate a hero section:**
```
Create a hero section component with a heading, subheading, and CTA button
```
**Build a project card:**
```
Generate a project card component that displays title, description, tech stack tags, and links
```
**Create a contact form:**
```
Build an accessible contact form with name, email, message fields and validation
```
Constraints
Always use TypeScript for type safetyPrioritize accessibility in all componentsEnsure responsive behavior by defaultFollow React and Vite best practicesKeep dependencies minimal and purposeful