What is shadowrun-aesthetic?

Perfect for UI/UX Agents needing to create immersive cyberpunk interfaces with precision and density for Shadowrun character management tools. A tabletop RPG management system for Shadowrun with support for multiple editions (SR3, SR5), multiple interfaces (web and CLI), and extensibility for future editions.

How do I install shadowrun-aesthetic?

Run the command: npx killer-skills add Jasrags/ShadowMaster/shadowrun-aesthetic. It works with Cursor, Windsurf, VS Code, Claude Code, and 19+ other IDEs.

What are the use cases for shadowrun-aesthetic?

Key use cases include: Designing neon-lit interfaces for web and CLI applications, Creating character management tools with a Shadowrun theme, Developing extensible UI components for multiple Shadowrun editions.

Which IDEs are compatible with shadowrun-aesthetic?

This skill is compatible with Cursor, Windsurf, VS Code, Trae, Claude Code, OpenClaw, Aider, Codex, OpenCode, Goose, Cline, Roo Code, Kiro, Augment Code, Continue, GitHub Copilot, Sourcegraph Cody, and Amazon Q Developer. Use the Killer-Skills CLI for universal one-command installation.

Are there any limitations for shadowrun-aesthetic?

Requires knowledge of web development technologies (HTML, CSS, JavaScript). Limited to Shadowrun-themed applications. May require additional design tools or software for advanced visual effects.

Shadowrun UI Aesthetic

Name: shadowrun-aesthetic
Availability: InStock
Author: Jasrags

This skill guides the creation of distinctive, production-grade UI that captures the cyberpunk aesthetic of Shadowrun while maintaining the usability required for a character management tool.

Design Philosophy

The Sixth World aesthetic: Corporate sleek meets street grit. Neon-lit interfaces emerging from darkness. Information density without visual clutter. Technology that feels both advanced and worn.

Balance two forces:

Precision & Density - Users spend hours in character creation; every pixel matters
Cyberpunk Atmosphere - The UI should feel like a runner's commlink interface

Color System

Primary Palette (Dark Mode Dominant)

css
1/* Backgrounds - layered darkness */
2--bg-base: #09090b; /* zinc-950 - deepest layer */
3--bg-elevated: #18181b; /* zinc-900 - cards, panels */
4--bg-surface: #27272a; /* zinc-800 - interactive surfaces */
5--bg-hover: #3f3f46; /* zinc-700 - hover states */
6
7/* Text hierarchy */
8--text-primary: #fafafa; /* zinc-50 - headings, important */
9--text-secondary: #a1a1aa; /* zinc-400 - body text */
10--text-muted: #71717a; /* zinc-500 - labels, hints */
11
12/* Borders */
13--border-subtle: #27272a; /* zinc-800 */
14--border-default: #3f3f46; /* zinc-700 */
15--border-emphasis: #52525b; /* zinc-600 */

Accent Colors (Signature Shadowrun)

css
1/* Matrix Green - Primary accent for tech/positive */
2--accent-matrix: #00ff41;
3--accent-matrix-dim: #00cc34;
4--accent-matrix-glow: rgba(0, 255, 65, 0.15);
5
6/* Corp Blue - Secondary accent, professional */
7--accent-corp: #0ea5e9; /* sky-500 */
8--accent-corp-dim: #0284c7;
9
10/* Warning/Danger */
11--accent-warning: #f59e0b; /* amber-500 */
12--accent-danger: #ef4444; /* red-500 */
13
14/* Magic Purple - For awakened content */
15--accent-magic: #a855f7; /* purple-500 */
16
17/* Resonance Cyan - For technomancer content */
18--accent-resonance: #22d3ee; /* cyan-400 */

Usage Guidelines

Matrix green for: success states, positive qualities, essence, magic rating
Corp blue for: links, selected states, primary actions
Warning amber for: budget overruns, caution states, negative qualities
Danger red for: errors, forbidden items, damage
Magic purple for: spells, rituals, foci, astral content
Resonance cyan for: complex forms, sprites, matrix content

