🎨 Enhance Copilot configuration with comprehensive design principles research

Co-authored-by: rezwana-karim <126201034+rezwana-karim@users.noreply.github.com>

Author: Copilot

.copilot/dev-environment.yml

@@ -12,13 +12,21 @@ preinstall:
 # Development dependencies that should be available
 dev_tools:
   - name: "typescript"
-    purpose: "TypeScript language support"
+    purpose: "TypeScript language support with strict type checking"
   - name: "eslint"
-    purpose: "Code linting and style checking"
+    purpose: "Code linting with accessibility and React best practices"
   - name: "@types/node"
-    purpose: "Node.js type definitions"
+    purpose: "Node.js type definitions for server-side functionality"
   - name: "@types/react"
-    purpose: "React type definitions"
+    purpose: "React type definitions with latest features"
+  - name: "storybook"
+    purpose: "Component documentation and design system showcase"
+  - name: "framer-motion"
+    purpose: "Animation library for smooth micro-interactions"
+  - name: "radix-ui/react-*"
+    purpose: "Accessible primitive components for UI foundation"
+  - name: "lucide-react"
+    purpose: "Consistent icon system with proper sizing"
 
 # Browser support for testing UI changes
 browser:
@@ -33,6 +41,12 @@ recommended_extensions:
   - "ms-vscode.vscode-json"
   - "github.copilot"
   - "github.copilot-chat"
+  - "formulahendry.auto-rename-tag"
+  - "christian-kohler.path-intellisense"
+  - "ms-vscode.vscode-eslint"
+  - "bradlc.vscode-tailwindcss"
+  - "storybook.storybook-vscode"
+  - "radix-ui.radix-ui-vscode"
 
 # Environment variables commonly used in development
 env_vars:

.copilot/instructions.md

@@ -1,7 +1,23 @@
 # GitHub Copilot Custom Instructions
 
 ## Project Context
-You are working on CodeStorm Hub's portfolio website - a modern Next.js 15 application showcasing open source community projects. The codebase emphasizes clean architecture, accessibility, and performance.
+You are working on CodeStorm Hub's portfolio website - a modern Next.js 15 application showcasing open source community projects. The codebase emphasizes clean architecture, accessibility, and performance following Vercel's design engineering principles and Radix UI's design system philosophy.
+
+## Design Engineering Principles
+
+### Vercel-Inspired Design Engineering
+- **Systems Thinking**: Every component is part of a larger design system
+- **Performance-First Design**: Visual excellence never compromises performance
+- **Progressive Enhancement**: Build accessible foundations, enhance with advanced features
+- **Content-First Approach**: Design serves content and user goals
+- **Atomic Design**: Build from atoms → molecules → organisms → templates → pages
+
+### Radix UI Philosophy
+- **Unstyled Primitives**: Use Radix UI primitives as accessible foundations
+- **Composition over Configuration**: Build complex components by composing simpler ones
+- **Polymorphic Design**: Components adapt to different contexts and use cases
+- **Accessible by Default**: Every component meets WCAG 2.1 AA standards
+- **Compound Components**: Related components work together seamlessly
 
 ## Key Development Principles
 
@@ -13,11 +29,16 @@ You are working on CodeStorm Hub's portfolio website - a modern Next.js 15 appli
 - **Utility-First CSS**: Use Tailwind CSS classes, avoid custom CSS when possible
 
 ### Technology Preferences
-- **UI Components**: Use Radix UI primitives for accessibility and consistency
-- **Icons**: Use Lucide React icons following existing patterns
-- **State Management**: Use React hooks and context when needed
-- **Styling**: Tailwind CSS 4 with design tokens and Radix Colors
-- **Performance**: Leverage Next.js optimizations (Image, Link, etc.)
+- **UI Foundation**: Radix UI primitives for accessible, unstyled components
+- **Styling System**: Tailwind CSS 4 with design tokens and utility-first approach
+- **Typography**: Geist Sans and Geist Mono font families for optimal readability
+- **Color System**: Radix Colors for semantic, accessible color palettes
+- **Icons**: Lucide React icons with consistent sizing and styling
+- **State Management**: React hooks, Context API, and Zustand for complex state
+- **Animation**: Framer Motion for smooth, purposeful animations
+- **Layout**: CSS Grid and Flexbox with container queries for responsive design
+- **Performance**: Next.js optimizations (Image, Link, dynamic imports)
+- **Testing**: Component testing with accessibility validation
 
 ### File and Folder Conventions
 - **Components**: Place in `src/components/[category]/component-name.tsx`
