Skip to content

Commit 79704bd

Browse files
Copilotrezwana-karim
Copilot
and
rezwana-karim
committed
✨ Set up comprehensive GitHub Copilot instructions and configuration
Co-authored-by: rezwana-karim <126201034+rezwana-karim@users.noreply.github.com>
1 parent fe5d921 commit 79704bd

6 files changed

Lines changed: 544 additions & 0 deletions

File tree

‎.copilot/dev-environment.yml‎

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
# Development Environment Configuration for GitHub Copilot Coding Agent
2+
# This file customizes the development environment for better assistance
3+
4+
name: codestorm-hub-development
5+
6+
# Pre-install commonly used tools and dependencies
7+
preinstall:
8+
# Node.js and npm are typically pre-installed, but we can specify versions
9+
- node: ">=18.0.0"
10+
- npm: ">=9.0.0"
11+
12+
# Development dependencies that should be available
13+
dev_tools:
14+
- name: "typescript"
15+
purpose: "TypeScript language support"
16+
- name: "eslint"
17+
purpose: "Code linting and style checking"
18+
- name: "@types/node"
19+
purpose: "Node.js type definitions"
20+
- name: "@types/react"
21+
purpose: "React type definitions"
22+
23+
# Browser support for testing UI changes
24+
browser:
25+
- chrome
26+
- firefox
27+
28+
# VS Code extensions that complement this project
29+
recommended_extensions:
30+
- "bradlc.vscode-tailwindcss"
31+
- "ms-vscode.vscode-typescript-next"
32+
- "esbenp.prettier-vscode"
33+
- "ms-vscode.vscode-json"
34+
- "github.copilot"
35+
- "github.copilot-chat"
36+
37+
# Environment variables commonly used in development
38+
env_vars:
39+
- name: "NODE_ENV"
40+
default: "development"
41+
description: "Node.js environment"
42+
- name: "NEXT_TELEMETRY_DISABLED"
43+
default: "1"
44+
description: "Disable Next.js telemetry for privacy"
45+
46+
# Common development tasks
47+
tasks:
48+
- name: "dev"
49+
command: "npm run dev"
50+
description: "Start development server with hot reload"
51+
- name: "build"
52+
command: "npm run build"
53+
description: "Build for production"
54+
- name: "lint"
55+
command: "npm run lint"
56+
description: "Run ESLint for code quality checks"
57+
- name: "type-check"
58+
command: "npx tsc --noEmit"
59+
description: "Check TypeScript types without emitting files"
60+
61+
# Port configuration for development server
62+
ports:
63+
- port: 3000
64+
description: "Next.js development server"
65+
expose: true
66+
67+
# File watchers for automatic rebuilds
68+
watchers:
69+
- pattern: "src/**/*.{ts,tsx,js,jsx}"
70+
action: "Hot reload React components"
71+
- pattern: "src/**/*.css"
72+
action: "Rebuild styles"
73+
- pattern: "tailwind.config.*"
74+
action: "Rebuild Tailwind CSS"
75+
76+
# Performance optimizations
77+
optimizations:
78+
- name: "turbopack"
79+
enabled: true
80+
description: "Use Turbopack for faster builds"
81+
- name: "incremental_compilation"
82+
enabled: true
83+
description: "Enable incremental TypeScript compilation"

