Merge branch 'master' of https://github.com/layer5io/layer5

Author: leecalcote

.claude/skills/layer5-blog-writer/SKILL.md

@@ -27,6 +27,8 @@ Write like an experienced engineer talking to peers. The voice is:
 - **American English.** color, analyze, recognize, center.
 - **Hyphens only, never em dashes.** Use `-` wherever you'd be tempted to use `—`. Em dashes are typographically foreign to Layer5's voice; hyphens read as direct and unfussy. This applies everywhere: prose, titles, subtitles, callouts, code comments.
 
+**Brand names are case-sensitive.** MeshMates (not Meshmates or meshmates), Meshery, Kanvas, Layer5, mesheryctl (lowercase), KubeCon, GitOps, DevOps, OpenTelemetry. When in doubt, grep the codebase for the canonical spelling. Getting these wrong looks careless to the community.
+
 **Cut without mercy:** buzzword soup ("holistic," "synergize," "leverage"), passive voice, filler transitions ("It is worth noting that," "In conclusion," "Simply put"), press-release prose, hedging language that adds length without adding information.
 
 **Open strong.** The first paragraph is a hook. Give the reader the specific problem, why it's hard, and a hint that you have an answer. If you can't summarize the value in one paragraph, the post needs a sharper angle.
@@ -58,7 +60,11 @@ grep -r "YOUR_TOPIC" ~/code/docs/content/en/ --include="*.md" -l | head -8
 
 See `references/docs-sources.md` for the full path-to-URL mapping and search patterns.
 
-**Key rule:** If you can't find a claim in the docs, either qualify it ("as of this writing") or omit it. Blog posts extend the docs — they don't contradict them.
+**Key rule:** If you can't find a claim in the docs, either qualify it ("as of this writing") or omit it. Blog posts extend the docs - they don't contradict them.
+
+**Verify every command sequence end-to-end.** Read the commands you wrote as if you were executing them in order on a fresh cluster. If step 2 disables a component, step 5 cannot reference that component. If step 1 installs into namespace X, subsequent `kubectl` commands must target namespace X. Contradictory commands (e.g. `--set query.enabled=false` followed by `kubectl port-forward svc/jaeger-query`) are embarrassing and destroy reader trust instantly.
+
+**Pin versions in install commands.** Never use `releases/latest`, `:latest` tags, or unversioned URLs in tutorials. Pin to a specific release (e.g. `v0.104.0`, `v1.23.0`). Unpinned commands break silently weeks later when upstream ships a breaking change, and the reader blames the blog post. If you don't know the current version, grep the docs or check the project's GitHub releases page and use the latest stable version explicitly.
 
 ### Step 3 — Plan the post
 
@@ -127,8 +133,11 @@ darkthumbnail: ./hero-image.svg
 
 ### Step 6 — Final quality check
 
-- [ ] All frontmatter fields present
+**Structure and components:**
+
+- [ ] All frontmatter fields present (see `references/blog-structure.md` for the complete list)
 - [ ] `published: true` (or `false` for draft)
+- [ ] Date format exactly: `YYYY-MM-DD HH:MM:SS +/-HHMM` (quoted in frontmatter)
 - [ ] At least one image with descriptive alt text
 - [ ] At least one `<CTA_FullWidth>` or `<KanvasCTA>`
 - [ ] At least one `<Blockquote>` for emphasis
@@ -139,7 +148,21 @@ darkthumbnail: ./hero-image.svg
 - [ ] Opening lede wrapped in `<div className="intro">`
 - [ ] Closing next-steps wrapped in `<div className="outro">`
 - [ ] Technical posts: consider `resource: true`
-- [ ] Tags and categories from the approved list
+- [ ] Tags and categories from the approved list (see `references/tags-categories.md`)
+
+**Technical accuracy (tutorials and how-to posts):**
+
+- [ ] Every shell command sequence is internally consistent - read them top to bottom as if executing on a fresh cluster. If step N disables or skips a component, no later step can reference that component
+- [ ] Install commands pin explicit versions (`v0.104.0`, not `releases/latest` or `:latest`)
+- [ ] Namespace, service name, and label selectors are consistent across all commands
+- [ ] `kubectl port-forward`, `kubectl get`, and `kubectl logs` commands reference resources that were actually created by preceding steps
+- [ ] If the post references a Meshery or Kanvas feature, grep the docs repos to confirm the feature name and CLI flags are current
+
+**Brand and taxonomy:**
+
+- [ ] Brand names use exact capitalization: MeshMates, Meshery, mesheryctl, Kanvas, Layer5, KubeCon, GitOps, DevOps, OpenTelemetry
+- [ ] Tags match the approved list casing exactly (e.g. `ai` is lowercase, `Open Source` is title case) - see `references/tags-categories.md`
+- [ ] Category is exactly one from the approved list
 
 ## Reference files
 

.claude/skills/layer5-blog-writer/references/blog-structure.md