@@ -27,11 +48,16 @@ You are working on CodeStorm Hub's portfolio website - a modern Next.js 15 appli
 - **Naming**: kebab-case for files, PascalCase for components, camelCase for variables
 
 ### Quality Standards
-- **Accessibility**: Always consider ARIA attributes and semantic HTML
-- **Performance**: Optimize images, use proper loading strategies
-- **SEO**: Include proper metadata and OpenGraph tags
-- **Mobile-First**: Design responsive components from mobile up
-- **Error Handling**: Include proper error boundaries and loading states
+- **Accessibility**: WCAG 2.1 AA compliance with proper ARIA attributes and semantic HTML
+- **Performance**: Core Web Vitals optimization (LCP < 2.5s, FID < 100ms, CLS < 0.1)
+- **SEO**: Comprehensive metadata, OpenGraph tags, and structured data
+- **Mobile-First**: Responsive design starting from 320px viewport width
+- **Cross-Browser**: Support for modern browsers with graceful degradation
+- **Error Handling**: Comprehensive error boundaries and loading states
+- **Type Safety**: Strict TypeScript with proper interface definitions
+- **Code Quality**: ESLint, Prettier, and Husky for consistent code standards
+- **Documentation**: Storybook stories for components with usage examples
+- **Testing**: Unit tests for utilities, integration tests for user flows
 
 ### Common Patterns to Follow
 