Typography

Font Stack

css
1/* Body/UI - Clean, technical */
2font-family:
3  ui-sans-serif,
4  system-ui,
5  -apple-system,
6  sans-serif;
7
8/* Stats & Numbers - ALWAYS monospace */
9font-family: ui-monospace, "SF Mono", "Fira Code", monospace;

Hierarchy Rules

Card titles: text-lg font-semibold - zinc-100
Section headers: text-sm font-medium uppercase tracking-wide - zinc-400
Body text: text-sm - zinc-300
Labels: text-xs font-medium - zinc-500
Stats/Numbers: font-mono text-base font-bold - zinc-100

Critical Rule: Monospace for Data

All numerical data MUST use monospace:

Attribute values (BOD: 4)
Skill ratings
Costs (nuyen, karma, essence)
Dice pools
Damage codes

Spacing & Grid

4px Base Grid

All spacing uses multiples of 4px:

gap-1 (4px) - between inline elements
gap-2 (8px) - between related items
gap-3 (12px) - between sections within a card
gap-4 (16px) - between cards
p-4 (16px) - card padding
p-3 (12px) - compact card padding

Card Patterns

tsx
1// Standard creation card
2<div className="rounded-lg border border-zinc-800 bg-zinc-900 p-4">
3  <div className="mb-3 flex items-center justify-between">
4    <h3 className="text-lg font-semibold text-zinc-100">Card Title</h3>
5    <button className="text-sky-400 hover:text-sky-300">Action</button>
6  </div>
7  {/* Content */}
8</div>
9
10// Elevated/modal surfaces
11<div className="rounded-lg border border-zinc-700 bg-zinc-800 p-4 shadow-xl">

Component Patterns

Stat Blocks

tsx
1// Attribute display - grid-based, monospace values
2<div className="grid grid-cols-3 gap-2">
3  <div className="rounded border border-zinc-700 bg-zinc-800 p-2 text-center">
4    <div className="text-xs font-medium uppercase text-zinc-500">BOD</div>
5    <div className="font-mono text-xl font-bold text-zinc-100">4</div>
6  </div>
7</div>

Budget/Progress Bars

tsx
1// Essence/Karma/Nuyen tracking
2<div className="rounded-lg border border-zinc-700 bg-zinc-800 p-3">
3  <div className="flex justify-between text-sm">
4    <span className="text-zinc-400">Essence</span>
5    <span className="font-mono font-bold text-emerald-400">5.4 / 6.0</span>
6  </div>
7  <div className="mt-2 h-2 overflow-hidden rounded-full bg-zinc-700">
8    <div className="h-full bg-emerald-500" style={{ width: '90%' }} />
9  </div>
10</div>
11
12// Over-budget state
13<div className="rounded-lg border border-amber-800 bg-amber-900/20 p-3">
14  <span className="font-mono font-bold text-amber-400">-15 Karma</span>
15</div>

List Items (Skills, Gear, Qualities)

tsx
1// Compact list row
2<div className="flex items-center justify-between rounded px-2 py-1.5 hover:bg-zinc-800">
3  <div className="flex items-center gap-2">
4    <span className="text-sm text-zinc-200">Firearms</span>
5    <span className="text-xs text-zinc-500">(Pistols)</span>
6  </div>
7  <span className="font-mono text-sm font-bold text-zinc-100">6</span>
8</div>
9
10// With rating controls
11<div className="flex items-center gap-2">
12  <button className="rounded p-1 text-zinc-400 hover:bg-zinc-700 hover:text-zinc-200">
13    <Minus className="h-4 w-4" />
14  </button>
15  <span className="w-8 text-center font-mono font-bold">4</span>
16  <button className="rounded p-1 text-zinc-400 hover:bg-zinc-700 hover:text-zinc-200">
17    <Plus className="h-4 w-4" />
18  </button>
19</div>

Modals

