landing-vite/.github/copilot-instructions.md

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