roman-rr/ui-skills/cyber-garage

Claude Code and agent skill by roman-rr/ui-skills

Trust tier 3
  • community
Source check pending

Checking that the SKILL.md file is still in the repository.

Builds dark cyberpunk web interfaces with a production-tested design system. Provides exact colors, typography, component CSS, layout grids, and page templates. Use when the user asks to build dashboards, admin panels, dark-themed pages, trading UIs, or any web interface with a cyberpunk aesthetic.

Install

npx vskill@latest install roman-rr/ui-skills/cyber-garage

SKILL.md

Cyber Garage — Dark Cyberpunk Design System

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.

Fonts

html
<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">
UsageFontWeightSize
Body textInter40014px
HeadingsInter600-70018-36px
Code / Data / LabelsJetBrains Mono400-70011-13px
Section titlesJetBrains Mono60012px uppercase letter-spacing: 0.1em
Badges / ButtonsJetBrains Mono500-70011-12px
Big metric valuesJetBrains Mono70024-32px

Color Palette

Backgrounds
TokenValueUsage
body#030710Page background
navrgba(3,7,16,0.85)Nav (+ backdrop-filter: blur(16px))
cardrgba(127,200,255,0.02)Cards, sections
card-hoverrgba(127,200,255,0.06)Hover states
modal#0d1117Modal body
input#0a0e1aForm inputs
panel#161b22Inset panels
overlayrgba(0,0,0,0.75)Modal overlay (+ backdrop-filter: blur(6px))
Text
TokenValueUsage
primary#e2e8f0Body text (never use pure #fff)
secondary#c8d6e5Table cells
muted#6b8299Labels, subtitles
dim#4a6278Hints
dimmer#3d4f63Footer notes
Accents
TokenValueUsage
blue#7fc8ffPrimary — links, values, brand (user pages)
gold#facc15Admin — titles, active states
Semantic Colors
TokenValue
success#4ade80
warning#facc15
amber#f59e0b
danger#f87171
info#7fc8ff
purple#c084fc
cyan#06b6d4
sky#38bdf8
teal#34d399
emerald#10b981
rose#f43f5e
indigo#6366f1
Border Opacity Scale
LevelValueUsage
subtlergba(127,200,255,0.06)Cards
lightrgba(127,200,255,0.08)Table headers
mediumrgba(127,200,255,0.12)Modals
strongrgba(127,200,255,0.15)Buttons, inputs
glowrgba(127,200,255,0.3)Hover states

Neon Top Line

Every page starts with:

html
<div class="neon-line"></div>
css
.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 */

Layout

css
.container { max-width: 1200px; margin: 0 auto; padding: 80px 20px 40px; }
PatternCSS
Summary cardsgrid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px
2-columngrid-template-columns: 1fr 1fr; gap: 16px
3-columngrid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 16px
Button rowdisplay: flex; gap: 6-8px; flex-wrap: wrap
Mobile (768px)
css
@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; }
}

Glow Effects

css
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 */

Page Skeleton

html
<!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>

Component Library

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.

Rules

  1. JetBrains Mono for ALL data, numbers, labels, section titles, badges, buttons
  2. Inter for body text, paragraphs, descriptions
  3. NEVER use pure white #fff — max is #e2e8f0
  4. NEVER use solid black borders — always rgba(127,200,255,...) with low opacity
  5. Cards: border-radius: 12px, modals: 14px, buttons: 6-8px
  6. Background opacity: 0.02 rest → 0.04-0.06 hover → 0.1-0.15 active
  7. Border opacity: 0.06 subtle → 0.12 normal → 0.15-0.3 prominent
  8. Admin pages = gold #facc15; user pages = blue #7fc8ff
  9. Modals close on overlay click
  10. backdrop-filter: blur() — nav 16-20px, overlays 4-8px
  11. Always include the neon-line at top of every page
  12. Transitions: 0.15s buttons, 0.2s links, 0.3s cards

Copyright (c) 2025-2026 Roman Antonov — romwtb@gmail.com — github.com/roman-rr — roman-rr.github.io

Security

  • Security scanPassed, 90 of 100Pattern checks on the skill's files.
  • Model reviewPassed

See the full security report

Quality evaluation

  • Task evaluationNot runNo evaluation yet. Run one in Skill Studio.

See evaluation results

Source

Popularity

7-day trend score
0

Not refreshed yet.

Works with

Any agent vskill installs to: 56 targets in all. These 39 have a page on this site.

  • Claude Code
  • Cursor
  • GitHub Copilot
  • Windsurf
  • Codex
  • Gemini CLI
  • Cline
  • Amp
  • Roo Code
  • Goose
  • Continue
  • Kilo Code
  • Junie
  • Trae
  • OpenHands
  • Qwen Code
  • AI Agent
  • Tabnine Chat
  • Sourcegraph Cody
  • Amazon Q
  • Firebase Genkit
  • Sweep
  • Devin
  • Phind
  • Mentat
  • Claude Desktop
  • Aider
  • GPT Pilot
  • Plandex
  • bolt.new
  • v0
  • Replit Agent
  • Anse
  • TypingMind
  • BetterChatGPT
  • LibreChat
  • Warp AI
  • Pieces
  • Fig AI
Embed badge
vskill VERIFIED badge
[![vskill VERIFIED](https://verified-skill.com/api/v1/skills/roman-rr/ui-skills/cyber-garage/badge)](https://verified-skill.com/skills/roman-rr/ui-skills/cyber-garage)

Something wrong with this skill or its page? Tell us.