‎.copilot/instructions.md‎

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
# GitHub Copilot Custom Instructions
2+
3+
## Project Context
4+
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.
5+
6+
## Key Development Principles
7+
8+
### Code Style & Architecture
9+
- **Always use TypeScript**: Every file should be properly typed
10+
- **Functional Components**: Prefer React functional components with hooks
11+
- **App Router**: Use Next.js 15 App Router patterns (not Pages Router)
12+
- **Component Composition**: Build reusable components following established patterns
13+
- **Utility-First CSS**: Use Tailwind CSS classes, avoid custom CSS when possible
14+
15+
### Technology Preferences
16+
- **UI Components**: Use Radix UI primitives for accessibility and consistency
17+
- **Icons**: Use Lucide React icons following existing patterns
18+
- **State Management**: Use React hooks and context when needed
19+
- **Styling**: Tailwind CSS 4 with design tokens and Radix Colors
20+
- **Performance**: Leverage Next.js optimizations (Image, Link, etc.)
21+
22+
### File and Folder Conventions
23+
- **Components**: Place in `src/components/[category]/component-name.tsx`
24+
- **Pages**: Use App Router in `src/app/[route]/page.tsx`
25+
- **Utilities**: Add to `src/lib/utils.ts` or create specific utility files
26+
- **Types**: Define in component files or separate `.types.ts` files
27+
- **Naming**: kebab-case for files, PascalCase for components, camelCase for variables
28+
29+
### Quality Standards
30+
- **Accessibility**: Always consider ARIA attributes and semantic HTML
31+
- **Performance**: Optimize images, use proper loading strategies
32+
- **SEO**: Include proper metadata and OpenGraph tags
33+
- **Mobile-First**: Design responsive components from mobile up
34+
- **Error Handling**: Include proper error boundaries and loading states
35+
36+
### Common Patterns to Follow
37+
38+
#### Component Structure
39+
```tsx
40+
interface ComponentProps {
41+
// Define props with proper TypeScript
42+
}
43+
44+
export default function Component({ ...props }: ComponentProps) {
45+
// Component logic
46+
return (
47+
// JSX with proper accessibility
48+
)
49+
}
50+
```
51+
52+
#### Page Structure
53+
```tsx
54+
import type { Metadata } from 'next'
55+
56+
export const metadata: Metadata = {
57+
title: 'Page Title',
58+
description: 'Page description',
59+
}
60+
61+
export default function Page() {
62+
return (
63+
// Page content
64+
)
65+
}
66+
```
67+
68+
### Development Workflow
69+
1. **Before coding**: Understand existing patterns in the codebase
70+
2. **While coding**: Follow TypeScript strict mode, use proper typing
71+
3. **Testing**: Run `npm run lint` and `npm run build` before committing
72+
4. **Documentation**: Update relevant docs if adding new patterns
73+
74+
### Specific to This Project
75+
- **Design System**: Follow Radix UI and Vercel design principles
76+
- **Brand**: Maintain CodeStorm Hub's visual identity and tone
77+
- **Community Focus**: Remember this showcases open source community work
78+
- **Performance**: Optimize for fast loading and great UX
79+
80+
## Avoid These Common Mistakes
81+
- Don't use `any` type in TypeScript
82+
- Don't create custom CSS when Tailwind utilities exist
83+
- Don't ignore accessibility requirements
84+
- Don't bypass Next.js optimizations (use Image, Link components)
85+
- Don't create components without proper TypeScript interfaces
86+
- Don't forget to handle loading and error states
87+
- Don't use outdated Next.js patterns (Pages Router style)
88+
89+
## When Suggesting Code Changes
90+
1. **Maintain consistency** with existing codebase patterns
91+
2. **Provide complete examples** that can be directly used
92+
3. **Include proper TypeScript types** in all suggestions
93+
4. **Consider accessibility** in component suggestions
94+
5. **Optimize for performance** using Next.js best practices
95+
6. **Follow the established file structure** and naming conventions
96+
97+
Remember: This is a showcase project for a developer community, so code quality, accessibility, and performance are paramount.

