46 lines
1.7 KiB
Markdown
46 lines
1.7 KiB
Markdown
<!-- Use this file to provide workspace-specific custom instructions to Copilot. For more details, visit https://code.visualstudio.com/docs/copilot/copilot-customization#_use-a-githubcopilotinstructionsmd-file -->
|
|
|
|
# Copilot Instructions for React.js UI Kit Project
|
|
|
|
This is a React.js project built with Vite and TypeScript, designed to implement a modern UI kit based on Figma designs.
|
|
|
|
## Project Guidelines
|
|
|
|
### Architecture
|
|
- Use React functional components with TypeScript
|
|
- Implement responsive design with Tailwind CSS
|
|
- Follow component-based architecture with reusable UI components
|
|
- Use modern React hooks (useState, useEffect, etc.)
|
|
|
|
### Styling
|
|
- Use Tailwind CSS for styling with custom design tokens
|
|
- Follow mobile-first responsive design principles
|
|
- Implement consistent spacing, typography, and color schemes
|
|
- Use CSS Grid and Flexbox for layouts
|
|
|
|
### Code Style
|
|
- Use TypeScript for type safety
|
|
- Follow React best practices and hooks patterns
|
|
- Implement proper prop types and interfaces
|
|
- Use meaningful component and variable names
|
|
- Add JSDoc comments for complex functions
|
|
|
|
### Component Structure
|
|
- Create reusable UI components (buttons, cards, forms, etc.)
|
|
- Separate business logic from presentation components
|
|
- Use proper file and folder organization
|
|
- Export components with clear interfaces
|
|
|
|
### Performance
|
|
- Optimize components for performance
|
|
- Use React.memo when appropriate
|
|
- Implement code splitting where beneficial
|
|
- Optimize images and assets
|
|
|
|
When generating code, prioritize:
|
|
1. Type safety with TypeScript
|
|
2. Accessibility (semantic HTML, ARIA attributes)
|
|
3. Mobile-responsive design
|
|
4. Clean, maintainable code structure
|
|
5. Modern React patterns and best practices
|