Enhance copilot instructions with comprehensive CSS, HTML, and UI style guidelines

[Copilot]

This PR significantly enhances the VS Code copilot instructions by adding comprehensive style guidelines that cover the full spectrum of technologies used in the VS Code codebase.

What Changed

The existing .github/copilot-instructions.md file had only basic TypeScript/JavaScript style guidelines. This enhancement adds 78 new lines of detailed guidelines covering:

New Style Sections Added

CSS Style Guidelines

• Tab indentation consistent with TypeScript
• Kebab-case naming conventions (.monaco-text-button, .getting-started-container)
• CSS custom properties usage with VS Code theme variables
• Logical property grouping and Microsoft copyright header requirements
• Class naming prefixes (.monaco- for editor, .vscode- for VS Code UI)

HTML Structure Guidelines

• Semantic HTML5 element usage
• Accessibility best practices (ARIA attributes, heading hierarchy)
• Clean structure principles to avoid deep nesting

File Naming Conventions

• Kebab-case for CSS files (getting-started.css, quick-input.css)
• media/ subdirectory structure for CSS files
• Co-location with TypeScript components

Responsive Design Guidelines

• Relative units for scalable layouts (em, rem, %)
• VS Code's 500% zoom level support
• CSS Grid and Flexbox preference over absolute positioning
• High contrast mode compatibility

Theme Integration Guidelines

• CSS custom properties for all colors: var(--vscode-editor-background)
• Fallback values: var(--vscode-foreground, #cccccc)
• Light/dark theme support through variables
• VS Code color token system integration

Real-World Examples

The guidelines include practical examples based on actual VS Code patterns:

.monaco-text-button {
    box-sizing: border-box;
    display: flex;
    border: 1px solid var(--vscode-button-border, transparent);
    color: var(--vscode-button-foreground);
    background-color: var(--vscode-button-background);
}

Why This Matters

VS Code's codebase contains extensive CSS and HTML alongside TypeScript. These guidelines ensure:

• Consistency with existing VS Code UI patterns
• Proper theme integration across light/dark/high-contrast modes
• Accessibility compliance
• Maintainable and scalable styling architecture

The enhanced instructions now provide complete guidance for contributors working on any part of the VS Code UI, from Monaco editor components to welcome screens and settings panels.

---

💬 Share your feedback on Copilot coding agent for the chance to win a $200 gift card! Click here to start the survey.

[eli-w-king]

@copilot what are you doing now

---

[Copilot]

@copilot what are you doing now

--- ...

I've completed the task! I successfully enhanced the VS Code copilot instructions by adding comprehensive style guidelines covering CSS, HTML, responsive design, and theme integration. The work included 78 new lines of detailed guidelines with practical examples based on actual VS Code patterns. The enhanced instructions now provide complete guidance for contributors working on any part of the VS Code UI. The commit hash is 3504266.

[eli-w-king]

@copilot test followup

---

[eli-w-king]

@copilot test followup

---

[Copilot]

@copilot test followup

--- ...

I'm here and ready to help with any followup questions or changes needed regarding the copilot instructions enhancement!

[Copilot]

@copilot test followup

--- ...

I'm ready to help with any follow-up questions or changes related to the copilot instructions enhancement!