tsx
1// Modal overlay - use React Aria for accessibility
2<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/70 backdrop-blur-sm">
3  <div className="max-h-[85vh] w-full max-w-2xl overflow-hidden rounded-lg border border-zinc-700 bg-zinc-900 shadow-2xl">
4    {/* Header */}
5    <div className="flex items-center justify-between border-b border-zinc-800 p-4">
6      <h2 className="text-lg font-semibold text-zinc-100">Modal Title</h2>
7      <button className="rounded p-1 text-zinc-400 hover:bg-zinc-800 hover:text-zinc-200">
8        <X className="h-5 w-5" />
9      </button>
10    </div>
11    {/* Content */}
12    <div className="max-h-[60vh] overflow-y-auto p-4">{/* Scrollable content */}</div>
13    {/* Footer */}
14    <div className="flex justify-end gap-2 border-t border-zinc-800 p-4">
15      <button className="rounded-lg bg-zinc-700 px-4 py-2 text-sm font-medium text-zinc-200 hover:bg-zinc-600">
16        Cancel
17      </button>
18      <button className="rounded-lg bg-sky-600 px-4 py-2 text-sm font-medium text-white hover:bg-sky-500">
19        Confirm
20      </button>
21    </div>
22  </div>
23</div>

Category Tabs

tsx
1// Gear/Equipment category selection
2<div className="flex gap-1 rounded-lg border border-zinc-700 bg-zinc-800 p-1">
3  <button className="rounded-md bg-sky-600 px-3 py-1.5 text-sm font-medium text-white">
4    Weapons
5  </button>
6  <button className="rounded-md px-3 py-1.5 text-sm font-medium text-zinc-400 hover:bg-zinc-700 hover:text-zinc-200">
7    Armor
8  </button>
9  <button className="rounded-md px-3 py-1.5 text-sm font-medium text-zinc-400 hover:bg-zinc-700 hover:text-zinc-200">
10    Cyberware
11  </button>
12</div>

Cyberpunk Accents (Use Sparingly)

Subtle Glow Effects

tsx
1// For selected/active states only
2<div className="border-sky-500 shadow-[0_0_10px_rgba(14,165,233,0.3)]">
3
4// For important values (essence, magic)
5<span className="text-emerald-400 drop-shadow-[0_0_4px_rgba(52,211,153,0.5)]">

Tech Panel Borders

tsx
1// Accent corner for "high-tech" feel
2<div className="relative rounded-lg border border-zinc-700 bg-zinc-900">
3  <div className="absolute -top-px left-4 h-px w-8 bg-sky-500" />
4  <div className="absolute -left-px top-4 h-8 w-px bg-sky-500" />
5  {/* Content */}
6</div>

Neon Card System (Dashboard & Lists)

The neon card system provides archetype-based visual identity with automatic light/dark mode adaptation. Defined in app/globals.css.

Archetype Colors (CSS Variables)

css
1/* Available in :root and .dark with different intensities */
2--accent-mage: #8b5cf6; /* Purple - full mages, aspected mages */
3--accent-sam: #10b981; /* Green - street samurai, mundane */
4--accent-rigger: #06b6d4; /* Cyan - riggers */
5--accent-decker: #3b82f6; /* Blue - deckers, technomancers */
6--accent-face: #f59e0b; /* Amber - faces, adepts */
7--accent-campaign: #6366f1; /* Indigo - campaigns */

Neon Card Classes

tsx
1// Base neon card - includes ::before accent bar
2<div className="neon-card">
3  {/* Content */}
4</div>
5
6// Archetype-specific cards (add glow effect)
7<div className="neon-card neon-card-mage">   {/* Purple glow */}
8<div className="neon-card neon-card-sam">    {/* Green glow */}
9<div className="neon-card neon-card-rigger"> {/* Cyan glow */}
10<div className="neon-card neon-card-decker"> {/* Blue glow */}
11<div className="neon-card neon-card-face">   {/* Amber glow */}
12<div className="neon-card neon-card-campaign">{/* Indigo glow */}

