메뉴
Use when generating a hero/cover image for a new blog post on dalenguyen.me. Triggers on "generate hero image", "create cover image", "blog hero", or when a new post needs a coverImage asset.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
This skill should be used when adding interactive elements — charts, sliders, step-through diagrams, or any custom Angular widget — to a markdown blog post in apps/blog-app (the AnalogJS blog on dalenguyen.me). It documents the placeholder + co-located manifest + glob auto-discovery + dynamic-mount architecture, the reusable BarChartComponent, and the non-obvious gotchas (escaping inline tags, ShadowDom, SSR-safety) needed to ship a working interactive post.
Use when asked to check, audit, or improve Google Search Console indexing/SEO for dalenguyen.me — e.g. "check search console", "why aren't my pages indexed", "improve SEO", "audit indexing", or "/search-console-audit". Investigates indexing gaps, finds root causes in the blog-app source, fixes them, deploys, and resubmits the sitemap.
This skill should be used when the user asks to post or publish a blog post to dev.to. It automates opening the dev.to new post editor in Chrome via the chrome-devtools MCP, filling in the title, tags, and content, and saving as a draft for review before publishing.
This skill should be used when the user asks to post or publish a blog post to Medium. It automates opening the Medium new story editor via CloakBrowser (stealth Chromium), filling in title and content from the rendered blog URL, and saving as a draft for review before publishing.
Use when asked to create a social media post, LinkedIn post, X thread, or shareable infographic about a technical topic. Generates a single HTML file containing a screenshot-friendly dark-themed infographic at the top plus copy-ready LinkedIn long-form and X thread drafts below — all in one deliverable. Triggers on phrases like "create a LinkedIn post", "make an X thread", "social media post about X", "shareable post for", "infographic post", or "/social-media-post".
Use when asked to turn an article, blog post, documentation page, or URL into an interactive HTML learning experience. Triggers on phrases like "make this interactive", "turn this into a learning page", "interactive breakdown of", "teach me X interactively".
| name | blog-hero-image |
| description | Use when generating a hero/cover image for a new blog post on dalenguyen.me. Triggers on "generate hero image", "create cover image", "blog hero", or when a new post needs a coverImage asset. |
Generates a 1200×630 PNG hero image using Python Pillow. Dark terminal-aesthetic design with a left text column and right terminal-window panel. Output goes to libs/portfolio/shared/assets/images/blog/<slug>.png.
| Token | Value | Purpose |
|---|---|---|
| Canvas | 1200×630 px | Standard OG/blog cover |
| BG | #0d1117 | GitHub dark background |
| Panel | #161b22 | Terminal window fill |
| Border | #30363d | Subtle panel border |
| Green | #4ade80 | Primary accent (titles, badges) |
| Blue | #60a5fa | Secondary glow |
| Orange | #fb923c | Warning / no-cloud badge |
| FG Hi | #f0f6fc | Main title text |
| FG Mid | #8b949e | Subtitle, tags |
| FG Dim | #6e7681 | Comments, author |
| Code Blue | #79c0ff | Variable names |
| Code Str | #a8d8a8 | String literals |
| Font (UI) | /System/Library/Fonts/SFNS.ttf | Titles, subtitle, tags |
| Font (Mono) | /System/Library/Fonts/SFNSMono.ttf | Code, badges |
┌─────────────────────────────────────────────────────────────┐
│ grid overlay (40px, rgba green) │
│ │
│ [Series badge] ┌──────────────────────────────────┐ │
│ Title line 1 │ ● ● ● filename.py │ │
│ Title line 2 (green) │ │ │
│ Title line 3 │ # comment │ │
│ │ client = OpenAI(...) │ │
│ Subtitle text │ ... │ │
│ │ ✓ 100% local · $0.00/token │ │
│ [tag] [tag] [tag] └──────────────────────────────────┘ │
│ ┌── no-cloud badge (orange) ────────┐ │
│ └───────────────────────────────────┘ │
│─────────────────────────────────────────────────────────────│
│ D Dale Nguyen dalenguyen.me │
└─────────────────────────────────────────────────────────────┘
from PIL import Image, ImageDraw, ImageFont
W, H = 1200, 630
img = Image.new('RGB', (W, H), hex_to_rgb('#0d1117'))
d = ImageDraw.Draw(img, 'RGBA')
# Load fonts
f_title = ImageFont.truetype('/System/Library/Fonts/SFNS.ttf', 62)
f_sub = ImageFont.truetype('/System/Library/Fonts/SFNS.ttf', 17)
f_code = ImageFont.truetype('/System/Library/Fonts/SFNSMono.ttf', 12)
f_badge = ImageFont.truetype('/System/Library/Fonts/SFNSMono.ttf', 13)
# Save
img.save('libs/portfolio/shared/assets/images/blog/<slug>.png', 'PNG')
Swap these three things for each new post:
'● PORTWAY SERIES · POST N'categories frontmatterlibs/portfolio/shared/assets/images/blog/<slug>.png
coverImage frontmatter: https://dalenguyen.me/assets/images/blog/<slug>.png
Draw concentric ellipses with decreasing alpha to fake radial gradients:
def glow_orb(draw, cx, cy, r, color_rgb, steps=40, max_alpha=30):
for i in range(steps, 0, -1):
t = i / steps
a = int(max_alpha * (1 - t)**1.5)
rr = int(r * t)
draw.ellipse([cx-rr, cy-rr, cx+rr, cy+rr], fill=(*color_rgb, a))
glow_orb(d, 1050, -60, 480, GREEN, max_alpha=25) # top-right green
glow_orb(d, -80, 700, 380, BLUE, max_alpha=18) # bottom-left blue
# Outer rounded rect (panel)
d.rounded_rectangle([TX, TY, TX+TW, TY+panel_h], radius=10,
fill=PANEL, outline=BORDER)
# Title bar
d.rounded_rectangle([TX, TY, TX+TW, TY+38], radius=10, fill=(33,38,45,255))
d.rectangle([TX, TY+20, TX+TW, TY+38], fill=(33,38,45,255))
d.line([(TX, TY+38), (TX+TW, TY+38)], fill=BORDER)
# Traffic lights
for i, c in enumerate([DOT_RED, DOT_YEL, DOT_GRN]):
cx = TX + 18 + i*22
d.ellipse([cx-6, TY+13, cx+6, TY+25], fill=c)
Never split a key-value pair across two lines to apply different colors. It looks broken in the output (value drops to the next line visually).
Instead, represent each line as a list of (text, color) segments and render them inline:
# Each entry is a list of (text, color) tuples — one per line
code_lines = [
[('// comment', FG_DIM)],
[('{', FG_HI)],
[(' "key": ', C_BLUE), ('"value",', C_STR)], # ✅ inline, two colors
[(' "flag": ', C_BLUE), ('true,', FG_HI)],
]
cy = TY + 48
for segments in code_lines:
cx = TX + 16
for text, color in segments:
d.text((cx, cy), text, font=f_code, fill=color)
cx += d.textlength(text, font=f_code) # advance x after each segment
cy += line_h
This keeps key and value on the same line with distinct colors. Use d.textlength(text, font=f_code) to advance cx after each segment.
For a post series, keep all posts visually consistent: