cyber-garage — independently scanned and version-tracked by SaferSkills.
SaferSkills independently audited cyber-garage (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.
Production-tested design system extracted from a live SaaS platform. Provides exact design tokens and copy-paste CSS for building pixel-consistent dark-themed web UIs.
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@300;400;500;700&display=swap" rel="stylesheet">| Usage | Font | Weight | Size |
|---|---|---|---|
| Body text | Inter | 400 | 14px |
| Headings | Inter | 600-700 | 18-36px |
| Code / Data / Labels | JetBrains Mono | 400-700 | 11-13px |
| Section titles | JetBrains Mono | 600 | 12px uppercase letter-spacing: 0.1em |
| Badges / Buttons | JetBrains Mono | 500-700 | 11-12px |
| Big metric values | JetBrains Mono | 700 | 24-32px |
| Token | Value | Usage |
|---|---|---|
| body | #030710 | Page background |
| nav | rgba(3,7,16,0.85) | Nav (+ backdrop-filter: blur(16px)) |
| card | rgba(127,200,255,0.02) | Cards, sections |
| card-hover | rgba(127,200,255,0.06) | Hover states |
| modal | #0d1117 | Modal body |
| input | #0a0e1a | Form inputs |
| panel | #161b22 | Inset panels |
| overlay | rgba(0,0,0,0.75) | Modal overlay (+ backdrop-filter: blur(6px)) |
| Token | Value | Usage |
|---|---|---|
| primary | #e2e8f0 | Body text (never use pure #fff) |
| secondary | #c8d6e5 | Table cells |
| muted | #6b8299 | Labels, subtitles |
| dim | #4a6278 | Hints |
| dimmer | #3d4f63 | Footer notes |
| Token | Value | Usage |
|---|---|---|
| blue | #7fc8ff | Primary — links, values, brand (user pages) |
| gold | #facc15 | Admin — titles, active states |
| Token | Value |
|---|---|
| success | #4ade80 |
| warning | #facc15 |
| amber | #f59e0b |
| danger | #f87171 |
| info | #7fc8ff |
| purple | #c084fc |
| cyan | #06b6d4 |
| sky | #38bdf8 |
| teal | #34d399 |
| emerald | #10b981 |
| rose | #f43f5e |
| indigo | #6366f1 |
| Level | Value | Usage |
|---|---|---|
| subtle | rgba(127,200,255,0.06) | Cards |
| light | rgba(127,200,255,0.08) | Table headers |
| medium | rgba(127,200,255,0.12) | Modals |
| strong | rgba(127,200,255,0.15) | Buttons, inputs |
| glow | rgba(127,200,255,0.3) | Hover states |
Every page starts with:
<div class="neon-line"></div>.neon-line {
position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 101;
background: linear-gradient(90deg, transparent, #1E88E5 20%, #42A5F5 80%, transparent);
}
/* Admin variant: transparent, #eab308 20%, #facc15 80%, transparent */.container { max-width: 1200px; margin: 0 auto; padding: 80px 20px 40px; }| Pattern | CSS |
|---|---|
| Summary cards | grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px |
| 2-column | grid-template-columns: 1fr 1fr; gap: 16px |
| 3-column | grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 16px |
| Button row | display: flex; gap: 6-8px; flex-wrap: wrap |
@media (max-width: 768px) {
.container { padding: 72px 12px 24px; }
.summary-grid { grid-template-columns: repeat(2, 1fr); }
.summary-value { font-size: 24px; }
.chart-container { height: 220px; }
.hide-mobile { display: none; }
}text-shadow: 0 0 30px rgba(127,200,255,0.15); /* text glow */
box-shadow: 0 0 20px rgba(127,200,255,0.06); /* box hover */
box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 40px rgba(127,200,255,0.05); /* modal */<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>PAGE_TITLE</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@300;400;500;700&display=swap" rel="stylesheet">
<style>
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { background: #030710; color: #e2e8f0; font-family: 'Inter', sans-serif; min-height: 100vh; }
a { color: #7fc8ff; text-decoration: none; }
</style>
</head>
<body>
<div class="neon-line"></div>
<nav class="nav">
<a href="/" class="nav-brand">brand_</a>
<div class="nav-links"><a href="/" class="active">PAGE_TITLE</a></div>
</nav>
<div class="container">
<h1 class="page-title">PAGE_TITLE</h1>
<p class="page-subtitle">Description</p>
</div>
</body>
</html>Full CSS for all components: [references/COMPONENTS.md](references/COMPONENTS.md)
Quick list: Nav bar, page titles (gradient), summary cards, chart sections, data tables, badges (6 types), tab buttons, color-coded action buttons, toggle buttons, CTA buttons, config buttons, modals, form inputs, auth bar, status dots, alert banners, icon containers.
JetBrains Mono for ALL data, numbers, labels, section titles, badges, buttonsInter for body text, paragraphs, descriptions#fff — max is #e2e8f0rgba(127,200,255,...) with low opacityborder-radius: 12px, modals: 14px, buttons: 6-8px0.02 rest → 0.04-0.06 hover → 0.1-0.15 active0.06 subtle → 0.12 normal → 0.15-0.3 prominent#facc15; user pages = blue #7fc8ffbackdrop-filter: blur() — nav 16-20px, overlays 4-8px0.15s buttons, 0.2s links, 0.3s cardsCopyright (c) 2025-2026 Roman Antonov — [email protected] — github.com/roman-rr — roman-rr.github.io
~30 seconds. Free. No account. Every finding cites a rule and a line of evidence.