skills.rest
wk-j
wk-jCOMMUNITY
Explore all skills by this author →
GitHub

cyberpunk-aesthetic

Standardize Krypton UI aesthetics with design constraints for colors, typography, and effects.

1|1|Updated Mar 7, 2026
Search Tags:#css#design-system#cyberpunk#aesthetic-guidelines#ui-theme#krypton
One-click install
npx skills add https://github.com/wk-j/krypton --skill cyberpunk-aesthetic
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: cyberpunk-aesthetic
Source: https://github.com/wk-j/krypton/tree/main/.claude/skills/cyberpunk-aesthetic
Command: npx skills add https://github.com/wk-j/krypton --skill cyberpunk-aesthetic

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Establishes and preserves Krypton’s cyberpunk UI style across themes by codifying visual chrome, CSS effects, and component consistency, so teams can prototype new modes with a shared reference.

Core Features & Use Cases

  • UI style reference: Documents primary color system, glow recipes, scanline textures, and window chrome rules to ensure consistent aesthetics across features.
  • Design governance: Serves as a checklist when building or validating new components, themes, and UI modes against the established cyberpunk look.
  • Guided prototyping: Provides concrete guidelines for typography, transparency, shadows, and animations to accelerate design decisions.

Quick Start

Load the cyberpunk aesthetic reference when prototyping a Krypton UI style to ensure visuals align with the established chrome.

Frequently Asked Questions about cyberpunk-aesthetic

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I standardize a cyberpunk UI aesthetic across multiple components?▼

Standardize a cyberpunk UI aesthetic by applying codified constraints for color tokens, typography, transparency, glow, and animation rules. This establishes consistent chrome and visual styling across all UI components to prevent design drift.

What design tokens do I need for a cyberpunk theme?▼

Design tokens for a cyberpunk theme require specified primary color systems, glow recipes, and scanline textures. You must also define constraints for typography, transparency, shadows, and animation rules to ensure consistent visual chrome.

Can I use this aesthetic reference to validate new UI themes?▼

You can validate new UI themes by using the aesthetic reference as a design governance checklist. It allows you to check new components, themes, and UI modes against established cyberpunk visual rules and CSS styling constraints.

How do I apply CSS styling rules when prototyping a cyberpunk interface?▼

Apply CSS styling rules by loading the aesthetic reference during prototyping to guide visual decisions. It provides concrete guidelines for typography, transparency, shadows, and animations so your interface aligns with established cyberpunk chrome.

Why does my cyberpunk UI design drift across different features?▼

Cyberpunk UI design drifts when teams lack a shared reference for visual chrome and CSS effects. Codifying design constraints for color tokens, glow recipes, and animation rules prevents this drift and ensures consistent component aesthetics.

Related Skills

Explore More Design & Creative Skills→
Hack23Hack23
9

design-system-management

Creates a cohesive design system with centralized CSS tokens and component patterns for multilingual UI theming.

Official
Intermediate
daffy0208daffy0208
34

Figma Developer

Convert Figma designs into React components and design tokens.

Community
Intermediate
civictechdccivictechdc
1

web-component-design

Design reusable UI components across React, Vue, and Svelte.

Official
Advanced
komlukkomluk
1

mui-styling

Apply Material-UI styling standards with a neon cyberpunk theme to React components.

Community
Intermediate