Enhancement: Add interactive examples and visual aids to Copilot prompt engineering guide

[Scarmonit]

Code of Conduct

• I have read and agree to the GitHub Docs project's Code of Conduct

What article on docs.github.com is affected?

https://docs.github.com/en/copilot/concepts/prompting/prompt-engineering

What part(s) of the article would you like to see updated?

Suggested Enhancements:

1. Interactive Prompt Examples: Add clickable "Try this in Copilot" buttons that open the example prompts directly in GitHub Copilot Chat, allowing users to test and modify them in real-time.

2. Visual Before/After Comparisons: Include side-by-side examples showing:

   • Vague prompt → Poor result vs Clear prompt → Good result
   • Visual diagrams illustrating prompt structure

3. Progressive Complexity Examples: Create a section showing how to iteratively improve prompts (e.g., Start with basic → Add context → Specify format → Final optimized version)

4. Common Mistakes Section: Add examples of problematic prompts with explanations of why they fail and how to fix them.

5. Language-Specific Examples: Expand examples beyond JavaScript/Go to include Python, TypeScript, Rust, Java, etc.

6. Context Indicators: Visual callouts showing what parts of a prompt provide context vs requirements vs examples.

Expected Outcome:
More engaging, actionable documentation that helps users learn prompt engineering through hands-on practice rather than just reading theory.

Additional information

This enhancement would make the documentation more valuable for developers learning to use GitHub Copilot effectively. Interactive elements and visual aids are proven to improve learning outcomes. Reference: The current examples are good but lack context on what makes them effective.

[Sharra-writes]

@Scarmonit This isn't a goal of our documentation and we don't have a team big enough to implement or maintain it, I'm afraid.