‎.github/COPILOT_SETUP.md‎

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
# GitHub Copilot Configuration Setup
2+
3+
This repository has been configured with comprehensive GitHub Copilot instructions to provide the best possible AI-assisted development experience.
4+
5+
## Configuration Files
6+
7+
### 📚 Repository Instructions
8+
- **File**: `.github/INSTRUCTIONS.md`
9+
- **Purpose**: Provides comprehensive repository-specific instructions for GitHub Copilot
10+
- **Content**: Project overview, tech stack, development setup, coding standards, and common patterns
11+
12+
### 🤖 Custom Copilot Instructions
13+
- **File**: `.copilot/instructions.md`
14+
- **Purpose**: Custom instructions specifically for GitHub Copilot interactions
15+
- **Content**: Development principles, technology preferences, quality standards, and project-specific guidance
16+
17+
### 🛠️ Development Environment
18+
- **File**: `.copilot/dev-environment.yml`
19+
- **Purpose**: Customizes the development environment for GitHub Copilot coding agent
20+
- **Content**: Pre-install configurations, development tools, browser support, and environment variables
21+
22+
### 🔧 MCP Configuration
23+
- **File**: `.github/copilot-mcp.json`
24+
- **Purpose**: Model Context Protocol configuration for extended capabilities
25+
- **Content**: MCP servers, tools, context information, and workflow definitions
26+
27+
### ⚡ Validation Workflow
28+
- **File**: `.github/workflows/copilot-validation.yml`
29+
- **Purpose**: Validates that the repository remains compatible with Copilot configurations
30+
- **Content**: CI/CD pipeline that checks linting, building, and configuration file presence
31+
32+
## Features Configured
33+
34+
### ✅ Repository-Level Instructions
35+
- Comprehensive project documentation accessible to Copilot
36+
- Tech stack details (Next.js 15, TypeScript, Tailwind CSS, Radix UI)
37+
- Development workflow and best practices
38+
- File organization and naming conventions
39+
40+
### ✅ Custom Development Environment
41+
- Pre-configured Node.js and npm environment
42+
- Essential development tools and VS Code extensions
43+
- Browser support for UI testing
44+
- Performance optimizations (Turbopack, incremental compilation)
45+
46+
### ✅ Enhanced Capabilities
47+
- MCP integration for browser automation (Playwright)
48+
- Filesystem access for source code analysis
49+
- UI testing and visual regression detection
50+
- Performance monitoring and bundle analysis
51+
52+
### ✅ Quality Assurance
53+
- Automated validation of configuration files
54+
- Build and lint checks in CI/CD
55+
- TypeScript type checking
56+
- Multi-Node.js version testing
57+
58+
## How It Works
59+
60+
1. **Repository Instructions** provide Copilot with context about the project structure, coding standards, and best practices
61+
2. **Custom Instructions** guide Copilot's behavior when generating code suggestions and responses
62+
3. **Development Environment** ensures Copilot has access to necessary tools and configurations
63+
4. **MCP Configuration** extends Copilot's capabilities with additional tools and context
64+
5. **Validation Workflow** ensures the setup remains functional over time
65+
66+
## Benefits
67+
68+
- **Better Code Suggestions**: Copilot understands project-specific patterns and conventions
69+
- **Consistent Code Quality**: Instructions enforce TypeScript, accessibility, and performance standards
70+
- **Faster Development**: Pre-configured environment reduces setup time
71+
- **Enhanced Testing**: Integrated browser automation and UI testing capabilities
72+
- **Continuous Validation**: Automated checks ensure configuration remains valid
73+
74+
## Usage
75+
76+
Once configured, GitHub Copilot will automatically:
77+
- Follow the established code patterns and conventions
78+
- Use the correct file and folder structure
79+
- Apply proper TypeScript typing
80+
- Consider accessibility and performance best practices
81+
- Suggest code that aligns with the project's tech stack
82+
83+
## Maintenance
84+
85+
The configuration is validated automatically through GitHub Actions. If you need to update the configuration:
86+
87+
1. Modify the relevant configuration files
88+
2. Run `npm run lint` and `npm run build` to ensure compatibility
89+
3. The validation workflow will check the changes on push/PR
90+
91+
## References
92+
93+
This setup follows GitHub's best practices:
94+
- [Best practices for Copilot coding agent](https://gh.io/copilot-coding-agent-tips)
95+
- [Adding repository custom instructions](https://docs.github.com/en/copilot/how-tos/configure-custom-instructions/add-repository-instructions)
96+
- [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)
97+
- [Customizing the development environment](https://docs.github.com/en/copilot/how-tos/use-copilot-agents/coding-agent/customize-the-agent-environment)

0 commit comments

Comments
 (0)