القائمة
Use when a docs_v2 blog post needs its 1200x630 banner image — compose an in-brand HTML file in this skill's banners/ directory and render it deterministically with npm run render:banner. Covers the design language, the pipeline, and the verification loop.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
Use when writing or editing ivue `Reactive()` classes, converting a Vue component or composable to ivue, or resolving any `.value`-in-template, `defineExpose`/`reactive()` instance-typing, `ReactiveInstance`/`Instance`, `$watch`/`$watchEffect`, or namespace-export question, or any `Static()` capability-class / `$`-cached-static / anchor question — the operating manual for Vue 3 class-based reactivity where state is ref-getters, derived values are plain getters, and Refs/Computeds are `.value` everywhere.
Use when bumping the ivue package version, tagging a release, or preparing an npm publish — the repo's versioning/tagging conventions and the gates that must pass before a version is stamped.
Use right after the user publishes ivue to npm — installs the just-published version into a throwaway consumer repo and smoke-tests the runtime, the skill installer, and the tarball contents against the registry artifact, not the local build.
Author and refactor TypeScript Node.js backends around static capability classes, mutable class namespaces, late dependency getters, lazy-bound static methods, native inheritance, and boot-time composition. Use for backend modules, circular imports, route or queue callbacks, plugin kernels, test doubles, and designs that would otherwise introduce DI tokens, decorators, forwardRef, or service instances that only hold methods.
Use when writing or editing any documentation in this repo — docs_v2 guide pages, README, invariants docs, sketch DESIGN/RESULTS files, or doc comments meant for readers. Encodes the house documentation style — timeless present tense with no edit-history residue, unpacked concepts over compressed jargon, ivue-standard code examples, and verified claims.
| name | blog-banner |
| description | Use when a docs_v2 blog post needs its 1200x630 banner image — compose an in-brand HTML file in this skill's banners/ directory and render it deterministically with npm run render:banner. Covers the design language, the pipeline, and the verification loop. |
Banners are code, not paintings: an HTML/CSS composition rendered by headless Chromium at exactly 1200×630. Same input → same PNG. No image model is involved; the source is the artifact.
.claude/skills/blog-banner/banners/<slug>.html
— one file per post, named exactly after the post's slug.docs_v2/public/blog/<slug>.png (referenced by
the post's  and the index card).docs_v2/scripts/brand-image-generator.mjs blog
mode, wrapped as an npm script.npm run render:banner -- \
.claude/skills/blog-banner/banners/<slug>.html \
docs_v2/public/blog/<slug>.png
The generator waits for fonts and images before screenshotting, so the render is stable. NEVER hand-run playwright inline for a banner — the npm script is the reproducibility contract. Commit the HTML source together with the PNG; a banner whose source is lost cannot be edited, only replaced.
1200×630, background #050a18 with two soft radial
glows — indigo (rgba(99,102,241,…)) high, cyan
(rgba(34,211,238,…)) low — plus a faint blue grid masked to the
center (see any existing banner source for the exact recipe).'Geist', 'DejaVu Sans', 'Inter', sans-serif) — titles, subtitles, labels, footers are NOT monospace.
The REAL Geist faces are vendored in banners/fonts/ (latin woff2
subsets, OFL-licensed) and every banner MUST start its <style> with
the two @font-face blocks pointing at them (copy from any existing
banner) — the renderer runs offline from file://, so without the
vendored faces Chromium silently falls back to DejaVu.
Monospace ('Geist Mono', 'DejaVu Sans Mono') is reserved for CODE
REFERENCES only: terminal-window content, expressions/chains, API
names like Reactive() inside a title, lint-rule names, and the
∞ ivue blog brand mark (a code identity). Use a .mono class for
inline code tokens inside sans text. Headline in near-white
#eaf2ff with a blue text-shadow; the ONE key phrase in glowing
cyan #67e8f9. Supporting text in muted blue #7e9cd0/#52688f.box-shadow glow). The ∞ ivue blog brand
mark appears once, small.top offsets of
everything below it (this has already bitten once).docs_v2/blog/index.md card reference
/blog/<slug>.png with width="1200" height="630".If a post's slug changes: rename the HTML source, re-render to the new PNG path, delete the old PNG, and update the post image line + index card. The banner headline usually needs the new title too — a stale headline in the image outlives every markdown fix.