@@ -278,7 +278,40 @@ The closing section wrapper. Visually distinct from `intro` - solid teal top/bot
 </div>
 ```
 
-The `outro` style is defined in `Blog.style.js` alongside `intro`. Both use the teal brand color from `theme.primaryLightColor`, but `intro` uses dashed borders with an italic voice while `outro` uses solid borders with a direct, action-forward tone.
+The `outro` style is defined in `Blog.style.js` alongside `intro`. Key differences from `intro`:
+
+| Property     | `div.intro`                | `div.outro`            |
+| ------------ | -------------------------- | ---------------------- |
+| Border style | `1px dashed` (teal)        | `1px solid` (teal)     |
+| Font style   | `italic`                   | Normal (not italic)    |
+| Font size    | `0.8rem`                   | `1rem`                 |
+| Padding L/R  | `3rem`                     | `1rem`                 |
+| Tone         | Reflective, sets the scene | Direct, action-forward |
+
+**Do not** copy intro's padding or font-size values for outro. The outro is a call to action, not a lede - it should feel normal-weight and not cramped on mobile.
+
+## Code Examples and CLI Commands
+
+When a post includes shell commands, `kubectl` invocations, Helm installs, or any executable steps:
+
+**Pin versions.** Every install command must reference an explicit version number. Never use `releases/latest`, `:latest`, or an unversioned URL. Examples:
+
+```bash
+# WRONG - breaks when upstream ships a new version
+kubectl apply -f https://github.com/cert-manager/cert-manager/releases/latest/download/cert-manager.yaml
+
+# RIGHT - reproducible for readers months later
+kubectl apply -f https://github.com/cert-manager/cert-manager/releases/download/v1.14.4/cert-manager.yaml
+```
+
+**Verify internal consistency.** Read every command in the post top-to-bottom as if executing on a fresh cluster. Check:
+
+- If a Helm `--set` flag disables a component (e.g. `--set query.enabled=false`), no later command can reference that component (e.g. `kubectl port-forward svc/jaeger-query` would fail)
+- Namespaces must match across install and access commands
+- Service names in `port-forward`, `get`, and `logs` commands must match what the install actually creates
+- If the post uses a custom release name (`helm install my-release ...`), subsequent references must use that name, not the chart default
+
+**Show expected output where helpful.** For commands where success isn't obvious (e.g. `kubectl get pods`), show a brief expected output block so readers can verify they're on track.
 
 ## Writing Style
 

.claude/skills/layer5-blog-writer/references/tags-categories.md

@@ -2,6 +2,8 @@
 
 Always prefer existing values. Introduce a new one only if nothing fits.
 
+**Casing matters.** Tags and categories must match the exact casing shown below. Inconsistent casing (e.g. `AI` vs `ai`, `Opensource` vs `Open Source`) fragments the taxonomy and breaks tag-based filtering on the site. Copy the tag string exactly as listed.
+
 ## Categories (exactly one per post)
 
 | Category             | Use for                                                      |
@@ -38,7 +40,7 @@ Always prefer existing values. Introduce a new one only if nothing fits.
 - `Meshery` — anything involving the Meshery platform
 - `Community` — events, contributor stories, programs
 - `Kubernetes` — Kubernetes tutorials, operations
-- `ai` — AI/ML topics, LLMs, AI tools (lowercase — matches codebase convention)
+- `ai` - AI/ML topics, LLMs, AI tools (**lowercase** - this is intentional and matches the existing codebase convention; do NOT use `AI` or `Ai`)
 - `Meet The Maintainer` — interview series
 - `docker` — containers, Docker ecosystem
 - `Service Mesh` — service mesh topics

.claude/skills/layer5-blog-writer/scripts/generate_hero_image.py

@@ -635,9 +635,9 @@ def generate_hero_svg(title, subtitle, category, output_path, repo_root,
       <stop offset="55%"  stop-color="{EERIE_BLACK}" stop-opacity="0.22"/>
       <stop offset="100%" stop-color="{EERIE_BLACK}" stop-opacity="0"/>
     </linearGradient>
-    {bg_filter_def}
+    {bg_gradient_defs}
     {glow_filter_def}
-    <!-- Note: bg_filter_def now contains gradient definitions, not a blur filter -->
+    <!-- Note: bg_gradient_defs contains background gradient definitions -->
   </defs>
 
   {bg_svg}

src/collections/blog/Blog.style.js

@@ -23,6 +23,19 @@ export const BlogWrapper = styled.div`
     }
   }
 
+  div.outro {
+    display: flex;
+    padding-left: 1rem;
+    padding-right: 1rem;
+    font-size: 1rem;
+    border-top: 1px solid ${(props) => props.theme.primaryLightColor};
+    border-bottom: 1px solid ${(props) => props.theme.primaryLightColor};
+    margin-top: 1rem;
+    padding-top: 1rem;
+    padding-bottom: 1rem;
+    background-color: ${(props) => props.theme.secondaryLightColorTwo};
+  }
+
   div.tip {
     position: relative;
     float: right;