feat(article): add agentic workflows article

Author: TechWatching

.github/prompts/new-article.prompt.md

@@ -0,0 +1,79 @@
+---
+name: new-article
+description: "Initialize a new blog article for TechWatching.dev with sequential numbering, frontmatter, and placeholder content. Use when creating a new blog post, starting a new article, scaffolding a post, or adding content to the blog."
+argument-hint: "topic or title for the new article"
+---
+
+# New Blog Article
+
+Initialize a new blog article for TechWatching.dev with correct frontmatter and placeholder content.
+
+## When to Use
+
+- Creating a new blog post / article
+- Scaffolding a post with frontmatter and placeholder sections
+- Starting content for TechWatching.dev
+
+## Procedure
+
+### 1. Determine the next article number
+
+Check the files in `content/1.posts/` directory. Find the highest numeric prefix and increment by 1 to get the next article number.
+
+### 2. Create the article file
+
+Use the naming convention: `{number}.{slug}.md` inside `content/1.posts/`.
+
+- The slug should be lowercase, hyphen-separated, and derived from the topic/title.
+- Example: `79.my-new-topic.md`
+
+### 3. Choose the badge category
+
+Pick the `badge.label` based on the topic:
+
+| Category | When to use |
+|----------|-------------|
+| `Tooling` | Tools, extensions, CLI utilities, developer productivity |
+| `DevOps` | CI/CD, infrastructure, cloud platforms, deployment |
+| `Development` | Programming concepts, frameworks, coding practices |
+| `Essay` | Thoughts, retrospectives, career advice, learning |
+| `Tips` | Weekly tips posts |
+
+### 4. Choose tags
+
+Tags should be relevant to the content. Follow these casing rules:
+
+- **Proper casing for technologies**: `.NET`, `ASP.NET Core`, `Nuxt`, `Vue.js`, `TypeScript`, `OpenTelemetry`
+- **Lowercase for concepts**: `tooling`, `learning`, `thoughts`, `devops`, `api`
+- **Weekly tips**: always include `tips learned this week` tag
+
+### 5. Fill in frontmatter fields
+
+| Field | Required | Notes |
+|-------|----------|-------|
+| `title` | Yes | Use quotes for titles with colons or special characters |
+| `description` | Yes | Brief summary (can use quotes) |
+| `date` | Yes | Today's date in `YYYY-MM-DD` format |
+| `image.src` | Yes | Cover image path (default: `/images/placeholder_1.jpg`) |
+| `badge.label` | Yes | Category from the table above |
+| `tags` | No | Array of relevant tags |
+| `canonical` | No | URL if cross-posted from another site |
+| `ImageAttribution` | No | Credit for stock photos |
+
+### 6. Apply the template
+
+Use the [article template](./templates/article.md) as the body structure. Fill in frontmatter based on the topic but keep the placeholder body content as-is.
+
+### 7. Code block convention
+
+Code blocks with filenames use `[filename]` syntax after the language identifier:
+
+````markdown
+```typescript [nuxt.config.ts]
+// code here
+```
+````
+
+## Output
+
+Create only the initialized article file in `content/1.posts/` with frontmatter filled based on the topic and the placeholder structure from the template. Do NOT write actual article content.

.github/skills/new-article/SKILL.md

