github-repo-visual-assets — independently scanned and version-tracked by SaferSkills.
SaferSkills independently audited github-repo-visual-assets (Agent Skill) and scored it 100/100 (green). The audit ran 55 deterministic rules across Security, Supply Chain, Maintenance, Transparency, and Community; it found 0 high-severity and 0 lower-severity findings. The full rule-by-rule trace and per-finding evidence are below. Free, methodology-open.
Findings & checks · 0 flagged
Every scanned point with the score it earned and what moved between them.
First recorded scan — no prior version to compare against.
The primary manifest — the file an agent reads to learn what this artifact does.
Create professional visual assets for GitHub repositories to improve presentation, social sharing, and documentation quality.
Best suited for:
Assets covered:
Use semantic color mapping for technical components:
| Component Type | Fill (rgba) | Stroke (Hex) | Use Case |
|---|---|---|---|
| Frontend/Agent | rgba(8, 51, 68, 0.4) | #22d3ee (cyan-400) | UI, client-side, agents |
| Backend/Storage | rgba(6, 78, 59, 0.4) | #34d399 (emerald-400) | APIs, servers, storage |
| Database/Backup | rgba(76, 29, 149, 0.4) | #a78bfa (violet-400) | Databases, backups |
| Cloud/External | rgba(120, 53, 15, 0.3) | #fbbf24 (amber-400) | Cloud services, external |
#0f172a (slate-950)#1e293b (slate-800)#334155 (slate-700)#1e293b linesmkdir -p assets/{diagrams,images,social}Create three HTML files with inline CSS/SVG:
assets/diagrams/architecture.html)assets/social/social-card.html)assets/images/banner.html)CRITICAL: Always let user review visual assets before pushing to GitHub.
Review workflow:
Why: Visual assets represent the project's brand. User must approve design before it goes public.
Use headless browser to convert HTML to PNG:
# Chrome (recommended)
google-chrome --headless --screenshot=architecture.png --window-size=1200,800 assets/diagrams/architecture.html
google-chrome --headless --screenshot=social-card.png --window-size=1200,630 assets/social/social-card.html
google-chrome --headless --screenshot=banner.png --window-size=1200,300 assets/images/banner.html
# Firefox (alternative)
firefox --headless --screenshot architecture.png --window-size=1200,800 assets/diagrams/architecture.html
firefox --headless --screenshot social-card.png --window-size=1200,630 assets/social/social-card.html
firefox --headless --screenshot banner.png --window-size=1200,300 assets/images/banner.html
# Move PNGs to assets
mv architecture.png assets/diagrams/
mv social-card.png assets/social/
mv banner.png assets/images/Add visual assets to README.md:
# Project Title
Description...
## Architecture
assets/social/social-card.pngNow when shared on Twitter/LinkedIn, the card appears automatically.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Architecture Diagram</title>
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;600&display=swap" rel="stylesheet">
<style>
/* Dark theme styles */
body { font-family: 'JetBrains Mono', monospace; background: #020617; }
/* Component boxes, arrows, legend */
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>System Architecture</h1>
</div>
<div class="diagram-card">
<svg viewBox="0 0 1200 800">
<!-- Grid, arrows, components -->
</svg>
</div>
<div class="info-grid">
<!-- Info cards -->
</div>
</div>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Social Card</title>
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;600;700&display=swap" rel="stylesheet">
<style>
/* 1200x630 card with gradient background */
.card { width: 1200px; height: 630px; }
</style>
</head>
<body>
<div class="card">
<div class="content">
<div class="header">
<div class="icon">🧠</div>
<h1>Project Title</h1>
</div>
<div class="tagline">Key value proposition</div>
<div class="features">
<!-- 4 feature boxes -->
</div>
<div class="footer">
<!-- Badges + URL -->
</div>
</div>
</div>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Banner</title>
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;600;700&display=swap" rel="stylesheet">
<style>
/* 1200x300 banner */
.banner { width: 1200px; height: 300px; }
</style>
</head>
<body>
<div class="banner">
<div class="content">
<div class="logo-section">
<div class="logo">🧠</div>
<h1>Project Title</h1>
</div>
<div class="tagline">Key features</div>
<div class="badges">
<!-- Feature badges -->
</div>
</div>
</div>
</body>
</html>Problem: User wants to review visual assets before they go public. Solution: Always send HTML files to user first, wait for approval, then convert and push.
Problem: Social media platforms have specific size requirements. Solution: Use standard sizes:
Problem: HTML files don't load fonts offline. Solution: Include Google Fonts CDN link in <head>. Files work offline after first load (browser cache).
Problem: Colors/fonts don't match across assets. Solution: Use the design system color palette and JetBrains Mono font consistently.
Problem: User doesn't know how to use the HTML files. Solution: Always create assets/README.md with:
See references/mnemosyne-obsidian-example.md for a complete example from the mnemosyne-obsidian repository.
~30 seconds. Free. No account. Every finding cites a rule and a line of evidence.