skills.rest
po4yka
po4ykaCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

signal-deck

Applies a terminal-industrial design system with tokens, components, and platform mappings for UI implementation.

Updated Mar 28, 2026
Search Tags:#design system#component library#design tokens#ui design#tailwind#dark mode#terminal aesthetic
One-click install
npx skills add https://github.com/po4yka/blog --skill signal-deck-po4yka
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: signal-deck
Source: https://github.com/po4yka/blog/tree/main/.agents/skills/signal-deck
Command: npx skills add https://github.com/po4yka/blog --skill signal-deck-po4yka

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? It provides a complete, opinionated design system for building interfaces with a terminal-industrial aesthetic, eliminating ad-hoc styling decisions across typography, color, spacing, and components. ## Core Features & Use Cases - Design Tokens: Exact values for typography (IBM Plex Mono, Inter, JetBrains Mono), grayscale color hierarchy, signal accents, spacing, radius, and motion in both dark and light modes. - Component Specifications: 18 component types including segmented telemetry bars, status-lines, prompt-lines, log zones, and stat rows with anatomy, states, and token mappings. - Cross-Platform Mappings: Implementation guidance for HTML/CSS, React/Tailwind, SwiftUI, and Jetpack Compose with code examples. - Use Case: Build an operator-console style dashboard where a hero metric, segmented telemetry bars, and a status-line follow consistent monochrome hierarchy with one phosphor accent. ## Quick Start Use the signal-deck skill to design a dark-mode system status dashboard with a phosphor green accent.

Frequently Asked Questions about signal-deck

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

FAQPage Schema
How do I apply a terminal-industrial design system to a web UI?▼

Load the font stack (IBM Plex Mono, Inter, JetBrains Mono), define the CSS custom properties for dark or light mode, choose one signal accent, then compose screens using the three-layer hierarchy rule and component patterns from the references.

What fonts does the Signal Deck design system use?▼

It uses three fonts: IBM Plex Mono Light for display metrics at 36px and above, Inter for body text and headings, and JetBrains Mono for ALL CAPS labels, data values, timestamps, and status prefixes.

Does Signal Deck support both dark and light mode?▼

Yes, both modes are first-class with independent token sets. Dark mode uses a near-black instrument panel palette, while light mode uses an off-white technical manual palette; neither is derived from the other.

Can I use Signal Deck with React and Tailwind CSS?▼

Yes, the platform mapping reference provides Tailwind theme extensions mapping CSS variables to utility classes, plus React component patterns for labels, status brackets, stat rows, and segmented bars.

What styling patterns are forbidden in this design system?▼

Forbidden patterns include gradients, drop shadows, skeleton loaders, toast popups, zebra striping, spring easing, filled icons, full-screen scanlines, and neon glow above 0.25 alpha. Status feedback uses inline bracket text like [OK] or [ERR] instead.

Related Skills

Explore More Design & Creative Skills→
NweremizuNweremizu

minimalist-ui

Design minimalist interfaces with warm monochrome styling and editorial typography.

Community
Intermediate
ma-waisma-wais

mockup-graduate

Graduate mockups from a sandbox into production-ready main app components.

Community
Intermediate
unnamedmistressunnamedmistress

ux-ui-designer

Design mobile-first interfaces with WCAG AA contrast and 8pt spacing.

Community
Intermediate
Lev-itLev-it

industrial-brutalist-ui

Design mechanical industrial interfaces with Swiss typography and CSS grid.

Official
Advanced