@@ -72,10 +98,38 @@ export default function Page() {
 4. **Documentation**: Update relevant docs if adding new patterns
 
 ### Specific to This Project
-- **Design System**: Follow Radix UI and Vercel design principles
-- **Brand**: Maintain CodeStorm Hub's visual identity and tone
-- **Community Focus**: Remember this showcases open source community work
-- **Performance**: Optimize for fast loading and great UX
+- **Design System**: Follow Radix UI and Vercel design engineering principles
+- **Brand Identity**: CodeStorm Hub's technical, modern, and community-focused aesthetic
+- **Content Strategy**: Showcase open source projects and community achievements
+- **Performance Goals**: Fast loading, smooth interactions, excellent Core Web Vitals
+- **Accessibility Priority**: Ensure all users can access and navigate the content
+- **Developer Experience**: Clean, maintainable code that's easy to contribute to
+
+## UI Patterns & Design Guidelines
+
+### Layout Patterns
+- **Hero Sections**: Full-width with compelling visuals and clear CTAs
+- **Card Grids**: Consistent spacing, hover effects, and responsive layouts
+- **Navigation**: Clean, accessible navigation with proper focus management
+- **Footer**: Organized links, social media, and legal information
+- **Content Sections**: Proper spacing, typography hierarchy, and readability
+
+### Component Design Patterns
+- **Button Variants**: Primary, secondary, ghost, and destructive styles
+- **Form Components**: Accessible inputs with proper validation states
+- **Modal Dialogs**: Radix Dialog with proper focus trapping and escape handling
+- **Dropdown Menus**: Radix DropdownMenu with keyboard navigation
+- **Toast Notifications**: Non-intrusive feedback with appropriate timing
+- **Loading States**: Skeleton loaders and progress indicators
+- **Empty States**: Helpful messaging with clear next steps
+
+### Animation & Interaction
+- **Micro-interactions**: Subtle feedback for user actions
+- **Page Transitions**: Smooth navigation between routes
+- **Hover Effects**: Consistent hover states across interactive elements
+- **Loading Animations**: Non-distracting progress indicators
+- **Scroll Animations**: Progressive disclosure and parallax effects
+- **Gesture Support**: Touch-friendly interactions for mobile devices
 
 ## Avoid These Common Mistakes
 - Don't use `any` type in TypeScript

.github/DESIGN_PRINCIPLES.md

@@ -0,0 +1,208 @@
+# Design Principles for CodeStorm Hub
+
+## Research Summary
+
+This document summarizes key design, UI/UX, and component principles for the CodeStorm Hub website based on comprehensive research from industry leaders and best practices.
+
+## Core Design Engineering Principles
+
+### 1. Vercel Design Engineering Philosophy
+
+Based on [Vercel's Design Engineering approach](https://vercel.com/solutions/design-engineering):
+
+- **Systems Thinking**: Every component is part of a larger, cohesive design system
+- **Performance-First Design**: Visual excellence should never compromise performance metrics
+- **Developer Experience**: Tools and components should enhance, not hinder, development workflow
+- **Content-First Approach**: Design serves content and user goals, not aesthetic preferences
+- **Progressive Enhancement**: Build accessible foundations first, then enhance with advanced features
+
+### 2. Typography System (Geist Font Family)
+
+Following [Vercel's Geist Typography](https://vercel.com/font):
+
+- **Geist Sans**: Primary font for interfaces, optimized for readability across devices
+- **Geist Mono**: Monospace font for code blocks and technical content
+- **Scale Consistency**: Use consistent type scales (1.125, 1.25, 1.5 ratios)
+- **Line Height**: Optimal readability with 1.5-1.6 line height for body text
+- **Font Weights**: Strategic use of weights to create hierarchy without overwhelming
+
+**Implementation Guidelines:**
+```css
+/* Primary text */
+font-family: 'Geist Sans', sans-serif;
+
+/* Code and technical content */
+font-family: 'Geist Mono', monospace;
+
+/* Type scale */
+--text-xs: 0.75rem;    /* 12px */
+--text-sm: 0.875rem;   /* 14px */
+--text-base: 1rem;     /* 16px */
+--text-lg: 1.125rem;   /* 18px */
+--text-xl: 1.25rem;    /* 20px */
+```
+
+### 3. Color System (Radix Colors)
+
+Based on [Radix UI Colors](https://www.radix-ui.com/colors):
+
+- **Semantic Colors**: Colors convey meaning and application state
+- **Accessibility First**: All combinations meet WCAG 2.1 AA contrast requirements
+- **Automatic Dark Mode**: Seamless switching between light and dark themes
+- **Functional Palette**: Error, success, warning, and info states clearly differentiated
+
+**Color Categories:**
+- **Gray Scales**: Neutral colors for backgrounds and text
+- **Brand Colors**: CodeStorm Hub identity colors
+- **Semantic Colors**: Red (error), Green (success), Yellow (warning), Blue (info)
+- **Interactive Colors**: Hover, active, and focus states
+
+### 4. Component Architecture (Radix UI)
+
+Following [Radix UI Primitives](https://www.radix-ui.com/primitives):
+
+- **Unstyled Primitives**: Accessible foundation without visual styling
+- **Composition Pattern**: Build complex components by combining simpler ones
+- **Polymorphic Design**: Components adapt to different HTML elements
+- **Compound Components**: Related components work together seamlessly
+- **Keyboard Navigation**: Full keyboard accessibility out of the box
+
+**Key Patterns:**
+```tsx
+// Compound component pattern
+<Dialog.Root>
+  <Dialog.Trigger />
+  <Dialog.Portal>
+    <Dialog.Overlay />
+    <Dialog.Content>
+      <Dialog.Title />
+      <Dialog.Description />
+      <Dialog.Close />
+    </Dialog.Content>
+  </Dialog.Portal>
+</Dialog.Root>
+
+// Polymorphic component pattern
+<Button as="a" href="/projects">View Projects</Button>
+<Button as="button" onClick={handleClick}>Submit</Button>
+```
+
+### 5. Layout & Responsive Strategy
+
+Modern layout techniques for optimal user experience:
+
+- **CSS Grid**: Complex layouts with precise control
+- **Flexbox**: Component-level alignment and distribution
+- **Container Queries**: Component-based responsive design
+- **Mobile-First**: Progressive enhancement from 320px viewport
+- **Fluid Typography**: Responsive text sizing using clamp()
+
+**Responsive Breakpoints:**
+```css
+/* Mobile First Approach */
+--breakpoint-sm: 640px;   /* Small tablets */
+--breakpoint-md: 768px;   /* Tablets */
+--breakpoint-lg: 1024px;  /* Small laptops */
+--breakpoint-xl: 1280px;  /* Desktops */
+--breakpoint-2xl: 1536px; /* Large displays */
+```
+
+### 6. Accessibility Standards
+
+Comprehensive accessibility following WCAG 2.1 AA:
+
+- **Semantic HTML**: Proper element usage for screen readers
+- **ARIA Attributes**: Enhanced accessibility information
+- **Keyboard Navigation**: Complete keyboard-only navigation
+- **Focus Management**: Clear focus indicators and logical flow
+- **Color Independence**: Information not conveyed by color alone
+- **Alternative Text**: Descriptive alt text for images
+- **Form Accessibility**: Proper labels and error messaging
+
+### 7. Performance Optimization
+
+Core Web Vitals and performance best practices:
+
+- **Largest Contentful Paint (LCP)**: < 2.5 seconds
+- **First Input Delay (FID)**: < 100 milliseconds
+- **Cumulative Layout Shift (CLS)**: < 0.1
+- **Bundle Splitting**: Code splitting at route and component levels
+- **Image Optimization**: Next.js Image component with proper sizing
+- **Progressive Loading**: Critical content loads first
+
+### 8. Animation & Micro-interactions
+
+Purposeful motion design:
+
+- **Subtle Feedback**: Micro-interactions for user actions
+- **Smooth Transitions**: Consistent easing curves and durations
+- **Progressive Disclosure**: Content reveals based on user interaction
+- **Performance Conscious**: Animations use transform and opacity
+- **Accessibility Respect**: Honor user's reduced motion preferences
+
+**Animation Principles:**
+```css
+/* Consistent easing */
+--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+--ease-out: cubic-bezier(0, 0, 0.2, 1);
+--ease-in: cubic-bezier(0.4, 0, 1, 1);
+
+/* Duration scale */
+--duration-75: 75ms;    /* Quick feedback */
+--duration-150: 150ms;  /* Standard transitions */
+--duration-300: 300ms;  /* Slower transitions */
+--duration-500: 500ms;  /* Page transitions */
+```
+
+## Implementation Strategy
+
+### Phase 1: Foundation
+1. Set up Geist font family integration
+2. Configure Radix Colors with dark/light mode
+3. Establish base component architecture with Radix UI
+4. Implement responsive grid system
+
+### Phase 2: Component Library
+1. Build core components (Button, Input, Card, Modal)
+2. Create compound components (Navigation, Footer)
+3. Develop content components (Hero, Features, Team)
+4. Document components in Storybook
+
+### Phase 3: Pages & Content
+1. Build homepage with hero and feature sections
+2. Create project showcase pages
+3. Develop team and about pages
+4. Implement contact and blog functionality
+
+### Phase 4: Optimization
+1. Performance audit and optimization
+2. Accessibility testing and improvements
+3. SEO optimization and meta tags
+4. Analytics and monitoring setup
+
+## Quality Assurance
+
+### Testing Strategy
+- **Unit Tests**: Component logic and utilities
+- **Integration Tests**: User interaction flows
+- **Visual Tests**: Component appearance across browsers
+- **Accessibility Tests**: Automated a11y validation
+- **Performance Tests**: Core Web Vitals monitoring
+
+### Code Quality
+- **TypeScript**: Strict typing for all components
+- **ESLint**: Code quality and accessibility rules
+- **Prettier**: Consistent code formatting
+- **Husky**: Pre-commit hooks for quality gates
+
+### Documentation
+- **Storybook**: Component documentation and usage examples
+- **README**: Setup and contribution guidelines
+- **Design System**: Comprehensive design token documentation
+- **API Documentation**: Component props and interfaces
+
+## Conclusion
+
+This design system provides a solid foundation for building a modern, accessible, and performant portfolio website that showcases CodeStorm Hub's commitment to quality and user experience. By following these principles, we ensure consistency, maintainability, and scalability across the entire application.
+
+The combination of Vercel's design engineering approach, Radix UI's accessibility-first components, and modern web standards creates a robust framework for building exceptional user interfaces that perform well across all devices and user contexts.