# 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