Archetype Detection Helper

typescript
1import { Character } from "@/lib/types";
2
3function getArchetypeCardClass(character: Character): string {
4  const path = character.magicalPath;
5  // Awakened - mage glow
6  if (path === "full-mage" || path === "aspected-mage" || path === "explorer") {
7    return "neon-card-mage";
8  }
9  // Adept - face/amber glow
10  if (path === "adept") {
11    return "neon-card-face";
12  }
13  // Technomancer - decker/blue glow
14  if (path === "technomancer") {
15    return "neon-card-decker";
16  }
17  // Mundane - sam/green glow (default)
18  return "neon-card-sam";
19}
20
21// Usage
22<div className={`neon-card ${getArchetypeCardClass(character)}`}>

Visual Dividers

tsx
1// Neon divider with diamond center
2<div className="neon-divider" />
3
4// Section title with accent underline
5<h2 className="section-title-accent">My Characters</h2>
6
7// Alert banner with accent top bar
8<div className="alert-banner-accent">
9  Important message here
10</div>

Grid Background

tsx
1// Subtle tech grid overlay (use on containers)
2<div className="bg-grid">{/* Dashboard content */}</div>

Stat Value Colors

tsx
1<span className="stat-karma">25</span>    {/* Purple karma values */}
2<span className="stat-nuyen">5,000¥</span> {/* Green nuyen values */}
3<span className="stat-essence">5.4</span>  {/* Cyan essence values */}

Light vs Dark Mode Behavior

Light mode: Subtle shadows, muted accent bars, professional appearance
Dark mode: Full neon glow effects, vibrant accent colors, cyberpunk atmosphere

The CSS variables automatically adjust intensity based on theme.

Anti-Patterns (AVOID)

Generic Bootstrap/Material look - No default rounded buttons with solid colors
Excessive glow/neon - Reserve for key interactive moments
Light mode defaults - Dark mode is primary; light mode should still feel "tech"
Sans-serif for numbers - ALWAYS use monospace for stats
Fantasy RPG styling - No parchment textures, serif fonts, or medieval iconography
Cluttered dense layouts - Use whitespace strategically
Asymmetric padding - Maintain consistent internal spacing
Multiple accent colors at once - One accent per component

File Reference

Key existing patterns to follow:

app/globals.css - Neon card system, archetype colors, glow effects, grid patterns
app/page.tsx - Dashboard with neon cards and archetype detection
components/creation/shared/CreationCard.tsx - Card wrapper pattern
components/creation/SkillsCard.tsx - Modal-based editing
components/creation/AugmentationsCard.tsx - Category tabs + list
app/characters/create/sheet/components/SheetCreationLayout.tsx - Three-column layout

Quick Reference: Tailwind Classes

Backgrounds:  bg-zinc-950, bg-zinc-900, bg-zinc-800, bg-grid
Borders:      border-zinc-800, border-zinc-700
Text:         text-zinc-100, text-zinc-300, text-zinc-400, text-zinc-500
Accents:      text-sky-400, text-emerald-400, text-amber-400, text-purple-400
Hover:        hover:bg-zinc-800, hover:bg-zinc-700
Focus:        focus:ring-2 focus:ring-sky-500 focus:ring-offset-2 focus:ring-offset-zinc-900

Neon Cards:   neon-card, neon-card-mage, neon-card-sam, neon-card-rigger,
              neon-card-decker, neon-card-face, neon-card-campaign
Dividers:     neon-divider, section-title-accent, alert-banner-accent
Stats:        stat-karma, stat-nuyen, stat-essence

shadowrun-aesthetic — community shadowrun-aesthetic, ShadowMaster, community, ide skills, Claude Code, Cursor, Windsurf

About this Skill

Agent Capability Analysis

Ideal Agent Persona

Core Value

↓ Capabilities Granted for shadowrun-aesthetic

! Prerequisites & Limits

Browser Sandbox Environment

⚡️ Ready to unleash?

shadowrun-aesthetic