Copilot Instructions
Community-curated instructions for GitHub Copilot. Save as .github/copilot-instructions.md in your repository to give Copilot project-specific context.
3 instructions
copilot-instructions.md
42
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# React Best Practices
## Component Design
### 1. Component Structure
```typescript
// Standard component structure
interface ButtonProps {
variant?: "primary" | "secondary" | "outline";
size?: "sm" | "md" | "lg";
disabled?: boolean;
onClick?: () => void;
children: React.ReactNode;
}
export function Button({
variant = "primary",
size = "md",
Copilot InstructionsMarkdown
copilot-instructions.md
35
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# TypeScript Strict Mode Instructions
## TypeScript Configuration
Use strict TypeScript configuration:
```json
{
"compilerOptions": {
"strict": true,
"noUncheckedIndexedAccess": true,
"noImplicitReturns": true,
"noFallthroughCasesInSwitch": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"exactOptionalPropertyTypes": true,
"forceConsistentCasingInFileNames": true
}
Copilot InstructionsMarkdown
copilot-instructions.md
28
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# Next.js 15 App Router Instructions
## Project Context
This is a Next.js 15 application using the App Router, React Server Components, and Server Actions. Follow these guidelines for all code generation.
## Architecture Patterns
### Server vs Client Components
- **Default to Server Components** for data fetching, static content, and layouts
- Use `"use client"` only when needed: interactivity, hooks, browser APIs, event handlers
- Keep client components small and focused on interactivity
- Pass data from Server Components to Client Components as props
### File Organization
```
app/
page.tsx → Server Component (data fetching)
layout.tsx → Server Component (shared layout)
Copilot InstructionsMarkdown