القائمة
Use when a project needs favicon files created. Triggers include "favicon", "site icon", "browser tab icon", "apple-touch-icon". Covers SVG favicon design and ICO generation.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
Post content from a stage:ready content queue issue to all target channels via Buffer API. Use when a content queue item is ready to distribute, or when user says "distribute", "post this", "send to socials".
Review and curate mined content queue items. Use when user says "curate", "what's in my content queue?", "review content ideas", or "/curate".
Create social media posts promoting blog posts, project milestones, or announcements. Use when user says "social post", "promote this", "share on social", "tweet this", or after publishing a blog post. Matches the blog's voice (second person, direct, Anishinaabemowin greetings where appropriate) and includes real data/results when available.
Draft a Hugo blog post and accompanying social copy from a curated content queue issue. Use when a content queue item is ready for writing, or when user says "produce", "write the post", "draft this".
Launch the Brain Monitor TUI, a real-time terminal dashboard for watching Claudia's memory system. Triggers on "brain monitor", "show dashboard", "memory dashboard", "terminal brain".
Launch the Brain Visualizer, a real-time 3D view of memory and relationships. Triggers on "show your brain", "visualize memory", "open the brain", "memory graph".
| name | generating-favicons |
| description | Use when a project needs favicon files created. Triggers include "favicon", "site icon", "browser tab icon", "apple-touch-icon". Covers SVG favicon design and ICO generation. |
Create favicons using inline SVG for modern browsers and convert to ICO for legacy support. SVG favicons support dark mode via prefers-color-scheme.
| File | Purpose | Size |
|---|---|---|
icon.svg | Modern browsers (scalable) | Any viewBox |
favicon.ico | Legacy browsers | 32x32 or 16x16+32x32 |
apple-touch-icon.png | iOS home screen | 180x180 |
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/img/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/img/apple-touch-icon.png">
Design at a small viewBox (32x32 or 64x64). Keep shapes simple — favicons are tiny.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
<!-- Background -->
<rect width="64" height="64" rx="12" fill="#0f1117"/>
<!-- Simple letterform or icon -->
<text x="32" y="46" text-anchor="middle"
font-family="system-ui, sans-serif" font-weight="800"
font-size="40" fill="#f59e0b">W</text>
<!-- Optional dark mode support -->
<style>
@media (prefers-color-scheme: light) {
rect { fill: #f59e0b; }
text { fill: #0f1117; }
}
</style>
</svg>
Use Playwright to screenshot the SVG at 32x32, or use ImageMagick:
# ImageMagick
convert icon.svg -resize 32x32 favicon.ico
# Playwright (if no ImageMagick)
# Render SVG in browser at 32x32 viewport, screenshot as PNG
# Then use sharp or jimp to convert PNG→ICO
| Mistake | Fix |
|---|---|
| Complex artwork at 16px | Simplify to letterform or geometric shape |
| Custom fonts in SVG | Use system fonts — custom fonts won't load |
Missing xmlns attribute | Required for standalone SVG files |
Forgetting sizes="any" on ico link | Tells browser ico is fallback, prefer SVG |