Skip to content

Commit 983b635

Browse files
committed
feat(content): update GitHub Copilot lessons article with new insights and specifications
1 parent 1237dfe commit 983b635

1 file changed

Lines changed: 47 additions & 6 deletions

File tree

content/1.posts/77.github-copilot-lessons-nuxt-blog.md

Lines changed: 47 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,64 @@
11
---
22
title: 8 GitHub Copilot lessons learned upgrading my Nuxt blog
3-
description: Practical insights and lessons from using GitHub Copilot to upgrade a Nuxt blog.
4-
date: 2026-01-04
3+
description: Practical insights and lessons from using GitHub Copilot
4+
date: 2026-03-01
55
image:
66
src: /images/placeholder_1.jpg
77
badge:
8-
label: Essay
8+
label: Development
99
tags:
1010
- GitHub Copilot
1111
- Nuxt
1212
- AI
1313
- tooling
1414
---
1515

16-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
16+
Last December, I upgraded my Nuxt blog with the help of GitHub Copilot and I learned 8 lessons about using AI-assisted development that I want to share.
1717

18-
## Section Title
18+
## Plan your changes
19+
20+
Whether it's a technology upgrade, a complex feature to implement or a complete redesign, it's important to ask your AI assistant to plan the complex changes before implementing them. It does not matter if you use the [built-in Plan agent](https://code.visualstudio.com/docs/copilot/agents/planning), a custom agent or just a simple prompt, asking your AI assistant to plan the changes will help you identify the AI mistakes, see what could be improved, and challenge the assistant.
21+
22+
For my blog upgrade, GitHub Copilot gave me a checklist with the differents seps of the process and it was very useful
23+
24+
## Specifications matter
25+
26+
With AI assistants, it's easy to quickly generate code that works, and with latest models this code is often not that bad. However it's less easy to generate code that does exactly what you want without clear specifications. So provide your requirements to your AI assistant.
27+
28+
My blog is based on the [Nuxt UI SaaS template](https://ui.nuxtjs.org/) that I modified to fit my needs. But I completely forgot how much I modified it and how much the template has evolved since I started. To start the website from scratch, I needed to reverse engineering my website specifications. I knew that Copilot would be able to analyze my website thanks to [Playwright MCP](https://github.com/microsoft/playwright-mcp) which can automate browser. So I created a agent that could do that for me: ["Website RetroSpec Generator"](https://github.com/TechWatching/copilot-goodies/blob/main/agents/website-retrospec-generator.agent.md).
29+
30+
```md [website-retrospec-generator.agent.md]
31+
---
32+
name: website-retrospec-generator
33+
description: Generate comprehensive retro specifications of live websites by browsing with Playwright MCP, capturing structure, content, functionality, and creating architectural documentation.
34+
argument-hint: "Share the URL, scope (sections/flows), format, credentials, and any constraints before starting."
35+
tools: ['edit/createFile', 'edit/createDirectory', 'edit/editFiles', 'search/fileSearch', 'search/readFile', 'microsoft/playwright-mcp/*']
36+
handoffs:
37+
- label: Deeper Exploration
38+
agent: website-retrospec-generator
39+
prompt: Ask if the user wants to explore specific areas in more depth.
40+
send: false
41+
- label: Visual Diagrams
42+
agent: agent
43+
prompt: Offer to generate visual diagrams or flowcharts.
44+
send: false
45+
---
46+
47+
# Website RetroSpec Generator
48+
49+
You are an expert in reverse engineering website specifications by analyzing live websites through browser automation. [....]
50+
```
51+
52+
::callout{icon="i-heroicons-chat-bubble-left-20-solid"}
53+
If I was doing it today, I would probably use a skill with [Playwright CLI](https://github.com/microsoft/playwright-cli) instead of Playwright MCP for token efficiency and simplicity.
54+
::
55+
56+
If you need a guided process to create your specifications and have AI implement your changes from there, the [GitHub Spec Kit project](https://github.com/github/spec-kit) is an interesting tool to have a Specification-Driven Development (SDD) approach.
57+
58+
## Use the appropriate MCP Servers
59+
60+
## Use Git Worktrees
1961

20-
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
2162

2263
![Image description](/posts/images/77.github-copilot-lessons-nuxt-blog_1.png){.rounded-lg .mx-auto}
2364

0 commit comments

Comments
 (0)