@@ -0,0 +1,40 @@
+---
+title: {Title based on topic}
+description: {Brief description}
+date: {Today's date YYYY-MM-DD}
+image:
+  src: /images/placeholder_1.jpg
+badge:
+  label: {Category}
+tags:
+  - {tag1}
+  - {tag2}
+---
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+
+## Section Title
+
+Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+
+![Image description](/posts/images/{number}.{slug}_1.png){.rounded-lg .mx-auto}
+
+Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+
+```typescript [example.ts]
+// Sample code block
+const example = "Hello World";
+console.log(example);
+```
+
+## Another Section
+
+Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+
+### Subsection
+
+Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
+
+::callout{icon="i-heroicons-light-bulb"}
+This is a callout for tips or important notes.
+::

.github/skills/new-article/templates/article.md

@@ -0,0 +1,80 @@
+---
+title: I created my first GitHub Agentic Workflow to keep my blog up to date
+description: Exploring GitHub's agentic workflows.
+date: 2026-03-31
+image:
+  src: /images/robot-hand_1.jpg
+badge:
+  label: Development
+tags:
+  - GitHub
+  - GitHub Copilot
+  - AI
+  - tooling
+---
+
+This blog you are reading is based on the [Nuxt UI SaaS template](https://github.com/nuxt-ui-templates/saas) that I have heavily modified. The Nuxt UI template is maintained and regularly updated by the Nuxt team, especially when they make evolutions to the Nuxt UI component library.
+
+That means, when I want to get the latest features and improvements of the template, I have to compare what has changed in the template repository and apply only the relevant bits to my codebase. This is a complex and boring task that I don't want to do manually, and that is not something I can easily automate with traditional scripts because it's not completely deterministic.
+
+That's where [GitHub Agentic Workflows](https://github.github.com/gh-aw/) come into play.
+
+With GitHub Agentic Workflows, you have the power of an AI coding agent running inside a GitHub Action, to perform tasks on your codebase based on instructions you have written in natural language. That way you have an automation that can adapt to your context, without fixed rules.
+
+For my use case, I need a workflow that regularly checks the Nuxt UI SaaS template repository for updates, checks if there are any relevant changes for my codebase, and eventually creates a pull request with the modifications.
+
+So after a quick brainstorming session with GitHub Copilot, I created the agentic workflow markdown file like this:
+
+```md [template-sync.md]
+You are helping sync the personal blog at TechWatching/techwatching.dev with its upstream
+template nuxt-ui-templates/saas. This blog was originally created from that template and has
+been heavily customized: some pages were removed, new pages were added, components were
+renamed, and new features (RSS feeds, tags, goodies page, speaking page, Giscus comments)
+were added. Your job is to apply useful upstream improvements without breaking anything.
+
+## Step 1: Check for new template changes
+## Step 2: Identify changed files
+## Step 3: Apply changes using these rules
+## Step 4: Update state file
+## Step 5: Validate changes
+## Step 6: Create pull request
+```
+
+For the sake of simplicity, I did not share the details of each step but you can find the complete agentic workflow file [here](https://github.com/TechWatching/techwatching.dev/blob/main/.github/agentic-workflows/template-sync.md)
+
+There is a front matter section at the top of the file to specify the workflow trigger, the permissions of the workflow, and the tools it can use:
+
+```yaml
+name: "Template sync"
+on:
+  schedule: weekly on monday
+  workflow_dispatch:
+  skip-if-match: "repo:TechWatching/techwatching.dev is:pr is:open label:template-sync"
+
+permissions:
+  contents: read
+  pull-requests: read
+
+network: defaults
+
+tools:
+  bash: true
+  github:
+    toolsets:
+      - repos
+      - pull_requests
+
+safe-outputs:
+  create-pull-request:
+    protected-files: allowed
+```
+
+Then the corresponding GitHub Action workflow file can be generated from this front matter using the `gh aw compile` command. This gives you a `template-sync.lock.yml` that should not be manually edited and that will be used by GitHub to run the workflow. 
+
+One thing I did not mention: to be able to easily compare the changes in the template repository, I also created a state file to keep track of the last template commit that was applied to my codebase. This state file is updated by the workflow at each run and can be used by the agent to know which commits to analyze in the template repository.
+
+And here is a Pull Request created by my new GitHub Agentic Workflow:
+
+![Pull Request created by Agentic Workflow](/posts/images/78.github-agentic-workflows_1.png){.rounded-lg .mx-auto}
+
+This is not a very complex use case but it solves a real problem for me that would have been difficult to solve with traditional automation.