[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M792XTYRW8ZSHPSPVMK301QW":3,"skill-same:01M792XTYRW8ZSHPSPVMK301QW":61},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":16,"categories":17,"keywords":18,"publishedAt":19,"linkOnly":20,"markdownContent":21,"markdownBody":22,"frontMatter":23,"refName":26,"commitSha":27,"skillDirectory":28,"forksCount":14,"repositoryHtmlUrl":29,"repositoryHomepageUrl":30,"ownerHtmlUrl":31,"ownerBlogUrl":32,"ownerDescription":33,"updatedAt":34,"install":35,"resources":48},"01M792XTYRW8ZSHPSPVMK301QW","visual-assets",null,"Generate on-brand images: OG cards, blog heroes, social graphics and mockups. Use when creating Open Graph cards, hero visuals, or brand graphics.","poorvith-mp\u002Fskills-marketing","poorvith-mp","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F277478855?v=4","01M78Z5K0YH1Z3PX815PGQ96ND","Poorvith M P","01M792P4C4Z12T0V4B97Z9MNX3",0,"MIT","https:\u002F\u002Fgithub.com\u002Fpoorvith-mp\u002Fskills-marketing\u002Fblob\u002Fmain\u002Fskills\u002Fvisual-assets\u002FSKILL.md",[],[],"2026-11-15 14:19:17",false,"---\nname: visual-assets\nlast_reviewed: 2026-09-06\ngroup: Assets\ndescription: >-\n  Generate on-brand images: OG cards, blog heroes, social graphics and mockups. Use when creating\n  Open Graph cards, hero visuals, or brand graphics.\n---\n\n# visual-assets\n\n## Core Philosophy\nVisual assets for software and technical products are not decorative digital clip art. They are high-leverage communication tools that establish immediate credibility, clarify complex system architectures, and drastically increase click-through rates across social, documentation, and search environments. Every asset—from an Open Graph preview card to an enterprise architecture diagram—must prioritize clarity, contrast, and information density over generic aesthetic flair.\n\n---\n\n## 4-Step Visual Asset Design System\n\n### Step 1: Design Tokens & Visual Hierarchy\n1. **Strict Palette Standardization**:\n   - *Backgrounds*: Deep neutral slate\u002Fcharcoal (e.g. `#0F172A`, `#18181B`) or crisp clean white (`#FFFFFF`).\n   - *Primary Accent*: 1 vibrant brand color (e.g. Indigo `#6366F1`, Emerald `#10B981`, or Electric Orange `#F97316`) reserved exclusively for callouts and focal points.\n   - *Text Contrast*: Ensure all text meets WCAG AA standards (minimum 4.5:1 contrast ratio against background).\n2. **Typography Rules**:\n   - Monospace font for all code blocks, CLI snippets, and data points (`JetBrains Mono`, `Fira Code`, or `Geist Mono`).\n   - Clean geometric sans-serif for headings and labels (`Inter`, `Geist`, or `Plus Jakarta Sans`).\n\n### Step 2: Open Graph (OG) & Social Card Architecture\n1. **Canvas Specifications**:\n   - Resolution: 1200x630px (1.91:1 aspect ratio), PNG or WebP format.\n   - Safe Zone: Keep critical text and logos within the central 1000x500px box to prevent clipping on mobile previews.\n2. **Visual Anatomy of a High-CTR Developer OG Card**:\n   - High-contrast headline (48–64pt font, maximum 8 words).\n   - Category \u002F Feature badge pill at top left.\n   - Code snippet preview or syntax-highlighted terminal window as secondary visual weight.\n   - Product logo and author\u002Fbrand avatar at bottom.\n3. **Automated Dynamic OG Generation**:\n   - Implement dynamic edge-generated OG images (e.g. `@vercel\u002Fog`, Satori, or Puppeteer templates) to render title, tags, and reading time dynamically for documentation and blog posts.\n\n### Step 3: Technical Architecture & System Diagrams\n1. **Diagram Engineering Discipline**:\n   - Use clean vector tools (Mermaid.js, Figma, or Excalidraw).\n   - Enforce unidirectional flow (left-to-right for user pipelines, top-to-bottom for microservice hierarchies).\n   - Node Standardization: Use consistent geometric shapes (Rectangles = Services\u002FAPIs, Cylinders = Databases\u002FStorage, Diamonds = Decision logic).\n   - Label Every Arrow: Never leave an arrow unlabeled; explicitly indicate protocol and payload (e.g., `HTTPS \u002F JSON`, `gRPC`, `Kafka Event`).\n\n### Step 4: Product Screenshots & Marketing Assets\n1. **Screenshot Framing & Mockups**:\n   - Avoid generic laptop\u002Fbrowser mockup frames with distorted 3D perspective angles.\n   - Use flat, 2D borderless UI crops with subtle 1px border (`#27272A`) and soft box-shadow (`box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5)`).\n   - Redact sensitive data (API keys, personal customer names) with clean neutral rectangles, not messy pixelation.\n2. **Asset Compression Pipeline**:\n   - Convert all raster images to WebP or AVIF.\n   - Run lossless compression (using `oxipng` for PNGs or `cwebp -q 85` for WebP) to ensure image files remain $\u003C 150text{KB}$ for web performance.\n\n---\n\n## Deliverable Format: Visual Asset Specification (`VISUAL-ASSETS-SPEC.md`)\n\n```markdown\n# Visual Asset & Design Specification: [Product \u002F Feature]\n\n## 1. Brand Tokens & Palette\n- **Canvas Background**: `#090D16` (Deep Navy Slate)\n- **Primary Accent**: `#38BDF8` (Sky Blue)\n- **Surface Border**: `#1E293B` (1px solid)\n- **Primary Typography**: `Inter` \u002F `JetBrains Mono`\n\n## 2. Asset Manifest & Specifications\n| Asset Name | Dimensions | Format | Usage Context | Delivery Path |\n|---|---|---|---|---|\n| `og-main.png` | 1200x630px | WebP \u002F PNG | Social previews & meta tags | `public\u002Fog\u002F` |\n| `architecture-v1.svg` | Vector | SVG | README & Documentation | `docs\u002Fassets\u002F` |\n| `feature-cli-hero.png`| 1920x1080px| WebP | Homepage Hero Section | `public\u002Fimg\u002F` |\n\n## 3. Diagram Flow Specifications (Mermaid)\n```mermaid\ngraph LR\n    Client[Client Browser] -->|HTTPS \u002F OAuth2| API[API Gateway]\n    API -->|gRPC| Auth[Auth Service]\n    API -->|Kafka Event| Worker[Async Ingestion Worker]\n    Worker -->|Write WAL| DB[(PostgreSQL 16)]\n```\n\n## 4. Screenshot Sanitation & Framing Rules\n- **Shadow**: `0 25px 50px -12px rgba(0,0,0,0.4)`\n- **Border Radius**: `12px`\n- **Zoom Level**: 125% browser zoom for crisp UI rendering\n```\n\n---\n\n## Worked Example: Developer Documentation OG Card Template\n\n- **Design**: Dark theme background (`#0A0A0A`) with subtle radial gradient.\n- **Content**: Left side contains dynamic H1 page title in 56pt `Geist` font with a \"Documentation\" badge; right side contains a syntax-highlighted code block showcasing the specific API endpoint discussed on the page.\n- **Impact**: Increased organic Twitter\u002FX click-through rate from 1.8% to 4.9% across shared documentation links.\n\n---\n\n## Verification Checklist\n\n- [ ] All text passes WCAG AA contrast ratio standards ($\\ge 4.5:1$).\n- [ ] OG cards are 1200x630px with critical text within the 1000x500px safe zone.\n- [ ] Architecture diagrams have clearly labeled arrows indicating protocols and data flow.\n- [ ] Product screenshots use flat 2D presentation with sensitive data cleanly redacted.\n- [ ] Web images are compressed to WebP\u002FAVIF and weigh $\u003C 150text{KB}$.\n\n---\n\n## Anti-Patterns\n\n- **AI Sci-Fi Slop**: Using generic AI-generated images of floating neon brains or glowing cyber-cubes that communicate zero technical meaning.\n- **Microscopic 4K Screenshots**: Taking a full-monitor 4K screenshot of a UI where the actual feature is unreadable on mobile.\n- **Unlabeled Diagram Arrows**: Connecting 15 boxes with mysterious arrows that leave readers guessing what data is moving where.\n","# visual-assets\n\n## Core Philosophy\nVisual assets for software and technical products are not decorative digital clip art. They are high-leverage communication tools that establish immediate credibility, clarify complex system architectures, and drastically increase click-through rates across social, documentation, and search environments. Every asset—from an Open Graph preview card to an enterprise architecture diagram—must prioritize clarity, contrast, and information density over generic aesthetic flair.\n\n---\n\n## 4-Step Visual Asset Design System\n\n### Step 1: Design Tokens & Visual Hierarchy\n1. **Strict Palette Standardization**:\n   - *Backgrounds*: Deep neutral slate\u002Fcharcoal (e.g. `#0F172A`, `#18181B`) or crisp clean white (`#FFFFFF`).\n   - *Primary Accent*: 1 vibrant brand color (e.g. Indigo `#6366F1`, Emerald `#10B981`, or Electric Orange `#F97316`) reserved exclusively for callouts and focal points.\n   - *Text Contrast*: Ensure all text meets WCAG AA standards (minimum 4.5:1 contrast ratio against background).\n2. **Typography Rules**:\n   - Monospace font for all code blocks, CLI snippets, and data points (`JetBrains Mono`, `Fira Code`, or `Geist Mono`).\n   - Clean geometric sans-serif for headings and labels (`Inter`, `Geist`, or `Plus Jakarta Sans`).\n\n### Step 2: Open Graph (OG) & Social Card Architecture\n1. **Canvas Specifications**:\n   - Resolution: 1200x630px (1.91:1 aspect ratio), PNG or WebP format.\n   - Safe Zone: Keep critical text and logos within the central 1000x500px box to prevent clipping on mobile previews.\n2. **Visual Anatomy of a High-CTR Developer OG Card**:\n   - High-contrast headline (48–64pt font, maximum 8 words).\n   - Category \u002F Feature badge pill at top left.\n   - Code snippet preview or syntax-highlighted terminal window as secondary visual weight.\n   - Product logo and author\u002Fbrand avatar at bottom.\n3. **Automated Dynamic OG Generation**:\n   - Implement dynamic edge-generated OG images (e.g. `@vercel\u002Fog`, Satori, or Puppeteer templates) to render title, tags, and reading time dynamically for documentation and blog posts.\n\n### Step 3: Technical Architecture & System Diagrams\n1. **Diagram Engineering Discipline**:\n   - Use clean vector tools (Mermaid.js, Figma, or Excalidraw).\n   - Enforce unidirectional flow (left-to-right for user pipelines, top-to-bottom for microservice hierarchies).\n   - Node Standardization: Use consistent geometric shapes (Rectangles = Services\u002FAPIs, Cylinders = Databases\u002FStorage, Diamonds = Decision logic).\n   - Label Every Arrow: Never leave an arrow unlabeled; explicitly indicate protocol and payload (e.g., `HTTPS \u002F JSON`, `gRPC`, `Kafka Event`).\n\n### Step 4: Product Screenshots & Marketing Assets\n1. **Screenshot Framing & Mockups**:\n   - Avoid generic laptop\u002Fbrowser mockup frames with distorted 3D perspective angles.\n   - Use flat, 2D borderless UI crops with subtle 1px border (`#27272A`) and soft box-shadow (`box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5)`).\n   - Redact sensitive data (API keys, personal customer names) with clean neutral rectangles, not messy pixelation.\n2. **Asset Compression Pipeline**:\n   - Convert all raster images to WebP or AVIF.\n   - Run lossless compression (using `oxipng` for PNGs or `cwebp -q 85` for WebP) to ensure image files remain $\u003C 150text{KB}$ for web performance.\n\n---\n\n## Deliverable Format: Visual Asset Specification (`VISUAL-ASSETS-SPEC.md`)\n\n```markdown\n# Visual Asset & Design Specification: [Product \u002F Feature]\n\n## 1. Brand Tokens & Palette\n- **Canvas Background**: `#090D16` (Deep Navy Slate)\n- **Primary Accent**: `#38BDF8` (Sky Blue)\n- **Surface Border**: `#1E293B` (1px solid)\n- **Primary Typography**: `Inter` \u002F `JetBrains Mono`\n\n## 2. Asset Manifest & Specifications\n| Asset Name | Dimensions | Format | Usage Context | Delivery Path |\n|---|---|---|---|---|\n| `og-main.png` | 1200x630px | WebP \u002F PNG | Social previews & meta tags | `public\u002Fog\u002F` |\n| `architecture-v1.svg` | Vector | SVG | README & Documentation | `docs\u002Fassets\u002F` |\n| `feature-cli-hero.png`| 1920x1080px| WebP | Homepage Hero Section | `public\u002Fimg\u002F` |\n\n## 3. Diagram Flow Specifications (Mermaid)\n```mermaid\ngraph LR\n    Client[Client Browser] -->|HTTPS \u002F OAuth2| API[API Gateway]\n    API -->|gRPC| Auth[Auth Service]\n    API -->|Kafka Event| Worker[Async Ingestion Worker]\n    Worker -->|Write WAL| DB[(PostgreSQL 16)]\n```\n\n## 4. Screenshot Sanitation & Framing Rules\n- **Shadow**: `0 25px 50px -12px rgba(0,0,0,0.4)`\n- **Border Radius**: `12px`\n- **Zoom Level**: 125% browser zoom for crisp UI rendering\n```\n\n---\n\n## Worked Example: Developer Documentation OG Card Template\n\n- **Design**: Dark theme background (`#0A0A0A`) with subtle radial gradient.\n- **Content**: Left side contains dynamic H1 page title in 56pt `Geist` font with a \"Documentation\" badge; right side contains a syntax-highlighted code block showcasing the specific API endpoint discussed on the page.\n- **Impact**: Increased organic Twitter\u002FX click-through rate from 1.8% to 4.9% across shared documentation links.\n\n---\n\n## Verification Checklist\n\n- [ ] All text passes WCAG AA contrast ratio standards ($\\ge 4.5:1$).\n- [ ] OG cards are 1200x630px with critical text within the 1000x500px safe zone.\n- [ ] Architecture diagrams have clearly labeled arrows indicating protocols and data flow.\n- [ ] Product screenshots use flat 2D presentation with sensitive data cleanly redacted.\n- [ ] Web images are compressed to WebP\u002FAVIF and weigh $\u003C 150text{KB}$.\n\n---\n\n## Anti-Patterns\n\n- **AI Sci-Fi Slop**: Using generic AI-generated images of floating neon brains or glowing cyber-cubes that communicate zero technical meaning.\n- **Microscopic 4K Screenshots**: Taking a full-monitor 4K screenshot of a UI where the actual feature is unreadable on mobile.\n- **Unlabeled Diagram Arrows**: Connecting 15 boxes with mysterious arrows that leave readers guessing what data is moving where.\n",{"name":5,"group":24,"description":7,"last_reviewed":25},"Assets",1788652800000,"main","e9ea1069b8d051ec6f88c3bdc4290183b8e68c94","skills\u002Fvisual-assets","https:\u002F\u002Fgithub.com\u002Fpoorvith-mp\u002Fskills-marketing","https:\u002F\u002Fgithub.com\u002Fpoorvith-mp\u002Fskillary","https:\u002F\u002Fgithub.com\u002Fpoorvith-mp","poorvithmp.com","Shipping tools for problems people notice too late.","2026-10-02 21:32:44",{"source":8,"skillName":5,"commands":36,"prompt":46,"zipAvailable":47},[37,40,43],{"tool":38,"command":39},"npx","npx skills add poorvith-mp\u002Fskills-marketing --skill visual-assets",{"tool":41,"command":42},"bunx","bunx skills add poorvith-mp\u002Fskills-marketing --skill visual-assets",{"tool":44,"command":45},"pnpm","pnpm dlx skills add poorvith-mp\u002Fskills-marketing --skill visual-assets","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fpoorvith-mp\u002Fskills-marketing\u002Fblob\u002Fmain\u002Fskills\u002Fvisual-assets\u002FSKILL.md",true,[49,55],{"path":50,"resourceType":51,"resourceTypeDesc":52,"sizeBytes":53,"sourceHtmlUrl":54},"evals\u002Frouting.yaml","REFERENCE","参考文档",945,"https:\u002F\u002Fgithub.com\u002Fpoorvith-mp\u002Fskills-marketing\u002Fblob\u002Fmain\u002Fskills\u002Fvisual-assets\u002Fevals\u002Frouting.yaml",{"path":56,"resourceType":57,"resourceTypeDesc":58,"sizeBytes":59,"sourceHtmlUrl":60},"visual-assets.skill","OTHER","其他",3860,"https:\u002F\u002Fgithub.com\u002Fpoorvith-mp\u002Fskills-marketing\u002Fblob\u002Fmain\u002Fskills\u002Fvisual-assets\u002Fvisual-assets.skill",[62,69,75,81,87,93],{"skillNo":63,"name":64,"nameZh":6,"description":65,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":66,"categories":67,"keywords":68,"publishedAt":19},"01M792Y3WSAZ5ABHX58QPMWXMH","youtube-clipper","Moved to modernized catalog in skillary. Removed in v4.1.","https:\u002F\u002Fgithub.com\u002Fpoorvith-mp\u002Fskills-marketing\u002Fblob\u002Fmain\u002Fskills\u002Fyoutube-clipper\u002FSKILL.md",[],[],{"skillNo":70,"name":71,"nameZh":6,"description":65,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":72,"categories":73,"keywords":74,"publishedAt":19},"01M792Y1ABERS38QWQCJ9CKWJB","youtube-b-roll-maker","https:\u002F\u002Fgithub.com\u002Fpoorvith-mp\u002Fskills-marketing\u002Fblob\u002Fmain\u002Fskills\u002Fyoutube-b-roll-maker\u002FSKILL.md",[],[],{"skillNo":76,"name":77,"nameZh":6,"description":65,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":78,"categories":79,"keywords":80,"publishedAt":19},"01M792XZCWKZV16GNK3QQR9M2X","x-twitter-intelligence-analyst","https:\u002F\u002Fgithub.com\u002Fpoorvith-mp\u002Fskills-marketing\u002Fblob\u002Fmain\u002Fskills\u002Fx-twitter-intelligence-analyst\u002FSKILL.md",[],[],{"skillNo":82,"name":83,"nameZh":6,"description":65,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":84,"categories":85,"keywords":86,"publishedAt":19},"01M792XR5BZ510MFZETMPAAJBW","viral-hook-generator","https:\u002F\u002Fgithub.com\u002Fpoorvith-mp\u002Fskills-marketing\u002Fblob\u002Fmain\u002Fskills\u002Fviral-hook-generator\u002FSKILL.md",[],[],{"skillNo":88,"name":89,"nameZh":6,"description":65,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":90,"categories":91,"keywords":92,"publishedAt":19},"01M792XPJB02Q3HQTKKYZTKJ8A","video-script-writer","https:\u002F\u002Fgithub.com\u002Fpoorvith-mp\u002Fskills-marketing\u002Fblob\u002Fmain\u002Fskills\u002Fvideo-script-writer\u002FSKILL.md",[],[],{"skillNo":94,"name":95,"nameZh":6,"description":96,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":97,"categories":98,"keywords":99,"publishedAt":19},"01M792XJB37F2AF1V25NAAT4KW","video-production","Script and produce demos, explainers, UGC-style ads and avatar video. Use when scripting or producing product demos, walk-throughs, or videos.","https:\u002F\u002Fgithub.com\u002Fpoorvith-mp\u002Fskills-marketing\u002Fblob\u002Fmain\u002Fskills\u002Fvideo-production\u002FSKILL.md",[],[]]