Merge branch 'master' into add-card-component-docs

Author: abhay1999

.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
 
@@ -97,10 +103,14 @@ python3 "<skill_dir>/scripts/generate_hero_image.py" \
 
 Produces a fully SVG-native 1200x630 image that:
 
-- Generates a **full-canvas freeform gradient background** using the complete Layer5 brand palette: Eerie Black (#1E2117), Charcoal (#3C494F), Steel Teal (#477E96), Keppel/Teal (#00B39F), Caribbean Green (#00D3A9), Saffron (#EBC017), Banana Mania (#FFF3C5)
-- Uses 7 overlapping colored ellipses, each heavily Gaussian-blurred (stdDeviation ~120px on a 1200px canvas), composited without symmetry - mimicking the Freeform Gradient tool in Adobe Illustrator
-- Selects a composition preset by `--category`: **Corner Warmth** (gold upper-left, teal right, dark lower-left, off-white subject halo where Five stands) or **Deep Space** (dark dominant, luminous central clearing)
-- Overlays a real Five mascot SVG at ~95% image height (large, prominent) from a curated set of standalone poses
+- Generates a **multi-stop gradient background** matching Layer5's official illustration technique (extracted from Artboard 1.svg and chs-2-intro.svg reference files). Uses overlapping full-canvas rectangles with 10-16 stop linear/radial gradients and `stop-opacity` for compositing - NOT blurred ellipses.
+- The signature Layer5 gradient ramp has 16 stops transitioning from Dark Jungle Green (#1E2117) through Charcoal (#3C494F), six intermediate blue-greens (#375154, #305D5D, #266E6A, #1A847B, #0B9E8F), Keppel (#00B39F), to Caribbean Green (#00D3A9). Equivalent ramps exist for Saffron and Steel Teal. These intermediate colors create the rich, deep transitions characteristic of Layer5 illustrations.
+- Full brand palette: Eerie Black (#1E2117), Charcoal (#3C494F), Steel Teal (#477E96), Keppel (#00B39F), Caribbean Green (#00D3A9), Saffron (#EBC017), Banana Mania (#FFF3C5)
+- White clearing uses the exact radial gradient from chs-2-intro.svg: white at center through #F7FCFC, #E2F6F4, #BFEBE7, #8FDDD4, #52CBBE, #12B8A6 to Keppel at edge
+- Selects a composition preset by `--category`:
+  - **Corner Warmth** (daytime): Saffron upper-left sun, Keppel/Caribbean Green at right edge and bottom, Dark Jungle Green base at lower-left, massive white clearing center-right. NO Steel Teal or Charcoal. Reference: "4000 members", "Recognition Program", "layer5-hero.webp"
+  - **Deep Space** (night): Steel Teal dominates upper sky, Charcoal at lower corners with extra diagonal darkness, Saffron warm star upper-right, tighter white clearing. Reference: "Meet Five", "Adventures of Five Vol 2" cover
+- Overlays a real Five mascot SVG at ~95% image height (large, prominent) from a curated set of 10 standalone poses
 - Embeds Qanelas Soft font (from `static/fonts/qanelas-soft/`) for brand-accurate typography
 - Adds an off-center white/off-white glow close behind Five so the black skeleton reads clearly - this is NOT a centered radial spotlight
 
@@ -123,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
@@ -135,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