Skip to content

Commit cc13558

Browse files
rezwana-karimrezwana-karim
authored
✨ Set up comprehensive GitHub Copilot instructions with design engineering principles (#10)
2 parents 9a92c80 + 905ac29 commit cc13558

8 files changed

Lines changed: 1090 additions & 0 deletions

File tree

‎.copilot/dev-environment.yml‎

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
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 with strict type checking"
16+
- name: "eslint"
17+
purpose: "Code linting with accessibility and React best practices"
18+
- name: "@types/node"
19+
purpose: "Node.js type definitions for server-side functionality"
20+
- name: "@types/react"
21+
purpose: "React type definitions with latest features"
22+
- name: "storybook"
23+
purpose: "Component documentation and design system showcase"
24+
- name: "framer-motion"
25+
purpose: "Animation library for smooth micro-interactions"
26+
- name: "radix-ui/react-*"
27+
purpose: "Accessible primitive components for UI foundation"
28+
- name: "lucide-react"
29+
purpose: "Consistent icon system with proper sizing"
30+
31+
# Browser support for testing UI changes
32+
browser:
33+
- chrome
34+
- firefox
35+
36+
# VS Code extensions that complement this project
37+
recommended_extensions:
38+
- "bradlc.vscode-tailwindcss"
39+
- "ms-vscode.vscode-typescript-next"
40+
- "esbenp.prettier-vscode"
41+
- "ms-vscode.vscode-json"
42+
- "github.copilot"
43+
- "github.copilot-chat"
44+
- "formulahendry.auto-rename-tag"
45+
- "christian-kohler.path-intellisense"
46+
- "ms-vscode.vscode-eslint"
47+
- "bradlc.vscode-tailwindcss"
48+
- "storybook.storybook-vscode"
49+
- "radix-ui.radix-ui-vscode"
50+
51+
# Environment variables commonly used in development
52+
env_vars:
53+
- name: "NODE_ENV"
54+
default: "development"
55+
description: "Node.js environment"
56+
- name: "NEXT_TELEMETRY_DISABLED"
57+
default: "1"
58+
description: "Disable Next.js telemetry for privacy"
59+
60+
# Common development tasks
61+
tasks:
62+
- name: "dev"
63+
command: "npm run dev"
64+
description: "Start development server with hot reload"
65+
- name: "build"
66+
command: "npm run build"
67+
description: "Build for production"
68+
- name: "lint"
69+
command: "npm run lint"
70+
description: "Run ESLint for code quality checks"
71+
- name: "type-check"
72+
command: "npx tsc --noEmit"
73+
description: "Check TypeScript types without emitting files"
74+
75+
# Port configuration for development server
76+
ports:
77+
- port: 3000
78+
description: "Next.js development server"
79+
expose: true
80+
81+
# File watchers for automatic rebuilds
82+
watchers:
83+
- pattern: "src/**/*.{ts,tsx,js,jsx}"
84+
action: "Hot reload React components"
85+
- pattern: "src/**/*.css"
86+
action: "Rebuild styles"
87+
- pattern: "tailwind.config.*"
88+
action: "Rebuild Tailwind CSS"
89+
90+
# Performance optimizations
91+
optimizations:
92+
- name: "turbopack"
93+
enabled: true
94+
description: "Use Turbopack for faster builds"
95+
- name: "incremental_compilation"
96+
enabled: true
97+
description: "Enable incremental TypeScript compilation"

‎.copilot/instructions.md‎

Lines changed: 151 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,151 @@
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 following Vercel's design engineering principles and Radix UI's design system philosophy.
5+
6+
## Design Engineering Principles
7+
8+
### Vercel-Inspired Design Engineering
9+
- **Systems Thinking**: Every component is part of a larger design system
10+
- **Performance-First Design**: Visual excellence never compromises performance
11+
- **Progressive Enhancement**: Build accessible foundations, enhance with advanced features
12+
- **Content-First Approach**: Design serves content and user goals
13+
- **Atomic Design**: Build from atoms → molecules → organisms → templates → pages
14+
15+
### Radix UI Philosophy
16+
- **Unstyled Primitives**: Use Radix UI primitives as accessible foundations
17+
- **Composition over Configuration**: Build complex components by composing simpler ones
18+
- **Polymorphic Design**: Components adapt to different contexts and use cases
19+
- **Accessible by Default**: Every component meets WCAG 2.1 AA standards
20+
- **Compound Components**: Related components work together seamlessly
21+
22+
## Key Development Principles
23+
24+
### Code Style & Architecture
25+
- **Always use TypeScript**: Every file should be properly typed
26+
- **Functional Components**: Prefer React functional components with hooks
27+
- **App Router**: Use Next.js 15 App Router patterns (not Pages Router)
28+
- **Component Composition**: Build reusable components following established patterns
29+
- **Utility-First CSS**: Use Tailwind CSS classes, avoid custom CSS when possible
30+
31+
### Technology Preferences
32+
- **UI Foundation**: Radix UI primitives for accessible, unstyled components
33+
- **Styling System**: Tailwind CSS 4 with design tokens and utility-first approach
34+
- **Typography**: Geist Sans and Geist Mono font families for optimal readability
35+
- **Color System**: Radix Colors for semantic, accessible color palettes
36+
- **Icons**: Lucide React icons with consistent sizing and styling
37+
- **State Management**: React hooks, Context API, and Zustand for complex state
38+
- **Animation**: Framer Motion for smooth, purposeful animations
39+
- **Layout**: CSS Grid and Flexbox with container queries for responsive design
40+
- **Performance**: Next.js optimizations (Image, Link, dynamic imports)
41+
- **Testing**: Component testing with accessibility validation
42+
43+
### File and Folder Conventions
44+
- **Components**: Place in `src/components/[category]/component-name.tsx`
45+
- **Pages**: Use App Router in `src/app/[route]/page.tsx`
46+
- **Utilities**: Add to `src/lib/utils.ts` or create specific utility files
47+
- **Types**: Define in component files or separate `.types.ts` files
48+
- **Naming**: kebab-case for files, PascalCase for components, camelCase for variables
49+
50+
### Quality Standards
51+
- **Accessibility**: WCAG 2.1 AA compliance with proper ARIA attributes and semantic HTML
52+
- **Performance**: Core Web Vitals optimization (LCP < 2.5s, FID < 100ms, CLS < 0.1)
53+
- **SEO**: Comprehensive metadata, OpenGraph tags, and structured data
54+
- **Mobile-First**: Responsive design starting from 320px viewport width
55+
- **Cross-Browser**: Support for modern browsers with graceful degradation
56+
- **Error Handling**: Comprehensive error boundaries and loading states
57+
- **Type Safety**: Strict TypeScript with proper interface definitions
58+
- **Code Quality**: ESLint, Prettier, and Husky for consistent code standards
59+
- **Documentation**: Storybook stories for components with usage examples
60+
- **Testing**: Unit tests for utilities, integration tests for user flows
61+
62+
### Common Patterns to Follow
63+
64+
#### Component Structure
65+
```tsx
66+
interface ComponentProps {
67+
// Define props with proper TypeScript
68+
}
69+
70+
export default function Component({ ...props }: ComponentProps) {
71+
// Component logic
72+
return (
73+
// JSX with proper accessibility
74+
)
75+
}
76+
```
77+
78+
#### Page Structure
79+
```tsx
80+
import type { Metadata } from 'next'
81+
82+
export const metadata: Metadata = {
83+
title: 'Page Title',
84+
description: 'Page description',
85+
}
86+
87+
export default function Page() {
88+
return (
89+
// Page content
90+
)
91+
}
92+
```
93+
94+
### Development Workflow
95+
1. **Before coding**: Understand existing patterns in the codebase
96+
2. **While coding**: Follow TypeScript strict mode, use proper typing
97+
3. **Testing**: Run `npm run lint` and `npm run build` before committing
98+
4. **Documentation**: Update relevant docs if adding new patterns
99+
100+
### Specific to This Project
101+
- **Design System**: Follow Radix UI and Vercel design engineering principles
102+
- **Brand Identity**: CodeStorm Hub's technical, modern, and community-focused aesthetic
103+
- **Content Strategy**: Showcase open source projects and community achievements
104+
- **Performance Goals**: Fast loading, smooth interactions, excellent Core Web Vitals
105+
- **Accessibility Priority**: Ensure all users can access and navigate the content
106+
- **Developer Experience**: Clean, maintainable code that's easy to contribute to
107+
108+
## UI Patterns & Design Guidelines
109+
110+
### Layout Patterns
111+
- **Hero Sections**: Full-width with compelling visuals and clear CTAs
112+
- **Card Grids**: Consistent spacing, hover effects, and responsive layouts
113+
- **Navigation**: Clean, accessible navigation with proper focus management
114+
- **Footer**: Organized links, social media, and legal information
115+
- **Content Sections**: Proper spacing, typography hierarchy, and readability
116+
117+
### Component Design Patterns
118+
- **Button Variants**: Primary, secondary, ghost, and destructive styles
119+
- **Form Components**: Accessible inputs with proper validation states
120+
- **Modal Dialogs**: Radix Dialog with proper focus trapping and escape handling
121+
- **Dropdown Menus**: Radix DropdownMenu with keyboard navigation
122+
- **Toast Notifications**: Non-intrusive feedback with appropriate timing
123+
- **Loading States**: Skeleton loaders and progress indicators
124+
- **Empty States**: Helpful messaging with clear next steps
125+
126+
### Animation & Interaction
127+
- **Micro-interactions**: Subtle feedback for user actions
128+
- **Page Transitions**: Smooth navigation between routes
129+
- **Hover Effects**: Consistent hover states across interactive elements
130+
- **Loading Animations**: Non-distracting progress indicators
131+
- **Scroll Animations**: Progressive disclosure and parallax effects
132+
- **Gesture Support**: Touch-friendly interactions for mobile devices
133+
134+
## Avoid These Common Mistakes
135+
- Don't use `any` type in TypeScript
136+
- Don't create custom CSS when Tailwind utilities exist
137+
- Don't ignore accessibility requirements
138+
- Don't bypass Next.js optimizations (use Image, Link components)
139+
- Don't create components without proper TypeScript interfaces
140+
- Don't forget to handle loading and error states
141+
- Don't use outdated Next.js patterns (Pages Router style)
142+
143+
## When Suggesting Code Changes
144+
1. **Maintain consistency** with existing codebase patterns
145+
2. **Provide complete examples** that can be directly used
146+
3. **Include proper TypeScript types** in all suggestions
147+
4. **Consider accessibility** in component suggestions
148+
5. **Optimize for performance** using Next.js best practices
149+
6. **Follow the established file structure** and naming conventions
150+
151+
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)