|
1 | 1 | --- |
2 | 2 | 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 |
5 | 5 | image: |
6 | 6 | src: /images/placeholder_1.jpg |
7 | 7 | badge: |
8 | | - label: Essay |
| 8 | + label: Development |
9 | 9 | tags: |
10 | 10 | - GitHub Copilot |
11 | 11 | - Nuxt |
12 | 12 | - AI |
13 | 13 | - tooling |
14 | 14 | --- |
15 | 15 |
|
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. |
17 | 17 |
|
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 |
19 | 61 |
|
20 | | -Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. |
21 | 62 |
|
22 | 63 | {.rounded-lg .mx-auto} |
23 | 64 |
|
|
0 commit comments