CodeStorm-Hub · rezwana-karim · Sep 29, 2025 · Sep 26, 2025 · Sep 26, 2025 · Sep 26, 2025
diff --git a/.copilot/dev-environment.yml b/.copilot/dev-environment.yml
@@ -0,0 +1,97 @@
+# Development Environment Configuration for GitHub Copilot Coding Agent
+# This file customizes the development environment for better assistance
+
+name: codestorm-hub-development
+
+# Pre-install commonly used tools and dependencies
+preinstall:
+  # Node.js and npm are typically pre-installed, but we can specify versions
+  - node: ">=18.0.0"
+  - npm: ">=9.0.0"
+
+# Development dependencies that should be available
+dev_tools:
+  - name: "typescript"
+    purpose: "TypeScript language support with strict type checking"
+  - name: "eslint"
+    purpose: "Code linting with accessibility and React best practices"
+  - name: "@types/node"
+    purpose: "Node.js type definitions for server-side functionality"
+  - name: "@types/react"
+    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:
+  - chrome
+  - firefox
+
+# VS Code extensions that complement this project
+recommended_extensions:
+  - "bradlc.vscode-tailwindcss"
+  - "ms-vscode.vscode-typescript-next"
+  - "esbenp.prettier-vscode"
+  - "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:
+  - name: "NODE_ENV"
+    default: "development"
+    description: "Node.js environment"
+  - name: "NEXT_TELEMETRY_DISABLED"
+    default: "1"
+    description: "Disable Next.js telemetry for privacy"
+
+# Common development tasks
+tasks:
+  - name: "dev"
+    command: "npm run dev"
+    description: "Start development server with hot reload"
+  - name: "build"
+    command: "npm run build"
+    description: "Build for production"
+  - name: "lint"
+    command: "npm run lint"
+    description: "Run ESLint for code quality checks"
+  - name: "type-check"
+    command: "npx tsc --noEmit"
+    description: "Check TypeScript types without emitting files"
+
+# Port configuration for development server
+ports:
+  - port: 3000
+    description: "Next.js development server"
+    expose: true
+
+# File watchers for automatic rebuilds
+watchers:
+  - pattern: "src/**/*.{ts,tsx,js,jsx}"
+    action: "Hot reload React components"
+  - pattern: "src/**/*.css"
+    action: "Rebuild styles"
+  - pattern: "tailwind.config.*"
+    action: "Rebuild Tailwind CSS"
+
+# Performance optimizations
+optimizations:
+  - name: "turbopack"
+    enabled: true
+    description: "Use Turbopack for faster builds"
+  - name: "incremental_compilation"
+    enabled: true
+    description: "Enable incremental TypeScript compilation"
diff --git a/.copilot/instructions.md b/.copilot/instructions.md
@@ -0,0 +1,151 @@
+# 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 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
+
+### Code Style & Architecture
+- **Always use TypeScript**: Every file should be properly typed
+- **Functional Components**: Prefer React functional components with hooks
+- **App Router**: Use Next.js 15 App Router patterns (not Pages Router)
+- **Component Composition**: Build reusable components following established patterns
+- **Utility-First CSS**: Use Tailwind CSS classes, avoid custom CSS when possible
+
+### Technology Preferences
+- **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`
+- **Pages**: Use App Router in `src/app/[route]/page.tsx`
+- **Utilities**: Add to `src/lib/utils.ts` or create specific utility files
+- **Types**: Define in component files or separate `.types.ts` files
+- **Naming**: kebab-case for files, PascalCase for components, camelCase for variables
+
+### Quality Standards
+- **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
+
+#### Component Structure
+```tsx
+interface ComponentProps {
+  // Define props with proper TypeScript
+}
+
+export default function Component({ ...props }: ComponentProps) {
+  // Component logic
+  return (
+    // JSX with proper accessibility
+  )
+}
+```
+
+#### Page Structure
+```tsx
+import type { Metadata } from 'next'
+
+export const metadata: Metadata = {
+  title: 'Page Title',
+  description: 'Page description',
+}
+
+export default function Page() {
+  return (
+    // Page content
+  )
+}
+```
+
+### Development Workflow
+1. **Before coding**: Understand existing patterns in the codebase
+2. **While coding**: Follow TypeScript strict mode, use proper typing
+3. **Testing**: Run `npm run lint` and `npm run build` before committing
+4. **Documentation**: Update relevant docs if adding new patterns
+
+### Specific to This Project
+- **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
+- Don't create custom CSS when Tailwind utilities exist
+- Don't ignore accessibility requirements
+- Don't bypass Next.js optimizations (use Image, Link components)
+- Don't create components without proper TypeScript interfaces
+- Don't forget to handle loading and error states
+- Don't use outdated Next.js patterns (Pages Router style)
+
+## When Suggesting Code Changes
+1. **Maintain consistency** with existing codebase patterns
+2. **Provide complete examples** that can be directly used
+3. **Include proper TypeScript types** in all suggestions
+4. **Consider accessibility** in component suggestions
+5. **Optimize for performance** using Next.js best practices
+6. **Follow the established file structure** and naming conventions
+
+Remember: This is a showcase project for a developer community, so code quality, accessibility, and performance are paramount.
diff --git a/.github/COPILOT_SETUP.md b/.github/COPILOT_SETUP.md
@@ -0,0 +1,97 @@
+# GitHub Copilot Configuration Setup
+
+This repository has been configured with comprehensive GitHub Copilot instructions to provide the best possible AI-assisted development experience.
+
+## Configuration Files
+
+### 📚 Repository Instructions
+- **File**: `.github/INSTRUCTIONS.md`
+- **Purpose**: Provides comprehensive repository-specific instructions for GitHub Copilot
+- **Content**: Project overview, tech stack, development setup, coding standards, and common patterns
+
+### 🤖 Custom Copilot Instructions
+- **File**: `.copilot/instructions.md`
+- **Purpose**: Custom instructions specifically for GitHub Copilot interactions
+- **Content**: Development principles, technology preferences, quality standards, and project-specific guidance
+
+### 🛠️ Development Environment
+- **File**: `.copilot/dev-environment.yml`
+- **Purpose**: Customizes the development environment for GitHub Copilot coding agent
+- **Content**: Pre-install configurations, development tools, browser support, and environment variables
+
+### 🔧 MCP Configuration
+- **File**: `.github/copilot-mcp.json`
+- **Purpose**: Model Context Protocol configuration for extended capabilities
+- **Content**: MCP servers, tools, context information, and workflow definitions
+
+### ⚡ Validation Workflow
+- **File**: `.github/workflows/copilot-validation.yml`
+- **Purpose**: Validates that the repository remains compatible with Copilot configurations
+- **Content**: CI/CD pipeline that checks linting, building, and configuration file presence
+
+## Features Configured
+
+### ✅ Repository-Level Instructions
+- Comprehensive project documentation accessible to Copilot
+- Tech stack details (Next.js 15, TypeScript, Tailwind CSS, Radix UI)
+- Development workflow and best practices
+- File organization and naming conventions
+
+### ✅ Custom Development Environment
+- Pre-configured Node.js and npm environment
+- Essential development tools and VS Code extensions
+- Browser support for UI testing
+- Performance optimizations (Turbopack, incremental compilation)
+
+### ✅ Enhanced Capabilities
+- MCP integration for browser automation (Playwright)
+- Filesystem access for source code analysis
+- UI testing and visual regression detection
+- Performance monitoring and bundle analysis
+
+### ✅ Quality Assurance
+- Automated validation of configuration files
+- Build and lint checks in CI/CD
+- TypeScript type checking
+- Multi-Node.js version testing
+
+## How It Works
+
+1. **Repository Instructions** provide Copilot with context about the project structure, coding standards, and best practices
+2. **Custom Instructions** guide Copilot's behavior when generating code suggestions and responses
+3. **Development Environment** ensures Copilot has access to necessary tools and configurations
+4. **MCP Configuration** extends Copilot's capabilities with additional tools and context
+5. **Validation Workflow** ensures the setup remains functional over time
+
+## Benefits
+
+- **Better Code Suggestions**: Copilot understands project-specific patterns and conventions
+- **Consistent Code Quality**: Instructions enforce TypeScript, accessibility, and performance standards
+- **Faster Development**: Pre-configured environment reduces setup time
+- **Enhanced Testing**: Integrated browser automation and UI testing capabilities
+- **Continuous Validation**: Automated checks ensure configuration remains valid
+
+## Usage
+
+Once configured, GitHub Copilot will automatically:
+- Follow the established code patterns and conventions
+- Use the correct file and folder structure
+- Apply proper TypeScript typing
+- Consider accessibility and performance best practices
+- Suggest code that aligns with the project's tech stack
+
+## Maintenance
+
+The configuration is validated automatically through GitHub Actions. If you need to update the configuration:
+
+1. Modify the relevant configuration files
+2. Run `npm run lint` and `npm run build` to ensure compatibility
+3. The validation workflow will check the changes on push/PR
+
+## References
+
+This setup follows GitHub's best practices:
+- [Best practices for Copilot coding agent](https://gh.io/copilot-coding-agent-tips)
+- [Adding repository custom instructions](https://docs.github.com/en/copilot/how-tos/configure-custom-instructions/add-repository-instructions)
+- [Extending with Model Context Protocol](https://docs.github.com/en/enterprise-cloud@latest/copilot/how-tos/use-copilot-agents/coding-agent/extend-coding-agent-with-mcp)
+- [Customizing the development environment](https://docs.github.com/en/copilot/how-tos/use-copilot-agents/coding-agent/customize-the-agent-environment)